:root{
    --background:#000000;
    --foreground:#ffffff;
    --card:#0a0a0a;
    --card-foreground:#ffffff;
    --popover:#121212;
    --primary:#ffffff;
    --primary-foreground:#000000;
    --secondary:#1a1a1a;
    --secondary-foreground:#ffffff;
    --muted:#1d1d1d;
    --muted-foreground:#a4a4a4;
    --accent:#242424;
    --accent-foreground:#ffffff;
    --border:#242424;
    --input:#333333;
    --ring:#a4a4a4;
    --success:#c395e4;
    --amber:#ffae04;
    --radius:0.5rem;

    --font-sans:'Geist','Inter','Segoe UI',system-ui,sans-serif;
    --font-mono:'Geist Mono','SFMono-Regular',Consolas,monospace;

    --container:min(1180px, 92vw);
    --ease:cubic-bezier(.2,.7,.3,1);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:6rem; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
    [data-reveal]{ opacity:1; transform:none; transition:none; }
  }

  body{
    margin:0;
    background:var(--background);
    color:var(--foreground);
    font-family:var(--font-sans);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--foreground); color:var(--background); }
  a{ color:inherit; }
  img,canvas{ display:block; max-width:100%; }

  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible{
    outline:2px solid var(--foreground);
    outline-offset:3px;
    border-radius:4px;
  }

  .wrap{ width:var(--container); margin-inline:auto; }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted-foreground);
    display:flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{
    content:"";
    width:6px;height:6px;border-radius:50%;
    background:var(--foreground);
    flex:none;
  }

  h1,h2,h3{
    font-family:var(--font-sans);
    font-weight:700;
    text-wrap:balance;
    margin:0;
    color:var(--foreground);
    letter-spacing:-0.02em;
  }

  p{ margin:0; color:var(--muted-foreground); max-width:62ch; }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.55em;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:0.92rem;
    text-decoration:none;
    padding:0.8em 1.4em;
    border-radius:var(--radius);
    cursor:pointer;
    border:1px solid transparent;
    transition:transform 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), opacity 180ms var(--ease);
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{ background:var(--primary); color:var(--primary-foreground); }
  .btn-primary:hover{ opacity:0.85; }
  .btn-ghost{ background:transparent; color:var(--foreground); border-color:var(--border); }
  .btn-ghost:hover{ border-color:var(--foreground); }
  .btn svg{ width:1em; height:1em; }

  /* ---------- Nav ---------- */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(0,0,0,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:1.05rem;
  }
  .brand{
    display:flex; align-items:center; gap:0.65rem;
    text-decoration:none;
    font-size:0.95rem;
    font-weight:600;
    color:var(--foreground);
  }
  .brand-mark{
    width:28px;height:28px;border-radius:7px;
    background:var(--foreground);
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .brand-mark svg{ width:19px; height:19px; }
  .nav-links{
    display:flex; align-items:center; gap:2rem;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none;
    font-size:0.88rem;
    color:var(--muted-foreground);
    transition:color 180ms var(--ease);
  }
  .nav-links a:hover{ color:var(--foreground); }
  .nav-links a[aria-current="page"]{ color:var(--foreground); }
  .nav-toggle{
    display:none;
    background:none;border:1px solid var(--border);
    border-radius:var(--radius); width:40px; height:38px;
    color:var(--foreground); cursor:pointer;
    align-items:center; justify-content:center;
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    overflow:hidden;
    padding-block:5.5rem 3rem;
  }
  .hero-glow{
    position:absolute;
    inset:0;
    z-index:0;
    background:radial-gradient(125% 125% at 50% 0%, #000000 35%, #6366f1 100%);
    pointer-events:none;
  }
  .hero-content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1.6rem;
  }
  .hero-content .eyebrow{ justify-content:center; }
  .hero-content h1{
    font-size:clamp(2.3rem, 4.4vw, 3.5rem);
    line-height:1.05;
    max-width:20ch;
  }
  .hero-content > p{ max-width:60ch; }
  .hero-actions{ display:flex; gap:0.9rem; flex-wrap:wrap; align-items:center; justify-content:center; }

  /* ---------- Sections ---------- */
  section{ padding-block:5.5rem; border-top:1px solid var(--border); }
  .section-head{
    display:flex; flex-direction:column; gap:0.9rem;
    margin-bottom:3rem;
    max-width:56ch;
  }
  .section-head h2{ font-size:clamp(1.7rem, 3vw, 2.25rem); }

  /* ---------- Case studies ---------- */
  .case-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1.1rem;
  }
  .case-item{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) * 1.4);
    padding:1.8rem;
    display:flex;
    flex-direction:column;
    gap:1.3rem;
    transition:border-color 200ms var(--ease), transform 200ms var(--ease);
  }
  .case-item:hover{ border-color:var(--ring); transform:translateY(-2px); }
  .case-item h3{ font-size:1.12rem; font-weight:600; letter-spacing:-0.01em; }
  .case-block{ display:flex; flex-direction:column; gap:0.45rem; }
  .case-block p{ font-size:0.94rem; max-width:none; }
  .case-label{
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted-foreground);
  }
  .case-block.outcome{ margin-top:auto; }
  .case-block.outcome .case-label{ color:var(--success); }

  /* Reveal-on-scroll */
  [data-reveal]{
    opacity:0;
    transform:translateY(36px) scale(0.96);
    transition:opacity 800ms var(--ease), transform 800ms var(--ease);
    transition-delay:var(--reveal-delay, 0ms);
    will-change:opacity, transform;
  }
  [data-reveal].is-visible{ opacity:1; transform:translateY(0) scale(1); }

  /* Footer */
  footer.site{ border-top:1px solid var(--border); padding-block:2.2rem; }
  .foot-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .foot-row p{ font-family:var(--font-mono); font-size:0.75rem; color:var(--muted-foreground); max-width:none; }
  .foot-status{ display:flex; align-items:center; gap:0.5em; }
  .status-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--success);
    box-shadow:0 0 6px var(--success);
    flex:none;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1024px){
    .nav-links{ gap:1.35rem; }
    .case-grid{ grid-template-columns:1fr; }
  }

  /* Seven nav items need the hamburger before the links get tight. */
  @media (max-width:900px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
  }

  @media (max-width:768px){
    .nav-links{ display:none; }
    .nav-toggle{ display:flex; }
    .hero{ padding-block:3rem 2.5rem; }
    .hero-actions{ width:100%; }
    .hero-actions .btn{ flex:1; justify-content:center; }
    section{ padding-block:3.5rem; }
    .case-item{ padding:1.4rem; }
  }

  @media (max-width:420px){
    .hero-actions{ flex-direction:column; align-items:stretch; }
  }

/* ---------- Case study detail pages ---------- */
.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5em;
  font-family:var(--font-mono); font-size:0.74rem;
  color:var(--muted-foreground); justify-content:center;
}
.crumb a{ color:var(--muted-foreground); text-decoration:none; }
.crumb a:hover{ color:var(--foreground); text-decoration:underline; }
.crumb span[aria-current]{ color:var(--foreground); }

.prose{ display:flex; flex-direction:column; gap:1.1rem; max-width:68ch; }
.prose p{ font-size:1rem; max-width:none; }

.build-list{ display:flex; flex-direction:column; gap:1.1rem; }
.build-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) * 1.4);
  padding:1.6rem 1.7rem;
  display:flex; flex-direction:column; gap:0.6rem;
}
.build-item h3{ font-size:1.05rem; font-weight:600; letter-spacing:-0.01em; }
.build-item p{ font-size:0.95rem; max-width:none; }

.note-panel{
  background:var(--card);
  border:1px solid var(--border);
  border-left:2px solid var(--success);
  border-radius:calc(var(--radius) * 1.4);
  padding:1.6rem 1.7rem;
  display:flex; flex-direction:column; gap:0.6rem;
}
.note-panel h3{ font-size:1.02rem; font-weight:600; }
.note-panel p{ font-size:0.95rem; max-width:none; }
.note-stack{ display:flex; flex-direction:column; gap:1.1rem; }

.outcome-panel{
  background:var(--secondary);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) * 1.4);
  padding:1.8rem;
  max-width:68ch;
}
.outcome-panel p{ font-size:1.02rem; max-width:none; color:var(--foreground); }

.related-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.related-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) * 1.4);
  padding:1.4rem 1.5rem;
  text-decoration:none;
  display:flex; flex-direction:column; gap:0.4rem;
  transition:border-color 200ms var(--ease), transform 200ms var(--ease);
}
.related-card:hover{ border-color:var(--ring); transform:translateY(-2px); }
.related-card .k{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted-foreground);
}
.related-card .v{ font-size:1rem; font-weight:600; color:var(--foreground); }

@media (max-width:768px){
  .related-grid{ grid-template-columns:1fr; }
  .build-item, .note-panel, .outcome-panel{ padding:1.3rem 1.35rem; }
}