/* =====================================================================
   ZAAN — shared design tokens & components
   Lifted from the official Careers page system
   ===================================================================== */
:root{
  --accent-dark:   #1A1A1A;
  --accent-mid:    #494E63;
  --mirror-tint:   #EAEDF6;
  --ink:           #3B3F52;
  --ink-soft:      #6B7088;
  --ink-faint:     #9AA0B4;
  --canvas:        #F9FAFD;
  --card:          #FFFFFF;
  --line:          #E6E9F2;
  --line-strong:   #CDD2E2;

  /* Tertiary signal accents — sampled from existing semantic chips,
     promoted to first-class palette tokens. Use sparingly. */
  --signal-gold:   #C9A23A;   /* warm — caution, drafts, "in progress" */
  --signal-gold-soft:#FEF7E6;
  --signal-sage:   #5B9F6B;   /* green — confirmed, safe, OK */
  --signal-sage-soft:#EAF3EC;
  --signal-clay:   #B33B3B;   /* warm red — alert, deadline */
  --signal-clay-soft:#FBE9E9;
  --signal-dusk:   #6E7693;   /* cool slate — secondary blue accent */
  --signal-dusk-soft:#E4E7F1;

  /* Tinted gradients (mirror motif extended) */
  --grad-mirror: linear-gradient(135deg, #EAEDF6 0%, #F9FAFD 60%, #FFFFFF 100%);
  --grad-dusk:   linear-gradient(135deg, #6E7693 0%, #1A1A1A 100%);
  --grad-warm-gleam: linear-gradient(135deg, rgba(201,162,58,.12) 0%, rgba(234,237,246,0) 60%);
  --grad-cool-gleam: linear-gradient(135deg, rgba(110,118,147,.14) 0%, rgba(234,237,246,0) 60%);

  /* Spring easings */
  --ease-out-soft:  cubic-bezier(.22,.61,.36,1);
  --ease-out-snap:  cubic-bezier(.16,1,.3,1);
  --ease-out-spring:cubic-bezier(.34,1.56,.64,1);

  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 20px;

  --shadow-soft: 0 1px 0 rgba(24,28,44,.04), 0 12px 32px -18px rgba(24,28,44,.18);
  --shadow-lift: 0 1px 0 rgba(24,28,44,.05), 0 24px 60px -28px rgba(24,28,44,.28);

  --maxw: 1240px;
  --gutter: 40px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* -------- Typography -------- */
.eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--line-strong)}
.dot-tagline{
  font-size:13px; letter-spacing:.32em; text-transform:lowercase;
  color:var(--ink-soft); font-weight:400;
}

h1,h2,h3,h4,h5{font-family:var(--sans); font-weight:500; letter-spacing:-.015em; color:var(--accent-dark); margin:0}
h1{font-size:clamp(44px, 6.4vw, 92px); line-height:1.0; letter-spacing:-.03em; font-weight:400}
h1 em, h2 em, h3 em{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent-mid); letter-spacing:-.005em}
h2{font-size:clamp(30px, 3.8vw, 52px); line-height:1.05; letter-spacing:-.022em; font-weight:500}
h3{font-size:22px; line-height:1.3; font-weight:600}
h4{font-size:15px; line-height:1.4; font-weight:600}
p{margin:0}
.lede{font-size:19px; line-height:1.55; color:var(--ink-soft); max-width:54ch}
.serif{font-family:var(--serif); font-style:italic; font-weight:400}

/* -------- Buttons -------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-size:14px; font-weight:500; letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn svg{width:14px; height:14px; stroke-width:1.8}
.btn-primary{background:var(--accent-dark); color:#fff}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent-dark); color:var(--accent-dark)}
.btn-link{padding:0; border-radius:0; background:transparent; color:var(--ink); border:0; gap:8px}
.btn-link:hover{color:var(--accent-dark)}

/* -------- Header -------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(249,250,253,.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(205,210,226,.5);
}
header.site .bar {
  display: flex; align-items: center;
  justify-content: space-between; height: 72px;
}

/* Logo */
.logo { display: flex; align-items: center }
.logo img { height: 38px; width: auto; display: block }

/* Sign in link */
.signin-link { font-size: 14px; color: var(--ink); font-weight: 500 }

/* Desktop nav */
nav.primary { display: flex; align-items: center; gap: 34px }
nav.primary > a,
nav.primary > .has-menu > a {
  font-size: 14px; color: var(--ink); font-weight: 500;
  padding: 6px 0; position: relative;
}
nav.primary > a.active::after,
nav.primary > .has-menu.active > a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent-dark);
}
nav.primary > a:hover,
nav.primary > .has-menu > a:hover { color: var(--accent-dark) }

/* Products dropdown */
nav.primary .has-menu { position: relative }
nav.primary .has-menu > a {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
nav.primary .has-menu > a::before {
  content: ""; position: absolute; inset: -12px -16px -16px -16px;
}
nav.primary .has-menu .caret {
  width: 10px; height: 10px; opacity: .5; transition: transform .2s ease;
}
nav.primary .has-menu:hover .caret { transform: rotate(180deg) }
nav.primary .menu {
  position: absolute; top: calc(100% + 14px);
  left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lift);
  padding: 10px; min-width: 340px;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}
nav.primary .has-menu:hover .menu,
nav.primary .has-menu:focus-within .menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
nav.primary .menu a.menu-item {
  display: grid; grid-template-columns: 36px 1fr;
  gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  text-decoration: none; color: var(--ink);
}
nav.primary .menu a.menu-item:hover { background: var(--mirror-tint) }
nav.primary .menu a.menu-item .ico {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--mirror-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark); margin-top: 2px;
}
nav.primary .menu a.menu-item .ico svg { width: 18px; height: 18px; stroke-width: 1.6 }
nav.primary .menu a.menu-item .nm {
  font-size: 14px; color: var(--accent-dark); font-weight: 600; line-height: 1.3;
}
nav.primary .menu a.menu-item .ds {
  font-size: 12px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px;
}

/* Header right */
.header-right { display: flex; align-items: center; gap: 14px }

/* -------- Hamburger toggle -------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: var(--mirror-tint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;          /* THIS was missing — bars had no width */
  background: var(--accent-dark);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease, background .2s ease;
}
.nav-toggle:hover { background: var(--accent-dark); border-color: var(--accent-dark) }
.nav-toggle:hover span { background: #fff }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.nav-toggle.open span:nth-child(2) { opacity: 0 }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }

/* -------- Mobile -------- */
@media (max-width: 640px) {
  :root { --gutter: 20px }

  header.site .bar { height: 64px }

  /* Hide desktop nav, show toggle */
  nav.primary { display: none }
  .nav-toggle  { display: flex }


  /* Shrink request access button on mobile */
  .header-right .btn { font-size: 13px; padding: 10px 16px }

  section.band  { padding: 72px 0 }
  .cta-band     { padding: 52px 28px }
  footer.site .top { grid-template-columns: 1fr; gap: 32px }
  .logo-wall       { grid-template-columns: repeat(2, 1fr) }

  /* ── Mobile drawer ── */
  nav.primary.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--canvas);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 20px;
    z-index: 39;
    box-shadow: 0 12px 32px -12px rgba(24,28,44,.14);
  }

  /* Top-level links */
  nav.primary.mobile-open > a,
  nav.primary.mobile-open > .has-menu > a {
    width: 100%;
    padding: 13px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--accent-dark);
    border-bottom: 1px solid var(--line);
  }
  nav.primary.mobile-open > a:last-child { border-bottom: none }
  nav.primary.mobile-open > a:hover,
  nav.primary.mobile-open > .has-menu > a:hover { color: var(--ink-soft) }

  /* Products row — chevron to the right */
  nav.primary.mobile-open > .has-menu > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  nav.primary.mobile-open > .has-menu > a .caret {
    opacity: .5; transition: transform .25s ease;
  }
  nav.primary.mobile-open > .has-menu.sub-open > a .caret {
    transform: rotate(180deg);
  }

  /* Submenu — hidden until .sub-open */
  nav.primary.mobile-open > .has-menu .menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 4px 0 8px 0;
    min-width: unset;
    width: 100%;
    display: none;
  }
  nav.primary.mobile-open > .has-menu.sub-open .menu { display: block }

  /* Submenu items */
  nav.primary.mobile-open .menu a.menu-item {
    border-left: 2px solid var(--line-strong);
    padding: 10px 14px;
    margin-left: 4px;
    border-radius: 0;
    width: calc(100% - 4px);
  }
  nav.primary.mobile-open .menu a.menu-item:hover {
    background: var(--mirror-tint);
    border-left-color: var(--accent-dark);
  }
}

/* -------- Sections -------- */
section.band{padding:104px 0}
section.band + section.band{border-top:1px solid var(--line)}
.section-head{display:grid; grid-template-columns: 1fr 1.4fr; gap:64px; margin-bottom:64px; align-items:end}
.section-head .lede{margin-top:18px}

/* -------- CTA band -------- */
.cta-band{
  margin:104px 0 0;
  background:linear-gradient(180deg, #1A1A1A 0%, #2A2E42 100%);
  color:#fff; border-radius:var(--radius-lg);
  padding:80px 64px;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; right:-120px; bottom:-120px; width:360px; height:360px;
  border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(234,237,246,.18), transparent 70%);
  pointer-events:none;
}
.cta-band h2{color:#fff; max-width:18ch; margin-bottom:20px}
.cta-band h2 em{color:#C9CEE4}
.cta-band p{color:rgba(255,255,255,.72); max-width:52ch; margin-bottom:36px; font-size:18px}
.cta-band .btn-primary{background:#fff; color:var(--accent-dark)}
.cta-band .btn-primary:hover{background:#EAEDF6}
.cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.3)}
.cta-band .btn-ghost:hover{border-color:#fff; color:#fff}

/* -------- Footer -------- */
footer.site{padding:88px 0 40px; border-top:1px solid var(--line); margin-top:0}
footer.site .top{display:grid; grid-template-columns: 1.4fr .6fr .6fr 1fr; gap:48px; margin-bottom:72px}
footer.site h4{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; font-weight:500}
footer.site .tagline{font-family:var(--serif); font-style:italic; font-size:28px; line-height:1.2; color:var(--accent-dark); max-width:20ch; margin:0}
footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
footer.site ul a{font-size:14px; color:var(--ink-soft)}
footer.site ul a:hover{color:var(--accent-dark)}
footer.site .contact p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:10px}
footer.site .bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line)}
footer.site .bottom span{font-size:12.5px; color:var(--ink-faint)}
footer.site .bottom .socials{display:flex; gap:10px}
footer.site .bottom .socials a{width:32px; height:32px; border-radius:999px; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; color:var(--ink-soft)}
footer.site .bottom .socials a:hover{color:var(--accent-dark); border-color:var(--accent-dark)}
footer.site .bottom .socials svg{width:14px; height:14px; stroke-width:1.6}

/* -------- Sun/mirror motif -------- */
.motif{position:relative; width:100%; aspect-ratio: 1 / 1; min-height:460px; max-height:560px}
.motif svg{width:100%; height:100%; display:block}
.motif .mirror{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(73,78,99,.28) 20%, rgba(73,78,99,.28) 80%, transparent);
  z-index:2;
}
@keyframes sun-rise { 0%{transform:translateY(22%)} 100%{transform:translateY(0)} }
@keyframes sun-sink { 0%{transform:translateY(-22%)} 100%{transform:translateY(0)} }
.motif .rise { animation: sun-rise 4.5s cubic-bezier(.22,.61,.36,1) both }
.motif .sink { animation: sun-sink 4.5s cubic-bezier(.22,.61,.36,1) both }

/* -------- Logo wall -------- */
.logo-wall{
  display:grid; grid-template-columns:repeat(6, 1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.logo-wall .lc{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  aspect-ratio: 3 / 2; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  padding:24px 18px;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.logo-wall .lc:hover{background:#fff; color:var(--accent-dark); transform:translateY(-2px)}
.logo-wall .lc svg{width:100%; height:auto; max-height:36px; max-width:180px}
.logo-wall .lc.serif{font-family:var(--serif); font-style:italic; font-size:24px; letter-spacing:0; font-weight:400}
.logo-wall .lc.mark{font-family:var(--mono); font-size:14px; letter-spacing:.18em; text-transform:uppercase}

/* -------- Reveal-on-scroll animations -------- */
@keyframes reveal-up {
  from { opacity:0; transform:translateY(24px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes reveal-fade {
  from { opacity:0 }
  to   { opacity:1 }
}
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1) }
[data-reveal].in{ opacity:1; transform:translateY(0) }
[data-reveal][data-delay="1"].in{ transition-delay:.08s }
[data-reveal][data-delay="2"].in{ transition-delay:.16s }
[data-reveal][data-delay="3"].in{ transition-delay:.24s }
[data-reveal][data-delay="4"].in{ transition-delay:.32s }
[data-reveal][data-delay="5"].in{ transition-delay:.4s }

/* Hero h1 staggered word animation */
.hero h1 .w, h1.split .w{
  display:inline-block; opacity:0; transform:translateY(40%);
  animation: reveal-up .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero h1 .w:nth-child(1){ animation-delay:.05s }
.hero h1 .w:nth-child(2){ animation-delay:.15s }
.hero h1 .w:nth-child(3){ animation-delay:.25s }
.hero h1 .w:nth-child(4){ animation-delay:.35s }
.hero h1 .w:nth-child(5){ animation-delay:.45s }
.hero h1 .w:nth-child(6){ animation-delay:.55s }

/* Stat count-up baseline */
.count{font-variant-numeric: tabular-nums}

/* Hover lift utility */
.lift{transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.lift:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--line-strong)}

/* Subtle horizontal logo marquee for trust strip variant */
@keyframes marquee {
  from { transform:translateX(0) }
  to   { transform:translateX(-50%) }
}
.marquee{overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.marquee .track{display:flex; gap:64px; width:max-content; animation:marquee 50s linear infinite}
.marquee .track:hover{animation-play-state:paused}

/* -------- Cards -------- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.card:hover{border-color:var(--line-strong); box-shadow:var(--shadow-soft)}

/* -------- Pull quote -------- */
.pull{
  font-family:var(--serif); font-style:italic; font-size:32px; line-height:1.25;
  color:var(--accent-dark); font-weight:400;
  padding-left:24px; border-left:1px solid var(--accent-mid);
}

/* =====================================================================
   v2 — Color & motion extensions (additive; base palette unchanged)
   ===================================================================== */

/* --- Accent surfaces --- */
.surface-mirror{ background: var(--grad-mirror) }
.surface-dusk{ background: var(--grad-dusk); color:#fff }
.surface-warm{ background: var(--signal-gold-soft) }
.surface-sage{ background: var(--signal-sage-soft) }

/* --- Italic-em gradient text (h1/h2 em variant) --- */
h1 em.tinted, h2 em.tinted, h3 em.tinted{
  background: linear-gradient(110deg, var(--accent-mid) 0%, var(--signal-dusk) 38%, var(--signal-gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color:transparent;
  background-size: 200% 100%; animation: tint-drift 14s ease-in-out infinite alternate;
}
@keyframes tint-drift{
  0%   { background-position: 0% 50% }
  100% { background-position: 100% 50% }
}

/* --- Marker underline on hover (link refresh) --- */
.mark-link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  color:var(--accent-dark);
}
.mark-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:6px;
  background: linear-gradient(90deg, rgba(201,162,58,.0), rgba(201,162,58,.55), rgba(201,162,58,.0));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease-out-snap);
  border-radius:1px;
}
.mark-link:hover::after{ transform: scaleX(1) }

/* --- Magnetic / lift on cards --- */
.magnet{
  transition:
    transform .45s var(--ease-out-snap),
    box-shadow .45s var(--ease-out-snap),
    border-color .35s ease;
  will-change: transform;
}
.magnet:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 48px -28px rgba(26,26,26,.28), 0 6px 14px -8px rgba(26,26,26,.10);
  border-color: var(--line-strong);
}

/* --- Cursor-follow gleam (set --mx,--my via JS) --- */
.gleam{ position:relative; isolation:isolate; overflow:hidden }
.gleam::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              rgba(110,118,147,.10), transparent 60%);
  opacity:0; transition: opacity .35s ease;
  pointer-events:none; z-index:0;
}
.gleam:hover::after{ opacity:1 }
.gleam > *{ position:relative; z-index:1 }

/* --- Magnetic CTA button (uses --tx,--ty via JS) --- */
.btn.magnetic{
  transition: transform .25s var(--ease-out-spring),
              background .25s ease, border-color .25s ease;
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}

/* --- Eyebrow shimmer --- */
.eyebrow.shimmer{
  background: linear-gradient(90deg, var(--ink-faint) 0%, var(--accent-dark) 50%, var(--ink-faint) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color:transparent;
  animation: shimmer-sweep 3.6s ease-in-out infinite;
}
@keyframes shimmer-sweep{
  0%, 100% { background-position: 200% 50% }
  50%      { background-position: 0% 50% }
}

/* --- Stat numerals: warm gradient on emphasis --- */
.n.tinted{
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--signal-dusk) 70%, var(--signal-gold) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Animated section divider line --- */
.div-line{
  height:1px; background:var(--line); position:relative; overflow:hidden;
}
.div-line::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, var(--signal-gold), transparent);
  transform: translateX(-100%);
  animation: scan 4.6s ease-in-out infinite;
}
@keyframes scan{
  0%   { transform: translateX(-100%) }
  60%  { transform: translateX(100%) }
  100% { transform: translateX(100%) }
}

/* --- Reveal variants: side, scale, blur --- */
[data-reveal="left"]{ transform: translateX(-32px); opacity:0; transition: opacity .8s var(--ease-out-snap), transform .8s var(--ease-out-snap) }
[data-reveal="left"].in{ transform: translateX(0); opacity:1 }
[data-reveal="right"]{ transform: translateX(32px); opacity:0; transition: opacity .8s var(--ease-out-snap), transform .8s var(--ease-out-snap) }
[data-reveal="right"].in{ transform: translateX(0); opacity:1 }
[data-reveal="scale"]{ transform: scale(.96); opacity:0; transition: opacity .9s var(--ease-out-soft), transform .9s var(--ease-out-soft) }
[data-reveal="scale"].in{ transform: scale(1); opacity:1 }
[data-reveal="blur"]{ filter: blur(8px); opacity:0; transition: opacity 1s var(--ease-out-soft), filter 1s var(--ease-out-soft) }
[data-reveal="blur"].in{ filter: blur(0); opacity:1 }

/* --- Stagger children automatically when parent has [data-stagger] --- */
[data-stagger] > *{
  opacity:0; transform: translateY(18px);
  transition: opacity .7s var(--ease-out-snap), transform .7s var(--ease-out-snap);
}
[data-stagger].in > *{ opacity:1; transform: translateY(0) }
[data-stagger].in > *:nth-child(1){ transition-delay:.05s }
[data-stagger].in > *:nth-child(2){ transition-delay:.12s }
[data-stagger].in > *:nth-child(3){ transition-delay:.19s }
[data-stagger].in > *:nth-child(4){ transition-delay:.26s }
[data-stagger].in > *:nth-child(5){ transition-delay:.33s }
[data-stagger].in > *:nth-child(6){ transition-delay:.40s }
[data-stagger].in > *:nth-child(7){ transition-delay:.47s }
[data-stagger].in > *:nth-child(8){ transition-delay:.54s }
[data-stagger].in > *:nth-child(9){ transition-delay:.61s }
[data-stagger].in > *:nth-child(10){transition-delay:.68s }
[data-stagger].in > *:nth-child(11){transition-delay:.75s }
[data-stagger].in > *:nth-child(12){transition-delay:.82s }

/* --- Halo glow (pulsing accent on key elements) --- */
.halo{ position:relative }
.halo::before{
  content:""; position:absolute; inset:-8px; border-radius:inherit;
  background: radial-gradient(60% 60% at 50% 50%, rgba(201,162,58,.18), transparent 70%);
  z-index:-1; animation: halo-breathe 4.2s ease-in-out infinite;
}
@keyframes halo-breathe{
  0%, 100% { opacity:.6; transform: scale(1) }
  50%      { opacity:.95; transform: scale(1.04) }
}

/* --- Scroll progress bar --- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--accent-mid), var(--signal-gold));
  z-index:1000; pointer-events:none;
  transition: width .12s linear;
}

/* --- Logo-wall: warm tint on hover --- */
.logo-wall .lc{ position:relative }
.logo-wall .lc::before{
  content:""; position:absolute; inset:0;
  background: var(--grad-warm-gleam); opacity:0; transition: opacity .4s ease;
  pointer-events:none;
}
.logo-wall .lc:hover::before{ opacity:1 }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
}

/* -------- Responsive -------- */
@media (max-width: 1024px){
  .section-head{grid-template-columns:1fr; gap:16px; align-items:start}
  footer.site .top{grid-template-columns:1fr 1fr; gap:40px}
  .logo-wall{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width: 640px){
  :root{--gutter:20px}
  header.site .bar{height:64px}
  nav.primary{display:none}
  section.band{padding:72px 0}
  .cta-band{padding:52px 28px}
  footer.site .top{grid-template-columns:1fr; gap:32px}
  .logo-wall{grid-template-columns:repeat(2, 1fr)}
}

#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #1A1A1A;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), opacity 0.2s ease;
  opacity: 0;
}

header.site { cursor: none; }
header.site * { cursor: none; }