/* ==========================================================================
   MetaXAI — Shared Design System
   Hand-written, original. One stylesheet for all 8 pages.

   TABLE OF CONTENTS
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout: container & grid utilities
   05. Buttons
   06. Badges, eyebrows & prompt chips
   07. Icon badges
   08. Header & navigation (desktop + mobile drawer)
   09. Heroes (home hero, page hero, aurora wash)
   10. Sections & section-title block
   11. Feature blocks (alternating two-column)
   12. Cards (base, benefit, use-case, capability, testimonial,
       value, step, pack)
   13. Media frame & floating accent cards
   14. Ticker / marquee (logo ticker + keyword marquee)
   15. Stats band
   16. Pricing (billing toggle, plan cards, popular highlight,
       credit packs, help box)
   17. Accordion (FAQ)
   18. Newsletter
   19. Trial CTA band
   20. Contact box
   21. Code panel (developer snippet)
   22. Legal prose layout
   23. Footer
   24. Scroll reveal
   25. Helpers & accessibility
   26. Responsive adjustments
   27. Reduced motion
   28. Polish layer (hero entrance & self-demo, back-to-top,
       newsletter checkmark)
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Palette */
  --c-bg:            #F8F9FA;
  --c-surface:       #FFFFFF;
  --c-surface-alt:   #F3F2FA;
  --c-ink:           #1E2130;
  --c-ink-soft:      #565C74;
  --c-ink-faint:     #686D83; /* ≥4.5:1 on #F8F9FA/#FFF (WCAG AA small text) */
  --c-line:          rgba(30, 33, 48, 0.08);
  --c-line-strong:   rgba(30, 33, 48, 0.14);

  --c-primary:       #5C2BFF;
  --c-primary-deep:  #4A1FD6;
  --c-accent:        #FF4268;
  --c-green:         #0FD194;
  --c-cyan:          #13BDDF;
  --c-yellow:        #F5B923;

  /* Tints (backgrounds behind colored elements) */
  --t-primary:       rgba(92, 43, 255, 0.08);
  --t-primary-mid:   rgba(92, 43, 255, 0.16);
  --t-accent:        rgba(255, 66, 104, 0.10);
  --t-green:         rgba(15, 209, 148, 0.12);
  --t-cyan:          rgba(19, 189, 223, 0.12);
  --t-yellow:        rgba(245, 185, 35, 0.16);

  /* Gradients */
  --grad-brand:      linear-gradient(135deg, #5C2BFF 0%, #FF4268 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(92,43,255,0.12), rgba(255,66,104,0.12));
  --grad-cool:       linear-gradient(135deg, #13BDDF 0%, #5C2BFF 100%);
  --grad-warm:       linear-gradient(135deg, #FF4268 0%, #F5B923 100%);

  /* Type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace;

  /* Radii */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(20, 22, 40, 0.05), 0 2px 8px rgba(20, 22, 40, 0.05);
  --shadow-md:    0 4px 12px rgba(20, 22, 40, 0.05), 0 14px 34px rgba(20, 22, 40, 0.08);
  --shadow-lg:    0 8px 24px rgba(20, 22, 40, 0.08), 0 28px 64px rgba(30, 33, 48, 0.12);
  --shadow-brand: 0 10px 26px rgba(92, 43, 255, 0.30);

  /* Layout */
  --container:    1160px;
  --gutter:       clamp(20px, 4vw, 32px);
  --header-h:     72px;
  --section-pad:  clamp(64px, 9vw, 112px);

  /* Motion
     micro 150ms | hover 220ms | reveal 600ms | hero step 700ms
     entrances use --ease-out, hovers use --ease-hover. */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro:   150ms;
  --dur:         220ms;
  --dur-reveal:  600ms;
  --dur-hero:    700ms;
}


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink);
  background-color: var(--c-bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.nav-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
}

a {
  color: var(--c-primary);
  text-decoration: none;
}

address {
  font-style: normal;
}

main {
  display: block;
  padding-top: var(--header-h);
}

::selection {
  background: var(--t-primary-mid);
  color: var(--c-ink);
}


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 3.7rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.55rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.3; }
h4 { font-size: 1.1rem; line-height: 1.35; }

p {
  color: var(--c-ink-soft);
}

strong {
  color: var(--c-ink);
  font-weight: 700;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  color: var(--c-ink-soft);
  max-width: 42em;
  text-wrap: pretty;
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--c-primary);
}

.text-link::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease-out);
}

.text-link:hover {
  color: var(--c-primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link:hover::after {
  transform: translateX(4px);
}

.muted {
  color: var(--c-ink-faint);
}


/* ==========================================================================
   04. LAYOUT: CONTAINER & GRID UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(820px + var(--gutter) * 2);
}

.grid {
  display: grid;
  gap: clamp(20px, 2.6vw, 28px);
}

/* All grids stack to one column on small screens; widen at 640/768/1024. */
@media (min-width: 640px) {
  .grid--2,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.flow > * + * {
  margin-top: 1em;
}

.center {
  text-align: center;
}


/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 1.7em;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition:
    transform var(--dur) var(--ease-hover),
    box-shadow var(--dur) var(--ease-hover),
    background-color var(--dur) var(--ease-hover),
    background-position 0.45s var(--ease-hover),
    border-color var(--dur) var(--ease-hover),
    color var(--dur) var(--ease-hover);
}

/* Pressed state compresses quickly */
.btn:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: var(--dur-micro);
}

/* Primary: brand gradient that pans on hover */
.btn--primary {
  background-image: var(--grad-brand);
  background-size: 170% 170%;
  background-position: 0% 35%;
  color: #fff;
  box-shadow: 0 6px 18px rgba(92, 43, 255, 0.24);
}

.btn--primary:hover {
  transform: translateY(-2px);
  background-position: 95% 65%;
  box-shadow: var(--shadow-brand);
  color: #fff;
}

/* Ghost / secondary: border tightens and a tint fills on hover */
.btn--ghost {
  background: var(--c-surface);
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}

.btn--ghost:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  background: var(--t-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Light: for use on the gradient trial band */
.btn--light {
  background: #fff;
  color: var(--c-primary);
  box-shadow: 0 8px 22px rgba(20, 22, 40, 0.22);
}

.btn--light:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(20, 22, 40, 0.3);
  color: var(--c-primary-deep);
}

/* Sizes */
.btn--lg {
  padding: 1em 2.1em;
  font-size: 1.05rem;
}

.btn--sm {
  padding: 0.6em 1.3em;
  font-size: 0.875rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.btn-row--center {
  justify-content: center;
}


/* ==========================================================================
   06. BADGES, EYEBROWS & PROMPT CHIPS
   ========================================================================== */

/* Hero pill badge, e.g. "New: AI Video Generator" */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 1.1em;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-ink-soft);
}

.badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-image: var(--grad-brand);
  flex: none;
}

.badge strong {
  color: var(--c-primary);
}

/* Section eyebrow — small tinted pill above every H2 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 1em;
  border-radius: var(--r-pill);
  background: var(--t-primary);
  color: var(--c-primary);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Prompt chips (hero sample prompts) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.05em;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  transition:
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--c-cyan);
}

.chip:nth-child(4n + 2)::before { background: var(--c-accent); }
.chip:nth-child(4n + 3)::before { background: var(--c-green); }
.chip:nth-child(4n + 4)::before { background: var(--c-yellow); }

a.chip:hover,
button.chip:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   07. ICON BADGES (tinted square behind a 24px stroke icon)
   ========================================================================== */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--t-primary);
  color: var(--c-primary);
  flex: none;
  transition: transform var(--dur) var(--ease-hover);
}

.icon-badge svg {
  width: 24px;
  height: 24px;
}

.icon-badge--pink   { background: var(--t-accent); color: var(--c-accent); }
.icon-badge--green  { background: var(--t-green);  color: var(--c-green); }
.icon-badge--cyan   { background: var(--t-cyan);   color: var(--c-cyan); }
.icon-badge--yellow { background: var(--t-yellow); color: #C98F0A; }

.icon-badge--grad {
  background-image: var(--grad-brand);
  color: #fff;
}


/* ==========================================================================
   08. HEADER & NAVIGATION
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--c-ink);
  color: #fff;
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    height var(--dur) var(--ease-hover),
    box-shadow var(--dur) var(--ease-hover),
    border-color var(--dur) var(--ease-hover);
}

/* The blur layer lives on a pseudo-element so the header itself has no
   backdrop-filter — a backdrop-filter would turn the header into the
   containing block for the fixed-position mobile drawer (.site-nav). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(248, 249, 250, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.site-header.is-scrolled {
  border-bottom-color: var(--c-line);
  box-shadow: 0 8px 30px rgba(20, 22, 40, 0.07);
}

/* Slight shrink once scrolled (desktop only; the mobile drawer's top edge
   is pinned to --header-h and must not drift). */
@media (min-width: 960px) {
  .site-header.is-scrolled {
    height: calc(var(--header-h) - 8px);
  }
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand-logo {
  height: 34px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 22px);
}

.nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  transition: color var(--dur) var(--ease-hover);
}

/* Gradient underline slides in from the left on hover/focus, stays on
   the active page link. */
.nav-link::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 2px;
  height: 2.5px;
  border-radius: var(--r-pill);
  background-image: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-hover);
}

.nav-link:hover {
  color: var(--c-ink);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-link.is-active {
  color: var(--c-primary);
}

.nav-cta:hover {
  transform: translateY(-1px);
}

/* Hamburger */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--c-ink);
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(4) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile drawer */
@media (max-width: 959px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    z-index: 110;
    width: min(82vw, 360px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px var(--gutter) 32px;
    background: var(--c-surface);
    border-left: 1px solid var(--c-line);
    box-shadow: -24px 0 60px rgba(20, 22, 40, 0.14);
    transform: translateX(105%);
    visibility: hidden;
    transition:
      transform 0.32s var(--ease-out),
      visibility 0.32s;
    overflow-y: auto;
  }

  .site-header.nav-open .site-nav {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  /* Drawer links slide in one after another (40ms stagger) */
  .nav-list li {
    opacity: 0;
    transform: translateX(18px);
    transition:
      opacity 0.35s var(--ease-out),
      transform 0.35s var(--ease-out);
  }

  .site-header.nav-open .nav-list li {
    opacity: 1;
    transform: none;
  }

  .site-header.nav-open .nav-list li:nth-child(1) { transition-delay: 40ms; }
  .site-header.nav-open .nav-list li:nth-child(2) { transition-delay: 80ms; }
  .site-header.nav-open .nav-list li:nth-child(3) { transition-delay: 120ms; }
  .site-header.nav-open .nav-list li:nth-child(4) { transition-delay: 160ms; }
  .site-header.nav-open .nav-list li:nth-child(5) { transition-delay: 200ms; }
  .site-header.nav-open .nav-list li:nth-child(6) { transition-delay: 240ms; }
  .site-header.nav-open .nav-list li:nth-child(n + 7) { transition-delay: 280ms; }

  .nav-link {
    display: block;
    padding: 13px 14px;
    border-radius: var(--r-sm);
    font-size: 1.05rem;
  }

  .nav-link:hover {
    background: var(--c-bg);
  }

  .nav-link.is-active {
    background: var(--t-primary);
  }

  .nav-link::after {
    display: none;
  }

  .site-nav .nav-cta {
    margin-top: 20px;
    width: 100%;
    opacity: 0;
    transform: translateX(18px);
    transition:
      opacity 0.35s var(--ease-out),
      transform 0.35s var(--ease-out);
  }

  .site-header.nav-open .site-nav .nav-cta {
    opacity: 1;
    transform: none;
    transition-delay: 300ms;
  }
}

/* Backdrop overlay behind the drawer — injected by app.js */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 22, 40, 0.32);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.32s var(--ease-hover),
    visibility 0.32s;
}

.nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 960px) {
  .nav-overlay {
    display: none;
  }
}


/* ==========================================================================
   09. HEROES
   ========================================================================== */

/* Soft multi-color "aurora" wash — the signature ambient background.
   Apply the class to .hero / .page-hero / any section that wants it. */
.has-aurora {
  position: relative;
  overflow: clip;
}

.has-aurora::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(38% 44% at 16% 18%, rgba(92, 43, 255, 0.14), transparent 70%),
    radial-gradient(34% 40% at 84% 12%, rgba(255, 66, 104, 0.12), transparent 70%),
    radial-gradient(30% 36% at 70% 88%, rgba(19, 189, 223, 0.12), transparent 70%),
    radial-gradient(24% 30% at 8% 90%, rgba(15, 209, 148, 0.10), transparent 70%);
}

/* Barely-there ambient drift (transform-only, 36s) */
.js-anim .has-aurora::before {
  animation: aurora-drift 36s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
}

/* Home hero */
.hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px);
  text-align: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero h1 {
  max-width: 17em;
}

.hero .lead {
  max-width: 38em;
}

.hero-visual {
  position: relative;
  width: min(960px, 100%);
  margin: clamp(32px, 5vw, 56px) auto 0;
}

/* Inner-page hero */
.page-hero {
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px);
  text-align: center;
}

.page-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.page-hero h1 {
  max-width: 16em;
}

/* Decorative blob — absolutely position inside any position:relative box */
.blob {
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background-image: var(--grad-brand);
  opacity: 0.16;
  filter: blur(70px);
  pointer-events: none;
}

.blob--cool { background-image: var(--grad-cool); }
.blob--warm { background-image: var(--grad-warm); }


/* ==========================================================================
   10. SECTIONS & SECTION-TITLE BLOCK
   ========================================================================== */

.section {
  padding-block: var(--section-pad);
}

.section--alt {
  background: var(--c-surface);
  border-block: 1px solid var(--c-line);
}

.section--tight {
  padding-block: calc(var(--section-pad) * 0.6);
}

/* Eyebrow + H2 + subline, centered by default */
.section-title {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.section-title .section-sub {
  font-size: 1.05rem;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.section-title--left {
  margin-inline: 0;
  text-align: left;
  align-items: flex-start;
}


/* ==========================================================================
   11. FEATURE BLOCKS (alternating two-column)
   ========================================================================== */

.feature-block {
  display: grid;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.feature-block + .feature-block {
  margin-top: clamp(64px, 9vw, 112px);
}

@media (min-width: 900px) {
  .feature-block {
    grid-template-columns: 1fr 1fr;
  }

  /* Flip: media on the left, copy on the right */
  .feature-block--flip .feature-media {
    order: -1;
  }
}

.feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.feature-copy h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
}

.feature-media {
  position: relative;
}

/* Bullet checks */
.check-list {
  display: grid;
  gap: 12px;
}

.check-list li {
  position: relative;
  padding-left: 34px;
  color: var(--c-ink-soft);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--t-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230FD194' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m5.5 10.5 3 3L14.5 7'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}


/* ==========================================================================
   12. CARDS
   ========================================================================== */

.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease-hover),
    box-shadow var(--dur) var(--ease-hover),
    border-color var(--dur) var(--ease-hover);
}

/* Gradient ring that fades in on hover — opacity-only, masked to the
   border area so card content is untouched. */
.card--hover::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(92, 43, 255, 0.5), rgba(255, 66, 104, 0.35));
  -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;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-hover);
}

.card--hover:hover::after,
.card--hover:focus-within::after {
  opacity: 1;
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(92, 43, 255, 0.22);
}

/* Icon chip inside a hovered card tips and grows a touch */
.card--hover:hover .icon-badge {
  transform: rotate(-3deg) scale(1.06);
}

/* Benefit / value / pillar card: icon badge on top */
.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.benefit-card h3 {
  font-size: 1.15rem;
}

.benefit-card p {
  font-size: 0.95rem;
}

/* Use-case card: icon + heading + two sentences */
.use-case-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
}

.use-case-card h3 {
  font-size: 1.1rem;
}

.use-case-card p {
  font-size: 0.95rem;
}

/* Capability card: compact grid tile */
.capability-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 24px;
}

.capability-card h3 {
  font-size: 1.02rem;
}

.capability-card p {
  font-size: 0.9rem;
}

.capability-card .text-link {
  margin-top: auto;
  font-size: 0.9rem;
}

/* Testimonial card */
.testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding-top: 56px;
}

.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 10px;
  left: 24px;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.testimonial-quote {
  font-size: 1rem;
  color: var(--c-ink);
  text-wrap: pretty;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-image: var(--grad-brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  flex: none;
}

.avatar--cool { background-image: var(--grad-cool); }
.avatar--warm { background-image: var(--grad-warm); }

.author-name {
  display: block;
  font-weight: 700;
  color: var(--c-ink);
  font-size: 0.95rem;
  line-height: 1.3;
}

.author-role {
  display: block;
  font-size: 0.85rem;
  color: var(--c-ink-faint);
  line-height: 1.4;
}

/* Numbered step card ("How we work") */
.step-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
}

.step-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step-card h3 {
  font-size: 1.05rem;
}

.step-card p {
  font-size: 0.92rem;
}


/* ==========================================================================
   13. MEDIA FRAME & FLOATING ACCENT CARDS
   ========================================================================== */

/* Rounded panel that wraps any inline SVG illustration / mockup */
.media-frame {
  border-radius: var(--r-xl);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.media-frame svg {
  width: 100%;
  height: auto;
}

/* Small floating accent card over a hero/feature visual.
   Static without .js-anim; gentle 6s float loop with motion enabled. */
.float-card {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-ink);
}

.js-anim .float-card {
  animation: floaty 6s ease-in-out infinite alternate;
}

.js-anim .float-card--delay {
  animation-delay: -2.75s;
}

/* In the home hero they also drift in after the mockup rises */
.js-anim .hero .float-card {
  animation:
    float-card-in var(--dur-hero) var(--ease-out) 1.05s backwards,
    floaty 6.4s ease-in-out 1.75s infinite alternate;
}

.js-anim .hero .float-card--delay {
  animation-delay: 1.3s, 2s;
  animation-duration: var(--dur-hero), 7.4s;
}

@keyframes floaty {
  from { transform: translateY(-6px); }
  to   { transform: translateY(8px); }
}

@keyframes float-card-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(-6px); }
}

@media (max-width: 767px) {
  .float-card {
    display: none;
  }
}


/* ==========================================================================
   14. TICKER / MARQUEE
   The track holds two identical lists; the second is aria-hidden.
   Each list carries its own gap AND matching right padding so a
   translateX(-50%) loop is seamless.
   ========================================================================== */

.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
}

/* Autoplay only when app.js enables motion (.js-anim on <html>);
   crawlers, no-JS, reduced-motion and webdriver get a static row. */
.js-anim .ticker-track {
  animation: ticker-scroll 52s linear infinite;
}

.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

.ticker-list {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(36px, 5vw, 64px);
  padding-right: clamp(36px, 5vw, 64px);
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

/* Logo ticker: fictional team names as text wordmarks */
.ticker--logos .ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(30, 33, 48, 0.42);
  white-space: nowrap;
}

.ticker--logos .ticker-item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
  flex: none;
}

/* Keyword marquee: tinted capability pills */
.js-anim .ticker--keywords .ticker-track {
  animation-duration: 64s;
}

.ticker--keywords .ticker-list {
  gap: 14px;
  padding-right: 14px;
}

.ticker--keywords .ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.3em;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--t-primary);
  color: var(--c-primary);
}

.ticker--keywords .ticker-item:nth-child(5n + 2) { background: var(--t-accent); color: var(--c-accent); }
.ticker--keywords .ticker-item:nth-child(5n + 3) { background: var(--t-green);  color: #0AA476; }
.ticker--keywords .ticker-item:nth-child(5n + 4) { background: var(--t-cyan);   color: #0E97B2; }
.ticker--keywords .ticker-item:nth-child(5n + 5) { background: var(--t-yellow); color: #B57F06; }

.ticker--reverse .ticker-track {
  animation-direction: reverse;
}


/* ==========================================================================
   15. STATS BAND
   ========================================================================== */

.stats-band {
  position: relative;
  overflow: clip;
  background: #17192B;
  border-radius: var(--r-2xl);
  padding: clamp(36px, 5vw, 56px);
}

.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42% 60% at 12% 0%, rgba(92, 43, 255, 0.35), transparent 70%),
    radial-gradient(38% 55% at 92% 100%, rgba(255, 66, 104, 0.28), transparent 70%);
  pointer-events: none;
}

.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 20px;
  text-align: center;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(120deg, #B9A3FF 0%, #FF9AB0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}


/* ==========================================================================
   16. PRICING
   ========================================================================== */

/* Billing toggle */
.billing-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(30, 33, 48, 0.06);
  border: 1px solid var(--c-line);
}

/* Sliding pill thumb — position/size come from --bt-x / --bt-w, which
   app.js measures from the selected option. Hidden until JS runs
   (.has-thumb); the .is-selected background is the no-JS fallback. */
.billing-toggle::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: var(--bt-w, 0px);
  transform: translateX(var(--bt-x, 0px));
  border-radius: var(--r-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition:
    transform 0.4s var(--ease-spring),
    width 0.3s var(--ease-hover),
    opacity var(--dur) var(--ease-hover);
}

.billing-toggle.has-thumb::before {
  opacity: 1;
}

.billing-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--c-ink-soft);
  transition:
    background-color var(--dur) var(--ease-hover),
    color var(--dur) var(--ease-hover),
    box-shadow var(--dur) var(--ease-hover);
}

.billing-option.is-selected {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}

.billing-toggle.has-thumb .billing-option.is-selected {
  background: transparent;
  box-shadow: none;
}

.billing-save {
  display: inline-flex;
  padding: 0.2em 0.7em;
  border-radius: var(--r-pill);
  background: var(--t-green);
  color: #0B7D5C;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Yearly badge pulses once when yearly is chosen (class from app.js) */
.billing-pulse {
  animation: billing-pulse 0.5s var(--ease-out);
}

@keyframes billing-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* Price crossfade on billing switch: old value slides up and out, the
   swapped value drops back in. app.js swaps the text mid-animation. */
[data-monthly][data-yearly] {
  display: inline-block;
}

.price-swap {
  animation: price-swap 0.38s var(--ease-out);
}

@keyframes price-swap {
  0%   { opacity: 1; transform: translateY(0); }
  38%  { opacity: 0; transform: translateY(-8px); }
  52%  { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.pricing-head {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(32px, 5vw, 48px);
}

/* Show/hide helpers driven by data-billing on the [data-pricing] section */
[data-pricing][data-billing="monthly"] .yearly-only,
[data-pricing][data-billing="yearly"] .monthly-only {
  display: none;
}

/* Plan cards */
.pricing-grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(26px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease-hover),
    box-shadow var(--dur) var(--ease-hover),
    border-color var(--dur) var(--ease-hover);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(92, 43, 255, 0.26);
}

/* "Most Popular" — gradient border + badge */
.pricing-card--popular {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 900px) {
  .pricing-card--popular {
    transform: translateY(-14px);
  }

  .pricing-card--popular:hover {
    transform: translateY(-20px);
  }
}

.popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.4em 1.2em;
  border-radius: var(--r-pill);
  background-image: var(--grad-brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(92, 43, 255, 0.35);
}

.plan-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

.plan-desc {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  margin-top: 6px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-amount {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.price-period {
  font-size: 0.95rem;
  color: var(--c-ink-faint);
}

.price-note {
  font-size: 0.82rem;
  color: var(--c-ink-faint);
  margin-top: 4px;
}

.plan-features {
  display: grid;
  gap: 11px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}

.plan-features li {
  position: relative;
  padding-left: 30px;
  font-size: 0.93rem;
  color: var(--c-ink-soft);
}

.plan-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: var(--t-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%235C2BFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m5.5 10.5 3 3L14.5 7'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.pricing-card .btn {
  margin-top: auto;
}

/* Credit top-up packs */
.pack-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
}

.pack-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pack-credits {
  font-weight: 700;
  color: var(--c-ink);
}

.pack-note {
  font-size: 0.88rem;
  color: var(--c-ink-faint);
}

/* "Not sure which plan?" help box */
.help-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: var(--t-primary);
  border: 1px solid rgba(92, 43, 255, 0.18);
}

.help-box h3 {
  font-size: 1.15rem;
}

.help-box p {
  font-size: 0.95rem;
  margin-top: 4px;
}


/* ==========================================================================
   17. ACCORDION (FAQ)
   ========================================================================== */

.accordion {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin-inline: auto;
}

.accordion-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease-out);
}

.accordion-item.is-open {
  border-color: rgba(92, 43, 255, 0.3);
}

.accordion-item.is-open .accordion-trigger {
  color: var(--c-primary);
}

.accordion-heading {
  margin: 0;
  font-size: inherit;
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  border-radius: var(--r-md);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-ink);
  transition: color var(--dur) var(--ease-out);
}

.accordion-trigger:hover {
  color: var(--c-primary);
}

.accordion-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--c-primary);
  transition: transform 0.3s var(--ease-out);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.32s var(--ease-out),
    visibility 0.32s;
}

.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.accordion-body {
  overflow: hidden;
  min-height: 0;
}

.accordion-body p {
  padding: 0 22px 20px;
  font-size: 0.95rem;
}

.accordion-body p + p {
  margin-top: -8px;
}

/* Group label above a set of accordion items (faq.html, pricing.html) */
.accordion-group-label {
  max-width: 820px;
  margin: clamp(40px, 6vw, 56px) auto 18px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
}

.accordion-group-label:first-of-type {
  margin-top: 0;
}


/* ==========================================================================
   18. NEWSLETTER
   ========================================================================== */

.newsletter-panel {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 52px);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.newsletter-panel h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}

.newsletter-panel > p {
  margin-top: 10px;
  font-size: 0.98rem;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.newsletter-form .input {
  flex: 1 1 260px;
  max-width: 380px;
}

.input {
  padding: 0.85em 1.3em;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line-strong);
  background: var(--c-bg);
  font-size: 0.95rem;
  color: var(--c-ink);
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.input::placeholder {
  color: var(--c-ink-faint);
}

.input:focus {
  outline: none;
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 0 0 4px var(--t-primary);
}

.form-msg {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0AA476;
}

.form-msg.is-error {
  color: var(--c-accent);
}

.form-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--c-ink-faint);
}

.form-note a {
  color: var(--c-ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-note a:hover {
  color: var(--c-primary);
}


/* ==========================================================================
   19. TRIAL CTA BAND
   ========================================================================== */

.trial-cta {
  position: relative;
  overflow: clip;
  background-image: var(--grad-brand);
  padding-block: clamp(56px, 8vw, 88px);
  text-align: center;
}

.trial-cta::before,
.trial-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.trial-cta::before {
  width: 420px;
  height: 420px;
  top: -220px;
  left: -140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%);
}

.trial-cta::after {
  width: 380px;
  height: 380px;
  bottom: -200px;
  right: -120px;
  background: radial-gradient(circle, rgba(30, 33, 48, 0.28), transparent 70%);
}

/* Slow orb drift over the gradient band */
.js-anim .trial-cta::before {
  animation: orb-drift 30s ease-in-out infinite alternate;
}

.js-anim .trial-cta::after {
  animation: orb-drift 38s ease-in-out infinite alternate-reverse;
}

@keyframes orb-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(46px, 28px, 0); }
}

.trial-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.trial-cta h2 {
  color: #fff;
  max-width: 15em;
}

.trial-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 36em;
  font-size: 1.05rem;
  text-wrap: pretty;
}

.trial-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  margin-top: 8px;
}

.trial-cta-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.trial-cta-link:hover {
  color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   20. CONTACT BOX ("Still stuck?" on faq.html and similar)
   ========================================================================== */

.contact-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(26px, 3.5vw, 36px);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
}

.contact-box h3 {
  font-size: 1.25rem;
}

.contact-box p {
  margin-top: 6px;
  font-size: 0.95rem;
}

.contact-lines {
  display: grid;
  gap: 8px;
}

.contact-lines a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--c-ink);
}

.contact-lines a:hover {
  color: var(--c-primary);
}

.contact-lines svg {
  width: 20px;
  height: 20px;
  color: var(--c-primary);
  flex: none;
}


/* ==========================================================================
   21. CODE PANEL (developer API snippet)
   ========================================================================== */

.code-panel {
  background: #17192B;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.code-panel-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-panel-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.code-panel-bar span:first-child { background: var(--c-accent); }
.code-panel-bar span:nth-child(2) { background: var(--c-yellow); }
.code-panel-bar span:nth-child(3) { background: var(--c-green); }

.code-panel pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.75;
  color: #D8DAE8;
}

.tok-k { color: #B9A3FF; }  /* keyword  */
.tok-s { color: #7FE8C6; }  /* string   */
.tok-c { color: #6E7391; }  /* comment  */
.tok-f { color: #7FD8F0; }  /* function */


/* ==========================================================================
   22. LEGAL PROSE LAYOUT
   ========================================================================== */

.legal-hero {
  padding: clamp(48px, 7vw, 80px) 0 clamp(24px, 4vw, 40px);
  text-align: center;
}

.legal-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
}

.last-updated {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--c-ink-faint);
}

.prose {
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: var(--section-pad);
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.4em;
  margin-bottom: 0.7em;
  padding-top: 1.3em;
  border-top: 1px solid var(--c-line);
}

.prose h2:first-child {
  margin-top: 1em;
  padding-top: 0;
  border-top: 0;
}

/* Optional: wrap the leading "1." of a legal h2 in .sec-num */
.prose .sec-num {
  color: var(--c-primary);
  margin-right: 0.35em;
  font-variant-numeric: tabular-nums;
}

/* Two-column legal layout: sticky TOC + prose (single column <1024px).
   The TOC list is hardcoded in HTML so it works without JS; app.js only
   adds the scrollspy highlight. */
.legal-layout {
  display: grid;
  gap: 40px;
  align-items: start;
}

.legal-toc {
  display: none;
}

@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(48px, 6vw, 80px);
  }

  .legal-toc {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    padding-bottom: 8px;
  }

  .legal-layout .prose {
    margin-inline: 0;
  }
}

.legal-toc-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 12px;
}

.legal-toc-list {
  display: grid;
  gap: 2px;
}

.legal-toc-list a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid var(--c-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
  transition:
    color var(--dur) var(--ease-hover),
    border-color var(--dur) var(--ease-hover),
    background-color var(--dur) var(--ease-hover);
}

.legal-toc-list a:hover {
  color: var(--c-primary);
}

.legal-toc-list a.is-current {
  color: var(--c-primary);
  border-left-color: var(--c-primary);
  background: var(--t-primary);
  font-weight: 600;
}

.prose h3 {
  font-size: 1.12rem;
  margin-top: 1.9em;
  margin-bottom: 0.6em;
}

.prose p {
  margin-bottom: 1.1em;
  line-height: 1.8;
}

.prose ul,
.prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  color: var(--c-ink-soft);
}

.prose li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.prose li::marker {
  color: var(--c-primary);
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--c-primary-deep);
}

.prose address {
  margin-bottom: 1.1em;
  color: var(--c-ink-soft);
  line-height: 1.8;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.4em;
  font-size: 0.92rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  color: var(--c-ink-soft);
}

.prose th {
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: 700;
}


/* ==========================================================================
   23. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
}

.footer-grid {
  display: grid;
  gap: 40px;
  padding-block: clamp(48px, 7vw, 72px) clamp(32px, 5vw, 48px);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.footer-tagline {
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  max-width: 30em;
}

.footer-contact {
  display: grid;
  gap: 6px;
  font-size: 0.92rem;
}

.footer-contact a {
  display: inline-block;
  color: var(--c-ink-soft);
  transition:
    color var(--dur) var(--ease-hover),
    transform var(--dur) var(--ease-hover);
}

.footer-contact a:hover {
  color: var(--c-primary);
  transform: translateX(2px);
}

.footer-contact address {
  color: var(--c-ink-faint);
  line-height: 1.6;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: 16px;
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-links a {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  transition:
    color var(--dur) var(--ease-hover),
    transform var(--dur) var(--ease-hover);
}

.footer-links a:hover {
  color: var(--c-primary);
  transform: translateX(2px);
}

.footer-bottom {
  border-top: 1px solid var(--c-line);
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 22px;
  font-size: 0.85rem;
  color: var(--c-ink-faint);
}


/* ==========================================================================
   24. SCROLL REVEAL
   Every hidden state is gated behind .js-anim on <html>. app.js adds that
   class only when JS runs, prefers-reduced-motion is off, and
   navigator.webdriver is false — so crawlers, screenshots and no-JS
   visitors always see the finished page.
   ========================================================================== */

/* Legacy class-based reveal (still supported everywhere) */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.js-anim .reveal.in-view {
  opacity: 1;
  transform: none;
}

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* Attribute-based reveal: put data-reveal on any block */
.js-anim [data-reveal]:not([data-reveal="split"]) {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.js-anim [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Split reveal (two-column blocks, e.g. feature blocks): the element
   itself stays visible; its direct children rise with a 100ms offset. */
.js-anim [data-reveal="split"] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.js-anim [data-reveal="split"] > *:nth-child(2) { transition-delay: 100ms; }
.js-anim [data-reveal="split"] > *:nth-child(3) { transition-delay: 200ms; }

.js-anim [data-reveal="split"].in-view > * {
  opacity: 1;
  transform: none;
}

/* Grouped stagger: data-reveal-group on a grid/row; app.js writes
   --reveal-i onto every direct child. */
.js-anim [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

.js-anim [data-reveal-group].in-view > * {
  opacity: 1;
  transform: none;
}

/* Counted numbers keep a fixed digit width while animating */
[data-count-to] {
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   25. HELPERS & ACCESSIBILITY
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Anchor targets clear the fixed header when jumped to */
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.btn:focus-visible,
.chip:focus-visible,
.billing-option:focus-visible,
.input:focus-visible {
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

.btn--light:focus-visible,
.trial-cta-link:focus-visible {
  outline-color: #fff;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   26. RESPONSIVE ADJUSTMENTS (360 / 768 / 1200 targets)
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
  }

  .btn--lg {
    padding: 0.9em 1.7em;
    font-size: 1rem;
  }

  .help-box,
  .contact-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom-inner {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .btn-row .btn,
  .trial-cta-actions .btn {
    width: 100%;
  }

  .billing-option {
    padding: 9px 14px;
  }

  .newsletter-form .input {
    max-width: none;
  }
}


/* ==========================================================================
   27. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  /* Belt-and-braces: app.js also removes .js-anim under reduced motion,
     but force every reveal/entrance state visible regardless. */
  .reveal,
  [data-reveal],
  [data-reveal="split"] > *,
  [data-reveal-group] > *,
  .hero-line-inner,
  .nav-list li,
  .site-nav .nav-cta {
    opacity: 1 !important;
    transform: none !important;
  }

  .float-card,
  .hero-line-inner,
  .has-aurora::before,
  .trial-cta::before,
  .trial-cta::after {
    animation: none !important;
  }

  /* Tickers become a static, manually scrollable row */
  .ticker {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ticker-track {
    animation: none !important;
    width: auto;
  }

  .ticker-list[aria-hidden="true"] {
    display: none;
  }
}


/* ==========================================================================
   28. POLISH LAYER — hero entrance, hero self-demo, back-to-top,
       newsletter checkmark
   All state classes below are set by app.js only; without JS (or with
   reduced motion / navigator.webdriver) the markup renders in its final
   state.
   ========================================================================== */

/* --- Hero H1 line entrance (wrap each visual line in
       .hero-line > .hero-line-inner; app.js adds/removes .is-entering) --- */

.hero-line {
  display: block;
}

.js-anim .hero-line-inner {
  display: block;
  animation: hero-line-up var(--dur-hero) var(--ease-out) 0.12s both;
}

.js-anim .hero-line + .hero-line .hero-line-inner {
  animation-delay: 0.26s;
}

/* Clip only while entering, and only where the lines cannot wrap */
@media (min-width: 720px) {
  .js-anim h1.is-entering .hero-line {
    overflow: hidden;
  }
}

@keyframes hero-line-up {
  from { opacity: 0; transform: translateY(108%); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Hero self-demo (mockup types a prompt, generates, develops) --- */

[data-hero-demo] .demo-caret {
  opacity: 0;
}

[data-hero-demo].is-typing .demo-caret {
  animation: caret-blink 0.9s steps(1, end) infinite;
}

@keyframes caret-blink {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0; }
}

[data-hero-demo] .demo-thumb {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

[data-hero-demo] .demo-thumb.is-waiting {
  opacity: 0.16;
  transform: scale(0.96);
}

[data-hero-demo] .demo-thumb.is-developing {
  opacity: 0.55;
  transform: scale(0.98);
}

[data-hero-demo] .demo-shimmer {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

[data-hero-demo] .demo-thumb.is-developing .demo-shimmer {
  animation: demo-sweep 0.55s var(--ease-hover);
}

@keyframes demo-sweep {
  0%   { opacity: 0; transform: translateX(-110%); }
  30%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(120%); }
}

[data-hero-demo] .demo-generate {
  transform-box: fill-box;
  transform-origin: center;
}

[data-hero-demo] .demo-generate.is-glowing {
  animation: demo-glow var(--dur-hero) var(--ease-hover);
}

@keyframes demo-glow {
  0%   { transform: scale(1);    opacity: 1; }
  35%  { transform: scale(1.05); opacity: 0.86; }
  100% { transform: scale(1);    opacity: 1; }
}

/* --- Back-to-top (button injected by app.js) --- */

.back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-image: var(--grad-brand);
  color: #fff;
  box-shadow: 0 10px 24px rgba(92, 43, 255, 0.32);
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease-hover),
    transform var(--dur) var(--ease-hover),
    box-shadow var(--dur) var(--ease-hover),
    visibility var(--dur);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(92, 43, 255, 0.4);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --- Newsletter success checkmark (SVG injected by app.js) --- */

.form-msg .msg-check {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  vertical-align: -3px;
}

.form-msg .msg-check-path {
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  animation: check-draw 0.5s var(--ease-out) 0.08s forwards;
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}