/* ═══════════════════════════════════════════════════════════════════
   marketing-premium.css — Ultra-premium enhancement layer.

   Loaded AFTER marketing.css so it refines and overrides without
   touching the base structure. Everything here is additive material +
   motion: ambient depth, an orchestrated hero boot-up, cursor-reactive
   jewel glow, a living CTA, disciplined scroll reveals, and dark-luxury
   drama. Tokens only, both themes, reduced-motion honoured throughout.

   Thesis: this product scores a career like a credit score — the page
   should feel like a precision instrument measuring you in real time.
═══════════════════════════════════════════════════════════════════ */

/* ── Global craft: crisper text, refined selection, smooth anchor ── */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgb(99 91 255 / 0.22); color: inherit; }

/* Ambient page depth — a fixed, barely-there bloom that gives the whole
   canvas a sense of light. Richer in dark, whisper-quiet in light. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 82% -5%, rgb(99 91 255 / 0.10) 0%, transparent 60%),
    radial-gradient(50% 40% at 10% 8%, rgb(122 115 255 / 0.07) 0%, transparent 55%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(65% 55% at 84% -8%, rgb(122 115 255 / 0.20) 0%, transparent 60%),
    radial-gradient(55% 45% at 6% 6%, rgb(83 58 253 / 0.16) 0%, transparent 55%),
    radial-gradient(50% 60% at 50% 108%, rgb(56 189 248 / 0.08) 0%, transparent 55%);
}

/* Film grain — the matte, expensive texture. Soft-light so it never
   muddies colour; near-invisible in light, felt in dark. */
.premium-grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
[data-theme="dark"] .premium-grain { opacity: 0.5; }

/* Scroll progress — a thin brand-gradient meter of how far you've read. */
.premium-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 101;
  pointer-events: none;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-ai) 55%, #38bdf8 100%);
  box-shadow: 0 0 12px rgb(99 91 255 / 0.5);
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────────
   NAV — refined frosted glass + animated link underline
───────────────────────────────────────────────────────────────── */
.marketing-nav {
  background: rgb(255 255 255 / 0.72);
  border-bottom-color: rgb(10 37 64 / 0.06);
  transition:
    box-shadow var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}
[data-theme="dark"] .marketing-nav { background: rgb(15 17 23 / 0.62); }
.marketing-nav--scrolled {
  background: rgb(255 255 255 / 0.85);
  box-shadow: 0 1px 0 rgb(10 37 64 / 0.06), var(--shadow-md);
}
[data-theme="dark"] .marketing-nav--scrolled { background: rgb(15 17 23 / 0.82); }

/* Hover underline that sweeps in (not just the active state) */
.marketing-nav__link { background: transparent; }
.marketing-nav__link:hover { background: transparent; }
.marketing-nav__link::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duration-normal) var(--ease-butter);
}
.marketing-nav__link:hover::after,
.marketing-nav__link--active::after { transform: scaleX(1); }

/* ─────────────────────────────────────────────────────────────────
   BUTTONS — living primary CTA with sheen sweep + magnetic support
───────────────────────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; isolation: isolate; }

/* Diagonal light sheen that sweeps across on hover */
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgb(255 255 255 / 0.32) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform var(--duration-slower) var(--ease-butter);
}
.btn--primary:hover::before { transform: translateX(120%); }

.btn--primary {
  background-image: var(--gradient-brand);
  box-shadow: var(--shadow-primary), inset 0 1px 0 rgb(255 255 255 / 0.24);
}
.btn--primary:hover {
  box-shadow: var(--shadow-primary-lg), 0 0 0 1px rgb(99 91 255 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.3);
}

/* Magnetic buttons translate toward the cursor (JS sets --mx/--my) */
[data-magnetic] {
  transition:
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal) var(--ease-butter);
  transform: translate(var(--mx, 0), var(--my, 0));
}
[data-magnetic]:hover { transform: translate(var(--mx, 0), var(--my, 0)) translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--primary::before { display: none; }
  [data-magnetic], [data-magnetic]:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   HERO — cinematic canvas, living glow frame, orchestrated boot-up
───────────────────────────────────────────────────────────────── */
.hero-section { position: relative; overflow: hidden; }

/* A second, slower aurora layer + a soft vignette for depth */
.hero-section__bg { will-change: transform, opacity; }
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, transparent 55%, rgb(10 37 64 / 0.35) 100%);
  z-index: 0;
}
.hero-section__content { position: relative; z-index: 1; }

/* Eyebrow gets a live pulsing status dot — "measuring, now" */
.hero-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.hero-section__eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgb(52 211 153 / 0.6);
  animation: premium-pulse 2.4s var(--ease-out) infinite;
}

/* Living gradient-glow frame around the product showcase */
.hero-section__showcase { position: relative; }
.hero-section__showcase::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: calc(var(--radius-2xl) + 6px);
  background: conic-gradient(from 0deg,
    rgb(99 91 255 / 0.0) 0deg,
    rgb(122 115 255 / 0.55) 90deg,
    rgb(56 189 248 / 0.35) 180deg,
    rgb(99 91 255 / 0.0) 300deg);
  filter: blur(14px);
  opacity: 0.55;
  animation: premium-spin 9s linear infinite;
}
.hero-section__showcase .device-frame { position: relative; z-index: 1; }

/* The device frame itself floats, gently */
.device-frame { animation: premium-float 7s var(--ease-in-out) infinite; }

/* Tame the display size so the headline lands as a confident 3–4 lines,
   not a stack of stranded words; tighten leading + tracking for weight. */
.hero-section__headline {
  font-size: clamp(2.25rem, 1.1rem + 3.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero-section__sub { text-wrap: pretty; }

/* Boot-up choreography: children start settled-down, then rise into
   place in sequence once #main-content is revealed (JS adds .is-hero-in).
   Progressive enhancement — the hidden pre-state applies ONLY after JS marks
   <html> .premium-ready, so if the script never runs the hero stays visible. */
.premium-ready #hero .hero-section__eyebrow,
.premium-ready #hero .hero-section__headline,
.premium-ready #hero .hero-section__sub,
.premium-ready #hero .hero-section__actions,
.premium-ready #hero .hero-section__trust,
.premium-ready #hero .hero-section__showcase {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-butter),
    transform var(--duration-slower) var(--ease-butter);
}
#hero.is-hero-in .hero-section__eyebrow  { opacity: 1; transform: none; transition-delay: 0.05s; }
#hero.is-hero-in .hero-section__headline { opacity: 1; transform: none; transition-delay: 0.14s; }
#hero.is-hero-in .hero-section__sub      { opacity: 1; transform: none; transition-delay: 0.24s; }
#hero.is-hero-in .hero-section__actions  { opacity: 1; transform: none; transition-delay: 0.34s; }
#hero.is-hero-in .hero-section__trust    { opacity: 1; transform: none; transition-delay: 0.42s; }
#hero.is-hero-in .hero-section__showcase { opacity: 1; transform: none; transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .device-frame,
  .hero-section__showcase::before,
  .hero-section__eyebrow::before { animation: none; }
  #hero .hero-section__eyebrow,
  #hero .hero-section__headline,
  #hero .hero-section__sub,
  #hero .hero-section__actions,
  #hero .hero-section__trust,
  #hero .hero-section__showcase { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   SECTION RHYTHM + REVEAL POLISH
───────────────────────────────────────────────────────────────── */
/* Hairline gradient divider between stacked feature sections */
.feature-section + .feature-section .feature-section__inner {
  position: relative;
}

/* Slightly larger, tighter section headings for a display feel */
.feature-section__heading,
.analysis-demo__title,
.final-cta-section__heading {
  letter-spacing: -0.03em;
}

/* Eyebrows across sections get a leading hairline for editorial structure */
.feature-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.feature-section__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
}

/* ─────────────────────────────────────────────────────────────────
   CURSOR-REACTIVE JEWEL GLOW — the signature interaction
   JS adds [data-spotlight] to feature visuals and sets --mx/--my.
───────────────────────────────────────────────────────────────── */
[data-spotlight] {
  position: relative;
  isolation: isolate;
}
[data-spotlight]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgb(122 115 255 / 0.18) 0%,
    transparent 60%);
}
[data-spotlight]:hover::after { opacity: 1; }
[data-theme="dark"] [data-spotlight]::after {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgb(142 136 255 / 0.28) 0%,
    transparent 60%);
}

/* Subtle tilt wrapper — JS sets --rx/--ry from cursor position */
[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--duration-slow) var(--ease-butter);
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: reduce) {
  [data-spotlight]::after { display: none; }
  [data-tilt] { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   FINAL CTA — the showstopper close
───────────────────────────────────────────────────────────────── */
.final-cta-section { position: relative; overflow: hidden; }
.final-cta-section::after {
  content: '';
  position: absolute;
  inset: -40% 10% auto 10%;
  height: 380px;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, rgb(122 115 255 / 0.35) 0%, transparent 70%);
  filter: blur(10px);
  z-index: 0;
}
.final-cta-section > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────────
   TRUST STRIP — quiet, refined hairline row
───────────────────────────────────────────────────────────────── */
.trust-strip__item { transition: transform var(--duration-normal) var(--ease-butter); }
.trust-strip__item:hover { transform: translateY(-3px); }

/* ─────────────────────────────────────────────────────────────────
   KEYFRAMES (namespaced so they never collide with motion.css)
───────────────────────────────────────────────────────────────── */
@keyframes premium-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes premium-spin {
  to { transform: rotate(360deg); }
}
@keyframes premium-pulse {
  0%   { box-shadow: 0 0 0 0 rgb(52 211 153 / 0.6); }
  70%  { box-shadow: 0 0 0 8px rgb(52 211 153 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(52 211 153 / 0); }
}