/* =========================================================
   LIQUID GLASS — extracted from "Liquid Glass UI Kit" v2.
   One recipe. One light. Reused everywhere.
   ========================================================= */
:root{
  /* ink */
  --ink-1:#101216;
  --ink-2:#3a3f48;
  --ink-3:#6a7280;
  --ink-4:#9aa3ad;
  --ink-5:#c8cdd4;

  /* page surface — cool, slightly warm white */
  --page-1:#f3f4f6;
  --page-2:#e7e9ee;
  --page-3:#dadde3;

  /* status / accents (used SPARINGLY — one accent across the kit) */
  --accent:#3b6df0;
  --success:#1f9d6b;
  --danger:#d04646;

  /* type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- GLASS RECIPE TOKENS ---------- */
  --gl-shell-tint: linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0.10) 100%);
  --gl-shell-blur: 24px;
  --gl-shell-sat: 1.35;

  --gl-edge: rgba(255,255,255,0.78);
  --gl-hl-top: rgba(255,255,255,0.95);
  --gl-hl-bot: rgba(255,255,255,0.25);
  --gl-inner-stroke: rgba(255,255,255,0.42);
  --gl-inner-offset: 5px;

  --gl-shadow:
    0 1px 1px rgba(20,24,32,0.04),
    0 6px 12px -4px rgba(20,24,32,0.08),
    0 22px 40px -12px rgba(20,24,32,0.14),
    0 40px 64px -28px rgba(20,24,32,0.12);

  --gl-plate-tint: linear-gradient(180deg, rgba(255,255,255,0.66), rgba(255,255,255,0.46));
  --gl-plate-edge: rgba(255,255,255,0.85);
  --gl-plate-inner: rgba(0,0,0,0.04);

  /* radii */
  --r-xl: 28px;  --r-lg: 22px;  --r-md: 14px;  --r-sm: 10px;  --r-pill: 999px;

  /* spacing */
  --s-1: 6px;  --s-2: 10px; --s-3: 14px; --s-4: 18px;
  --s-5: 24px; --s-6: 32px; --s-7: 44px; --s-8: 64px;
}

/* ---------------------------------------------------------
   PAGE BACKGROUND — soft blobs PROVE transparency works
   --------------------------------------------------------- */
.page-bg{
  position:relative;
  isolation:isolate;
  background: var(--page-1);
}
.page-bg::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  background: url("gradient-bg.png") center center / cover no-repeat;
}
.page-bg::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------
   GLASS — THE RECIPE
   --------------------------------------------------------- */
@property --spot{ syntax:'<number>'; inherits:false; initial-value:0; }

.glass{
  position: relative;
  /* base mauve fill, untouched — a cursor-tracking spotlight glow layers on top.
     With --spot:0 the gradient is fully transparent, so the resting look is identical. */
  background:
    radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255, calc(0.20 * var(--spot,0))) 0%,
      rgba(255,255,255, calc(0.07 * var(--spot,0))) 38%,
      transparent 62%),
    rgba(219, 207, 221, 0.5);
  /* cursor-driven 3D tilt — rests flat at 0/0 so static look is unchanged */
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
  transition: --spot .35s ease, transform .25s ease;
  /* darker secondary + mono text so it stays readable on the solid mauve fill */
  --ink-3: #2f343c;
  --ink-4: #3d424b;
  --accent: #1e3a8a;
  border: 1px solid var(--gl-edge);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1.5px 0 var(--gl-hl-top),
    inset 0 -1px 0 var(--gl-hl-bot),
    inset 1.5px 0 0 rgba(255,255,255,0.55),
    var(--gl-shadow);
}
.glass::before{
  content:"";
  position:absolute;
  inset: var(--gl-inner-offset);
  border-radius: calc(var(--r-lg) - var(--gl-inner-offset));
  border: 1px solid var(--gl-inner-stroke);
  pointer-events:none;
  -webkit-mask-image: linear-gradient(140deg, #000 30%, rgba(0,0,0,0.35) 100%);
          mask-image: linear-gradient(140deg, #000 30%, rgba(0,0,0,0.35) 100%);
}
.glass::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* radius variants */
.glass.r-xl{ border-radius: var(--r-xl); }
.glass.r-xl::before{ border-radius: calc(var(--r-xl) - var(--gl-inner-offset)); }
.glass.r-md{ border-radius: var(--r-md); }
.glass.r-md::before{ border-radius: calc(var(--r-md) - var(--gl-inner-offset)); }
.glass.r-sm{ border-radius: var(--r-sm); }
.glass.r-sm::before{ border-radius: calc(var(--r-sm) - var(--gl-inner-offset)); --gl-inner-offset: 3px; inset:3px; }
.glass.r-pill{ border-radius: var(--r-pill); }
.glass.r-pill::before{ border-radius: var(--r-pill); inset: 4px; }

/* ---------- DARK FROSTED VARIANT (kit tooltip surface) ----------
   Used only where glass sits over a dark backdrop (hero video). */
.glass-dark{
  position:relative;
  background: rgba(18,22,28,.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
          backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  color: var(--page-1);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.25),
    var(--gl-shadow);
}
.glass-dark.r-pill{ border-radius: var(--r-pill); }
.glass-dark.r-xl{ border-radius: var(--r-xl); }

/* hero nav — lighter, see-through liquid glass over the video */
.nav-glass{
  background: rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5) brightness(1.06);
          backdrop-filter: blur(26px) saturate(1.5) brightness(1.06);
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 12px 34px -14px rgba(0,0,0,.45) !important;
}

/* ---------- INNER STABILIZED PLATE (scrim) ---------- */
.glass-plate{
  position:relative;
  background: var(--gl-plate-tint);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
          backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid var(--gl-plate-edge);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px var(--gl-plate-inner),
    0 1px 1px rgba(20,24,32,.04),
    0 8px 18px -8px rgba(20,24,32,.12);
}
.glass-plate.r-md{ border-radius: var(--r-md); }
.glass-plate.r-pill{ border-radius: var(--r-pill); }

/* =========================================================
   PRIMITIVES — Button / Field / Chip / Switch / Card
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: 42px; padding: 0 18px;
  font: 500 14px/1 var(--font); color: var(--ink-1);
  border-radius: var(--r-md);
  cursor: pointer; position: relative;
  background: var(--gl-shell-tint);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
          backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--gl-edge);
  box-shadow:
    inset 0 1px 0 var(--gl-hl-top),
    inset 0 -1px 0 var(--gl-hl-bot),
    0 1px 1px rgba(20,24,32,.04),
    0 6px 12px -4px rgba(20,24,32,.10),
    0 14px 24px -10px rgba(20,24,32,.12);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn::before{
  content:""; position:absolute; inset: 3px;
  border-radius: calc(var(--r-md) - 3px);
  border:1px solid rgba(255,255,255,.38);
  pointer-events:none;
  -webkit-mask-image: linear-gradient(140deg, #000 30%, rgba(0,0,0,.3) 100%);
          mask-image: linear-gradient(140deg, #000 30%, rgba(0,0,0,.3) 100%);
}
.btn:hover{
  background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--gl-hl-top),
    inset 0 -1px 0 var(--gl-hl-bot),
    0 2px 2px rgba(20,24,32,.04),
    0 10px 18px -4px rgba(20,24,32,.12),
    0 22px 32px -12px rgba(20,24,32,.14);
}
.btn:active{
  transform: translateY(0px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(255,255,255,.2),
    inset 0 2px 4px rgba(20,24,32,.08),
    0 1px 2px rgba(20,24,32,.06);
}
.btn.primary{
  background: linear-gradient(180deg, #2c3340 0%, #14181f 100%);
  color: #fff; border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 1px rgba(20,24,32,.18),
    0 8px 18px -4px rgba(20,24,32,.30),
    0 18px 32px -12px rgba(20,24,32,.35);
}
.btn.primary::before{ border-color: rgba(255,255,255,.12); }
.btn.primary:hover{ background: linear-gradient(180deg, #353c4a 0%, #181c24 100%); }
.btn.ghost{
  background: rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 1px rgba(20,24,32,.04),
    0 4px 10px -4px rgba(20,24,32,.10);
}
.btn .lead-icon, .btn .trail-icon{ width:16px; height:16px; }
.btn.sm{ height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.sm::before{ inset: 2.5px; border-radius: 7.5px; }
.btn.lg{ height: 52px; padding: 0 22px; font-size: 15px; }
.btn.pill{ border-radius: var(--r-pill); }
.btn.pill::before{ border-radius: var(--r-pill); inset: 3px; }

/* SOCIAL ORB — circular soft-glass contact icon */
.social-orb{
  display:inline-flex; align-items:center; justify-content:center;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 2px rgba(20,24,32,.05),
    0 4px 12px -6px rgba(20,24,32,.16);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
          backdrop-filter: blur(8px) saturate(1.1);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.social-orb:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.5);
  color: var(--ink-1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 18px -8px rgba(20,24,32,.22);
}
@media (min-width: 768px){
  .social-orb{ width: 58px; height: 58px; }
}

/* footer hairline divider — subtle on the light gradient */
.footer-divider{
  height: 1px; width: 100%;
  background: linear-gradient(90deg,
    rgba(20,24,32,0) 0%,
    rgba(20,24,32,.10) 18%,
    rgba(20,24,32,.10) 82%,
    rgba(20,24,32,0) 100%);
}

/* CHIP / PILL */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(20,24,32,.06), 0 6px 10px -6px rgba(20,24,32,.10);
  font: 500 12.5px/1 var(--font); color: var(--ink-1); cursor: pointer;
}
.chip .ico{ width: 14px; height:14px; color: var(--ink-3); }
.chip.is-active{
  background: linear-gradient(180deg, #fff, #f1f3f7);
  border-color: rgba(0,0,0,.08); color: var(--ink-1);
}
.chip.has-status::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--success);
  box-shadow: 0 0 0 2px rgba(31,157,107,.18);
}

/* SWITCH */
.switch{
  width: 44px; height: 26px; border-radius: 999px; position:relative;
  background: rgba(0,0,0,.10); border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 2px rgba(20,24,32,.10); cursor:pointer; transition: background .2s ease;
}
.switch .knob{
  position:absolute; top: 2px; left: 2px;
  width: 20px; height:20px; border-radius:50%;
  background: linear-gradient(180deg, #fff, #f0f2f7);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px -1px rgba(20,24,32,.25), 0 4px 8px -4px rgba(20,24,32,.15);
  transition: left .2s ease;
}
.switch.is-on{ background: var(--accent); border-color: transparent; }
.switch.is-on .knob{ left: 20px; }

/* CARD */
.glass-card{
  padding: 22px; display:flex; flex-direction:column; gap: 14px;
}
.glass-card .title{ font-size: 16px; font-weight: 600; }
.glass-card .body{ font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }

/* mono eyebrow label used in the kit's section heads */
.eyebrow{
  font: 500 11px/1 var(--font-mono);
  color: var(--ink-3); letter-spacing:.18em; text-transform: uppercase;
}
.eyebrow .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow: 0 0 0 3px rgba(59,109,240,.18); margin-right:8px; vertical-align: middle;
}
.num-mono{ font: 500 12px/1 var(--font-mono); color: var(--ink-4); letter-spacing:.04em; }

/* =========================================================
   COVERFLOW CAROUSEL — horizontal silhouette / depth track.
   Cards scale + rotate away from center as they recede,
   leaving their outlines layered behind the focused card.
   Per-item transform/opacity is driven from JS on scroll.
   ========================================================= */
.cf-wrap{ position: relative; }
.cf-track{
  --cf-w: min(82vw, 360px);
  display: flex;
  align-items: center;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 46px 0 58px;
  scrollbar-width: none;
  perspective: 1600px;
}
.cf-track::-webkit-scrollbar{ display: none; }
.cf-spacer{ flex: 0 0 calc(50% - var(--cf-w) / 2); }
.cf-item{
  flex: 0 0 var(--cf-w);
  scroll-snap-align: center;
  transform-origin: center center;
  transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  will-change: transform, opacity;
}
.cf-card{ height: 472px; }

/* nav controls float outside the focused card */
.cf-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 30; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gl-plate-tint);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
          backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid var(--gl-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px -8px rgba(20,24,32,.28);
  color: var(--ink-1); cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.cf-nav:hover{ transform: translateY(-50%) scale(1.06); background: rgba(255,255,255,.7); }
.cf-nav:active{ transform: translateY(-50%) scale(.96); }
.cf-nav.prev{ left: clamp(8px, 3vw, 40px); }
.cf-nav.next{ right: clamp(8px, 3vw, 40px); }
@media (max-width: 640px){ .cf-nav{ display: none; } }

/* =========================================================
   ENTRANCE ANIMATIONS (CSS-driven, play on mount)
   ========================================================= */
@keyframes glPullUp   { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes glCharRise { from { opacity:0; transform: translateY(0.5em); } to { opacity:1; transform: translateY(0); } }
@keyframes glFadeUp   { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform: translateY(0); } }
@keyframes glScaleIn  { from { opacity:0; transform: scale(0.96); } to { opacity:1; transform: scale(1); } }
@keyframes glCharFade { from { opacity:.16; } to { opacity:1; } }

.anim-pullup{ animation: glPullUp 820ms cubic-bezier(0.16,1,0.3,1) both; }
.anim-charrise{ animation: glCharRise 860ms cubic-bezier(0.16,1,0.3,1) both; }
.anim-fadeup{ animation: glFadeUp 1000ms cubic-bezier(0.16,1,0.3,1) both; }
.anim-scalein{ animation: glScaleIn 820ms cubic-bezier(0.22,1,0.36,1) both; }
.anim-charfade{ animation: glCharFade 640ms ease both; }

@media (prefers-reduced-motion: reduce){
  .anim-pullup, .anim-charrise, .anim-fadeup, .anim-scalein, .anim-charfade{ animation: none !important; }
}

/* =========================================================
   HERO — scroll-scrubbed video, confined to the first screen.
   The video is pinned (sticky) only while you scroll through the
   hero's tall track; its playback is driven by scroll progress.
   ========================================================= */
.hero-scroll{
  position: relative;
  z-index: 1;
  height: 260vh;              /* scroll track length that scrubs the clip */
}
.hero-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* dissolve the very bottom of the hero into the page gradient below */
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}
.hero-bg{
  position: absolute; inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 70% 10%, #2a3346 0%, #161a23 45%, #0c0e13 100%);
}
.hero-bg video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* raw <video> sits underneath the canvas (which is what actually shows on
   screen). It stays visible so the browser keeps decoding it — the opaque
   canvas frame covers it once drawing begins. */
.hero-bg .hero-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-bg .vignette{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,10,14,.30) 0%, rgba(8,10,14,0) 26%, rgba(8,10,14,0) 50%, rgba(8,10,14,.30) 100%);
}
.hero-fg{
  position: absolute; inset: 0;
  z-index: 2;
  will-change: opacity;
}

@media (max-width: 640px){
  .hero-identity{
    left: 50% !important;
    width: min(88vw, 360px);
  }
}

/* The sheet that follows the hero — transparent so the fixed page gradient
   shows straight through; no shadow / no rounded card edge → seamless. */
.content-sheet{
  position: relative;
  z-index: 3;
  background: transparent;
  overflow: hidden;
  margin-top: -1px;
}
.content-sheet::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: none;
}
.content-sheet::after{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* scroll cue at the bottom of the hero */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:3;
  font: 500 10px/1 var(--font-mono); letter-spacing:.22em; text-transform:uppercase;
  color: rgba(243,244,246,.7);
}
.scroll-cue .rail{
  width:1px; height:40px;
  background: linear-gradient(180deg, rgba(243,244,246,.7), rgba(243,244,246,0));
  position:relative; overflow:hidden;
}
.scroll-cue .rail::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:14px;
  background: rgba(243,244,246,.95);
  animation: scrollCue 1.8s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes scrollCue{ 0%{ transform: translateY(-14px);} 60%,100%{ transform: translateY(40px);} }