@layer reset, tokens, base, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure, pre { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; }
}

@layer tokens {
  @property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @property --glow { syntax: "<number>"; inherits: true; initial-value: 0.6; }

  :root {
    --obsidian: #0b0d10;
    --basalt: #13161b;
    --seam: #262a31;
    --bronze: #c89b63;
    --ember: #f0b25a;
    --sandstone: #ede6d9;
    --stone: #8f8b84;
    --bronze-soft: color-mix(in oklch, var(--bronze) 22%, transparent);
    --display: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
    --body: "Newsreader", "Iowan Old Style", Georgia, serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --gutter: max(16px, env(safe-area-inset-left, 0px));
    --ease: cubic-bezier(.2, .7, .1, 1);
    color-scheme: dark;
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body {
    min-height: 100dvh;
    background:
      radial-gradient(120vmax 80vmax at 80% -10%, color-mix(in oklch, var(--ember) 10%, transparent), transparent 60%),
      var(--obsidian);
    color: var(--sandstone);
    font: 400 1.125rem/1.6 var(--body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  ::selection { background: var(--bronze); color: var(--obsidian); }
  a { color: var(--bronze); text-underline-offset: .2em; }
  :focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
  h1, h2, h3 { font-family: var(--display); font-weight: 300; text-wrap: balance; }
  p { text-wrap: pretty; }
  .wrap { width: min(74rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
  .label { font: 600 .72rem/1 var(--display); letter-spacing: .34em; text-transform: uppercase; color: var(--bronze); }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@layer components {
  /* nav */
  .nav {
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in oklch, var(--obsidian) 78%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--seam);
    & .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: .9rem; gap: 1rem; }
    & nav { display: flex; gap: 1.8rem; }
    & nav a { font: 400 .78rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--stone); text-decoration: none; transition: color .2s; }
    & nav a:hover { color: var(--sandstone); }
    @media (max-width: 680px) { & nav { display: none; } }
  }
  .wordmark {
    display: inline-flex; align-items: center; gap: .7rem;
    font: 300 1.3rem/1 var(--display); letter-spacing: .46em; color: var(--sandstone); text-decoration: none;
    & svg { width: 28px; height: 28px; }
  }

  /* hero */
  .hero {
    position: relative; isolation: isolate;
    padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5rem);
    & .wrap > * { min-width: 0; }
    & .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
    @media (max-width: 880px) { & .wrap { grid-template-columns: 1fr; } }
  }
  .hero h1 {
    font-size: clamp(3.4rem, 11vw, 7.8rem); line-height: .9; font-weight: 300;
    letter-spacing: .3em; margin-right: -.3em;
    background: linear-gradient(180deg, var(--sandstone) 30%, color-mix(in oklch, var(--bronze) 85%, var(--sandstone)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero .tag { margin-top: 1.4rem; font: 400 clamp(.9rem, 1.8vw, 1.15rem)/1.3 var(--display); letter-spacing: .38em; text-transform: uppercase; color: var(--bronze); }
  .hero .lede { margin-top: 1.6rem; max-width: 34rem; color: color-mix(in oklch, var(--sandstone) 78%, var(--stone)); font-size: 1.2rem; }

  /* the emblem: ring + core, slowly turning, with the bronze figure inside */
  .emblem {
    position: relative; aspect-ratio: 1; width: min(100%, 30rem); justify-self: center;
    border-radius: 50%;
    &::before {
      content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
      background: conic-gradient(from var(--spin), transparent 0 8%, var(--bronze) 18%, var(--ember) 26%, transparent 38% 58%, var(--bronze) 72%, transparent 84%);
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      animation: spin 14s linear infinite;
    }
    &::after {
      content: ""; position: absolute; inset: 8%; border-radius: inherit; z-index: -1;
      background: radial-gradient(closest-side, color-mix(in oklch, var(--ember) calc(var(--glow) * 40%), transparent), transparent);
      filter: blur(30px); animation: breathe 6s ease-in-out infinite;
    }
    & img { position: absolute; inset: 7%; width: 86%; height: 86%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; filter: saturate(1.05) contrast(1.05); }
    & .core { position: absolute; width: 4.5%; aspect-ratio: 1; border-radius: 50%; top: 2.2%; left: 50%; translate: -50% 0; background: var(--ember); box-shadow: 0 0 18px 4px var(--ember); }
  }

  /* installer card */
  .installer {
    margin-top: 2.4rem; max-width: 40rem;
    border: 1px solid var(--seam); background: color-mix(in oklch, var(--basalt) 85%, transparent);
    backdrop-filter: blur(6px);
    container-type: inline-size;
  }
  .tabs { display: flex; border-bottom: 1px solid var(--seam); overflow-x: auto; scrollbar-width: none; }
  .tabs label {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; white-space: nowrap;
    padding: .95rem 1rem; cursor: pointer; color: var(--stone);
    font: 600 .72rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase;
    border-bottom: 2px solid transparent; transition: color .2s, border-color .2s, background .2s;
    &:hover { color: var(--sandstone); }
    & svg { width: 15px; height: 15px; flex: none; }
    &:has(input:checked) { color: var(--sandstone); border-color: var(--bronze); background: var(--bronze-soft); }
    &:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: -2px; }
    & input { position: absolute; opacity: 0; pointer-events: none; }
  }
  .panel { display: none; grid-template-columns: minmax(0, 1fr); padding: 1.2rem 1.2rem 1.3rem; gap: .9rem; }
  .installer:has(#os-mac:checked) .panel.mac,
  .installer:has(#os-linux:checked) .panel.linux,
  .installer:has(#os-win:checked) .panel.win { display: grid; animation: rise .35s var(--ease); }
  .cmd {
    display: flex; align-items: stretch; border: 1px solid var(--seam); background: var(--obsidian);
    & pre { flex: 1; min-width: 0; padding: .95rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .86rem/1.5 var(--mono); color: var(--sandstone); }
    & pre::before { content: attr(data-prompt) " "; color: var(--bronze); }
    & button {
      flex: none; border: 0; border-left: 1px solid var(--seam); background: transparent; cursor: pointer;
      padding-inline: 1rem; color: var(--stone); font: 600 .68rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase;
      transition: color .2s, background .2s;
      &:hover { color: var(--obsidian); background: var(--bronze); }
      &[data-done] { color: var(--obsidian); background: var(--ember); }
    }
  }
  .panel .note { font-size: .95rem; color: var(--stone); }
  .panel .note code { font: .85em var(--mono); color: var(--sandstone); }
  @container (max-width: 420px) {
    .tabs label span { display: none; }
    .cmd { flex-direction: column; & button { border-left: 0; border-top: 1px solid var(--seam); padding-block: .8rem; } }
  }
  .alt { margin-top: 1rem; font-size: .95rem; color: var(--stone); }

  /* lineage strip */
  .lineage { border-block: 1px solid var(--seam); background: var(--basalt); }
  .lineage ol {
    list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
    counter-reset: step;
    @media (max-width: 760px) { grid-template-columns: 1fr; }
  }
  .lineage li {
    padding: 2rem 1.4rem; display: grid; gap: .6rem; counter-increment: step; position: relative;
    & + li { border-left: 1px solid var(--seam); }
    @media (max-width: 760px) { & + li { border-left: 0; border-top: 1px solid var(--seam); } }
    &::before { content: counter(step, upper-roman); font: 300 .9rem/1 var(--display); letter-spacing: .3em; color: var(--bronze); }
    & h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
    & p { color: var(--stone); font-size: 1rem; }
  }

  section.block { padding-block: clamp(4rem, 9vw, 7rem); }
  .head { display: grid; gap: 1rem; margin-bottom: 3rem; max-width: 42rem; }
  .head h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.1; letter-spacing: .03em; }
  .head p { color: var(--stone); }

  /* pillars — icon system from the identity board */
  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
  @media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .pillars { grid-template-columns: 1fr; } }
  .pillar {
    background: var(--obsidian); padding: 1.8rem 1.5rem; display: grid; gap: .8rem; align-content: start;
    position: relative; overflow: hidden;
    &::after {
      content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
      background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), var(--bronze-soft), transparent 60%);
    }
    &:hover::after { opacity: 1; }
    & .ico { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--seam); border-radius: 12px; background: var(--basalt); color: var(--bronze); }
    & .ico svg { width: 26px; height: 26px; }
    & h3 { font-size: 1rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
    & p { color: var(--stone); font-size: 1rem; }
  }

  /* platform matrix */
  .matrix { width: 100%; border-collapse: collapse; font-size: 1rem; }
  .matrix-wrap { overflow-x: auto; border: 1px solid var(--seam); }
  .matrix th, .matrix td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--seam); white-space: nowrap; }
  .matrix th { font: 600 .7rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); background: var(--basalt); }
  .matrix td:first-child { font-family: var(--display); letter-spacing: .08em; }
  .matrix td code { font: .85rem var(--mono); color: var(--sandstone); }
  .matrix tr:last-child td { border-bottom: 0; }
  .matrix tbody tr { transition: background .2s; }
  .matrix tbody tr:hover { background: var(--bronze-soft); }
  .matrix .you td:first-child::after { content: "your system"; margin-left: .8rem; padding: .2rem .5rem; font: 600 .6rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--obsidian); background: var(--bronze); }

  /* splash terminal */
  .splash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; @media (max-width: 880px) { grid-template-columns: 1fr; } }
  .term {
    border: 1px solid var(--seam); background: #08090b; box-shadow: 0 40px 80px -40px #000, 0 0 0 1px #000;
    & header { display: flex; gap: .45rem; padding: .8rem 1rem; border-bottom: 1px solid var(--seam); }
    & header i { width: 10px; height: 10px; border-radius: 50%; background: var(--seam); }
    & pre { padding: 1.4rem 1.2rem; font: 400 .85rem/1.75 var(--mono); color: var(--stone); overflow-x: auto; }
    & b { color: var(--sandstone); font-weight: 400; }
    & .ok { color: var(--ember); }
  }
  .steps { display: grid; gap: 1.4rem; counter-reset: s; list-style: none; padding: 0; margin: 0; }
  .steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; counter-increment: s; }
  .steps li::before { content: counter(s); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--bronze); border-radius: 50%; font: 300 1rem/1 var(--display); color: var(--bronze); }
  .steps h3 { font-size: 1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .3rem; }
  .steps p { color: var(--stone); font-size: 1rem; }

  /* faq */
  details { border-top: 1px solid var(--seam); &:last-of-type { border-bottom: 1px solid var(--seam); } }
  summary {
    cursor: pointer; list-style: none; padding: 1.3rem 0; display: flex; justify-content: space-between; gap: 1rem;
    font: 400 1.1rem/1.3 var(--display); letter-spacing: .04em;
    &::-webkit-details-marker { display: none; }
    &::after { content: "+"; color: var(--bronze); font-weight: 300; font-size: 1.4rem; line-height: 1; transition: rotate .3s var(--ease); }
  }
  details[open] summary::after { rotate: 45deg; }
  details p { padding-bottom: 1.4rem; color: var(--stone); max-width: 48rem; }
  details code { font: .85em var(--mono); color: var(--sandstone); }
  details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease), content-visibility .35s allow-discrete; }
  details[open]::details-content { block-size: auto; }
  :root { interpolate-size: allow-keywords; }

  footer { border-top: 1px solid var(--seam); padding-block: 2.4rem calc(2.4rem + env(safe-area-inset-bottom, 0px)); color: var(--stone); font-size: .9rem;
    & .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
  }
}

@layer motion {
  @keyframes spin { to { --spin: 360deg; } }
  @keyframes breathe { 50% { --glow: 1; } }
  @keyframes rise { from { opacity: 0; translate: 0 6px; } }
  @keyframes reveal { from { opacity: 0; translate: 0 2rem; } }
  @keyframes caret { 50% { opacity: 0; } }
  .term .cursor { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.2em; background: var(--ember); animation: caret 1s steps(1) infinite; }

  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .hero .emblem img { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    @keyframes drift { to { scale: 1.12; filter: saturate(.7) brightness(.7); } }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }
}

@layer components {
  .skip { position: absolute; left: -999px; top: .5rem; z-index: 20; padding: .8rem 1rem; background: var(--bronze); color: var(--obsidian); }
  .skip:focus { left: var(--gutter); }
  .nav nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav nav a[aria-current="page"] { color: var(--sandstone); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: 0 1.6em;
    font: 600 .76rem/1 var(--display); letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
    border: 1px solid var(--bronze); color: var(--bronze); background: transparent; transition: background .2s, color .2s, box-shadow .3s;
    &:hover { background: var(--bronze); color: var(--obsidian); }
    &.solid { background: var(--bronze); color: var(--obsidian); &:hover { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 40px -8px var(--ember); } }
  }
  .ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

  /* full-bleed banner with the sunset art */
  .banner {
    position: relative; isolation: isolate; min-height: clamp(22rem, 60vw, 38rem); display: grid; align-items: end;
    border-block: 1px solid var(--seam); overflow: hidden;
    & img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; z-index: -2; }
    &::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--obsidian) 0 20%, color-mix(in oklch, var(--obsidian) 40%, transparent) 60%, transparent), linear-gradient(0deg, var(--obsidian), transparent 50%); }
    & .wrap { padding-block: 3rem; }
    & h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); letter-spacing: .22em; line-height: 1.05; }
    & p { margin-top: 1rem; max-width: 30rem; color: color-mix(in oklch, var(--sandstone) 80%, var(--stone)); }
  }
  @supports (animation-timeline: view()) {
    .banner img { animation: pan linear both; animation-timeline: view(); }
    @keyframes pan { from { scale: 1.15; translate: 0 -4%; } to { scale: 1; translate: 0 4%; } }
  }

  /* product pair */
  .products { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1px; background: var(--seam); border: 1px solid var(--seam); @media (max-width: 820px) { grid-template-columns: 1fr; } }
  .product {
    background: var(--obsidian); padding: clamp(1.6rem, 4vw, 2.6rem); display: grid; gap: 1rem; align-content: start;
    & .ico { width: 56px; height: 56px; color: var(--bronze); }
    & h3 { font-size: 1.6rem; font-weight: 300; letter-spacing: .3em; }
    & .repo { font: .8rem var(--mono); color: var(--stone); }
    & p { color: var(--stone); }
    & .ctas { margin-top: .6rem; }
  }
  .product.lead { background: radial-gradient(40rem 30rem at 0% 0%, var(--bronze-soft), transparent 70%), var(--obsidian); }

  /* install page: per-product blocks */
  .install-block { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--seam); @media (max-width: 820px) { grid-template-columns: 1fr; } }
  .install-block aside { display: grid; gap: .8rem; align-content: start; & svg { width: 48px; height: 48px; color: var(--bronze); } & h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: .2em; } & p { color: var(--stone); font-size: 1rem; } }
  .install-block .body { display: grid; gap: 1.6rem; min-width: 0; }
  .install-block h3 { font: 600 .72rem/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); }
  .install-block ul { margin: 0; padding-left: 1.1rem; color: var(--stone); display: grid; gap: .5rem; font-size: 1rem; }
  .install-block li::marker { color: var(--bronze); }
  .install-block code { font: .85em var(--mono); color: var(--sandstone); }
  .callout { border-left: 2px solid var(--ember); padding: .9rem 1.1rem; background: var(--bronze-soft); font-size: 1rem; color: var(--sandstone); }
  .cmd + .cmd { margin-top: .6rem; }
  .cmd button { min-width: 5.5rem; min-height: 44px; }
}
@media (max-width: 520px) {
  .cmd { flex-direction: column; }
  .cmd button { border-left: 0; border-top: 1px solid var(--seam); padding-block: .8rem; }
}