/* =========================================================
   FINA - Liquid Glassmorphic Theme
   Light canvas. Cyan accent. Glass surfaces. Atmospheric.
   ========================================================= */

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* ---------- Canvas (light) ---------- */
  --canvas-base: #FFFFFF;
  --ambient-cyan:   radial-gradient(ellipse 60% 50% at 20% 30%, rgba(91, 107, 255, 0.16), transparent 60%);
  --ambient-violet: radial-gradient(ellipse 50% 40% at 80% 70%, rgba(139, 92, 246, 0.10), transparent 60%);
  --ambient-teal:   radial-gradient(ellipse 70% 60% at 50% 100%, rgba(20, 184, 166, 0.08), transparent 65%);
  --noise: 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.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.015'/></svg>");

  /* ---------- Glass surfaces (more transparent for stronger glassmorphism) ---------- */
  --glass-bg:         rgba(255, 255, 255, 0.38);
  --glass-bg-hover:   rgba(255, 255, 255, 0.55);
  --glass-bg-elev:    rgba(255, 255, 255, 0.62);
  --glass-border:     rgba(15, 23, 42, 0.06);
  --glass-border-top: rgba(255, 255, 255, 0.95);
  --glass-blur:       28px;
  --glass-blur-elev:  44px;
  --glass-saturate:   190%;

  /* ---------- Accent (indigo primary) ---------- */
  --accent:      #5B6BFF;
  --accent-2:    #818CFF;
  --accent-glow: color-mix(in oklab, var(--accent) 30%, transparent);

  /* ---------- Brand palette ---------- */
  --lime:        #5B6BFF;
  --lime-soft:   #B1B9FF;
  --lime-deep:   #4252F0;

  --ink:         #0E1320;
  --ink-2:       #161C2D;
  --ink-3:       #1F2638;

  --violet:      #5B6BFF;
  --violet-soft: #B1B9FF;
  --violet-bg:   #ECEEFF;

  /* ---------- Selection ---------- */
  --selection-bg: #D4F84F;
  --selection-fg: #0E1320;

  /* ---------- Shimmer-border (animated card/nav border shine) ---------- */
  --shimmer-color: rgb(91, 107, 255);

  --bg:          #FFFFFF;
  --bg-soft:     #F6F7F9;
  --bg-tint:     #F1F2F6;

  --text:        #0B0F1A;
  --text-2:      #4A5163;
  --text-3:      #8A92A6;
  --hairline:    #E6E8EE;

  /* ---------- Typography (Bricolage brand) ---------- */
  --font-display: 'Bricolage Grotesque', 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --tracking-display: -0.025em;
  --tracking-body:    0;
  --tracking-small:   0.02em;
  --weight-hero:      600;
  --weight-body:      400;

  /* ---------- Layout ---------- */
  --container: 1240px;
  --container-narrow: 1080px;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --r-pill:    999px;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  /* ---------- Motion ---------- */
  --ease-out:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quart:  cubic-bezier(0.76, 0, 0.24, 1);

  /* ---------- Shadows (light) ---------- */
  --shadow-glass:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(15, 23, 42, 0.04) inset,
    0 12px 30px -12px rgba(15, 23, 42, 0.14),
    0 24px 48px -24px rgba(15, 23, 42, 0.10);
  --shadow-card: var(--shadow-glass);
  --shadow-lift:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(15, 23, 42, 0.04) inset,
    0 30px 60px -20px rgba(15, 23, 42, 0.22),
    0 12px 24px -12px rgba(15, 23, 42, 0.14);
  --shadow-pop:        0 20px 40px -12px rgba(91, 107, 255, 0.28);
  --shadow-glow-cyan:  0 0 60px -8px var(--accent-glow);
}

/* =========================================================
   Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto;
  background: var(--canvas-base);
  /* Prevent horizontal scroll site-wide. body alone isn't enough on iOS Safari
     when fixed/transformed elements (mobile drawer, nav) sit beyond the viewport. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "cv11";
  overflow-x: hidden;
  max-width: 100vw;
  background:
    var(--ambient-cyan),
    var(--ambient-violet),
    var(--ambient-teal),
    var(--canvas-base);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

/* Noise overlay above ambient washes, below content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  background-repeat: repeat;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Text selection ---------- */
::selection      { background: var(--selection-bg); color: var(--selection-fg); }
::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* =========================================================
   Atmosphere: orb-field
   ========================================================= */
.orb-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  mix-blend-mode: multiply;
  will-change: transform;
  /* GPU promotion hints — keep orb compositing off the CPU, especially on Safari/Mac */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.orb--cyan {
  width: 520px; height: 520px;
  left: -120px; top: -120px;
  background: radial-gradient(circle, rgba(91,107,255,0.75) 0%, rgba(91,107,255,0.30) 35%, transparent 70%);
  animation: drift-cyan 22s ease-in-out infinite;
}
.orb--violet {
  width: 480px; height: 480px;
  right: -100px; top: 20%;
  background: radial-gradient(circle, rgba(139,92,246,0.65) 0%, rgba(139,92,246,0.25) 35%, transparent 70%);
  animation: drift-violet 28s ease-in-out infinite;
}
.orb--teal {
  width: 560px; height: 560px;
  left: 30%; bottom: -160px;
  background: radial-gradient(circle, rgba(20,184,166,0.55) 0%, rgba(20,184,166,0.22) 35%, transparent 70%);
  animation: drift-teal 32s ease-in-out infinite;
}
.orb--pink {
  width: 420px; height: 420px;
  right: 15%; bottom: 10%;
  background: radial-gradient(circle, rgba(244,114,182,0.50) 0%, rgba(244,114,182,0.20) 35%, transparent 70%);
  animation: drift-pink 26s ease-in-out infinite;
}
@keyframes drift-cyan {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40vw, 30vh) scale(1.15); }
  66%  { transform: translate(10vw, 60vh) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes drift-violet {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-30vw, 20vh) scale(1.1); }
  66%  { transform: translate(-10vw, 50vh) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes drift-teal {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(20vw, -30vh) scale(0.85); }
  66%  { transform: translate(-15vw, -10vh) scale(1.2); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes drift-pink {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-25vw, -40vh) scale(1.05); }
  66%  { transform: translate(20vw, -20vh) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@media (max-width: 640px) {
  .orb { filter: blur(40px); opacity: 0.4; }
}

/* =========================================================
   GPU promotion hints — combat Safari/Mac compositor jank on
   transformed/animated surfaces. Cheap on other browsers.
   ========================================================= */
.values__card,
.path__card,
.faq__item,
.step,
.pcard,
.bcard,
.integ,
[data-tilt],
[data-tilt-3d],
.nav__neon,
.nav__neon-comet,
.hero__visual,
.anim-frame,
.anim-frame iframe {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* =========================================================
   Liquid-glass shine border (cards + nav)
   ========================================================= */
@keyframes rotate-border { to { --border-angle: 360deg; } }

/* Light-theme shimmer-border animation: a soft radial glow sweeps diagonally
   across the border ring (back and forth) instead of a rotating conic spot.
   Tuned for white/glass cards with the brand indigo as the shine color. */
@keyframes shimmer-border {
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}

/* Reusable utility — apply via ::before/::after on any positioned card.
   Stacked drop-shadow filters give the moving shine spot a neon halo that
   bleeds outside the card border (visible on cards with overflow:visible). */
.glass-shine,
.shimmer-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background-image: radial-gradient(
    transparent 0%,
    transparent 30%,
    var(--shimmer-color, #5B6BFF) 50%,
    transparent 70%,
    transparent 100%
  );
  background-size: 283% 283%;
  background-position: 153% 174%;
  animation: shimmer-border 9s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  box-shadow: inset 0 0 0 1.5px rgba(91, 107, 255, 0.10);
  filter:
    drop-shadow(0 0 4px rgba(91, 107, 255, 0.85))
    drop-shadow(0 0 10px rgba(91, 107, 255, 0.55))
    drop-shadow(0 0 22px rgba(91, 107, 255, 0.30));
}

/* =========================================================
   Custom cursor (dot + lagging ring)
   ========================================================= */
.cursor-dot,
.cursor-ring {
  display: none;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0E1320;
  box-shadow:
    0 0 8px rgba(15, 23, 42, 0.35),
    0 0 24px rgba(91, 107, 255, 0.4),
    0 0 48px rgba(91, 107, 255, 0.20);
  z-index: 10000;
  transition: width 200ms, height 200ms, background 200ms;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cursor-ring {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  border: 1.5px solid rgba(15, 23, 42, 0.40);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 16px -4px rgba(15, 23, 42, 0.18);
  z-index: 9999;
  transition: width 300ms, height 300ms, border-color 250ms, background 250ms;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Custom cursor disabled per request — keep classes for backwards
   compatibility but render nothing and don't hide the native cursor. */
.cursor-dot, .cursor-ring { display: none !important; }

/* =========================================================
   Typography
   ========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
}
.eyebrow .star {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-block;
  background: var(--accent);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  align-self: center;
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-hero);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 6.6vw, 88px); letter-spacing: -0.04em; font-weight: 600; }
h2 { font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.035em; font-weight: 600; }
h3 { font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; }
h4 { font-size: clamp(20px, 1.6vw, 26px); font-weight: 500; }

.display-accent { color: var(--accent); font-style: normal; font-weight: 600; }
.accent { color: var(--accent); }

.lead {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--text-2);
  line-height: 1.5;
  max-width: 56ch;
  text-wrap: pretty;
}

/* =========================================================
   Layout
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding: clamp(64px, 7vw, 110px) 0; position: relative; z-index: 2; }
.section--tight { padding: clamp(48px, 5vw, 80px) 0; }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--soft { background: var(--bg-soft); }

.section-head {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.section-head .eyebrow { margin-bottom: 4px; }
.section-head .lead { text-align: center; margin: 0 auto; }

@media (max-width: 700px) {
  .container { padding: 0 20px; }
  .section { padding: 80px 0; }
  .section-head { margin-bottom: 44px; }
}

/* =========================================================
   Buttons (pill, glass)
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  transition: transform .35s var(--ease-out), background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  overflow: hidden;
}
/* Corner shines + top-edge sheen — static glass highlight */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 120% at 0% 0%,   rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, transparent 30%);
  mix-blend-mode: screen;
  opacity: 0.85;
  transition: opacity .25s ease;
}
.btn:hover::before { opacity: 1; }
/* Sweeping sheen on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 35%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%);
  transform: translateX(0);
  transition: transform .9s var(--ease-out);
  mix-blend-mode: screen;
  opacity: 0;
}
.btn:hover::after {
  opacity: 1;
  transform: translateX(420%);
}

/* Primary + lime CTA = indigo pill, white text */
.btn--primary,
.btn--lime {
  background: var(--accent);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(15, 23, 42, 0.20),
    0 6px 16px -8px rgba(91, 107, 255, 0.55);
}
.btn--primary:hover,
.btn--lime:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(15, 23, 42, 0.20),
    var(--shadow-pop);
}

/* Radiating CTA — pulsing halo to make the primary hero action eye-catching
   (LP1 "make it radiating / more prominent"). */
.btn--radiate { animation: ctaRadiate 2.6s ease-in-out infinite; }
@keyframes ctaRadiate {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(15, 23, 42, 0.20),
      0 6px 16px -8px rgba(91, 107, 255, 0.55),
      0 0 0 0 rgba(91, 107, 255, 0.45);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(15, 23, 42, 0.20),
      0 6px 22px -6px rgba(91, 107, 255, 0.75),
      0 0 0 12px rgba(91, 107, 255, 0);
  }
}
@media (prefers-reduced-motion: reduce) { .btn--radiate { animation: none; } }

/* Continuous glare sweep on the nav "Get Started" CTA — diagonal sheen
   loops every 4s with a brief pause between sweeps. Re-uses the .btn::after
   diagonal gradient; the animation overrides the default hover-only opacity. */
.nav__actions .btn--lime::after {
  animation: btn-nav-glare 4.5s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes btn-nav-glare {
  0%   { transform: translateX(-120%); opacity: 0; }
  10%  { opacity: 0.95; }
  45%  { transform: translateX(420%); opacity: 0.95; }
  55%  { transform: translateX(420%); opacity: 0; }
  100% { transform: translateX(420%); opacity: 0; }
}
/* On hover, accelerate the glare for tactile feedback */
.nav__actions .btn--lime:hover::after { animation-duration: 1.8s; }
@media (prefers-reduced-motion: reduce) {
  .nav__actions .btn--lime::after { animation: none; }
}

/* Ink = dark navy pill, white text */
.btn--ink {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 6px 14px -8px rgba(15, 23, 42, 0.5);
}
.btn--ink::before {
  background:
    radial-gradient(60% 120% at 0% 0%,   rgba(255, 255, 255, 0.30), transparent 55%),
    radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 35%);
}
.btn--ink:hover {
  background: #1c2335;
  transform: translateY(-1px);
}

/* Ghost = glass-white pill on light canvas */
.btn--ghost {
  background: rgba(255, 255, 255, 0.45);
  color: var(--text);
  border-color: rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 23, 42, 0.06),
    0 6px 16px -10px rgba(15, 23, 42, 0.18);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

/* ----- .btn--shine: rim reflection + opposite-cursor 3D tilt -----
   IDLE: a bright spot orbits the rim (JS rAF drives --shine-angle).
   HOVER: JS locks the spot to the corner OPPOSITE the cursor and tilts the
          button OPPOSITE the cursor too. Orbit resumes seamlessly from the
          locked angle on leave. No CSS animation, so no inline-vs-animation
          conflict. */
@property --shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.btn--shine {
  transform-style: preserve-3d;
  --shine-angle: 0deg;
  transition:
    transform .25s var(--ease-out),
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}
.btn--shine::after {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  padding: 1.5px;
  /* Single bright peak in the gradient. With `from var(--shine-angle)`, the
     peak's compass position = shine-angle + 90deg. JS sets shine-angle so the
     peak lands on the corner opposite the cursor when hovered. */
  background: conic-gradient(
    from var(--shine-angle),
    rgba(255, 255, 255, 0)    0deg,
    rgba(255, 255, 255, 0)   60deg,
    rgba(255, 255, 255, 0.85) 86deg,
    #ffffff 90deg,
    rgba(255, 255, 255, 0.85) 94deg,
    rgba(255, 255, 255, 0)  120deg,
    rgba(255, 255, 255, 0)  360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transform: none;
  transition: filter .25s ease;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.90))
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.50));
}
.btn--shine.is-shine-locked::after {
  /* On hover, smooth the spot's slide as the cursor moves around */
  transition: filter .25s ease;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 1))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.70))
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.45));
}

/* Ghost-on-light variant: white rim shine on a white background loses its halo
   in plain white drop-shadows — give it a subtle dark+indigo contrast halo so
   the shine reads. Core stroke stays white. */
.btn--ghost.btn--shine::after {
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 3px rgba(15, 23, 42, 0.35))
    drop-shadow(0 0 8px rgba(91, 107, 255, 0.45))
    drop-shadow(0 0 18px rgba(91, 107, 255, 0.25));
}
.btn--ghost.btn--shine.is-shine-locked::after {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 4px rgba(15, 23, 42, 0.45))
    drop-shadow(0 0 12px rgba(91, 107, 255, 0.65))
    drop-shadow(0 0 26px rgba(91, 107, 255, 0.35));
}
.btn--shine.is-shine-locked {
  /* Smooth slide of --shine-angle to the cursor-mirror as the cursor moves */
  transition:
    transform .25s var(--ease-out),
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    --shine-angle .12s linear;
}

/* Ghost-dark used on dark sections (cta-final). Keep light-on-dark contrast. */
.btn--ghost-dark {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 6px 16px -10px rgba(0, 0, 0, 0.4);
}
.btn--ghost-dark::before {
  background:
    radial-gradient(60% 120% at 0% 0%,   rgba(255, 255, 255, 0.45), transparent 55%),
    radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.25), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 35%);
}
.btn--ghost-dark:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.btn .arrow { transition: transform .3s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--sm { padding: 8px 14px; font-size: 13.5px; }
.btn--lg { padding: 14px 24px; font-size: 15px; }

/* Footer app-store buttons (replaces inline-style boxes) */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  transition: background .2s ease, transform .25s var(--ease-out);
}
.store-btn:hover {
  background: #1c2335;
  transform: translateY(-1px);
}

/* Link with underline animation */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 500;
  position: relative;
}
.tlink::after {
  content: "";
  position: absolute;
  left: 0; right: 18px;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .4s var(--ease-out);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .arrow { transition: transform .3s var(--ease-out); }
.tlink:hover .arrow { transform: translate(3px, -3px); }

/* =========================================================
   Navbar (floating glass pill)
   ========================================================= */
.nav {
  position: fixed;
  top: 16px; left: 0; right: 0;
  z-index: 100;
  padding: 0;
  transition: top .35s ease;
  pointer-events: none;
}
.nav .container.nav__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  padding: 8px 8px 8px 20px;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--r-pill);
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--shadow-glass);
  position: relative;
}
/* Static corner shines + top-edge sheen — sits behind content via z-index -1 */
.nav .container.nav__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(70% 110% at 0% 0%, rgba(255, 255, 255, 0.85), transparent 45%),
    radial-gradient(70% 110% at 100% 0%, rgba(255, 255, 255, 0.70), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 24%);
  mix-blend-mode: screen;
  opacity: 0.95;
  z-index: -1;
}

/* Nav perimeter shimmer — radial glow sweeps diagonally across the entire
   pill border (same technique as the cards). Replaces the old bottom-only
   comet sweep. */
.nav .container.nav__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background-image: radial-gradient(
    transparent 0%,
    transparent 30%,
    var(--shimmer-color, #5B6BFF) 50%,
    transparent 70%,
    transparent 100%
  );
  background-size: 283% 283%;
  background-position: 153% 174%;
  animation: shimmer-border 11s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  box-shadow: inset 0 0 0 1.5px rgba(91, 107, 255, 0.12);
  filter:
    drop-shadow(0 0 4px rgba(91, 107, 255, 0.90))
    drop-shadow(0 0 10px rgba(91, 107, 255, 0.55))
    drop-shadow(0 0 22px rgba(91, 107, 255, 0.30));
}
@media (prefers-reduced-motion: reduce) {
  .nav .container.nav__inner::after { animation: none; opacity: 0.5; }
}

/* Hide the SVG neon scaffold — superseded by the conic-gradient border above */
.nav__neon { display: none; }
.nav.is-scrolled { top: 12px; }
.nav.is-scrolled .container.nav__inner {
  background: rgba(255, 255, 255, 0.55);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: var(--ink);
}
.nav__logo .logo-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  position: relative;
}
.nav__logo .logo-mark::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: linear-gradient(135deg, #C9C2FF, #FFB7C5);
  transform: rotate(45deg);
}
.nav__logo .logo-img {
  height: 26px;
  width: auto;
  display: block;
}
/* Light theme: keep dark logo as-is */
.logo-img--ink { filter: brightness(0) saturate(100%); }
.logo-img--light { filter: none; }
.cta-final .logo-img,
.section--ink .logo-img { filter: brightness(0) invert(1); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  margin-left: 12px;
}
.nav__item {
  position: relative;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .2s ease, color .2s ease;
}
.nav__item:hover { background: rgba(15, 23, 42, 0.05); color: var(--ink); }
.nav__item .caret { width: 10px; height: 10px; opacity: 0.6; }
/* "Talk to sales" spacing fix — explicit normal word-spacing so inherited
   letter-spacing tweaks don't visually open the gap between "Talk" and "to". */
.nav__item.talk { word-spacing: normal; letter-spacing: -0.005em; white-space: nowrap; }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__hamb {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.55);
}
.nav__hamb span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  position: relative;
}
.nav__hamb span::before, .nav__hamb span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease-out), top .2s ease;
}
.nav__hamb span::before { top: -6px; }
.nav__hamb span::after { top: 6px; }
.nav__hamb.is-open span { background: transparent; }
.nav__hamb.is-open span::before { top: 0; transform: rotate(45deg); }
.nav__hamb.is-open span::after  { top: 0; transform: rotate(-45deg); }

/* Dropdown */
/* Dropdown portal: rendered at body level by JS so its backdrop-filter can
   see through the page (nav__inner creates its own stacking context). */
.nav__dropdown-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 110;
}
.nav__dropdown {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(120px) saturate(240%);
  -webkit-backdrop-filter: blur(120px) saturate(240%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  padding: 10px;
  min-width: 300px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(15, 23, 42, 0.06),
    0 24px 48px -16px rgba(15, 23, 42, 0.18),
    0 12px 24px -12px rgba(15, 23, 42, 0.12);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease-out);
  isolation: isolate;
  overflow: hidden;
}
/* Top-edge sheen on dropdown */
.nav__dropdown::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 90% at 0% 0%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, 0.40), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, transparent 28%);
  mix-blend-mode: screen;
  opacity: 0.95;
}
.nav__dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__dropdown a {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .2s ease;
}
.nav__dropdown a:hover { background: rgba(15, 23, 42, 0.05); }
.nav__dropdown a strong { font-weight: 500; font-size: 14px; color: var(--ink); }
.nav__dropdown a span { font-size: 12.5px; color: var(--text-3); }

/* Mega dropdown — grouped, icon-led (Mondu-style) */
.nav__dropdown--mega { min-width: 560px; padding: 16px; }
.mega__group + .mega__group { margin-top: 8px; }
.mega__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 12px 10px;
}
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav__dropdown--mega a.mega__link {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
}
.mega__ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.mega__ico svg { width: 18px; height: 18px; }
.nav__dropdown--mega a.mega__link:hover .mega__ico {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mega__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__text strong { font-weight: 500; font-size: 14px; color: var(--ink); }
.mega__text span { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }

/* Mobile menu (glass drawer) — uses left:100%/left:0 instead of translateX so
   the offscreen position can't contribute to horizontal scroll width on iOS. */
.nav__mobile {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100%;
  background: rgba(246, 248, 251, 0.95);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  z-index: 99;
  padding: 96px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: left .5s var(--ease-out);
  overflow-y: auto;
  overflow-x: hidden;
}
.nav__mobile.is-open { left: 0; }
.nav__mobile a {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}

@media (max-width: 960px) {
  .nav__menu, .nav__actions .btn--lg, .nav__actions .talk { display: none; }
  .nav__hamb { display: inline-flex; }
  .nav .container.nav__inner { padding-left: 16px; }
  /* Portaled dropdowns shouldn't open on mobile (their triggers are hidden) */
  .nav__dropdown-layer { display: none; }
}

/* =========================================================
   Footer (glass)
   ========================================================= */
.footer {
  background: transparent;
  border-top: 1px solid var(--hairline);
  padding: 80px 0 40px;
  position: relative;
  z-index: 2;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 64px;
}
.footer__brand p { color: var(--text-2); max-width: 30ch; margin: 16px 0 24px; }
.footer__col h5 {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 18px;
  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: 14.5px;
  color: var(--text);
  transition: color .2s ease;
  display: inline-block;
  position: relative;
}
.footer__col a:hover { color: var(--accent); }
.footer__store { display: flex; gap: 8px; margin-bottom: 18px; }
.footer__store img { height: 40px; }
.footer__social { display: flex; gap: 14px; }
.footer__social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.footer__social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--text-3);
}
.footer__legal a { color: var(--text-2); }
.footer__legal a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* =========================================================
   Decorative glass surfaces (uic / fchip)
   ========================================================= */
.uic {
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  color: #fff;
  padding: 16px 18px;
  box-shadow: 0 30px 60px -28px rgba(15, 23, 42, 0.55);
}
.uic__row { display: flex; align-items: center; gap: 14px; }
.uic__logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  position: relative;
  flex-shrink: 0;
}
.uic__logo::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 12px; height: 12px;
  border-radius: 3px;
  background: linear-gradient(135deg, #C9C2FF, #FFB7C5);
  transform: rotate(45deg);
}
.uic__title { font-size: 17px; font-weight: 500; line-height: 1.25; color: #fff; }
.uic__sub { font-size: 13.5px; color: rgba(255,255,255,0.55); margin-top: 2px; }

.fchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--glass-border);
  border-top-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-glass);
}
.fchip--lime { background: var(--accent); color: var(--ink); border-color: transparent; }
.fchip__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

/* =========================================================
   Reveal states (GSAP animates from these)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal-up { opacity: 0; transform: translateY(40px); }
.reveal-down { opacity: 0; transform: translateY(-30px); }
.reveal-left { opacity: 0; transform: translateX(-40px); }
.reveal-right { opacity: 0; transform: translateX(40px); }
.reveal-scale { opacity: 0; transform: scale(0.94); }
.no-js .reveal,
.no-js .reveal-up,
.no-js .reveal-down,
.no-js .reveal-left,
.no-js .reveal-right,
.no-js .reveal-scale { opacity: 1; transform: none; }

/* =========================================================
   Scrollbar + focus + selection
   ========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.32); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: inherit;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* =========================================================
   Accessibility overrides
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .orb-field { display: none; }
  .nav .container.nav__inner::before { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .orb-field { display: none; }
  body { background: var(--canvas-base); }
  body::before { display: none; }
  .nav .container.nav__inner,
  .nav__dropdown,
  .nav__mobile,
  .fchip,
  .btn--ghost,
  .footer__social a {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
  }
  .btn--ghost-dark {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 20, 30, 0.95);
  }
  .cursor-dot, .cursor-ring { display: none !important; }
  body, body * { cursor: auto !important; }
}

@media (prefers-contrast: more) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-bg-hover: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(15, 23, 42, 0.30);
    --text-2: rgba(15, 23, 42, 0.85);
    --text-3: rgba(15, 23, 42, 0.65);
  }
}

/* =========================================================
   Hero cursor-tracking glow (--mx / --my set by glass.js)
   ========================================================= */
.hero, .page-hero, .cta-final, .post-cover { position: relative; }
.hero::after, .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 360px at var(--mx, 50%) var(--my, 30%),
    rgba(91, 107, 255, 0.10),
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity .25s ease;
}