/* ============================================================
   Sparkling — GT Standard (Grilli Type)
   ============================================================ */
@font-face {
  font-family: 'GT Standard';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GT-Standard-Text-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'GT Standard';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GT-Standard-Text-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'GT Standard';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GT-Standard-Text-Semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'GT Standard Display';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GT-Standard-Display-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'GT Standard Display';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GT-Standard-Display-Semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'GT Standard Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GT-Standard-Mono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'GT Standard Mono';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GT-Standard-Mono-Semibold.woff2') format('woff2');
}

/* ============================================================
   Sparkling — Design tokens (OKLCH, brand-hue tinted neutrals)
   Brand hue ≈ 240 (electric blue). Neutrals carry 0.005–0.012 chroma
   toward that hue, so the whole UI shares a subconscious cohesion.
   ============================================================ */
:root {
  /* Backgrounds — tinted near-blacks, no pure #000 */
  --spk-ink:        oklch(0.13 0.012 240);  /* deepest surface */
  --spk-ink-2:      oklch(0.16 0.012 240);  /* one notch up */
  --spk-ink-3:      oklch(0.19 0.011 240);
  --spk-ink-4:      oklch(0.22 0.010 240);

  /* Accent — Sparkling blue */
  --spk-spark:      oklch(0.72 0.18 245);   /* primary accent */
  --spk-spark-2:    oklch(0.66 0.21 248);   /* deeper, for hover */
  --spk-spark-soft: oklch(0.72 0.18 245 / 0.16);

  /* Secondary tints */
  --spk-iris:       oklch(0.34 0.07 290);
  --spk-success:    oklch(0.74 0.17 145);
  --spk-danger:     oklch(0.66 0.22 27);

  /* Lines & dividers — slight cool tint */
  --spk-line:       oklch(0.98 0.005 240 / 0.08);
  --spk-line-2:     oklch(0.98 0.005 240 / 0.14);

  /* Foreground — slightly warm-off white, never #fff */
  --spk-fg:         oklch(0.98 0.005 240);
  --spk-fg-dim:     oklch(0.98 0.005 240 / 0.74);
  --spk-fg-mute:    oklch(0.98 0.005 240 / 0.56);
  --spk-fg-faint:   oklch(0.98 0.005 240 / 0.38);

  /* Type stack — GT Standard (Grilli Type) */
  --spk-font-display: 'GT Standard Display', 'GT Standard', -apple-system, BlinkMacSystemFont, sans-serif;
  --spk-font-text:    'GT Standard', -apple-system, BlinkMacSystemFont, sans-serif;
  --spk-font-mono:    'GT Standard Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --spk-ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --spk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spk-maxw:     1392px;
  --spk-gutter:   24px;
}

/* ============================================================
   Base
   ============================================================ */
html { scrollbar-gutter: stable both-edges; }
html,body { margin:0; padding:0; background:var(--spk-ink); color:var(--spk-fg); font-family:var(--spk-font-text); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
*{ box-sizing:border-box; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
.container { max-width:var(--spk-maxw); margin:0 auto; padding:0 var(--spk-gutter); }
main,footer { position:relative; z-index:1; }

/* ============================================================
   Ambient halftone background
   ============================================================ */
.bg-field { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#000; }
.bg-field::before {
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at center, rgba(58,169,255,0.18) 0.8px, transparent 1.2px);
  background-size:28px 28px;
  mask-image:
    radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, #000 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 65%, #000 0%, transparent 70%);
  -webkit-mask-image:
    radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, #000 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 65%, #000 0%, transparent 70%);
  mask-composite:add; -webkit-mask-composite:source-over;
  opacity:0.55;
}
.bg-field::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(58,169,255,0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 80%, rgba(58,169,255,0.06), transparent 60%);
  opacity:0.7;
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50; padding:18px 0;
  background:linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter:blur(0); transition:backdrop-filter .3s, background .3s;
}
.nav--scrolled {
  background:rgba(0,0,0,0.65); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--spk-line);
}
.nav__inner {
  max-width:var(--spk-maxw); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
}
.nav__logo { display:inline-flex; align-items:center; color:#fff; height:32px; }
.nav__logo svg { height:28px; width:auto; }
.nav__links { display:flex; gap:8px; justify-content:center; }
.nav__link {
  padding:10px 16px; border-radius:10px; font-size:14px; font-weight:500;
  letter-spacing:-0.02em; color:rgba(255,255,255,0.78);
  transition:background .15s, color .15s;
}
.nav__link:hover { background:rgba(255,255,255,0.06); color:#fff; }
.nav__right { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.nav__icon-btn {
  width:40px; height:40px; border-radius:50%; display:inline-grid; place-items:center;
  background:rgba(255,255,255,0.08); color:#fff;
  border:0; cursor:pointer; transition:background .15s;
}
.nav__icon-btn:hover { background:rgba(255,255,255,0.14); }
.nav__icon-btn svg { width:16px; height:16px; }
.nav__cta {
  padding:10px 18px; border-radius:10px; background:#fff; color:#000; border:0;
  font-family:var(--spk-font-display); font-size:14px; font-weight:600;
  letter-spacing:-0.02em; cursor:pointer; transition:transform .15s, box-shadow .2s;
}
.nav__cta:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(255,255,255,0.18); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position:relative;
  min-height:100vh;          /* full viewport */
  min-height:100dvh;         /* iOS safari dynamic */
  padding:180px 24px 140px;  /* more breathing room top + bottom */
  overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#000; z-index:2;
}
.hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; background:#000; }
/* Halftone "bloom" — disabled, video provides the dot pattern.
   Class kept for backward compatibility in case JS references it. */
.hero__bloom { display:none; }
/* Soft aurora behind the bloom — subtle color wash, no rotation distraction */
.hero__aurora {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(58,169,255,0.16), transparent 65%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(110,58,255,0.09), transparent 65%);
  pointer-events:none;
  z-index:-1;
}
/* Hero background video — flower bloom (plays once) then shimmer loop.
   object-fit: cover fills entire hero with the halftone dot pattern.
   Radial mask softly fades video edges into surrounding black, so there's
   no visible rectangle boundary. */
.hero__video {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  transform:translateZ(0);
  z-index:0;
  pointer-events:none;
  opacity:0.7;
  -webkit-mask-image:
    radial-gradient(ellipse 80% 90% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,0.55) 70%, transparent 100%);
          mask-image:
    radial-gradient(ellipse 80% 90% at 50% 50%, #000 0%, #000 40%, rgba(0,0,0,0.55) 70%, transparent 100%);
}
.hero__video--b, .hero__mesh { display:none; }                   /* legacy hidden */
.hero__overlay {
  position:absolute; inset:0;
  /* Top/bottom vignette + soft central darkening so text reads on top of video */
  background:
    radial-gradient(ellipse 100% 70% at 50% 50%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 22%, transparent 70%, #000 100%);
  pointer-events:none; z-index:1;
}
/* Hero content visible by default. Optional JS can still add
   is-bloomed for the rise animation if desired. */
.hero__content { opacity:1; }
.hero__content.is-bloomed { animation:hero-rise 1.6s var(--spk-ease) both; }
.hero__content.is-instant { opacity:1; }
@keyframes hero-rise {
  from { opacity:0; transform:translateY(28px) scale(0.96); filter:blur(10px); }
  to   { opacity:1; transform:translateY(0)    scale(1);   filter:blur(0);    }
}
.hero__bg { opacity:1; transition:opacity 2.2s var(--spk-ease); }
.hero__bg.is-bloomed { opacity:1; }
.hero__bg.is-instant { opacity:1; }
.hero__content {
  position:relative; z-index:2; text-align:center;
  max-width:840px; margin:0 auto; padding-top:0; width:100%;
}
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:10px;
  font-family:var(--spk-font-mono); font-size:13px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  margin-bottom:28px;
}
.hero__eyebrow-icon { color:#fff; opacity:0.95; flex-shrink:0; }
.hero__eyebrow-dot { display:none; }    /* old dot, replaced by icon */
.hero__title {
  font-family:var(--spk-font-display); font-size:clamp(44px,7vw,96px);
  line-height:0.98; letter-spacing:-0.045em; font-weight:500;
  margin:0 0 24px; color:#fff;
}
.hero__title em {
  font-style:normal;
  color:var(--spk-spark);
}
.hero__sub {
  font-size:clamp(16px,1.4vw,20px); font-weight:400; line-height:1.45;
  letter-spacing:-0.01em; color:#fff;
  max-width:620px; margin:0 auto 40px;
}
.hero__cta-row { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
.hero__btn {
  padding:14px 24px; border-radius:12px; font-family:var(--spk-font-display);
  font-size:15px; font-weight:600; letter-spacing:-0.02em; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s, box-shadow .2s;
}
.hero__btn--primary {
  background:#fff; color:#000;
  box-shadow:0 4px 24px rgba(255,255,255,0.15);
}
.hero__btn--primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(255,255,255,0.25); }
.hero__btn--ghost {
  background:transparent; color:#fff;
  padding:14px 8px;
}
.hero__btn--ghost:hover { color:var(--spk-spark); }

/* ============================================================
   Powering strip — partner logos under hero
   ============================================================ */
/* ============================================================
   PARTNERS MARQUEE — fresh build
   ------------------------------------------------------------
   Centered label + infinite horizontal scroll with edge fades.
   Seamless: animation uses CSS variables tied to the duplicated
   track width, so loop point is mathematically exact.
   ============================================================ */
.pmq {
  --pmq-gap: 80px;
  --pmq-speed: 36s;

  /* Section spans full viewport, breaking out of any parent's content area */
  position:relative; z-index:2;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  padding:32px 0 64px;
  background:#000;

  text-align:center;          /* centers .pmq__label */
}
.pmq__label {
  display:block;
  margin:0 0 28px;
  font-family:var(--spk-font-mono);
  font-size:11px; font-weight:500;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(255,255,255,0.4);
}
.pmq__viewport {
  position:relative;
  width:100%;               /* takes full .pmq width = full viewport */
  overflow:hidden;
  text-align:left;          /* reset text-align inherited from .pmq */
}
/* Edge fades — gradient overlays. Bg color matches .pmq section bg (#000)
   so the gradient appears to fade into the surrounding surface. */
.pmq__viewport::before,
.pmq__viewport::after {
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}
.pmq__viewport::before {
  left:0;
  background:linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
}
.pmq__viewport::after {
  right:0;
  background:linear-gradient(to left, #000 0%, rgba(0,0,0,0) 100%);
}
.pmq__track {
  display:flex; flex-wrap:nowrap; width:max-content;
  align-items:center;
  animation: pmq-scroll var(--pmq-speed) linear infinite;
  will-change:transform;
}
.pmq__track:hover { animation-play-state:paused; }
/* Each logo carries its own right margin = gap. We render 3 identical sets of
   6 logos (= 18 total). Animation translates by -33.333% = exactly one set.
   3 sets guarantee the track is ALWAYS wider than viewport, so the right edge
   never appears mid-screen and the right fade is always over real content. */
.pmq__logo { margin-right: var(--pmq-gap); }
@keyframes pmq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) {
  .pmq__track { animation: none; }
}
.pmq__logo {
  display:inline-flex; align-items:center; gap:10px;
  flex-shrink:0; height:28px;
  font-family:var(--spk-font-display);
  font-size:20px; font-weight:600;
  letter-spacing:-0.025em;
  color:rgba(255,255,255,0.5);
  transition: color .2s;
}
.pmq__logo:hover { color:#fff; }
.pmq__logo svg { height:24px; width:auto; flex-shrink:0; }
.pmq__logo--ml  svg { height:18px; }
.pmq__logo--sui svg { height:22px; }
.pmq__logo--gpt svg { height:22px; }
.pmq__logo--ce  svg { height:22px; }
.pmq__logo--unc svg { height:20px; }
.pmq__logo--tetra svg { height:22px; }
@media (max-width:680px) {
  .pmq { --pmq-gap:48px; --pmq-speed:24s; }
  .pmq__logo { font-size:15px; height:22px; }
  .pmq__logo svg { height:18px; }
}

/* ============================================================
   Section primitives
   ============================================================ */
.section { position:relative; padding:80px 0; background:transparent; }
.shead {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:48px; flex-wrap:wrap;
}
.shead__main { max-width:680px; }
.shead__kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--spk-font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.55);
  margin:0 0 18px; padding:6px 12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--spk-line);
  border-radius:6px;
}
.shead__title {
  font-family:var(--spk-font-display); font-size:clamp(32px,4.2vw,52px);
  line-height:1.04; letter-spacing:-0.035em; font-weight:600;
  margin:0 0 14px; color:#fff;
}
.shead__sub { font-size:16px; line-height:1.55; color:rgba(255,255,255,0.55); margin:0; max-width:580px; }
.shead__aside { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
/* Explore button — uniform across all sections regardless of bg behind */
.shead__explore {
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 16px;
  border-radius:10px;
  /* Solid dark fill so section bg/halftone doesn't bleed through */
  background:#0E1118;
  border:1px solid rgba(255,255,255,0.10);
  color:#fff;
  font-family:var(--spk-font-display);
  font-size:14px; font-weight:500;
  letter-spacing:-0.01em;
  white-space:nowrap;
  cursor:pointer;
  transition: background .2s var(--spk-ease), border-color .2s var(--spk-ease), transform .2s var(--spk-ease);
  text-decoration:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.shead__explore:hover {
  background:#181B23;
  border-color:rgba(255,255,255,0.18);
  transform:translateY(-1px);
}
.shead__explore svg { width:14px; height:14px; }

/* ============================================================
   Advantages — phone (with halftone bg) + 5-item list
   ============================================================ */
.adv-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }

.adv-phone-card {
  position:relative; border-radius:28px; overflow:hidden;
  background:#000; min-height:560px;
  display:flex; align-items:center; justify-content:center;
  padding:32px;
}
.adv-phone-card::before {
  content:""; position:absolute; inset:0;
  background:none center / cover no-repeat;
  opacity:1; z-index:0;
}
.adv-phone-card::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 60%, transparent 0%, rgba(0,0,0,0.45) 100%);
  z-index:1; pointer-events:none;
}
.adv-phone {
  position:relative; z-index:2;
  width:260px; aspect-ratio:201 / 437;
  border-radius:32px; overflow:hidden;
  background:#000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 20px 60px -10px rgba(0,0,0,0.7),
    0 40px 100px -20px rgba(58,169,255,0.25);
  transition:transform .6s var(--spk-ease);
}
.adv-phone:hover { transform:translateY(-6px); }
.adv-phone img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}

/* Hover accordion (per Figma). Each item is collapsed by default
   showing only the title. On hover the description slides in and
   the row gets a subtle highlight. */
.adv-list {
  display:flex; flex-direction:column;
  gap:8px;
}
.adv-item {
  position:relative;
  border-radius:16px;
  padding:18px 22px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  transition: background .35s var(--spk-ease), border-color .35s var(--spk-ease);
  cursor:default;
}
.adv-item__head {
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:16px;
}
.adv-item__icon {
  width:22px; height:22px; border-radius:0;
  background:transparent; color:var(--spk-fg-mute);
  display:grid; place-items:center; flex-shrink:0;
  transition: color .25s var(--spk-ease-out);
}
.adv-item__icon svg { width:18px; height:18px; }
.adv-item:hover .adv-item__icon,
.adv-item:focus-within .adv-item__icon { color:var(--spk-spark); }
.adv-item__title {
  font-family:var(--spk-font-display); font-size:18px; font-weight:600;
  letter-spacing:-0.015em; color:#fff; margin:0;
}
.adv-item__chevron { display:none; }
.adv-item__desc {
  margin:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,0.62);
  transition: max-height .4s var(--spk-ease), opacity .3s var(--spk-ease), margin .4s var(--spk-ease);
  padding-left:52px;          /* aligns under title text (icon + gap) */
}
/* Hover state — expand */
.adv-item:hover,
.adv-item:focus-within {
  background:rgba(58,169,255,0.06);
  border-color:oklch(0.72 0.18 245 / 0.22);
}
.adv-item:hover .adv-item__desc,
.adv-item:focus-within .adv-item__desc {
  max-height:120px;
  opacity:1;
  margin-top:12px;
}

/* ============================================================
   Flow — halftone cards
   ============================================================ */
.flow-meta { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.flow-meta__label {
  font-family:var(--spk-font-mono); font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.4); margin-right:6px;
}
.chain-pill {
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,0.04); border:1px solid var(--spk-line);
  font-family:var(--spk-font-mono); font-size:11px;
  color:rgba(255,255,255,0.75); letter-spacing:0.04em;
  display:inline-flex; align-items:center; gap:6px;
}
.chain-pill__dot { width:6px; height:6px; border-radius:50%; }

.flow-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}

.flow-card {
  position:relative; border-radius:20px; overflow:hidden;
  background:#0A0D12; border:1px solid var(--spk-line);
  display:flex; flex-direction:column;
  min-height:300px;
  transition:transform .3s var(--spk-ease), border-color .3s;
  cursor:default;
}
.flow-card:hover { border-color:rgba(58,169,255,0.3); }
.flow-card__art {
  height:150px; position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.flow-card__art::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6) 100%);
}
.flow-card__art--land    { background-image:none; }
.flow-card__art--onboard { background-image:none; }
.flow-card__art--deposit { background-image:none; }
.flow-card__art--ask     { background-image:none; }
.flow-card__art--confirm { background-image:none; }
.flow-card__art--done    { background-image:none; }
.flow-card__icon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(0,0,0,0.55);   display:grid; place-items:center; color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  z-index:1;
}
.flow-card__icon svg { width:22px; height:22px; }
.flow-card__body { padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; gap:4px; }
.flow-card__num {
  font-family:var(--spk-font-mono); font-size:10px; letter-spacing:0.18em;
  color:var(--spk-spark); margin:0;
}
.flow-card__title {
  font-family:var(--spk-font-display); font-size:18px; font-weight:600;
  letter-spacing:-0.025em; color:#fff; margin:0;
}
.flow-card__desc { font-size:12px; line-height:1.5; color:rgba(255,255,255,0.6); margin:4px 0 0; }

/* ---- Step cards — 6 cards fit in one row (no slider) ----
   - 6 designer SVG cards rendered as-is
   - 6-column grid, equal-width cards
   - Default dimmed, hover restores
*/
.flow-scroller {
  position:relative;
  overflow:visible;
  margin:0;
  padding:0;
}
.flow-scroller::-webkit-scrollbar { display:none; }
.flow-scroller .flow-grid {
  display:grid !important;
  grid-template-columns:repeat(6, 1fr);
  gap:12px;
  width:100%;
  align-items:stretch;
}
.flow-card--img {
  position:relative;
  display:block;
  width:auto;
  aspect-ratio: 348 / 425;
  border-radius:16px;
  overflow:hidden;
  background:#13161D !important;
  border:0 !important;
  min-height:0 !important;
  cursor:pointer;
  isolation:isolate;
}
/* Both Idle and Active SVGs stacked. Idle holds the rest state; Active
   fades in on hover with a tight cubic-bezier so the swap feels snappy
   (not lazy) and never causes a paint stall. */
.flow-card--img img {
  position:absolute; inset:0;
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:16px;
  transition: opacity .22s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flow-card--img .flow-card__idle   { opacity:1; z-index:1; }
.flow-card--img .flow-card__active { opacity:0; z-index:2; }
.flow-card--img:hover .flow-card__idle   { opacity:0; }
.flow-card--img:hover .flow-card__active { opacity:1; }

@media (prefers-reduced-motion: reduce) {
  .flow-card--img img { transition: none; }
}

/* Step cards — opacity 1 always; hover handled by img layer swap above */
.flow-card--img { opacity:1; }

/* Hide legacy overlay parts since SVG is self-contained */
.flow-card--img .flow-card__art,
.flow-card--img .flow-card__icon,
.flow-card--img .flow-card__body { display:none; }

/* Step cards now in a 6-column grid (no slider).
   On narrower screens drop to 3 cols, then 2. */
@media (max-width:1024px) {
  .flow-scroller .flow-grid { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:680px) {
  .flow-scroller .flow-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
}
@media (max-width:420px) {
  .flow-scroller .flow-grid { grid-template-columns:1fr; }
}

/* ============================================================
   Agents — 4 colored halftone cards
   ============================================================ */
.agents-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }

/* Card structure: background art is dimmed by default; text stays bright */
.agent-card {
  position:relative; aspect-ratio:1 / 1.25;
  border-radius:24px; overflow:hidden;
  background:#000; border:1px solid var(--spk-line);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px;
  transition: transform .3s var(--spk-ease);
  cursor:default;
}
/* No size/position change on hover — cards stay rooted. */
/* Static agent-card art. Single image per card (baked dim). No hover
   crossfade, no filter, no transform on the image itself — only the card
   lifts on hover. Cheapest possible composition. */
.agent-card__art {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.agent-card__art::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%);
}
/* Per-card halftone art (original Higgsfield variants, with labels).
   Static at rest, dimmed; on hover the card lifts and the image
   pops to full brightness. No pulse, no scale — just clean reveal. */
/* Agent cards — inline SVG halftone bgs (~500-900 circles each).
   Static at rest, dimmed via brightness filter. On hover the
   individual dots pulse opacity in waves (per-circle animation-delay
   baked into the inline style attribute). Same look + feel as the
   flow cards in Under Two Minutes. */
.agent-card__art {
  filter: brightness(0.82);
  transition: filter .3s var(--spk-ease-out);
}
.agent-card:hover .agent-card__art {
  filter: brightness(1.15);
}
.agent-card__art-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}
.agent-card__art-svg circle {
  animation: agentDotPulse 2.4s ease-in-out infinite;
  animation-play-state: paused;
}
.agent-card:hover .agent-card__art-svg circle {
  animation-play-state: running;
}
@keyframes agentDotPulse {
  0%, 100% { opacity: 1;    }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-card__art-svg circle { animation: none; }
}

/* Hide the small dot before each pill label (Perpetuals / Swaps / etc.). */
.agent-card__pill::before { display: none !important; }

.agent-card__body {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  width:100%;
}
/* Pill — bottom-left, bigger than before */
.agent-card__pill {
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:999px;
  background:rgba(0,0,0,0.72);   border:1px solid rgba(255,255,255,0.16);
  font-family:var(--spk-font-display); font-size:17px; font-weight:600;
  letter-spacing:-0.015em; color:#fff;
}
.agent-card__pill::before {
  content:""; width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,0.55);
}
/* Brief tag — always visible, small mono badge */
.agent-card__tag {
  margin:0;
  padding:7px 12px;
  background:rgba(0,0,0,0.55);   color:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  font-family:var(--spk-font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.10em; text-transform:uppercase; line-height:1.3;
  max-width:calc(100% - 4px);
  transition: background .3s, color .3s, border-color .3s;
}
/* Detail row — reserves fixed space ALWAYS so pill/tag stay at the same
   vertical position across all 4 cards. Only opacity flips on hover, so the
   detailed descriptions appear/disappear at exactly the same height. */
.agent-card__detail {
  margin:8px 0 0;
  height:90px;
  overflow:hidden;
  opacity:0;
  color:rgba(255,255,255,0.78);
  font-family:var(--spk-font-text); font-size:13px; font-weight:400;
  line-height:1.45; letter-spacing:-0.005em;
  transition: opacity .35s var(--spk-ease);
}
.agent-card:hover .agent-card__detail {
  opacity:1;
}
.agent-card:hover .agent-card__tag {
  background:#fff;
  color:#000;
  border-color:#fff;
}

/* ============================================================
   Partnerships
   ============================================================ */
.partners { padding:80px 0 100px; background:transparent; }
.partners__head { text-align:center; margin-bottom:48px; max-width:760px; margin-left:auto; margin-right:auto; }
.partners__kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--spk-font-mono); font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(255,255,255,0.55);
  margin:0 0 18px; padding:6px 12px;
  background:rgba(255,255,255,0.04); border:1px solid var(--spk-line);
  border-radius:6px;
}
.partners__title {
  font-family:var(--spk-font-display); font-size:clamp(28px,3vw,44px);
  font-weight:600; letter-spacing:-0.025em; line-height:1.1; margin:0 0 14px;
}
.partners__title em {
  font-style:normal;
  color:var(--spk-spark);
}
.partners__sub { font-size:15px; color:rgba(255,255,255,0.55); max-width:560px; margin:0 auto; line-height:1.5; }
.partners__grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:1100px) { .partners__grid { grid-template-columns:repeat(2, 1fr); } }
.partner {
  position:relative; display:grid;
  grid-template-columns:auto 1fr;
  align-items:start; gap:24px;
  padding:32px; border-radius:24px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.06);
  transition: background .3s var(--spk-ease-out), border-color .3s var(--spk-ease-out);
  text-decoration:none; color:inherit; overflow:hidden;
}
.partner:hover {
  background:oklch(0.72 0.18 245 / 0.07);
  border-color:oklch(0.72 0.18 245 / 0.22);
}
.partner__arrow { display:none !important; }
/* Uniform 64x64 mark container — same border-radius for every partner */
.partner__mark {
  width:64px; height:64px;
  border-radius:14px;
  flex-shrink:0;
  position:relative; z-index:1;
  display:grid; place-items:center;
  overflow:hidden;
}
/* TetraChain — icon-only on cream square */
.partner__mark--paper { background:#E4DACB; }
.partner__mark--paper img { width:58%; height:58%; object-fit:contain; }
/* TON & Wallet — all-in-one SVG (icon already includes its colored background)
   so the SVG fills the full 64x64 mark area */
.partner__mark:not(.partner__mark--paper) img,
.partner__mark:not(.partner__mark--paper) svg {
  width:100%; height:100%; object-fit:contain;
  border-radius:14px;
}
.partner__body { position:relative; z-index:1; }
.partner__role {
  font-family:var(--spk-font-mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:8px;
}
.partner__name { font-family:var(--spk-font-display); font-size:28px; font-weight:600; letter-spacing:-0.025em; margin:0 0 10px; color:#fff; }
.partner__desc { font-size:14px; line-height:1.55; color:rgba(255,255,255,0.65); margin:0; }
.partner__arrow {
  align-self:center; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.6);
  transition:transform .25s var(--spk-ease), color .25s;
  position:relative; z-index:1; flex-shrink:0;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background:rgba(0,0,0,0.6);   padding:80px 0 36px;
}
.footer__top {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:48px;
  margin-bottom:64px;
}
.footer__brand-logo { display:flex; align-items:center; gap:12px; margin-bottom:16px; color:#fff; }
.footer__brand-logo svg { height:28px; width:auto; }
.footer__brand-tag { font-size:14px; color:rgba(255,255,255,0.5); max-width:280px; line-height:1.5; }
.footer__col h4 {
  font-family:var(--spk-font-mono); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,0.4); margin:0 0 16px; font-weight:500;
}
.footer__col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer__col a {
  font-size:14px; color:rgba(255,255,255,0.7); transition:color .15s;
  display:inline-flex; align-items:center; gap:8px;
}
.footer__col a:hover { color:#fff; }
.footer__col svg { width:14px; height:14px; }
.footer__bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--spk-line);
  font-family:var(--spk-font-mono); font-size:12px; color:rgba(255,255,255,0.4);
  letter-spacing:0.04em;
}
.footer__socials { display:flex; gap:8px; }
.footer__socials a {
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.05);
  display:grid; place-items:center; color:rgba(255,255,255,0.6); transition:all .2s;
}
.footer__socials a:hover { background:rgba(255,255,255,0.12); color:#fff; }
.footer__socials svg { width:14px; height:14px; }

/* ============================================================
   RESPONSIVE — comprehensive cascade
   Breakpoints (mobile-first cascade, but written as max-width):
     ≤1280  large laptop  (container narrows)
     ≤1100  small laptop  (flow → 2 cols, adv stacks)
     ≤900   tablet        (agents → 2 cols, partners stacks)
     ≤720   mobile-large  (hero scales, nav links hide)
     ≤480   mobile-small  (1-col everything, tighter)
     ≤360   tiny phones   (font + padding minimum)
   ============================================================ */

/* ---- ≤1280: narrow gutter for small laptops ---- */
@media (max-width:1280px) {
  :root { --spk-gutter: 32px; }
  .flow-grid { grid-template-columns:repeat(4, 1fr); gap:16px; }
}

/* ---- ≤1100: small laptop / large tablet landscape ---- */
@media (max-width:1100px) {
  :root { --spk-gutter: 28px; }
  .hero__title { font-size:clamp(40px, 6.8vw, 72px); }
  .adv-grid { grid-template-columns:1fr; gap:28px; }
  .adv-phone-card { aspect-ratio:auto; min-height:480px; }
  .agents-grid { grid-template-columns:repeat(4, 1fr); gap:16px; }
  .flow-grid { grid-template-columns:repeat(2, 1fr); }
  .footer__top { grid-template-columns:repeat(3, 1fr); gap:32px; }
  .footer__top > div:first-child { grid-column:1 / -1; max-width:540px; }
  .pmq { --pmq-gap:64px; }
}

/* ---- ≤900: tablet portrait ---- */
@media (max-width:900px) {
  :root { --spk-gutter: 24px; }
  .section { padding:64px 0; }
  .shead { flex-direction:column; align-items:flex-start; gap:20px; }
  .shead__aside { margin-top:0; }
  .agents-grid { grid-template-columns:repeat(2, 1fr); gap:16px; }
  .partners__grid { grid-template-columns:1fr; gap:16px; }
  .partners { padding:64px 0 80px; }
  .partner__name { font-size:24px; }
  .pmq { --pmq-gap:48px; --pmq-speed:28s; }
  .pmq__logo { font-size:18px; }
  .pmq__logo svg { height:22px; }
}

/* ---- ≤720: mobile / phone-landscape ---- */
@media (max-width:720px) {
  :root { --spk-gutter: 20px; }
  .nav { padding:14px 0; }
  .nav__links { display:none; }
  .nav__inner { grid-template-columns:auto 1fr auto; gap:12px; }
  .nav__right .nav__icon-btn { display:none; }
  .nav__cta { padding:8px 14px; font-size:13px; }
  .nav__logo svg { height:24px; }

  .hero { padding:100px var(--spk-gutter) 48px; min-height:auto; }
  .hero__content { max-width:none; padding-top:24px; }
  .hero__title { font-size:clamp(32px, 8.5vw, 52px); line-height:1.05; }
  .hero__sub { font-size:15px; }
  .hero__eyebrow { font-size:11px; padding:6px 10px; height:30px; gap:8px; }
  .hero__cta-row { flex-direction:column; gap:10px; }
  .hero__btn { width:100%; justify-content:center; padding:14px 18px; font-size:15px; height:auto; }

  .section { padding:56px 0; }
  .shead { margin-bottom:32px; gap:14px; }
  .shead__title { font-size:clamp(28px, 6vw, 36px); }
  .shead__sub { font-size:16px; }

  .flow-grid { grid-template-columns:1fr; gap:14px; }
  .agents-grid { grid-template-columns:1fr; gap:14px; }
  .agent-card { aspect-ratio:1 / 0.85; }

  .partners__panel { padding:24px; border-radius:24px; }
  .partner { padding:18px 20px; gap:16px; flex-direction:column; align-items:flex-start; }
  .partner__mark { width:48px; height:48px; }

  .footer { padding:48px 0 32px; }
  .footer__top { grid-template-columns:repeat(2, 1fr); gap:28px; margin-bottom:32px; }
  .footer__top > div:first-child { grid-column:1 / -1; }
  .footer__brand-tag { font-size:14px; }
  .footer__bottom { flex-direction:column; gap:16px; align-items:flex-start; }

  .pmq { padding:24px 0 40px; --pmq-gap:36px; --pmq-speed:22s; }
  .pmq__label { font-size:10px; margin-bottom:20px; }
  .pmq__logo { font-size:15px; height:24px; }
  .pmq__logo svg { height:18px; }
  .pmq__viewport::before,
  .pmq__viewport::after { width:60px; }
}

/* ---- ≤480: small mobile ---- */
@media (max-width:480px) {
  :root { --spk-gutter: 16px; }
  .hero { padding:90px var(--spk-gutter) 40px; }
  .hero__title { font-size:clamp(30px, 9vw, 42px); }
  .hero__sub { font-size:14px; max-width:none; }
  .section { padding:48px 0; }
  .shead__title { font-size:28px; }
  .shead__sub { font-size:15px; }
  .footer__top { grid-template-columns:1fr; gap:24px; }
  .pmq { --pmq-gap:28px; --pmq-speed:18s; }
  .pmq__logo { font-size:14px; }
  .pmq__logo svg { height:16px; }
}

/* ---- ≤360: tiny phones (iPhone SE 1st gen, old Androids) ---- */
@media (max-width:360px) {
  :root { --spk-gutter: 14px; }
  .hero__title { font-size:28px; }
  .nav__cta { font-size:12px; padding:8px 12px; }
  .shead__title { font-size:24px; }
}

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

/* ============================================================
   Halftone backgrounds — illustrations behind Under two minutes & Footer
   ============================================================ */
.section--halftone,
.footer--halftone {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* Under two minutes — designer's StepsToProductSection landscape backdrop.
   Slow drift + gentle opacity breathing for ambient motion. */
.section--halftone::before {
  content:"";
  position:absolute; inset:-4% -8%;     /* overshoot so drift never reveals edges */
  background-image:url("StepsToProductSection.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:0.20;
  pointer-events:none;
  z-index:-1;
  animation: halftoneDrift 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
@keyframes halftoneDrift {
  0%   { transform: translate3d(-3%, -1.2%, 0) scale(1.05); opacity: 0.12; }
  50%  { transform: translate3d( 3%,  1.5%, 0) scale(1.10); opacity: 0.28; }
  100% { transform: translate3d(-1%,  0.6%, 0) scale(1.06); opacity: 0.16; }
}
@media (prefers-reduced-motion: reduce) {
  .section--halftone::before { animation: none; }
}
/* Footer — halftone illustration */
.footer--halftone::before {
  content:"";
  position:absolute; inset:0;
  background-image:url("assets/halftone-footer.webp");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:0.35;
  pointer-events:none;
  z-index:-1;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 100%);
}
.section--halftone > *,
.footer--halftone > * { position:relative; z-index:1; }

/* ============================================================
   Hero eyebrow — glass effect (backdrop blur, no solid fill)
   ============================================================ */
.hero__eyebrow {
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero__eyebrow-icon {
  width:18px; height:18px;
  border-radius:50%;
  display:inline-block;
  vertical-align:middle;
}

/* ============================================================
   Advantages list — fixed item heights so hover never shifts layout.
   Each item reserves space for its description; only opacity flips.
   ============================================================ */
.adv-list {
  gap:10px !important;
  justify-content:space-between !important;
  height:100%;
}
/* All 6 items same fixed size. Title sits at the left; description
   occupies the remaining space on the right (reserved at rest so
   the row width never changes — only the description's opacity
   transitions on hover). No layout shift, no resize. */
.adv-item {
  min-height:108px;
  padding:22px 24px !important;
  display:flex !important;
  flex-direction:row;
  align-items:center;
  gap:24px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:16px;
  transition: background .25s var(--spk-ease-out),
              border-color .25s var(--spk-ease-out);
  contain:layout;
}
.adv-item__head {
  display:flex !important;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.adv-item__desc {
  margin:0 !important;
  padding:0;
  flex:1 1 0;
  min-width:0;
  max-height:none;
  overflow:hidden;
  opacity:0;
  font-size:13px;
  line-height:1.45;
  color:var(--spk-fg-mute);
  text-align:right;
  transition: opacity .3s var(--spk-ease-out);
}
.adv-item:hover,
.adv-item:focus-within {
  background:oklch(0.72 0.18 245 / 0.07);
  border-color:oklch(0.72 0.18 245 / 0.22);
}
.adv-item:hover .adv-item__desc,
.adv-item:focus-within .adv-item__desc {
  opacity:1;
}

/* ============================================================
   FINAL OVERRIDES — column alignment + halftone scale match
   ============================================================ */
/* Right column items distribute evenly to match the height of the left phone card */
.adv-grid { align-items:stretch; }
.adv-list {
  height:100%;
  justify-content:space-between !important;
  gap:0 !important;
}

/* Layered composition for the left card:
   - Layer 1: Illustration.svg as DIMMED halftone background
   - Layer 2: image 1041.svg phone overlaid at FULL brightness with float anim */
.adv-phone-card--svg {
  padding:0 !important;
  overflow:hidden;
  min-height:680px !important;
  position:relative;
  cursor:default;
  border-radius:28px;
}
.adv-phone-card--svg::before { display:none !important; }
.adv-phone-card--svg::after { display:none !important; }
.adv-phone-card--svg .adv-phone { display:none !important; }

/* TWO copies of the same Illustration.svg, layered:
   - Background copy: dimmed, the halftone landscape shows muted
   - Phone copy: same SVG but clip-path shows ONLY the phone area, full brightness
   Phone position inside Illustration.svg (608×598):
     x = 104..504 (~17%..83% of width)
     y = 60..598  (~10%..100% of height) */
/* Layer 1: Illustration.svg halftone landscape — DIMMED full-card background.
   Layer 2: Phone (2).png — high-quality phone centered on top, FULL brightness. */
.adv-phone-card__bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  filter: brightness(0.55) saturate(0.75);
  z-index:1;
}
.adv-phone-card__phone {
  position:absolute;
  left:50%;
  bottom:-4%;             /* phone anchored low, slightly extending past bottom */
  top:auto;
  width:auto;
  height:95%;             /* taller to fill bottom area where designer phone sits */
  max-width:78%;
  object-fit:contain;
  transform:translateX(-50%);
  z-index:2;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.55));
  animation: advFloat 6s ease-in-out infinite;
  transition: transform .6s var(--spk-ease);
  will-change:transform;
}
/* advFloat removed — was a continuous transform animation costing GPU
   time for a 6px bob nobody asked for. Hover lift still moves the phone. */
@keyframes advFloat { 0%,100%{transform:translateX(-50%)} }
.adv-phone-card--svg:hover .adv-phone-card__phone {
  transform:translateX(-50%) translateY(-8px) scale(1.03);
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce) {
  .adv-phone-card__phone { animation:none; }
}

/* ============================================================
   Reduced-motion — kill all ambient + decorative animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bg-field::before,
  .bg-field::after,
  .hero__content,
  .adv-phone-card__phone,
  .pmq__track {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Sparkle logo — staggered twinkle on hover (nav + footer)
   20 circles in 4 concentric rings (center → outer). Each ring
   pulses with progressive delay so the sparkle "ignites" outward.
   ============================================================ */
.sparkle-logo { cursor: pointer; }
.sparkle-logo circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .25s ease-out;
}
.nav__logo:hover .sparkle-logo circle,
.footer__brand-logo:hover .sparkle-logo circle {
  animation: sparkle-twinkle 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  fill: #3AA9FF;
}
/* Ring 1: 4 large center circles — first to ignite */
.sparkle-logo circle:nth-of-type(-n+4)                  { animation-delay: 0ms;   }
/* Ring 2: 8 medium circles */
.sparkle-logo circle:nth-of-type(n+5):nth-of-type(-n+12){ animation-delay: 100ms; }
/* Ring 3: 4 outer-medium circles */
.sparkle-logo circle:nth-of-type(n+13):nth-of-type(-n+16){animation-delay: 200ms; }
/* Ring 4: 4 corner circles — last to ignite */
.sparkle-logo circle:nth-of-type(n+17):nth-of-type(-n+20){animation-delay: 300ms; }

@keyframes sparkle-twinkle {
  0%   { transform: scale(1);   opacity: 1;   }
  25%  { transform: scale(2.0); opacity: 0.4; }
  55%  { transform: scale(0.7); opacity: 1;   }
  80%  { transform: scale(1.15); }
  100% { transform: scale(1);   opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .nav__logo:hover .sparkle-logo circle,
  .footer__brand-logo:hover .sparkle-logo circle {
    animation: none;
  }
}

/* "sparkling" wordmark — blue wave sweeps left-to-right on hover.
   Each letter transitions white → blue with a 55ms stagger so the
   color reads as a single wave travelling across the word.
   On hover-out, all letters fade back to white together (no
   reverse-wave) for a clean reset. */
.sparkle-text tspan {
  fill: #fff;
  transition: fill .28s ease-out;
}
.nav__logo:hover .sparkle-text tspan,
.footer__brand-logo:hover .sparkle-text tspan { fill: #3AA9FF; }
/* Stagger the wave (only applies on the hover-in transition;
   on hover-out, delays revert to 0 so the wash-back is uniform). */
.nav__logo:hover .sparkle-text tspan:nth-of-type(1),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(1) { transition-delay: 60ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(2),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(2) { transition-delay: 115ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(3),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(3) { transition-delay: 170ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(4),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(4) { transition-delay: 225ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(5),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(5) { transition-delay: 280ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(6),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(6) { transition-delay: 335ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(7),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(7) { transition-delay: 390ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(8),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(8) { transition-delay: 445ms; }
.nav__logo:hover .sparkle-text tspan:nth-of-type(9),
.footer__brand-logo:hover .sparkle-text tspan:nth-of-type(9) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .nav__logo:hover .sparkle-text tspan,
  .footer__brand-logo:hover .sparkle-text tspan { transition-delay: 0s !important; }
}

/* Phone card halftone backdrop: inline SVG of ~2.7k blue circles
   vectorized from the Higgsfield halftone WebP. Static at rest;
   on hover the circles pulse opacity in 2.7k different phases
   (each circle's animation-delay is baked into its style attr). */
.adv-phone-card__bg {
  filter: none !important;
}
.adv-phone-card__bg-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.adv-phone-card__bg-svg circle {
  animation: phoneBgDotPulse 2.4s ease-in-out infinite;
  animation-play-state: paused;
}
#advPhone.is-scrolling .adv-phone-card__bg-svg circle {
  animation-play-state: running;
}
@keyframes phoneBgDotPulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .adv-phone-card__bg-svg circle { animation: none; }
}

/* Reduced motion: pause the video at frame 0 (handled by JS scrub script). */