/* ──────────────────────────────────────────────────────────────
   SHIVA OS — Site stylesheet
   Shared design tokens and components for all marketing pages.
   The capsules themselves are self-contained single HTML files
   with their own inline styles.
   ────────────────────────────────────────────────────────────── */

:root{
  /* Base palette */
  --bg:           #07090d;
  --bg-elev:      #0d1119;
  --panel:        #101722;
  --panel-2:      #121c2a;
  --line:         #1f2c3e;
  --line-soft:    #15202f;

  /* Ink */
  --ink:          #ecf4ff;
  --ink-dim:      #9fb2c7;
  --ink-faint:    #5d6f86;

  /* Accents */
  --cyan:         #74f0ff;
  --cyan-deep:    #2bb7c9;
  --violet:       #b28cff;
  --amber:        #ffd166;
  --amber-soft:   #ffdf8a;
  --good:         #76f7a7;
  --bad:          #ff7a8a;

  /* Foreground inks for accent surfaces */
  --on-cyan:      #02141a;
  --on-amber:     #1a1408;

  /* Type */
  --serif:        "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:         "Sohne", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:         "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Geometry */
  --radius-lg:    22px;
  --radius-md:    14px;
  --radius-sm:    8px;

  /* Motion */
  --ease:         cubic-bezier(.2,.7,.2,1);
}

/* RESET + BASE */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* Background atmosphere */
body::before{
  content:""; position:fixed; inset:0;
  background:
    radial-gradient(900px 700px at 12% -10%, rgba(116,240,255,.07), transparent 60%),
    radial-gradient(800px 600px at 100% 0%, rgba(178,140,255,.06), transparent 60%),
    radial-gradient(700px 500px at 70% 110%, rgba(116,240,255,.04), transparent 60%);
  pointer-events:none; z-index:0;
}
body::after{
  content:""; position:fixed; inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.35; pointer-events:none; z-index:0; mix-blend-mode:overlay;
}

/* LAYOUT */
.wrap{
  position:relative; z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
}

/* ──────────────────────────────────────────────────────────────
   SKIP LINK — visually hidden until keyboard focus
   ────────────────────────────────────────────────────────────── */
.skip-link{
  position:absolute; top:-100px; left:12px;
  z-index:200;
  padding:10px 18px; border-radius:10px;
  background:var(--cyan); color:var(--on-cyan);
  font-family:var(--sans); font-size:14px; font-weight:600;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(116,240,255,.35);
  transition:top .18s var(--ease);
}
.skip-link:focus, .skip-link:focus-visible{
  top:12px; outline:none;
}

/* ──────────────────────────────────────────────────────────────
   SCROLL PROGRESS — pinned 1px line across the very top
   ────────────────────────────────────────────────────────────── */
.scroll-prog{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:60;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
  transform-origin:left;
  transform:scaleX(var(--p, 0));
  transition:transform .08s linear;
  pointer-events:none;
}

/* ──────────────────────────────────────────────────────────────
   ANNOUNCEMENT BAR — thin trust strip above the nav
   ────────────────────────────────────────────────────────────── */
/* SVF TOP BANNER — sits above the announce bar on every page.
   Bright amber, full-width, clickable. Impossible to miss. */
.svf-banner{
  display:block;
  background:linear-gradient(90deg, var(--amber) 0%, var(--amber-soft) 100%);
  color:var(--on-amber);
  text-decoration:none;
  font-family:var(--sans);
  border-bottom:1px solid rgba(0,0,0,.1);
}
.svf-banner-inner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 0;
}
.svf-banner-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  background:var(--on-amber);
  color:var(--amber);
  padding:4px 10px;
  border-radius:3px;
  font-weight:700;
}
.svf-banner-msg{
  font-size:14px;
  flex:1;
  min-width:0;
}
.svf-banner-msg b{ font-weight:700; }
.svf-banner-cta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  background:var(--on-amber);
  color:var(--amber);
  padding:8px 14px;
  border-radius:3px;
  transition:transform .2s, background .2s;
  white-space:nowrap;
}
.svf-banner-cta .arr{ display:inline-block; transition:transform .2s; }
.svf-banner:hover .svf-banner-cta{ background:#000; }
.svf-banner:hover .svf-banner-cta .arr{ transform:translateX(3px); }
@media (max-width:600px){
  .svf-banner-msg{ font-size:13px; line-height:1.35; }
  .svf-banner-cta{ font-size:10px; padding:6px 10px; }
}

.announce{
  position:relative; z-index:51;
  background:linear-gradient(180deg, rgba(116,240,255,.04), transparent);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px;
  color:var(--ink-faint); letter-spacing:.08em;
}
.announce-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; gap:24px;
}
.announce-left{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.announce-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:3px 10px; border:1px solid rgba(116,240,255,.18);
  border-radius:999px; color:var(--cyan);
  letter-spacing:.14em; text-transform:uppercase;
  font-size:10px;
}
.announce-tag .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:pulse 2.4s ease-in-out infinite;
}
.announce-meta{color:var(--ink-faint)}
.announce-meta b{color:var(--ink-dim); font-weight:500}
.announce-link{
  color:var(--ink-dim); transition:color .2s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.announce-link:hover{color:var(--cyan)}
.announce-link .arr{transition:transform .2s var(--ease)}
.announce-link:hover .arr{transform:translateX(2px)}
@media (max-width:760px){
  .announce-meta{display:none}
}

/* ──────────────────────────────────────────────────────────────
   NAV — refined two-tier header
   ────────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  background:rgba(7,9,13,.72);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.nav.scrolled{
  border-bottom-color:var(--line-soft);
  background:rgba(7,9,13,.86);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0; gap:32px;
}

/* Logo lockup */
.logo{
  display:flex; align-items:center; gap:14px;
  font-family:var(--serif); font-weight:500; font-size:22px;
  letter-spacing:-.024em;
  transition:opacity .2s var(--ease);
}
.logo:hover{opacity:.85}
.logo-mark{
  width:34px; height:34px; border-radius:10px;
  position:relative;
  background:
    radial-gradient(circle at 28% 28%, var(--cyan), transparent 55%),
    radial-gradient(circle at 72% 72%, var(--violet), transparent 55%),
    var(--panel-2);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 14px rgba(0,0,0,.4);
}
.logo-mark::before{
  content:""; position:absolute; inset:0;
  border-radius:10px;
  background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
}
.logo-mark::after{
  content:""; position:absolute; inset:7px;
  border-radius:5px;
  background:radial-gradient(circle, rgba(7,9,13,.5), transparent 70%);
  border:1px solid rgba(255,255,255,.06);
}
.logo-text{
  display:flex; flex-direction:column;
  line-height:1; gap:4px;
}
.logo-text .word{font-family:var(--serif); font-weight:500; font-size:20px; letter-spacing:-.022em}
.logo-text .word em{font-style:italic; font-weight:400; color:var(--cyan)}
.logo-text .desc{
  font-family:var(--mono); font-size:9.5px;
  color:var(--ink-faint); letter-spacing:.22em; text-transform:uppercase;
}

/* Center nav */
.nav-links{
  display:flex; gap:6px; align-items:center;
  font-size:13.5px; color:var(--ink-dim);
}
.nav-link{
  position:relative;
  padding:8px 14px;
  border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover{color:var(--ink); background:rgba(255,255,255,.03)}
.nav-link.active{color:var(--ink)}
.nav-link.active::before{
  content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
}
/* Current-page indicator — same gradient underline as scroll-driven .active,
   but persistent for whole-page navigation. */
.nav-link.is-current{color:var(--ink)}
.nav-link.is-current::before{
  content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
}

/* Commercial-tier nav link — visually loud so it CANNOT be missed */
.nav-link.svf-nav{
  color:var(--on-amber);
  background:var(--amber);
  border:1px solid var(--amber);
  font-weight:600;
  box-shadow:0 4px 14px -4px rgba(255,209,102,.45);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.nav-link.svf-nav:hover{
  color:var(--on-amber);
  background:var(--amber-soft);
  transform:translateY(-1px);
  box-shadow:0 6px 18px -4px rgba(255,209,102,.6);
}
.nav-link.svf-nav::before{ display:none !important; }
/* When SVF nav link is the current page, swap underline for an inset ring
   (gradient bar wouldn't be visible against the amber background) */
.nav-link.svf-nav.is-current{
  box-shadow:
    inset 0 0 0 2px var(--on-amber),
    0 6px 18px -4px rgba(255,209,102,.55);
}

/* Right side actions */
.nav-actions{display:flex; align-items:center; gap:10px}
.nav-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line-soft);
  color:var(--ink-dim);
  background:rgba(255,255,255,.01);
  transition:all .2s var(--ease);
}
.nav-icon:hover{
  border-color:var(--line);
  color:var(--ink);
  background:rgba(255,255,255,.04);
}
.nav-icon svg{width:16px; height:16px}

.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px 10px 18px;
  border-radius:10px;
  font-size:13px; font-weight:500;
  background:linear-gradient(180deg, var(--cyan), var(--cyan-deep));
  color:var(--on-cyan);
  border:1px solid rgba(116,240,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 6px 18px rgba(116,240,255,.18);
  transition:all .2s var(--ease);
}
.nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 10px 24px rgba(116,240,255,.32);
}
.nav-cta .arr{font-weight:600}

/* Hamburger toggle button — hidden by default, revealed at narrow widths */
.nav-toggle{
  display:none;
  position:relative;
  width:42px; height:42px;
  border-radius:10px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.01);
  transition:border-color .2s var(--ease), background .2s var(--ease);
  margin-left:auto;
}
.nav-toggle:hover{ border-color:var(--line); background:rgba(255,255,255,.04); }
.nav-toggle-bar{
  position:absolute; left:11px; right:11px; height:2px; border-radius:2px;
  background:var(--ink-dim);
  transition:transform .25s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
.nav-toggle-bar:nth-child(1){ top:13px; }
.nav-toggle-bar:nth-child(2){ top:20px; }
.nav-toggle-bar:nth-child(3){ top:27px; }
.nav-toggle:hover .nav-toggle-bar{ background:var(--ink); }
.nav.nav-open .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.nav-open .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav.nav-open .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Drawer scrim — covers content behind drawer */
.nav-scrim{
  position:fixed; inset:0;
  background:rgba(7,9,13,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
  z-index:99;
}
.nav.nav-open ~ .nav-scrim,
.nav.nav-open .nav-scrim{ opacity:1; visibility:visible; }

/* Below 1024px (laptops, tablets, phones) — hide inline nav, show hamburger,
   slide .nav-links in as a right-edge drawer when .nav-open is set. */
@media (max-width:1024px){
  .nav-toggle{ display:inline-flex; }

  .nav-links{
    position:fixed; top:0; right:0;
    width:min(420px, 100%); height:100dvh;
    padding:96px 28px 32px;
    display:flex; flex-direction:column; align-items:stretch;
    gap:4px;
    background:var(--bg-elev);
    border-left:1px solid var(--line-soft);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    z-index:100;
    overflow-y:auto;
  }
  .nav.nav-open .nav-links{ transform:translateX(0); }

  .nav-link{
    padding:14px 16px;
    font-size:15px;
    border-radius:10px;
  }
  .nav-link.is-current::before{ left:16px; right:auto; width:18px; bottom:9px; }
  .nav-link.svf-nav{ margin:8px 0; }

  /* Move nav-actions inside drawer flow as well (anchored to bottom) */
  .nav-actions{
    position:fixed; bottom:0; right:0;
    width:min(420px, 100%);
    padding:16px 28px 24px;
    background:linear-gradient(180deg, transparent, var(--bg-elev) 30%);
    z-index:101;
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    justify-content:flex-end;
  }
  .nav.nav-open .nav-actions{ transform:translateX(0); }
}

@media (max-width:520px){
  .logo-text .desc{ display:none; }
  .nav-links{ width:100%; border-left:0; padding-top:88px; }
  .nav-actions{ width:100%; }
}

/* ──────────────────────────────────────────────────────────────
   NAV MEGA — desktop hover/focus flyouts for tier nav links.
   Each .nav-item.nav-has-mega wraps a primary nav-link plus a
   sibling .nav-mega-panel that previews the tier's children.
   Hidden in the mobile drawer (<=1024px).
   ────────────────────────────────────────────────────────────── */
.nav-item{ position:relative; display:inline-flex; }
.nav-mega-panel{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  width:min(680px, 88vw);
  background:var(--bg-elev);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  padding:20px;
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
  z-index:80;
  pointer-events:none;
}
.nav-item.nav-has-mega:hover .nav-mega-panel,
.nav-item.nav-has-mega:focus-within .nav-mega-panel{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
/* Invisible bridge between link and panel so hover survives the gap */
.nav-item.nav-has-mega::after{
  content:""; position:absolute; left:0; right:0;
  top:100%; height:8px;
}
.nav-mega-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2px 16px;
}
.nav-mega-link{
  display:block; padding:8px 10px; border-radius:6px;
  transition:background .15s var(--ease);
}
.nav-mega-link:hover{ background:rgba(255,255,255,.04); }
.nav-mega-title{
  display:block; font-size:13.5px; font-weight:500; color:var(--ink);
}
.nav-mega-desc{
  display:block; margin-top:2px;
  font-family:var(--mono); font-size:10.5px;
  color:var(--ink-faint); letter-spacing:.04em;
}
.nav-mega-footer{
  display:block; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px;
  color:var(--cyan); letter-spacing:.16em; text-transform:uppercase;
  text-align:right;
}
.nav-mega-footer:hover{ color:var(--ink); }

@media (max-width:1024px){
  /* In drawer mode, flatten .nav-item wrappers and hide flyouts */
  .nav-item{ display:contents; }
  .nav-mega-panel{ display:none !important; }
  .nav-item.nav-has-mega::after{ display:none; }
}

/* Backward compat — older sub-page nav markup uses .logo small and plain <a> inside .nav-links */
.logo small{
  font-family:var(--mono); font-size:10px; color:var(--ink-faint);
  letter-spacing:.18em; text-transform:uppercase; margin-left:4px;
}
.nav-links > a:not(.nav-link){
  position:relative;
  padding:8px 14px;
  border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease);
  color:var(--ink-dim);
}
.nav-links > a:not(.nav-link):hover{
  color:var(--ink); background:rgba(255,255,255,.03);
}

/* HERO */
.hero{ padding:88px 0 100px; position:relative; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px;
  color:var(--cyan); letter-spacing:.22em; text-transform:uppercase;
  padding:8px 14px; border:1px solid rgba(116,240,255,.25);
  border-radius:999px;
  background:rgba(116,240,255,.04);
  margin-bottom:36px;
}
.hero-kicker .dot{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(42px, 7.2vw, 88px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0 0 28px;
  max-width:18ch;
}
.hero h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--cyan);
  background:linear-gradient(180deg, var(--cyan) 0%, var(--violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-lede{
  font-size:clamp(17px, 1.4vw, 20px);
  line-height:1.55;
  color:var(--ink-dim);
  max-width:58ch;
  margin:0 0 44px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:12px;
  font-size:14px; font-weight:500;
  transition:all .2s var(--ease);
  border:1px solid transparent;
}
.btn-primary{ background:var(--cyan); color:var(--on-cyan); font-weight:600; }
.btn-primary:hover{
  background:#9bf6ff; transform:translateY(-1px);
  box-shadow:0 12px 32px rgba(116,240,255,.22);
}
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--ink-dim); background:rgba(255,255,255,.02); }
.btn-amber{
  background:var(--amber); color:var(--on-amber);
  border-color:var(--amber); font-weight:600;
  box-shadow:0 8px 24px -8px rgba(255,209,102,.4);
}
.btn-amber:hover{
  background:var(--amber-soft);
  transform:translateY(-1px);
  box-shadow:0 12px 32px -8px rgba(255,209,102,.55);
}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* Hero stats strip — refined metric panel */
.hero-stats{
  margin-top:88px;
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:0;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(116,240,255,.025), transparent 60%),
    rgba(13,17,25,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.hero-stat{
  padding:24px 24px;
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:8px;
  position:relative;
  transition:background .2s var(--ease);
}
.hero-stat:hover{background:rgba(255,255,255,.015)}
.hero-stat:last-child{border-right:0}
.hero-stat-head{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px;
  color:var(--ink-faint); letter-spacing:.18em; text-transform:uppercase;
}
.hero-stat-head .ico{
  width:14px; height:14px; color:var(--cyan); opacity:.7;
  flex-shrink:0;
}
.hero-stat-num{
  font-family:var(--serif); font-size:34px; font-weight:400;
  letter-spacing:-.022em; line-height:1;
  color:var(--ink);
}
.hero-stat-num em{font-style:italic; color:var(--cyan); font-weight:300}
.hero-stat-sub{
  font-size:12.5px; line-height:1.45;
  color:var(--ink-dim);
  max-width:22ch;
}
@media (max-width:1000px){
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .hero-stat:nth-child(3){border-right:0}
  .hero-stat:nth-child(n+4){border-top:1px solid var(--line-soft)}
  .hero-stat:nth-child(5){border-right:0}
}
@media (max-width:600px){
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hero-stat{padding:18px 16px}
  .hero-stat:nth-child(n){border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft)}
  .hero-stat:nth-child(2n){border-right:0}
  .hero-stat:nth-child(1), .hero-stat:nth-child(2){border-top:0}
  .hero-stat-num{font-size:28px}
}

/* Hero subtitle pulled out of the lede — micro-claim under the kicker */
.hero-eyebrow-strip{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 36px;
}
.hero-eyebrow-strip .sep{
  width:1px; height:14px; background:var(--line);
}
.hero-eyebrow-strip .meta{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-faint); letter-spacing:.14em; text-transform:uppercase;
}
.hero-eyebrow-strip .meta b{color:var(--ink-dim); font-weight:500}

/* SECTION SCAFFOLD */
section{ padding:120px 0; position:relative; }
.section-head{
  display:grid; grid-template-columns:1fr 2fr; gap:64px;
  margin-bottom:64px;
}
.section-num{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-faint); letter-spacing:.22em; text-transform:uppercase;
}
.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px, 4.4vw, 52px); line-height:1.05;
  letter-spacing:-.025em; margin:14px 0 0;
}
.section-lede{
  font-size:clamp(15.5px, 1.2vw, 18px); line-height:1.6;
  color:var(--ink-dim); max-width:62ch; margin:0;
}
@media (max-width:860px){
  .section-head{grid-template-columns:1fr; gap:24px}
  section{padding:80px 0}
}

/* THESIS */
.thesis{ border-top:1px solid var(--line-soft); }
.thesis-quote{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(28px, 3.6vw, 44px); line-height:1.25;
  letter-spacing:-.018em; color:var(--ink);
  max-width:24ch; margin:0 0 32px;
}
.thesis-quote .accent{ color:var(--cyan); font-style:normal; }
.thesis-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  overflow:hidden; margin-top:48px;
}
.thesis-cell{
  background:var(--bg-elev);
  padding:36px 32px;
  display:flex; flex-direction:column; gap:14px;
}
.thesis-cell h4{
  font-family:var(--serif); font-weight:500;
  font-size:22px; letter-spacing:-.015em;
  margin:0; color:var(--ink);
}
.thesis-cell p{ font-size:15px; line-height:1.6; color:var(--ink-dim); margin:0; }
.thesis-cell .ix{
  font-family:var(--mono); font-size:11px;
  color:var(--cyan); letter-spacing:.18em;
}
@media (max-width:860px){ .thesis-grid{grid-template-columns:1fr} }

/* CAPSULE GRID */
.capsules{ display:grid; grid-template-columns:repeat(12, 1fr); gap:20px; }
.capsule{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  overflow:hidden;
  transition:all .25s var(--ease);
  display:flex; flex-direction:column;
  min-height:280px;
}
.capsule:hover{
  border-color:var(--line);
  transform:translateY(-2px);
  box-shadow:0 18px 50px rgba(0,0,0,.4);
}
.capsule::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 200px at var(--mx,50%) 0%, rgba(116,240,255,.06), transparent 60%);
  opacity:0; transition:opacity .3s var(--ease);
  pointer-events:none;
}
.capsule:hover::before{opacity:1}
.capsule-tag{
  font-family:var(--mono); font-size:10px;
  color:var(--ink-faint); letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:18px;
}
.capsule-tag .live{color:var(--good)}
.capsule-tag .draft{color:var(--amber)}
.capsule-tag .dev{color:var(--violet)}
.capsule-title{
  font-family:var(--serif); font-weight:500;
  font-size:26px; letter-spacing:-.018em; line-height:1.15;
  margin:0 0 12px;
}
.capsule-desc{
  font-size:14.5px; line-height:1.55;
  color:var(--ink-dim); margin:0 0 24px;
  flex:1;
}
.capsule-meta{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px;
  color:var(--ink-faint); letter-spacing:.06em;
}
.capsule-meta .arrow{
  color:var(--cyan); font-size:14px;
  transition:transform .2s var(--ease);
}
.capsule:hover .capsule-meta .arrow{transform:translateX(4px)}

.capsule.lg{grid-column:span 8}
.capsule.md{grid-column:span 6}
.capsule.sm{grid-column:span 4}
.capsule.xl{grid-column:span 12; min-height:340px}

@media (max-width:1000px){
  .capsule.lg, .capsule.md{grid-column:span 12}
  .capsule.sm{grid-column:span 6}
}
@media (max-width:600px){
  .capsule.sm{grid-column:span 12}
}

.capsule.featured{
  background:
    linear-gradient(135deg, rgba(116,240,255,.05), rgba(178,140,255,.04)),
    var(--bg-elev);
  border-color:rgba(116,240,255,.18);
}
.capsule.featured .capsule-title{ font-size:34px; }
.capsule.featured .capsule-art{
  position:absolute; right:-20px; bottom:-40px;
  width:280px; height:280px; pointer-events:none;
  opacity:.45;
}

/* ARCH */
.arch{
  background:var(--bg-elev);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.arch-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--line-soft);
}
.arch-cell{
  background:var(--panel);
  padding:28px 24px;
  display:flex; flex-direction:column; gap:10px;
  position:relative;
  transition:background .2s var(--ease);
}
.arch-cell:hover{background:var(--panel-2)}
.arch-cell .ix{
  font-family:var(--mono); font-size:10px;
  color:var(--ink-faint); letter-spacing:.18em;
}
.arch-cell h5{
  font-family:var(--serif); font-weight:500;
  font-size:18px; margin:0; letter-spacing:-.01em;
}
.arch-cell p{ font-size:13.5px; line-height:1.55; color:var(--ink-dim); margin:0; }
@media (max-width:900px){ .arch-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .arch-grid{grid-template-columns:1fr} }

/* PRINCIPLES */
.principles{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.principle-list{
  display:flex; flex-direction:column; gap:2px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.principle{
  display:grid; grid-template-columns:48px 1fr; gap:20px;
  padding:22px 24px;
  background:var(--bg-elev);
  align-items:start;
}
.principle .n{
  font-family:var(--mono); font-size:12px;
  color:var(--cyan); letter-spacing:.06em; padding-top:3px;
}
.principle h6{
  font-family:var(--serif); font-weight:500;
  font-size:17px; margin:0 0 6px; letter-spacing:-.012em;
}
.principle p{ font-size:14px; line-height:1.55; color:var(--ink-dim); margin:0; }
.principle-side{ position:sticky; top:120px; }
.principle-side h3{
  font-family:var(--serif); font-weight:400;
  font-size:32px; letter-spacing:-.022em;
  line-height:1.1; margin:0 0 18px;
}
.principle-side p{ color:var(--ink-dim); line-height:1.6; margin:0 0 20px; }
.principle-side .pull{
  font-family:var(--serif); font-style:italic;
  font-size:18px; line-height:1.5;
  color:var(--cyan);
  padding:18px 22px;
  border-left:2px solid var(--cyan);
  background:rgba(116,240,255,.04);
  border-radius:0 8px 8px 0;
}
@media (max-width:900px){
  .principles{grid-template-columns:1fr; gap:32px}
  .principle-side{position:static}
}

/* AUTHOR */
.author{ border-top:1px solid var(--line-soft); }
.author-card{ display:grid; grid-template-columns:1fr 2fr; gap:64px; align-items:start; }
.author-photo{
  width:100%; aspect-ratio:1;
  background:
    radial-gradient(circle at 30% 30%, rgba(116,240,255,.3), transparent 60%),
    radial-gradient(circle at 70% 80%, rgba(178,140,255,.3), transparent 60%),
    var(--panel-2);
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.author-photo::before{
  content:"BS"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:300;
  font-size:120px; color:var(--ink);
  opacity:.85; letter-spacing:-.04em;
}
.author h4{
  font-family:var(--serif); font-weight:400;
  font-size:34px; letter-spacing:-.022em;
  margin:0 0 8px;
}
.author .role{
  font-family:var(--mono); font-size:12px;
  color:var(--cyan); letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 24px;
}
.author p{ color:var(--ink-dim); line-height:1.65; font-size:15.5px; max-width:60ch; margin:0 0 16px; }
.author-meta{
  margin-top:28px; padding-top:24px;
  border-top:1px solid var(--line-soft);
  display:flex; gap:32px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px;
}
.author-meta div span{color:var(--ink-faint); display:block; margin-bottom:4px; letter-spacing:.08em}
.author-meta div b{color:var(--ink); font-weight:500}
@media (max-width:760px){
  .author-card{grid-template-columns:1fr; gap:32px}
  .author-photo{max-width:200px}
}

/* FOOTER */
footer{
  border-top:1px solid var(--line-soft);
  padding:72px 0 48px;
  background:var(--bg-elev);
}
.foot-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:64px;
}
.foot-brand{
  font-family:var(--serif); font-weight:400;
  font-size:32px; letter-spacing:-.025em; margin:0 0 12px;
}
.foot-brand em{font-style:italic; color:var(--cyan)}
.foot-tag{ color:var(--ink-dim); font-size:14px; max-width:38ch; line-height:1.6; margin:0; }
.foot-col h6{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-faint); letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 18px;
}
.foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{ font-size:14px; color:var(--ink-dim); transition:color .15s var(--ease); }
.foot-col a:hover{color:var(--cyan)}
.foot-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; color:var(--ink-faint);
  letter-spacing:.08em;
}
@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
  .foot-brand{font-size:26px}
}

/* ANIMATIONS */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{opacity:1; transform:translateY(0)}
.stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.stagger.in > *{opacity:1; transform:translateY(0)}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:80ms}
.stagger.in > *:nth-child(3){transition-delay:160ms}
.stagger.in > *:nth-child(4){transition-delay:240ms}
.stagger.in > *:nth-child(5){transition-delay:320ms}
.stagger.in > *:nth-child(6){transition-delay:400ms}
.stagger.in > *:nth-child(7){transition-delay:480ms}
.stagger.in > *:nth-child(8){transition-delay:560ms}
.stagger.in > *:nth-child(9){transition-delay:640ms}
.stagger.in > *:nth-child(10){transition-delay:720ms}
.stagger.in > *:nth-child(11){transition-delay:800ms}
.stagger.in > *:nth-child(12){transition-delay:880ms}

.hero-kicker{animation:slidedown .7s var(--ease) both}
.hero h1{animation:slidedown .9s .12s var(--ease) both}
.hero-lede{animation:slidedown .9s .25s var(--ease) both}
.hero-actions{animation:slidedown .9s .38s var(--ease) both}
.hero-stats{animation:fadein 1s .55s var(--ease) both}
@keyframes slidedown{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes fadein{ from{opacity:0} to{opacity:1} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal, .stagger > *{opacity:1; transform:none}
}

::selection{background:rgba(116,240,255,.3); color:var(--ink)}

/* ──────────────────────────────────────────────────────────────
   UI POLISH — focus states, refined hovers, motion calmness
   ────────────────────────────────────────────────────────────── */

/* Accessible focus rings — keyboard-only */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-cta:focus-visible{
  outline-offset:4px;
}
.capsule:focus-visible{
  outline-offset:2px;
  border-radius:var(--radius-lg);
}

/* Refined capsule hover — calmer, more confident */
.capsule{
  will-change:transform;
}
.capsule:hover{
  border-color:rgba(116,240,255,.22);
  transform:translateY(-3px);
  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(116,240,255,.05);
}
.capsule.featured:hover{
  border-color:rgba(116,240,255,.35);
  box-shadow:
    0 24px 70px rgba(0,0,0,.5),
    0 0 0 1px rgba(116,240,255,.12),
    0 0 80px -20px rgba(116,240,255,.18);
}

/* Capsule title hover — subtle ink shift */
.capsule:hover .capsule-title{ color:var(--cyan); transition:color .25s var(--ease); }
.capsule .capsule-title{ transition:color .25s var(--ease); }

/* Section transitions — anchor targets get breathing room with cyan flash */
section[id]{ scroll-margin-top:90px; }
section[id]:target{
  animation:targetflash 1.2s var(--ease);
}
@keyframes targetflash{
  0%{background:rgba(116,240,255,.02)}
  100%{background:transparent}
}

/* Inline code styling — used in the body */
code{
  font-family:var(--mono); font-size:.92em;
  color:var(--cyan);
  background:rgba(116,240,255,.06);
  padding:2px 7px; border-radius:5px;
  border:1px solid rgba(116,240,255,.1);
}

/* Refine inline em accents inside section titles */
.section-title em{
  font-style:italic;
  font-weight:300;
  color:var(--cyan);
  background:linear-gradient(180deg, var(--cyan) 0%, var(--violet) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Soft horizontal rule */
.rule{
  border:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
  margin:80px 0;
}

/* Smooth scroll respect — keep performant */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* ──────────────────────────────────────────────────────────────
   CAPSULE DETAIL PAGES — additions
   ────────────────────────────────────────────────────────────── */

.crumb{
  font-family:var(--mono); font-size:11px;
  color:var(--ink-faint); letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:20px;
}
.crumb a{ color:var(--ink-faint); transition:color .15s var(--ease); }
.crumb a:hover{ color:var(--cyan); }
.crumb .sep{ margin:0 10px; color:var(--line); }

.status-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  margin-right:8px;
}
.status-pill .pulse{
  width:6px; height:6px; border-radius:50%;
  animation:pulse 2.4s ease-in-out infinite;
}
.status-pill.live{ color:var(--good); border-color:rgba(118,247,167,.3); }
.status-pill.live .pulse{ background:var(--good); box-shadow:0 0 10px var(--good); }
.status-pill.dev{ color:var(--violet); border-color:rgba(178,140,255,.3); }
.status-pill.dev .pulse{ background:var(--violet); box-shadow:0 0 10px var(--violet); }
.status-pill.draft{ color:var(--amber); border-color:rgba(255,209,102,.3); }
.status-pill.draft .pulse{ background:var(--amber); box-shadow:0 0 10px var(--amber); }

.spec-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin:48px 0;
}
.spec-cell{
  background:var(--bg-elev);
  padding:24px 24px;
  display:flex; flex-direction:column; gap:6px;
}
.spec-cell .k{
  font-family:var(--mono); font-size:10px;
  color:var(--ink-faint); letter-spacing:.18em; text-transform:uppercase;
}
.spec-cell .v{
  font-family:var(--serif); font-size:18px;
  color:var(--ink); letter-spacing:-.012em;
}
.spec-cell .v.mono{ font-family:var(--mono); font-size:13px; }
@media (max-width:860px){ .spec-grid{grid-template-columns:1fr} }

.feature-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin:32px 0;
}
.feature-cell{
  background:var(--bg-elev);
  padding:28px 28px;
  display:flex; flex-direction:column; gap:10px;
}
.feature-cell .ix{
  font-family:var(--mono); font-size:11px;
  color:var(--cyan); letter-spacing:.16em;
}
.feature-cell h4{
  font-family:var(--serif); font-weight:500;
  font-size:18px; letter-spacing:-.012em; margin:0;
}
.feature-cell p{
  font-size:14px; line-height:1.6;
  color:var(--ink-dim); margin:0;
}
@media (max-width:760px){ .feature-list{grid-template-columns:1fr} }

.notice{
  display:grid; grid-template-columns:auto 1fr; gap:24px;
  padding:28px 32px;
  border:1px solid rgba(178,140,255,.2);
  background:rgba(178,140,255,.04);
  border-radius:var(--radius-md);
  margin:32px 0;
}
.notice .ico{
  font-family:var(--mono); font-size:11px;
  color:var(--violet); letter-spacing:.18em; text-transform:uppercase;
  border:1px solid rgba(178,140,255,.3);
  padding:6px 10px; border-radius:8px;
  align-self:start;
  white-space:nowrap;
}
.notice h5{
  font-family:var(--serif); font-weight:500;
  font-size:20px; margin:0 0 8px; letter-spacing:-.014em;
}
.notice p{ color:var(--ink-dim); margin:0; font-size:14.5px; line-height:1.6; }
@media (max-width:600px){ .notice{grid-template-columns:1fr} }

.code-block{
  font-family:var(--mono); font-size:13px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-md);
  padding:20px 24px;
  overflow-x:auto;
  line-height:1.6;
  color:var(--ink-dim);
  margin:24px 0;
}
.code-block .key{color:var(--cyan)}
.code-block .str{color:var(--good)}
.code-block .num{color:var(--amber)}
.code-block .com{color:var(--ink-faint); font-style:italic}

.cta-row{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:36px;
}

.back-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px;
  color:var(--ink-dim); letter-spacing:.06em;
  margin-bottom:32px;
  transition:color .15s var(--ease);
}
.back-link:hover{ color:var(--cyan); }
.back-link::before{ content:"←"; }

/* ──────────────────────────────────────────────────────────────
   CLINIC UPSELL — amber-tinted band placed before the footer on
   clinical capsule pages. Pitches the paid site-license tier.
   ────────────────────────────────────────────────────────────── */
.clinic-upsell{
  padding:48px 0;
  border-top:1px solid rgba(255,209,102,.18);
  background:rgba(255,209,102,.03);
}
.clinic-upsell-inner{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.clinic-upsell-msg{ flex:1; min-width:280px; }
.clinic-upsell-eyebrow{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); margin-bottom:6px;
}
.clinic-upsell-msg p{
  margin:0; color:var(--ink-dim);
  font-size:15px; line-height:1.55;
}
.clinic-upsell-msg p b{ color:var(--ink); font-weight:600; }
.clinic-upsell-msg p a{
  color:var(--amber);
  border-bottom:1px solid rgba(255,209,102,.4);
  transition:border-color .15s var(--ease);
}
.clinic-upsell-msg p a:hover{ border-bottom-color:var(--amber); }
.clinic-upsell-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  background:var(--amber); color:var(--on-amber);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:600;
  border-radius:3px;
  white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  box-shadow:0 8px 24px -8px rgba(255,209,102,.4);
}
.clinic-upsell-cta:hover{
  background:var(--amber-soft);
  transform:translateY(-1px);
  box-shadow:0 12px 28px -8px rgba(255,209,102,.55);
}
.clinic-upsell-cta .arr{ transition:transform .2s var(--ease); }
.clinic-upsell-cta:hover .arr{ transform:translateX(3px); }