/* Reset, type defaults and the fixed top nav. Shared by every section;
   section-specific styling lives in sections/<slug>.css. */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f6fa;color:#24202d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #c192ff;outline-offset:5px}img{display:block;object-fit:cover}h1,h2,h3,p{margin:0}.topnav{position:fixed;inset:0 0 auto;height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;z-index:40;background:transparent;border-bottom:0;color:#24202d}
/* the nav's colour change only animates after the first frame (body.hr-nav-ready, hero.js), so
   the page never paints the light nav and then fades to the hero's ground */
body.hr-nav-ready .topnav{transition:background-color .45s cubic-bezier(.16,1,.3,1),border-color .45s cubic-bezier(.16,1,.3,1),color .45s cubic-bezier(.16,1,.3,1)}
/* The nav never carries a surface of its own — no band, no blur, no rule (RD round 4): it sits
   directly on whatever section is under it. body.hr-nav-dark (sections/hero.js) only re-inks the
   type to white while the hero's dark ground is behind it. */
body.hr-nav-dark .topnav{background:transparent;color:#fff}
body.hr-nav-dark .brand span{color:#a99cc2}
body.hr-nav-dark .demo{border-color:#fff;color:#29193b}
@media(max-width:760px){.topnav{height:62px}.brand{font-size:21px}.brand span{display:none}.demo{padding:9px 13px;font-size:12px}.demo span{margin-left:10px}}.brand{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:700;letter-spacing:-1px}.brand span{font-weight:400;font-size:12px;letter-spacing:0;color:#938b9d;margin-left:18px}body.hr-nav-ready .brand span{transition:color .45s cubic-bezier(.16,1,.3,1)}.demo{border:1px solid #ddd7e6;border-radius:99px;padding:11px 18px;font-size:13px;background:white;color:#24202d;transition:transform .16s cubic-bezier(.16,1,.3,1)}body.hr-nav-ready .demo{transition:border-color .45s cubic-bezier(.16,1,.3,1),transform .16s cubic-bezier(.16,1,.3,1)}.demo:active{transform:scale(.97)}.demo span{margin-left:24px;color:#8655c6}

/* ===========================================================================
   RD round 7, note 1 — "during the scroll the top bar is not visible".

   The bar deliberately carried no surface at all (round 4), which reads well
   over the hero's dark ground and then disappears over everything below it:
   the links end up sitting on whatever pale panel happens to be passing under
   them. So it takes a surface as soon as the page leaves the top — a
   translucent lavender band with a blur and a hairline, the same read as the
   masthead on the live galvor.ai — and drops it again at the very top, where
   the hero's own ground is the background. body.gv-scrolled: hero.js.
   =========================================================================== */
:root{
 /* One section-heading size for the whole page. RD marked the "One loop."
    line as "this is perfect font size", so every section h2 is measured from
    it rather than choosing its own clamp. */
 --gv-h2:clamp(30px,3.4vw,50px);
 /* Eyebrows were 10–10.5px, which RD could not read ("decode बहुत छोटा है"). */
 --gv-eyebrow:12.5px;
}
body.gv-scrolled .topnav{
 background:#f3f0fadb;
 -webkit-backdrop-filter:blur(16px) saturate(1.35);
 backdrop-filter:blur(16px) saturate(1.35);
 border-bottom:1px solid #17131f14;
}
/* ...but NOT over a dark ground. The band exists so the links stay readable
   over the pale sections, where they would otherwise sit on whatever panel is
   passing under them. Over the hero its own translucent dark was a fourth
   colour in a frame that RD wants to read as one background, and the type is
   already white on near-black there, so the bar keeps no surface at all. */
body.gv-scrolled.hr-nav-dark .topnav{background:transparent;border-bottom-color:transparent}
/* The CTA is the one control on the bar that must never be ambiguous, so it is
   a filled purple pill on every ground — the same button the live site has. */
.topnav .demo{
 background:linear-gradient(180deg,#8b5cf6,#7c3aed);
 border-color:transparent;color:#fff;font-weight:600;
 box-shadow:0 1px 2px #2e106526,0 6px 18px #7c3aed2e;
}
.topnav .demo span{color:#ffffffcc}
.topnav .demo:hover{background:linear-gradient(180deg,#9366f8,#6d28d9)}