/* Page shell: nav links and the section rhythm between the assembled sections.
   Section-specific styling lives in sections/<slug>.css. */

.navlinks{display:flex;align-items:center;gap:26px;font-size:13px;color:#6f6579}
.navlinks a{padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.navlinks a:hover{color:#7c3aed;border-bottom-color:#c7a9f5}
@media(max-width:1040px){.navlinks{display:none}}
/* dark nav over the hero (body.hr-nav-dark, sections/hero.js) */
body.hr-nav-dark .navlinks{color:#d6cbe6}
body.hr-nav-dark .navlinks a:hover{color:#fff;border-bottom-color:#b48cff}
body.hr-nav-ready .navlinks{transition:color .45s cubic-bezier(.16,1,.3,1)}

/* Every assembled section shares one horizontal gutter and one max width, so the
   left edges line up down the whole page. Sections that go full-bleed opt out. */
main>section,main>footer{position:relative}
/* The pinned hero releases flush with its own bottom edge; the logo band follows with no gap
   (sections/logos.css gives .logos a top margin of its own, which this zeroes). */
.hero+.logos{margin-top:0}

html{scroll-padding-top:92px}

/* Brand gradient for a single emphasised phrase in a heading. Same ramp as the
   hero's "Make what's next." Use it on one phrase per heading, never the whole
   line, or it stops being an accent. */
.gv-grad{background:linear-gradient(110deg,#8b52e7,#ca7dab,#89a6e6);
 color:transparent;background-clip:text;-webkit-background-clip:text}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
 .gv-grad{color:#8b52e7;background:none}
}



/* ===========================================================================
   Site ground — the Aurora field (Aceternity / 21st.dev "Aurora Background",
   manuarora700), ported from Website 2.0's first build. ONE fixed layer
   behind the whole page, so every section sits on the same moving field
   instead of its own flat grey/pink. Sections below are transparent; cards,
   panels and the logo band keep their own surfaces on top of it.
   Rendered at half resolution and scaled up: the blur costs a quarter as
   much and is indistinguishable at this radius.
   =========================================================================== */
.gv-aurora{
  --white:#fff;--transparent:transparent;
  --blue-500:#3b82f6;--indigo-300:#a5b4fc;--blue-300:#93c5fd;--violet-200:#ddd6fe;--blue-400:#60a5fa;
  --white-gradient:repeating-linear-gradient(100deg,var(--white) 0%,var(--white) 7%,var(--transparent) 10%,var(--transparent) 12%,var(--white) 16%);
  --aurora:repeating-linear-gradient(100deg,var(--blue-500) 10%,var(--indigo-300) 15%,var(--blue-300) 20%,var(--violet-200) 25%,var(--blue-400) 30%);
  position:fixed;left:0;top:0;width:50%;height:50%;
  transform:scale(2);transform-origin:0 0;
  z-index:0;pointer-events:none;overflow:hidden;
  background-image:var(--white-gradient),var(--aurora);
  background-size:300%,200%;background-position:50% 50%,50% 50%;
  filter:blur(6px) invert(1);
  opacity:.18;
}
/* the drifting copy moves by transform (composited) rather than
   background-position (a full repaint every frame) */
.gv-aurora::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:500%;
  background-image:var(--white-gradient),var(--aurora);
  background-size:40% 100%,20% 100%;background-position:0 0,0 0;
  mix-blend-mode:difference;will-change:transform;
  animation:gv-aurora 80s linear infinite;
}
@keyframes gv-aurora{to{transform:translateX(-80%)}}
@media(prefers-reduced-motion:reduce){.gv-aurora::after{animation:none}}


/* ---------------------------------------------------------------
   Galvor mark. One path, painted with currentColor through a mask,
   so it takes the colour of whatever it sits in: purple on the
   light nav, white on the dark footer, black anywhere ink is black.
   A plain <img> could not do this — an SVG file's own fill wins.
   --------------------------------------------------------------- */
.gv-mark{
  display:inline-block;
  width:var(--gv-mark-size,24px);
  height:var(--gv-mark-size,24px);
  flex:none;
  background:currentColor;
  -webkit-mask:url("./assets/galvor-mark.svg") center / contain no-repeat;
  mask:url("./assets/galvor-mark.svg") center / contain no-repeat;
}
/* the nav wordmark is near-black, but the mark reads as brand purple there */
.topnav .brand .gv-mark{color:#7936ea}

/* The mark takes currentColor, so on the near-black footer slab it has to be
   told to go white — otherwise it inherits the lockup's dark ink and all but
   disappears. This is the whole reason the mark is a mask and not an <img>. */
.cl-slab .gv-mark,
.cl-footer .gv-mark{color:#fff}

/* ===========================================================================
   Glass — ONE recipe for every translucent surface on the page (RD round 4).

   Before this the hero's Remember card, the results quote card, the decode
   box and the loop panels each mixed their own alpha, blur and border, so
   scrolling the page walked past four different materials that were all
   trying to be the same one. Every glass surface now reads these tokens and
   sets nothing of its own except its radius and its padding.

   Two grounds, because a fill that reads as glass on the dark hero reads as
   fog on the light aurora:
     --gl-*    on a DARK ground (hero, the results banner)
     --gl-l-*  on the LIGHT page ground (loop, Brand Memory, the modules)

   backdrop-filter is what makes it glass rather than a tinted panel, so the
   @supports fallback below deliberately goes more opaque instead.
   =========================================================================== */
:root{
  --gl-blur:blur(26px) saturate(150%);
  --gl-bg:#ffffff1c;
  --gl-bg-strong:#1a132845;        /* over a photograph, where copy has to hold */
  --gl-border:#ffffff3d;
  --gl-shadow:0 30px 72px -32px #0d0620a8,inset 0 1px 0 #ffffff2e;
  --gl-chip:#ffffff14;             /* a tile sitting ON glass, not on the page */
  --gl-chip-border:#ffffff2b;

  --gl-l-bg:#ffffff5c;
  --gl-l-border:#ffffff8f;
  --gl-l-shadow:0 26px 64px -34px #2411384d,inset 0 1px 0 #ffffffb3;
  --gl-l-bg-strong:#ffffffa8;    /* light glass over a photograph, where copy has to hold */
  --gl-l-chip:#ffffff73;
  --gl-l-chip-border:#ffffff9e;
}
.gv-glass{
  background:var(--gl-bg);border:1px solid var(--gl-border);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-shadow);
}
.gv-glass-l{
  background:var(--gl-l-bg);border:1px solid var(--gl-l-border);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-l-shadow);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--gl-bg:#1d1629d9;--gl-bg-strong:#1d1629e6;--gl-l-bg:#fffffff0;--gl-l-bg-strong:#fffffff5}
}