/* ============================================================
   HARSH SAINI — portfolio
   Dark-cosmos theme · gold signal accents · mobile-first
   ============================================================ */

:root {
  --bg: #05060b;
  --bg-2: #0a0d18;
  --panel: rgba(18, 22, 38, 0.55);
  --ink: #eef0f6;
  --ink-dim: #9aa1b5;
  --gold: #e8b64c;
  --gold-soft: #f3d489;
  --teal: #5eead4;
  --indigo: #6c7bff;
  --line: rgba(238, 240, 246, 0.09);
  --paper: #f4efe6;
  --paper-ink: #23242c;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --hand: "Caveat", cursive;
  --nav-h: 72px;
  --r: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: rgba(232,182,76,.35) transparent; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: rgba(232, 182, 76, 0.28); color: #fff; }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-thumb { background: rgba(232,182,76,.3); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--gold); color: #101010; padding: 10px 16px; border-radius: 8px;
  font-weight: 600; transition: top .25s;
}
.skip-link:focus { top: 12px; }

.wrap { width: min(1180px, 92%); margin-inline: auto; }
.section { position: relative; padding: clamp(84px, 12vw, 160px) 0; }

/* ---------- Ambient layers ---------- */
#stars {
  position: fixed; inset: 0; z-index: -3;
  width: 100%; height: 100%;
  background: radial-gradient(120% 90% at 50% 0%, #0b1024 0%, var(--bg) 55%, #04050a 100%);
}
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.au {
  position: absolute; border-radius: 50%;
  opacity: .5; mix-blend-mode: screen;
  animation: drift 46s var(--ease) infinite alternate;
  will-change: transform;
}
.au-1 { width: 68vmax; height: 68vmax; left: -24vmax; top: -18vmax;
  background: radial-gradient(circle at 50% 50%, rgba(108,123,255,.20), transparent 62%); }
.au-2 { width: 56vmax; height: 56vmax; right: -20vmax; top: 22vh;
  background: radial-gradient(circle at 50% 50%, rgba(94,234,212,.11), transparent 60%);
  animation-duration: 58s; animation-delay: -12s; }
.au-3 { width: 50vmax; height: 50vmax; left: 20vw; bottom: -26vmax;
  background: radial-gradient(circle at 50% 50%, rgba(232,182,76,.10), transparent 60%);
  animation-duration: 64s; animation-delay: -30s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, -5vh, 0) scale(1.14); }
}
.grain {
  position: fixed; inset: -50%; z-index: 120; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); } 60% { transform: translate(-2%,-3%); } 80% { transform: translate(4%,2%); }
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring { display: none; }
@media (pointer: fine) {
  html.js .cursor-dot {
    display: block; position: fixed; z-index: 250; top: 0; left: 0;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); pointer-events: none;
    transform: translate(-50%, -50%);
  }
  html.js .cursor-ring {
    display: block; position: fixed; z-index: 249; top: 0; left: 0;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid rgba(232, 182, 76, 0.5); pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s;
  }
  html.js .cursor-ring.is-hover { width: 64px; height: 64px; background: rgba(232,182,76,.07); border-color: rgba(232,182,76,.85); }
  html.js.cursor-on * { cursor: none !important; }
}

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; z-index: 210;
  width: 100%; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--indigo), var(--teal), var(--gold));
}

/* ---------- Preloader ---------- */
.preloader { display: none; }
html.js .preloader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 400; background: #04050a;
}
.pl-inner { display: grid; justify-items: center; gap: 18px; }
.pl-mono {
  font-size: 44px; font-weight: 700; letter-spacing: .12em;
  color: var(--ink);
  background: linear-gradient(120deg, var(--ink) 30%, var(--gold) 50%, var(--ink) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pl-bar { width: 168px; height: 2px; background: rgba(238,240,246,.12); border-radius: 99px; overflow: hidden; }
.pl-fill { display: block; width: 0%; height: 100%; background: var(--gold); border-radius: 99px; }
.pl-count { font-size: 12px; letter-spacing: .3em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 clamp(16px, 4vw, 40px);
  padding-top: env(safe-area-inset-top);
  transition: transform .45s var(--ease), background .35s, backdrop-filter .35s;
}
.nav.is-hidden { transform: translateY(-110%); }
.nav.is-solid { background: rgba(5, 6, 12, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-logo { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 700; letter-spacing: .08em; font-size: 19px; }
.logo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: blink 2.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); font-size: 14px; letter-spacing: .02em; }
.nav-links a { position: relative; opacity: .82; transition: opacity .25s; padding: 6px 0; }
.nav-links a:hover { opacity: 1; }
.nav-links a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav-cta {
  border: 1px solid rgba(232,182,76,.55); color: var(--gold);
  padding: 9px 18px !important; border-radius: 99px; opacity: 1 !important;
  transition: background .3s, color .3s, box-shadow .3s;
}
.nav-cta:hover { background: var(--gold); color: #131007; box-shadow: 0 0 28px rgba(232,182,76,.35); }
.burger { display: none; position: relative; z-index: 260; width: 44px; height: 44px; }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink);
  transition: transform .4s var(--ease), top .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
.burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(6, 7, 14, 0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: grid; align-content: center; gap: 8vh;
  padding: 0 8vw;
  clip-path: circle(0% at calc(100% - 38px) 38px);
  visibility: hidden; pointer-events: none;
}
.menu.open { visibility: visible; pointer-events: auto; }
.menu-links { display: grid; gap: 6px; }
.menu-links a {
  font-family: var(--serif); font-style: italic; font-weight: 340;
  font-size: clamp(34px, 9vw, 58px); line-height: 1.25;
  display: flex; align-items: baseline; gap: 16px;
  transition: color .3s, transform .4s var(--ease);
}
.menu-links a em { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .25em; color: var(--gold); }
.menu-links a:hover { color: var(--gold-soft); transform: translateX(10px); }
.menu-foot { display: grid; gap: 6px; font-size: 14px; color: var(--ink-dim); }
.menu-foot a:hover { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 32px; border-radius: 99px; font-weight: 600; font-size: 15px;
  letter-spacing: .02em; overflow: hidden; isolation: isolate;
  transition: color .35s, box-shadow .35s, border-color .35s;
  will-change: transform;
}
.btn span { position: relative; z-index: 2; }
.btn-gold { background: var(--gold); color: #17120a; }
.btn-gold::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
  background-size: 250% 100%; background-position: 130% 0;
  transition: background-position .8s var(--ease);
}
.btn-gold:hover { box-shadow: 0 8px 40px rgba(232,182,76,.4); }
.btn-gold:hover::before { background-position: -130% 0; }
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: rgba(232,182,76,.6); color: var(--gold-soft); }
.btn-sm { padding: 13px 26px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding-top: calc(var(--nav-h) + 20px); overflow: hidden;
}
.hero-wrap { display: grid; justify-items: center; gap: clamp(18px, 3vh, 30px); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 99px; padding: 9px 18px;
  background: rgba(255,255,255,.02);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); position: relative; }
.pulse::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--gold); animation: pulse 2.2s ease-out infinite;
}
.pulse-green { background: #4ade80; } .pulse-green::after { border-color: #4ade80; }
@keyframes pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.hero-title {
  font-size: clamp(58px, 14.5vw, 168px);
  line-height: .94; font-weight: 700; letter-spacing: -0.015em;
}
.ht-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.ht-text { display: inline-block; }
.ht-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.01em;
  padding-right: .08em; /* room for the italic overhang inside the clip line */
}
/* tricolour-inspired gradient — the flag's colours, not a rendering of the flag */
.ht-tri {
  background: linear-gradient(102deg, #ff9933 0%, #ffb066 22%, #ffffff 50%, #4fbf46 76%, #138808 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(255,153,51,.22));
}
.ht-gold {
  background: linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 45%, #b57f18 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 80px rgba(232,182,76,.25);
}
.hero-sub { font-size: clamp(17px, 2.4vw, 22px); color: var(--ink-dim); max-width: 640px; }
.rotator-shell { display: inline-block; min-width: 13ch; text-align: left; }
.rotator { display: inline-block; color: var(--gold-soft); font-weight: 600; white-space: nowrap; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-now { font-size: 13.5px; color: var(--ink-dim); letter-spacing: .04em; }
.hero-now strong { color: var(--teal); font-weight: 600; }
.scroll-cue {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; color: var(--ink-dim);
}
.sc-line { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); overflow: hidden; position: relative; }
.sc-line::after { content: ""; position: absolute; inset: 0; background: var(--bg); animation: cue 2s var(--ease) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(105%); } }
.sc-label { font-size: 10px; letter-spacing: .4em; text-transform: uppercase; }
.fly-bat {
  position: absolute; top: 24%; left: -8vw; width: 34px; opacity: 0;
  fill: rgba(232,182,76,.4); pointer-events: none;
}

/* ---------- Stats ---------- */
.stats { padding: clamp(30px, 6vw, 70px) 0; border-block: 1px solid var(--line); background: rgba(10,13,24,.4); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(18px, 3vw, 30px); }
.stat { display: grid; gap: 2px; justify-items: start; }
.stat-num {
  font-size: clamp(38px, 5.4vw, 62px); font-weight: 700; line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; color: var(--ink-dim); letter-spacing: .03em; }

/* ---------- Section headers ---------- */
.sec-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.sec-tag::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.sec-title {
  font-size: clamp(36px, 6.4vw, 74px); line-height: 1.04; font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: clamp(34px, 5vw, 64px);
}
.sec-title em { font-family: var(--serif); font-style: italic; font-weight: 340; color: var(--ink-dim); }

/* ---------- Story ---------- */
.story-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(34px, 6vw, 90px); align-items: start; }
.story-p {
  font-family: var(--serif); font-weight: 340;
  font-size: clamp(19px, 2.5vw, 26px); line-height: 1.65;
  color: #cdd2e0; margin-bottom: 1.35em;
}
.story-p:last-child { margin-bottom: 0; }
.pull-quote {
  border-left: 2px solid var(--gold); padding: 6px 0 6px 22px; margin-bottom: 40px;
}
.pull-quote p { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.5; color: var(--gold-soft); }
.pull-quote cite { display: block; margin-top: 12px; font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.constellation { width: 100%; max-width: 320px; }
.const-path { stroke: rgba(232,182,76,.5); stroke-width: 1.2; stroke-dasharray: 3 7; stroke-linecap: round; }
.const-dot { fill: #d9def0; filter: drop-shadow(0 0 6px rgba(217,222,240,.8)); }
.const-gold { fill: var(--gold); filter: drop-shadow(0 0 10px rgba(232,182,76,.9)); }
.const-txt { fill: var(--ink-dim); font-size: 11px; font-family: var(--sans); letter-spacing: .04em; }
.const-txt-gold { fill: var(--gold-soft); }

/* ---------- Journey (horizontal on desktop) ---------- */
.journey { position: relative; padding-top: clamp(84px, 12vw, 160px); }
.jr-head { margin-bottom: clamp(20px, 4vw, 40px); }
.jr-viewport { overflow: hidden; padding-bottom: clamp(60px, 9vw, 120px); }
.jr-track { display: flex; gap: clamp(18px, 2.4vw, 30px); width: max-content; padding: 0 max(4vw, calc((100vw - 1180px) / 2)); will-change: transform; }
.jr-card {
  position: relative; width: min(78vw, 460px); flex-shrink: 0;
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(20,25,44,.7), rgba(9,11,20,.85));
  padding: clamp(26px, 3.4vw, 42px);
  overflow: hidden;
  transition: border-color .4s, transform .4s var(--ease);
}
.jr-card:hover { border-color: rgba(232,182,76,.4); transform: translateY(-6px); }
.jr-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease);
}
.jr-card:hover::after { transform: scaleX(1); }
.jr-num {
  position: absolute; top: 2px; right: 14px;
  font-size: clamp(84px, 9vw, 120px); font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(238,240,246,.10);
  user-select: none;
}
.jr-chip {
  display: inline-block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal); border: 1px solid rgba(94,234,212,.3); border-radius: 99px;
  padding: 6px 13px; margin-bottom: 20px; background: rgba(94,234,212,.05);
}
.jr-card h3 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; line-height: 1.25; margin-bottom: 12px; letter-spacing: -.01em; }
.jr-card p { color: var(--ink-dim); font-size: 15.5px; }

/* ---------- Craft ---------- */
.marquee { overflow: hidden; padding: 14px 0; border-block: 1px solid var(--line); user-select: none; }
.marquee + .marquee { border-top: 0; }
.mq-track { display: flex; width: max-content; animation: mq 36s linear infinite; }
.mq-reverse .mq-track { animation-direction: reverse; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-group { display: flex; align-items: center; flex-shrink: 0; }
.mq-group span {
  font-size: clamp(20px, 3.2vw, 34px); font-weight: 500; letter-spacing: .01em;
  padding: 0 22px; white-space: nowrap; color: rgba(238,240,246,.82);
}
.mq-reverse .mq-group span { font-family: var(--serif); font-style: italic; font-weight: 340; color: rgba(238,240,246,.55); }
.mq-group i { color: var(--gold); font-style: normal; font-size: 14px; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.craft .wrap:last-child { margin-top: clamp(44px, 6vw, 80px); }
.craft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.craft-card {
  --mx: 50%; --my: 50%;
  position: relative; border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(160deg, rgba(18,22,40,.6), rgba(8,10,18,.8));
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden; transform-style: preserve-3d;
  transition: border-color .4s;
}
.craft-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(232,182,76,.09), transparent 45%);
}
.craft-card:hover { border-color: rgba(232,182,76,.35); }
.craft-card:hover::before { opacity: 1; }
.craft-card svg {
  width: 40px; height: 40px; margin-bottom: 20px;
  fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.craft-card svg .ic-a { stroke: var(--teal); opacity: .85; }
.craft-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 9px; letter-spacing: -.01em; }
.craft-card p { color: var(--ink-dim); font-size: 14.5px; }
.craft-note { margin-top: 26px; font-size: 13px; color: var(--ink-dim); font-style: italic; opacity: .8; }

/* ---------- Traits (how I work) ---------- */
.traits-sec { padding: clamp(46px, 7vw, 96px) 0 0; }
.traits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trait {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px 24px; background: var(--panel);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .35s;
}
.trait::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(232,182,76,.10), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.trait:hover { border-color: rgba(232,182,76,.35); }
.trait:hover::before { opacity: 1; }
.trait h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.3vw, 25px); color: var(--gold-soft); margin-bottom: 10px;
}
.trait p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.6; }

/* ---------- Vision ---------- */
.vision-panel {
  --mx: 50%; --my: 50%;
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
  border-radius: calc(var(--r) + 6px); padding: clamp(28px, 4.5vw, 60px);
  background: linear-gradient(160deg, rgba(20,25,46,.75), rgba(8,10,18,.9));
  border: 1px solid var(--line); overflow: hidden; isolation: isolate;
}
.vision-panel::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--spin, 0deg), transparent 0 62%, rgba(232,182,76,.55) 74%, rgba(94,234,212,.4) 82%, transparent 92%);
  animation: spin 7s linear infinite; opacity: .6;
}
.vision-panel::after {
  content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit;
  background: linear-gradient(160deg, #10142a, #070910);
}
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --spin: 360deg; } }
.vision-role { display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.vision-copy > p { font-size: clamp(16.5px, 1.8vw, 19px); color: #cdd2e0; margin-bottom: 24px; }
.vision-list { list-style: none; display: grid; gap: 13px; margin-bottom: 30px; }
.vision-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-dim); }
.check {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(94,234,212,.6); position: relative;
}
.check::after {
  content: ""; position: absolute; left: 5px; top: 4px; width: 6px; height: 9px;
  border-right: 1.6px solid var(--teal); border-bottom: 1.6px solid var(--teal);
  transform: rotate(42deg);
}
.vision-mock {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #0a0d17; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: rotate(1.2deg);
}
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(238,240,246,.14); }
.mock-bar i:first-child { background: rgba(232,182,76,.6); }
.mock-bar b { margin-left: 10px; font-size: 11px; font-weight: 500; color: var(--ink-dim); letter-spacing: .06em; }
.mock-body { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 16px; }
.mock-side { display: grid; gap: 11px; align-content: start; padding-top: 4px; }
.mk-dot { width: 26px; height: 26px; border-radius: 8px; background: rgba(232,182,76,.25); margin-bottom: 4px; }
.mk-line { display: block; height: 7px; border-radius: 99px; background: rgba(238,240,246,.09); }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.mock-main { display: grid; gap: 12px; align-content: start; }
.mock-chart { display: flex; align-items: flex-end; gap: 7px; height: 110px; padding: 6px 2px 0; }
.mbar {
  flex: 1; border-radius: 5px 5px 2px 2px; height: var(--h, 40%);
  background: linear-gradient(180deg, rgba(108,123,255,.55), rgba(108,123,255,.12));
  transform-origin: bottom; animation: barPulse 3.2s var(--ease) infinite alternate;
}
.mbar:nth-child(2) { animation-delay: .3s; } .mbar:nth-child(3) { animation-delay: .6s; }
.mbar:nth-child(4) { animation-delay: .9s; } .mbar:nth-child(5) { animation-delay: 1.2s; }
.mbar:nth-child(6) { animation-delay: 1.5s; }
.mbar-gold { background: linear-gradient(180deg, var(--gold), rgba(232,182,76,.15)); animation-delay: 1.8s; }
@keyframes barPulse { from { transform: scaleY(.72); } to { transform: scaleY(1); } }

/* ---------- Book ---------- */
.book-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.book-stage { display: grid; justify-items: center; perspective: 1400px; padding: 30px 0; }
.book3d {
  position: relative; width: min(62vw, 270px); aspect-ratio: 27 / 40;
  transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(4deg);
  will-change: transform;
}
.book-cover {
  position: absolute; inset: 0; z-index: 3;
  border-radius: 4px 12px 12px 4px;
  background:
    radial-gradient(120% 100% at 80% 0%, rgba(232,182,76,.16), transparent 50%),
    linear-gradient(150deg, #23283f 0%, #12141f 55%, #0b0c14 100%);
  border: 1px solid rgba(238,240,246,.12);
  display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center;
  padding: 11% 9%;
  transform: translateZ(17px);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55);
}
.bc-frame { position: absolute; inset: 5.5%; border: 1px solid rgba(232,182,76,.35); border-radius: 3px 8px 8px 3px; pointer-events: none; }
.bc-top { font-size: 9.5px; letter-spacing: .5em; color: var(--ink-dim); }
.bc-title {
  font-family: var(--serif); font-weight: 400; text-align: center;
  font-size: clamp(24px, 6.2vw, 33px); line-height: 1.22; letter-spacing: .06em;
  background: linear-gradient(160deg, var(--gold-soft), var(--gold) 60%, #a97a1c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bc-author { font-size: 10.5px; letter-spacing: .42em; color: #cdd2e0; }
.book-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 34px; z-index: 2;
  background: linear-gradient(90deg, #05060b, #191d2e);
  transform: rotateY(-90deg) translateZ(17px) translateX(-17px);
  transform-origin: left center;
  display: grid; place-items: center;
}
.book-spine span { writing-mode: vertical-rl; font-size: 8.5px; letter-spacing: .3em; color: rgba(232,182,76,.75); white-space: nowrap; }
.book-pages {
  position: absolute; top: 1.2%; bottom: 1.2%; right: 0; width: 30px; z-index: 1;
  background: repeating-linear-gradient(90deg, #d8d3c6 0 2px, #b9b4a6 2px 3px);
  transform: rotateY(90deg) translateZ(calc(100% - 15px)) translateX(15px);
  transform-origin: right center; border-radius: 0 2px 2px 0;
}
.book-shadow {
  width: 68%; height: 22px; margin-top: 28px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.65), transparent);
  filter: blur(6px);
}
.book-blurb { font-family: var(--serif); font-weight: 340; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.6; color: #cdd2e0; margin-bottom: 26px; }
.book-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; letter-spacing: .07em; padding: 9px 16px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--ink-dim);
}
.badge-gold { border-color: rgba(232,182,76,.5); color: var(--gold-soft); background: rgba(232,182,76,.06); }
.badge-pulse { border-color: rgba(94,234,212,.4); color: var(--teal); background: rgba(94,234,212,.05); }
.dots b { animation: dot 1.4s infinite; display: inline-block; }
.dots b:nth-child(2) { animation-delay: .2s; } .dots b:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.book-side { font-size: 14.5px; color: var(--ink-dim); }

/* ---------- Beyond ---------- */
.beyond-list { list-style: none; display: grid; }
.beyond-list li {
  display: flex; gap: clamp(18px, 3vw, 34px); align-items: flex-start;
  padding: clamp(22px, 3vw, 34px) 6px; border-bottom: 1px solid var(--line);
  transition: background .35s, padding-left .35s var(--ease);
}
.beyond-list li:first-child { border-top: 1px solid var(--line); }
.beyond-list li:hover { background: rgba(238,240,246,.02); padding-left: 18px; }
.beyond-list svg {
  width: 34px; height: 34px; flex-shrink: 0; margin-top: 4px;
  fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.beyond-list svg .ic-a { stroke: var(--teal); }
.beyond-list .ic-bat { fill: var(--gold); stroke: none; width: 38px; }
.beyond-list h3 { font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.beyond-list p { color: var(--ink-dim); font-size: 15px; max-width: 640px; }
.bat-trigger {
  color: var(--gold); font-weight: 600; font-size: 15px;
  border-bottom: 1px dashed rgba(232,182,76,.5); padding-bottom: 1px;
  transition: color .3s, border-color .3s;
}
.bat-trigger:hover { color: var(--gold-soft); border-color: var(--gold-soft); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: start; }
.ci-lede { font-family: var(--serif); font-weight: 340; font-size: clamp(18px, 2.2vw, 23px); line-height: 1.6; color: #cdd2e0; margin-bottom: 30px; }
.ci-card {
  display: grid; gap: 3px; padding: 18px 22px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.015);
  transition: border-color .35s, transform .35s var(--ease), background .35s;
}
a.ci-card:hover { border-color: rgba(232,182,76,.45); transform: translateX(8px); background: rgba(232,182,76,.04); }
.ci-label { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dim); }
.ci-value { font-size: clamp(15px, 1.7vw, 17.5px); font-weight: 500; word-break: break-word; }
a.ci-card .ci-value { color: var(--gold-soft); }
.ci-avail { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--ink-dim); }

.contact-form {
  display: grid; gap: 20px;
  border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
  padding: clamp(24px, 3.4vw, 40px);
  background: linear-gradient(160deg, rgba(18,22,40,.55), rgba(8,10,18,.75));
}
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: rgba(255,255,255,.025); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 18px 10px; font: inherit; font-size: 15.5px;
  transition: border-color .3s, background .3s; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: rgba(232,182,76,.6); background: rgba(232,182,76,.03); }
.field label {
  position: absolute; left: 18px; top: 16px; color: var(--ink-dim); font-size: 15px;
  pointer-events: none; transition: all .25s var(--ease);
}
.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label, .field textarea:not(:placeholder-shown) ~ label {
  top: 7px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; }
.btn-submit { width: 100%; display: grid; place-items: center; }
.btn-submit > span { grid-area: 1 / 1; transition: opacity .3s, transform .3s var(--ease); }
.btn-submit .bs-busy, .btn-submit .bs-done { opacity: 0; transform: translateY(12px); }
.btn-submit.sending .bs-idle { opacity: 0; transform: translateY(-12px); }
.btn-submit.sending .bs-busy { opacity: 1; transform: none; }
.btn-submit.sent .bs-idle, .btn-submit.sent .bs-busy { opacity: 0; transform: translateY(-12px); }
.btn-submit.sent .bs-done { opacity: 1; transform: none; }
.btn-submit.sent { background: #4ade80; }
.form-note { font-size: 12px; color: var(--ink-dim); text-align: center; opacity: .75; }

/* ---------- Handwritten note ---------- */
.note-sec { padding-top: clamp(40px, 6vw, 80px); }
.paper {
  position: relative; max-width: 660px; margin-inline: auto;
  background:
    linear-gradient(rgba(35,36,44,.05) 1px, transparent 1px) 0 0 / 100% 38px,
    var(--paper);
  color: var(--paper-ink);
  border-radius: 12px; padding: clamp(34px, 5.5vw, 58px) clamp(24px, 5vw, 54px) clamp(28px, 4vw, 42px);
  transform: rotate(-1.4deg);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35);
}
.tape {
  position: absolute; top: -14px; width: 96px; height: 30px;
  background: rgba(238, 228, 200, .8); opacity: .85;
  box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.tape-l { left: 8%; transform: rotate(-6deg); }
.tape-r { right: 8%; transform: rotate(5deg); }
.note-line {
  font-family: var(--hand); font-size: clamp(23px, 3.4vw, 29px); font-weight: 500;
  line-height: 38px; margin-bottom: 14px; color: #2b2c35;
}
.note-sig { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.sig-name { font-family: var(--hand); font-weight: 700; font-size: clamp(34px, 5vw, 44px); color: #17181f; transform: rotate(-2deg); }
.sig-flourish { width: 150px; }
.sig-flourish path { stroke: #17181f; stroke-width: 2.4; stroke-linecap: round; }
.sig-bat { width: 34px; fill: #17181f; opacity: .8; transform: rotate(8deg); }
.note-ps { font-family: var(--hand); font-size: clamp(17px, 2.4vw, 20px); color: #6d6e78; margin-top: 16px; transform: rotate(-.5deg); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: clamp(30px, 5vw, 54px) 0 max(26px, env(safe-area-inset-bottom)); background: rgba(4,5,10,.6); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.footer-links { display: flex; gap: clamp(16px, 3vw, 30px); font-size: 14px; }
.footer-links a { opacity: .75; transition: opacity .25s, color .25s; }
.footer-links a:hover { opacity: 1; color: var(--gold-soft); }
.to-top {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: border-color .3s, background .3s, transform .5s var(--ease);
}
.to-top svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { border-color: rgba(232,182,76,.6); background: rgba(232,182,76,.06); transform: translateY(-4px) rotate(-360deg); }
.footer-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-dim); }
.footer-base b { color: var(--gold); font-weight: 600; }

/* ---------- Bat signal overlay ---------- */
.signal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(2, 3, 7, 0.94);
  display: grid; place-items: center; place-content: center; gap: 26px;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.signal.on { pointer-events: auto; }
.signal-beam {
  position: absolute; bottom: -12vh; left: 50%; width: min(70vw, 620px); height: 130vh;
  transform-origin: 50% 100%; transform: translateX(-50%) rotate(8deg);
  background: linear-gradient(to top, rgba(232,182,76,.16), rgba(232,182,76,.02) 70%, transparent);
  clip-path: polygon(42% 100%, 58% 100%, 100% 0%, 0% 0%);
  filter: blur(2px);
}
.signal-disc {
  position: relative; width: min(56vw, 300px); aspect-ratio: 1;
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(243,212,137,.95) 0%, rgba(232,182,76,.75) 55%, rgba(232,182,76,.12) 72%, transparent 76%);
  box-shadow: 0 0 120px rgba(232,182,76,.55), 0 0 300px rgba(232,182,76,.25);
}
.signal-disc svg { width: 62%; fill: #0a0805; }
.signal-quote { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2.6vw, 22px); color: var(--gold-soft); text-align: center; max-width: 30ch; }

/* ---------- Pursuits intro ---------- */
.pursuit-lede {
  font-family: var(--serif); font-weight: 340; font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.6; color: #cdd2e0; max-width: 60ch; margin-bottom: 40px;
}
.pursuit-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prail {
  display: grid; gap: 4px; padding: 22px 24px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); position: relative; overflow: hidden;
  transition: border-color .35s, transform .45s var(--ease);
}
.prail:hover { border-color: rgba(232,182,76,.4); transform: translateY(-4px); }
.prail-n { font-size: 11px; letter-spacing: .22em; color: var(--gold); }
.prail strong { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.prail-s { font-size: 13.5px; color: var(--ink-dim); }

/* ---------- Facts ---------- */
.fact-row { display: flex; flex-wrap: wrap; gap: 30px; margin: 26px 0; }
.fact-row-wide { justify-content: space-between; margin: 34px 0 10px; }
.fact { display: grid; gap: 2px; }
.fact b {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 40px); font-weight: 600;
  line-height: 1; color: var(--gold-soft);
}
.fact span { font-size: 12.5px; color: var(--ink-dim); letter-spacing: .02em; }

/* ---------- Book cover art ---------- */
.book-cover-art {
  background-image: url("../assets/book-cover.jpg");
  background-size: cover; background-position: center;
  padding: 0;
}

/* ---------- Game shots ---------- */
.game-lede {
  font-family: var(--serif); font-weight: 340; font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.62; color: #cdd2e0; max-width: 68ch; margin-bottom: 34px;
}
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.shot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.shot-lg { grid-column: span 2; grid-row: span 2; }
.shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease), filter .5s;
  filter: saturate(.92) contrast(1.04);
}
.shot:hover img { transform: scale(1.05); filter: saturate(1.05) contrast(1.06); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 16px 12px;
  font-size: 12.5px; color: #e6ebf7; letter-spacing: .01em;
  background: linear-gradient(to top, rgba(3,5,11,.92), transparent);
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease);
}
.shot:hover figcaption, .shot:focus-within figcaption { opacity: 1; transform: none; }
.game-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px; margin-top: 34px; padding: 26px 30px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
}
.game-cta p { color: var(--ink-dim); font-size: 15px; max-width: 62ch; }

/* ---------- Venture ---------- */
.vt-lede { max-width: 74ch; margin-bottom: 34px; }
.vt-lede p {
  font-family: var(--serif); font-weight: 340; font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.62; color: #cdd2e0; margin-bottom: 18px;
}
.vt-lede strong { color: var(--gold-soft); font-weight: 500; }
.vt-nda {
  font-family: var(--sans) !important; font-size: 14px !important; line-height: 1.6 !important;
  color: var(--ink-dim) !important; display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 20px; border: 1px dashed rgba(232,182,76,.34); border-radius: 12px;
  background: rgba(232,182,76,.04);
}
.vt-nda strong { color: var(--gold-soft); }
.lock {
  flex: none; width: 15px; height: 17px; margin-top: 2px; position: relative;
  border: 1.6px solid var(--gold); border-radius: 0 0 3px 3px; border-top: 0; height: 10px; align-self: center;
}
.lock::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  width: 9px; height: 7px; border: 1.6px solid var(--gold); border-bottom: 0; border-radius: 5px 5px 0 0;
}

/* 3D unit — product form only, core abstracted */
.u3d-wrap {
  display: grid; grid-template-columns: 420px 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: center; margin-bottom: 30px; padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line); border-radius: var(--r);
  background: linear-gradient(150deg, rgba(16,20,40,.7), rgba(6,8,16,.92));
}
.u3d-stage {
  height: 430px; position: relative; overflow: hidden; border-radius: 14px;
  cursor: grab; touch-action: pan-y;
  background:
    radial-gradient(60% 55% at 50% 58%, rgba(94,234,212,.10), transparent 70%),
    linear-gradient(170deg, rgba(10,18,38,.9), rgba(4,6,14,.95));
  border: 1px solid rgba(120,180,255,.14);
}
.u3d-stage canvas { width: 100%; height: 100%; display: block; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud-c { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(143,216,255,.55); }
.hud-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.hud-tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.hud-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.hud-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.hud-tag {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .28em; color: rgba(143,216,255,.7);
}
.hud-scan {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143,216,255,.5), transparent);
  animation: hudScan 4.5s linear infinite;
}
@keyframes hudScan { 0% { top: 4%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
.u3d-stage:active { cursor: grabbing; }
.u3d {
  --spin: 0deg; --tilt: -10deg;
  position: relative; width: 120px; height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt)) rotateY(var(--spin));
}
.u3d-can, .u3d-rod, .u3d-eye { position: absolute; left: 50%; transform-style: preserve-3d; }

/* the sealed body */
.u3d-can { top: 92px; width: 0; height: 0; }
.can-skin { position: absolute; transform-style: preserve-3d; }
.can-panel {
  position: absolute; left: -7.6px; top: -95px; width: 15.2px; height: 190px;
  background: linear-gradient(180deg, #46527a, #1d2438);
  backface-visibility: hidden;
}
.can-cap {
  position: absolute; left: -56px; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #6b7ba6, #232c46 70%);
  box-shadow: inset 0 0 22px rgba(0,0,0,.6);
}
.can-cap-t { top: -151px; transform: rotateX(90deg) translateZ(95px); }
.can-cap-b { top: -151px; transform: rotateX(90deg) translateZ(-95px); }
.can-band {
  position: absolute; left: -58px; width: 116px; height: 9px; border-radius: 4px;
  background: linear-gradient(180deg, #7d8cb8, #39435f);
  box-shadow: 0 0 14px rgba(0,0,0,.5);
}
.can-band-1 { top: -66px; }
.can-band-2 { top: 52px; }
.can-port {
  position: absolute; left: -13px; top: -8px; width: 26px; height: 16px; border-radius: 4px;
  background: linear-gradient(180deg, #5eead4, #1d7a6b);
  transform: translateZ(58px);
  box-shadow: 0 0 18px rgba(94,234,212,.75);
}
/* the part nobody gets to see */
.can-core {
  position: absolute; left: -34px; top: -74px; width: 68px; height: 148px; border-radius: 34px;
  background: radial-gradient(circle at 50% 40%, rgba(94,234,212,.5), rgba(94,234,212,.06) 70%);
  filter: blur(9px); opacity: .55;
  animation: corePulse 3.4s ease-in-out infinite;
}
@keyframes corePulse { 0%,100% { opacity:.4; } 50% { opacity:.75; } }

.u3d-rod {
  top: -6px; left: 50%; width: 26px; margin-left: -13px; height: 104px; border-radius: 5px;
  background: linear-gradient(90deg, #7c8bb4, #e2e9f8 44%, #5d6a92);
}
.u3d-eye {
  width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #6b7ba6, #222a42 72%);
  display: grid; place-items: center;
  box-shadow: inset 0 0 14px rgba(0,0,0,.6);
}
.u3d-eye span { width: 19px; height: 19px; border-radius: 50%; background: #080b14; box-shadow: inset 0 2px 6px rgba(0,0,0,.9); }
.u3d-eye-top { top: -34px; }
.u3d-eye-bot { top: 286px; }
.u3d-hint {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); opacity: .65;
}
.u3d-h { font-size: clamp(22px, 3vw, 30px); font-weight: 600; margin-bottom: 12px; }
.u3d-p { color: #cdd2e0; font-size: 15.5px; line-height: 1.62; margin-bottom: 22px; max-width: 52ch; }
.u3d-specs { display: grid; gap: 10px; margin-bottom: 22px; }
.u3d-specs li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.u3d-specs span { color: var(--ink-dim); }
.u3d-specs b { font-weight: 600; color: var(--ink); text-align: right; }
.u3d-specs .withheld { color: var(--gold); }
.u3d-ctl { display: flex; gap: 10px; flex-wrap: wrap; }

/* the demonstrator rig */
.rig {
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(170deg, rgba(16,20,40,.75), rgba(6,8,16,.9));
  margin-bottom: 34px;
}
.rig-head {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.rig-modes { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 99px; background: rgba(0,0,0,.3); }
.rig-btn {
  padding: 9px 18px; border-radius: 99px; font-size: 13px; color: var(--ink-dim);
  transition: background .3s, color .3s; white-space: nowrap;
}
.rig-btn.is-on { background: var(--gold); color: #14100a; font-weight: 600; }
.rig-readout { display: flex; gap: 26px; }
.ro { display: grid; gap: 1px; text-align: right; }
.ro b { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--gold-soft); line-height: 1; }
.ro i { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.rig-svg { width: 100%; display: block; background: radial-gradient(120% 90% at 50% 10%, rgba(60,80,150,.14), transparent 70%); }
/* blueprint drawing */
.rig-blue .rig-svg { background: linear-gradient(160deg, #070d1c, #05070f 70%); }
.rig-plate { display: grid; gap: 2px; }
.rig-plate b { font-size: 13px; letter-spacing: .18em; color: var(--gold-soft); }
.rig-plate span { font-size: 10px; letter-spacing: .16em; color: var(--ink-dim); }
.rig-plate .rp-dim { color: rgba(154,161,181,.6); }
.bp-line { fill: none; stroke: rgba(150,190,255,.55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bp-heavy { stroke-width: 4; stroke: rgba(170,205,255,.72); }
.bp-fill { fill: rgba(120,165,240,.13); stroke: rgba(150,190,255,.45); stroke-width: 1.4; }
.bp-dot { fill: #0a1020; stroke: rgba(170,205,255,.8); stroke-width: 2; }
.bp-rider { fill: none; stroke: rgba(232,182,76,.75); stroke-width: 2.4; }
.bp-rider-l { fill: none; stroke: rgba(232,182,76,.75); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tyre { fill: rgba(10,16,30,.9); stroke: rgba(170,205,255,.75); stroke-width: 3.4; }
.rim { fill: none; stroke: rgba(150,190,255,.45); stroke-width: 2; }
.hub { fill: rgba(150,190,255,.5); }
.spokes rect { fill: rgba(150,190,255,.42); }
.unit-lead { fill: none; stroke: rgba(94,234,212,.4); stroke-width: 1.4; stroke-dasharray: 5 5; }
.unit-eye { fill: #0a1020; stroke: var(--teal); stroke-width: 2.4; }
.co-lead { fill: none; stroke: rgba(232,182,76,.45); stroke-width: 1.2; stroke-dasharray: 4 4; }
.co-dot { fill: var(--gold); }
.co-t { fill: var(--gold-soft); font-size: 13px; letter-spacing: .12em; font-family: var(--sans); font-weight: 600; }
.co-s { fill: var(--ink-dim); font-size: 11px; letter-spacing: .04em; font-family: var(--sans); }

/* made in India */
.india {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: 22px 28px; margin-bottom: 26px; border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(100deg, rgba(255,153,51,.10), rgba(255,255,255,.03) 45%, rgba(19,136,8,.10));
}
.india-bar { width: 6px; align-self: stretch; min-height: 56px; border-radius: 99px;
  background: linear-gradient(180deg, #ff9933 0 33%, #f4f4f4 33% 66%, #138808 66%); }
.india-t { font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.india-p { color: #cdd2e0; font-size: 15px; line-height: 1.62; max-width: 74ch; }
.india-p strong { color: var(--gold-soft); font-weight: 500; }
.tyre { fill: #10141f; stroke: #39425c; stroke-width: 3; }
.rim { fill: #1b2233; stroke: #55617f; stroke-width: 2; }
.spokes rect { fill: #55617f; }
.unit-can { fill: url(#gUnit); stroke: rgba(170,195,255,.34); stroke-width: 1.2; }
.unit-rod { fill: #4a5578; }
.unit-seam { fill: rgba(94,234,212,.5); }
.unit-led { fill: var(--teal); }
.road { stroke: #46507a; stroke-width: 2.5; stroke-linecap: round; }
.road-fill { fill: rgba(20,26,46,.75); }
.wire { stroke: rgba(94,234,212,.3); stroke-width: 1.6; stroke-dasharray: 4 6; }
.bat-shell { fill: rgba(10,14,26,.9); stroke: #4a5578; stroke-width: 1.6; }
.bat-nub { fill: #4a5578; }
.bat-bg { fill: rgba(255,255,255,.05); }
.rig-lbl { fill: var(--ink-dim); font-size: 9.5px; letter-spacing: .22em; font-family: var(--sans); }
.lb-bg { fill: rgba(232,182,76,.1); stroke: rgba(232,182,76,.4); stroke-width: 1; stroke-dasharray: 4 4; }
.lb-tx { fill: var(--gold-soft); font-size: 9.5px; letter-spacing: .16em; font-family: var(--sans); }
.spark { fill: var(--teal); }
.rig-note { padding: 14px 22px 18px; font-size: 12.5px; color: var(--ink-dim); font-style: italic; }

.vt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.vt-card {
  --mx: 50%; --my: 50%; position: relative; overflow: hidden;
  padding: 24px 22px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); transition: border-color .35s;
}
.vt-card:hover { border-color: rgba(94,234,212,.35); }
.vt-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--teal); }
.vt-card p { font-size: 14px; color: var(--ink-dim); line-height: 1.58; }
.vt-ask {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  padding: 28px 30px; border: 1px solid rgba(232,182,76,.28); border-radius: var(--r);
  background: linear-gradient(120deg, rgba(232,182,76,.07), transparent 60%);
}
.vt-stage {
  display: inline-block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.vt-ask p { color: #cdd2e0; font-size: 15px; max-width: 60ch; }
.vt-ask-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Scalability ladder ---------- */
.scale-lede {
  font-family: var(--serif); font-weight: 340; font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.62; color: #cdd2e0; max-width: 72ch; margin-bottom: 38px;
}
.scale-lede em { font-style: italic; color: var(--gold-soft); }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.rung {
  position: relative; overflow: hidden; padding: 26px 24px 24px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  transition: border-color .35s, transform .45s var(--ease);
}
.rung::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--teal), transparent);
  opacity: .35; transition: opacity .35s;
}
.rung:hover { border-color: rgba(94,234,212,.4); transform: translateY(-4px); }
.rung:hover::after { opacity: 1; }
.rung-now { border-color: rgba(232,182,76,.42); background: linear-gradient(160deg, rgba(232,182,76,.09), rgba(8,10,18,.6)); }
.rung-now::after { background: linear-gradient(90deg, var(--gold), transparent); opacity: 1; }
.rung-n { font-family: var(--serif); font-size: 30px; font-weight: 600; color: rgba(154,161,181,.4); }
.rung-now .rung-n { color: var(--gold); }
.rung-tag {
  display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 99px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-dim);
}
.rung-now .rung-tag { border-color: rgba(232,182,76,.5); color: var(--gold); }
.rung h3 { font-size: 20px; font-weight: 600; margin: 12px 0 9px; letter-spacing: -.01em; }
.rung-why { font-size: 14px; color: var(--ink-dim); line-height: 1.58; margin-bottom: 14px; }
.rung-f { display: grid; gap: 6px; }
.rung-f li {
  position: relative; padding-left: 16px; font-size: 12.5px; color: #b6bed2;
}
.rung-f li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: .7;
}
.rung-now .rung-f li::before { background: var(--gold); }
.scale-moat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.moat { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0,0,0,.25); }
.moat h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.moat p { font-size: 14px; color: var(--ink-dim); line-height: 1.6; }
.moat-warn { border-color: rgba(232,182,76,.3); background: rgba(232,182,76,.05); }
.moat-warn h4 { color: var(--gold); }

/* ---------- Backing / Invisible Minds ---------- */
.bk-lede {
  font-family: var(--serif); font-weight: 340; font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.62; color: #cdd2e0; max-width: 70ch; margin-bottom: 36px;
}
.bk-lede strong { color: var(--gold-soft); font-weight: 500; }
/* the ask */
.ask {
  border: 1px solid rgba(232,182,76,.3); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(150deg, rgba(232,182,76,.07), rgba(8,10,18,.85) 55%);
  padding: clamp(26px, 3.4vw, 42px); margin-bottom: 40px;
}
.ask-top {
  display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-end;
  justify-content: space-between; margin-bottom: 30px;
}
.ask-k { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.ask-h {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(46px, 8vw, 90px); line-height: 1; margin: 8px 0 10px;
  background: linear-gradient(100deg, var(--gold-soft), var(--gold) 55%, #b57f18);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ask-sub { color: #cdd2e0; font-size: 16px; line-height: 1.6; max-width: 46ch; }
.ask-sub em { font-family: var(--serif); font-style: italic; color: var(--gold-soft); }
.ask-meter { min-width: 260px; flex: 1; max-width: 340px; }
.am-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.am-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--teal), var(--gold)); }
.am-legend { display: grid; margin-top: 10px; }
.am-legend b { font-family: var(--serif); font-size: 26px; color: var(--gold-soft); }
.am-legend i { font-style: normal; font-size: 12px; color: var(--ink-dim); }
.ask-lines { display: grid; gap: 0; margin-bottom: 28px; }
.ask-lines li {
  display: flex; gap: 20px; align-items: baseline; padding: 13px 0;
  border-bottom: 1px solid var(--line); font-size: 15px;
}
.al-n { font-family: var(--serif); font-weight: 600; color: var(--gold-soft); min-width: 118px; }
.al-d { color: var(--ink-dim); }
.ask-honest {
  padding: 22px 26px; border-left: 2px solid var(--teal); border-radius: 0 12px 12px 0;
  background: rgba(94,234,212,.05); margin-bottom: 26px;
}
.ask-honest h4 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.ask-honest p { color: #cdd2e0; font-size: 15.5px; line-height: 1.65; }
.ask-honest strong { color: var(--gold-soft); font-weight: 500; }
.ask-milestone { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ms { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.25); }
.ms b { display: block; font-family: var(--serif); font-size: 22px; color: var(--gold-soft); margin-bottom: 4px; }
.ms span { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

/* founding 100 wall */
.wall { margin-bottom: 40px; }
.wall-head h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; margin-bottom: 10px; }
.wall-head p { color: var(--ink-dim); font-size: 15px; line-height: 1.62; max-width: 66ch; margin-bottom: 22px; }
.wall-grid { display: grid; grid-template-columns: repeat(20, 1fr); gap: 6px; margin-bottom: 16px; }
.slot {
  aspect-ratio: 1; border-radius: 5px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03); display: grid; place-items: center;
  font-size: 9px; color: rgba(154,161,181,.5); transition: all .3s;
}
.slot-1 { border-color: var(--gold); background: rgba(232,182,76,.14); color: var(--gold); font-weight: 700; }
.slot:hover { border-color: rgba(232,182,76,.5); background: rgba(232,182,76,.1); color: var(--gold-soft); transform: scale(1.18); }
.wall-note { font-size: 14px; color: var(--ink-dim); }
.wall-note b { color: var(--gold-soft); font-family: var(--serif); font-size: 18px; }
.wall-note a { color: var(--gold); border-bottom: 1px solid rgba(232,182,76,.4); }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 40px; }
.tier {
  --mx: 50%; --my: 50%; position: relative; overflow: hidden;
  padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); transition: border-color .35s, transform .45s var(--ease);
}
.tier:hover { border-color: rgba(232,182,76,.4); transform: translateY(-4px); }
.tier-mid { border-color: rgba(232,182,76,.26); }
.tier-k {
  display: inline-block; font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--gold); margin-bottom: 10px;
}
.tier h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.tier p { font-size: 14px; color: var(--ink-dim); line-height: 1.58; }

/* payment */
.pay {
  display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; margin-bottom: 44px; padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid rgba(94,234,212,.26); border-radius: var(--r);
  background: linear-gradient(150deg, rgba(94,234,212,.06), rgba(8,10,18,.9) 60%);
}
.pay-qr { display: grid; justify-items: center; gap: 12px; }
.pq-frame {
  padding: 16px; border-radius: 18px; background: #fff; line-height: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.pq-frame img { width: 100%; max-width: 260px; height: auto; display: block; border-radius: 6px; }
.pq-fallback {
  display: grid; place-items: center; gap: 8px; text-align: center;
  padding: 34px 26px; max-width: 292px; border-radius: 18px;
  border: 1px dashed rgba(94,234,212,.4); background: rgba(94,234,212,.05);
  font-size: 13.5px; color: var(--ink-dim); line-height: 1.6;
}
.pq-fallback b { color: var(--teal); font-size: 14px; }
.pq-cap { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.pq-apps { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pq-apps span {
  font-size: 10.5px; letter-spacing: .1em; padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--ink-dim);
}
.pay-side h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 600; margin-bottom: 10px; }
.pay-lede { color: #cdd2e0; font-size: 15.5px; line-height: 1.62; margin-bottom: 20px; max-width: 56ch; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pchip {
  display: grid; gap: 1px; padding: 11px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0,0,0,.28);
  transition: border-color .3s, transform .35s var(--ease);
}
.pchip:hover { border-color: rgba(94,234,212,.45); transform: translateY(-2px); }
.pchip b { font-family: var(--serif); font-size: 19px; color: var(--gold-soft); }
.pchip i { font-style: normal; font-size: 11.5px; color: var(--ink-dim); }
.pchip-hi { border-color: rgba(232,182,76,.4); background: rgba(232,182,76,.07); }
.pay-steps { display: grid; gap: 11px; margin-bottom: 20px; }
.pay-steps li { display: flex; gap: 13px; align-items: baseline; font-size: 14.5px; color: #cdd2e0; }
.pay-steps span {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(94,234,212,.14); color: var(--teal); font-size: 11px; font-weight: 700;
}
.pay-trust {
  font-size: 13.5px; color: var(--ink-dim); line-height: 1.62;
  padding-left: 16px; border-left: 2px solid rgba(94,234,212,.4);
}

.cert-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.cert-form h3 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.cf-sub { font-size: 14px; color: var(--ink-dim); margin-bottom: 24px; line-height: 1.6; }
.cert-form select {
  width: 100%; padding: 22px 18px 10px; border-radius: 12px; font: inherit; font-size: 15px;
  background: rgba(10,13,24,.7); border: 1px solid var(--line); color: var(--ink);
  appearance: none; cursor: pointer;
}
.cert-form select:focus { outline: none; border-color: var(--gold); }
.lbl-static {
  position: absolute; left: 18px; top: 7px; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); pointer-events: none;
}

/* the certificate itself */
.cert-stage { display: grid; gap: 16px; justify-items: center; }
.cert {
  width: 100%; aspect-ratio: 1.42 / 1; padding: 10px; border-radius: 10px;
  background: linear-gradient(150deg, #f7f2e7, #e9e1d0);
  box-shadow: 0 30px 80px rgba(0,0,0,.55); color: #23201a;
  transition: transform .6s var(--ease);
}
.cert-inner {
  height: 100%; border: 1.5px double #b8a878; border-radius: 5px;
  display: grid; align-content: center; justify-items: center; gap: 6px;
  padding: 8% 9%; text-align: center; position: relative;
}
.cert { position: relative; overflow: hidden; }
.cert-guilloche { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.cert-inner { position: relative; z-index: 1; }
.cert-rule-t { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 52px; height: 1px; background: #b8a878; }
.cert-flourish { width: 46%; margin: 2px 0 6px; }
.cert-flourish svg { width: 100%; display: block; }
.cert-seal { position: absolute; right: 7%; bottom: 8%; width: 17%; opacity: .92; }
.cert-seal svg { width: 100%; display: block; }
.seal-o { fill: none; stroke: #b8a878; stroke-width: 2; }
.seal-i { fill: none; stroke: #b8a878; stroke-width: .8; stroke-dasharray: 2 3; }
.seal-star { fill: #c2b083; opacity: .85; }
.cert-sigwrap, .cert-serwrap { display: grid; }
.cert-sigwrap i, .cert-serwrap i {
  font-style: normal; font-size: 7.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #a09268; margin-top: 1px;
}
.cert-top { font-size: 9.5px; letter-spacing: .34em; color: #8a7c52; }
.cert-pre { font-family: var(--serif); font-style: italic; font-size: 12px; color: #6d6450; }
.cert-name {
  font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 3.4vw, 31px);
  line-height: 1.1; color: #1d1a14; word-break: break-word;
}
.cert-body { font-size: 11.5px; line-height: 1.55; color: #5c5442; max-width: 34ch; }
.cert-body em { font-family: var(--serif); font-style: italic; color: #2f2a1f; }
.cert-proj { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a7c52; margin-top: 2px; }
.cert-foot { display: flex; align-items: baseline; gap: 18px; margin-top: 10px; }
.cert-sig { font-family: var(--hand); font-size: 24px; color: #1d1a14; }
.cert-ser { font-size: 9.5px; letter-spacing: .18em; color: #8a7c52; }

/* ---------- Tarang — the damped wave ---------- */
.tarang {
  position: fixed; left: 0; right: 0; bottom: 0; height: 108px; z-index: 180;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tarang:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.tarang svg { width: 100%; height: 100%; display: block; }
.tg-eq { stroke: rgba(154,161,181,.16); stroke-width: 1; stroke-dasharray: 6 8; }
.tg-wave {
  stroke: url(#tgGrad); stroke-width: 2.4; stroke-linecap: round;
  stroke: var(--teal); filter: drop-shadow(0 0 7px rgba(94,234,212,.55));
}
.tg-dot {
  position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 14px 3px rgba(232,182,76,.75); pointer-events: none;
}
.tg-name {
  position: absolute; right: 22px; bottom: 12px;
  font-size: 12px; letter-spacing: .3em; color: rgba(154,161,181,.42);
  pointer-events: none;
}
@media (max-width: 560px) { .tarang { height: 78px; } .tg-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .tarang { display: none; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 320;
  transform: translate(-50%, 140%);
  background: #14182a; border: 1px solid rgba(232,182,76,.4); color: var(--ink);
  font-size: 14px; padding: 13px 22px; border-radius: 99px;
  box-shadow: 0 14px 50px rgba(0,0,0,.5);
  transition: transform .5s var(--ease); max-width: 92vw; text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .nav-links { display: none; }
  .burger { display: block; }
  .story-grid, .contact-grid, .book-grid, .vision-panel { grid-template-columns: 1fr; }
  .story-aside { display: grid; justify-items: start; }
  .constellation { max-width: 280px; }
  .book-grid { gap: 30px; }
  .book-stage { order: 2; }
  .jr-viewport { overflow: visible; }
  .jr-track { flex-direction: column; width: auto; padding: 0 4vw; }
  .jr-card { width: 100%; }
  .traits-grid { grid-template-columns: 1fr 1fr; }
  .pursuit-rail, .tiers { grid-template-columns: 1fr; }
  .vt-grid { grid-template-columns: 1fr 1fr; }
  .cert-wrap { grid-template-columns: 1fr; }
  .u3d-wrap { grid-template-columns: 1fr; }
  .u3d-stage { height: 340px; }
  .ask-milestone { grid-template-columns: 1fr; }
  .wall-grid { grid-template-columns: repeat(10, 1fr); }
  .pay { grid-template-columns: 1fr; }
  .ladder { grid-template-columns: 1fr 1fr; }
  .scale-moat { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr 1fr; }
  .shot-lg { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
  .rig-head { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .traits-grid { grid-template-columns: 1fr; }
  .vt-grid { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .shot-lg { grid-column: auto; }
  .fact-row { gap: 20px; }
  .rig-readout { gap: 18px; }
  .ro { text-align: left; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; min-width: 0; padding: 16px 18px; }
  .rotator-shell { text-align: center; }
  .tape { width: 70px; }
  .au { opacity: .38; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mq-track { animation: none; }
  .fly-bat, .scroll-cue { display: none; }
  html { scroll-behavior: auto; }
}