@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-page: oklch(0.09 0.016 262) !important;
  --bg-dark: oklch(0.12 0.018 262) !important;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif !important;
  --glass-surface: oklch(0.22 0.022 262 / 0.46) !important;
  --glass-border: oklch(0.62 0.15 268 / 0.22) !important;
  --mesh-purple: oklch(0.52 0.20 282 / 0.55);
  --mesh-gold: oklch(0.80 0.15 75 / 0.30);
  --mesh-teal: oklch(0.62 0.14 200 / 0.18);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

html { background: var(--bg-page); }

/* ---------- Mesh gradient atmosphere ---------- */
body::before {
  content: "";
  position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 42% at 12% 8%, var(--mesh-purple) 0%, transparent 60%),
    radial-gradient(32% 36% at 92% 14%, var(--mesh-gold) 0%, transparent 62%),
    radial-gradient(40% 46% at 50% 96%, var(--mesh-teal) 0%, transparent 65%),
    radial-gradient(60% 60% at 50% 50%, transparent 30%, oklch(0.06 0.01 262) 100%);
  animation: meshdrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes meshdrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.04); }
}

/* ---------- Film grain (fixed, GPU-cheap, pointer-events none) ---------- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Double-bezel: outer shell + inner core ---------- */
.shell {
  position: relative;
  padding: 7px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(155deg, oklch(0.30 0.04 268 / 0.9) 0%, oklch(0.14 0.02 262 / 0.9) 46%, oklch(0.10 0.015 262) 100%) !important;
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / 0.06) inset,
    0 40px 80px -24px oklch(0.05 0 0 / 0.65),
    0 0 0 1px oklch(0.62 0.15 268 / 0.16);
  transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease-spring);
}
.shell-inner {
  border-radius: 21px !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.07) inset, 0 -1px 0 0 oklch(0 0 0 / 0.3) inset !important;
}
.glass {
  border-radius: 18px !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 20px 44px -18px oklch(0.05 0 0 / 0.55);
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-spring), border-color .3s;
}

/* ---------- Eyebrow pill ---------- */
.eyebrow {
  border: 1px solid var(--glass-border);
  background: oklch(0.22 0.02 262 / 0.5);
  padding: 7px 16px !important;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* ---------- Buttons: magnetic island physics ---------- */
.btn-primary, a.btn-primary {
  transition: transform .45s var(--ease-spring), box-shadow .45s var(--ease-spring), background .3s !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.18) inset, 0 18px 40px -14px oklch(0.52 0.18 268 / 0.55);
}
.btn-primary:active { transform: scale(0.97) !important; }
.btn-primary .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: oklch(1 0 0 / 0.14);
  margin-left: 2px;
  transition: transform .4s var(--ease-spring);
}
.btn-primary:hover .arrow { transform: translate(3px,-2px) rotate(8deg); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(46px);
  filter: blur(6px);
  transition: opacity .9s var(--ease-spring), transform .9s var(--ease-spring), filter .9s var(--ease-spring);
}
.reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---------- Hover lift for cards ---------- */
.pain:hover, .step:hover, .stat:hover, .ag-item:hover, .col:hover, .ba-card:hover {
  transform: translateY(-4px);
}

/* ---------- Big number / stat emphasis ---------- */
.stat .big {
  text-shadow: 0 0 40px oklch(0.78 0.14 70 / 0.35);
}

main, header.hero, section, footer, .announce { position: relative; z-index: 1; }

@media (max-width: 760px) {
  body::before { animation: none; }
  .shell { padding: 5px !important; border-radius: 20px !important; }
  .shell-inner { border-radius: 15px !important; }
}

/* ======================================================
   MOTION LAYER — canvas, parallax orbs, progress, cursor
   ====================================================== */

/* Kinetic headline words */
.kw { display: inline-block; will-change: transform, opacity; }

/* Hero particle funnel canvas */
header.hero { overflow: hidden; }
.funnel-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 16px 1px oklch(0.78 0.14 70 / 0.5);
}

/* Parallax ambient orbs (replace static mesh with movable layers) */
.orb-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(70px);
  will-change: transform;
}
.orb-a { width: 46vw; height: 46vw; top: -12vw; left: -10vw; background: var(--mesh-purple); }
.orb-b { width: 38vw; height: 38vw; top: 4vw; right: -12vw; background: var(--mesh-gold); }
.orb-c { width: 50vw; height: 50vw; bottom: -18vw; left: 20vw; background: var(--mesh-teal); }
body::before { opacity: 0.35; } /* dim the static mesh now that orbs carry the motion */

/* Cursor glow (hero only) */
.cursor-glow {
  position: absolute; top: 0; left: 0; width: 420px; height: 420px;
  margin-left: -210px; margin-top: -210px;
  background: radial-gradient(circle, oklch(0.60 0.16 268 / 0.26) 0%, transparent 70%);
  pointer-events: none; z-index: 0; border-radius: 50%;
}

/* Tilt cards need 3D context without clipping their own blur */
.shell, .glass { transform-style: preserve-3d; }

@media (max-width: 760px) {
  .orb-a, .orb-b, .orb-c { filter: blur(44px); }
  .cursor-glow { display: none; }
}