/* ═══════════════════════════════════════════════════════════
   Built By Nova — Modern SaaS Aesthetic
   Charcoal · Soft Blue-White · Electric Cyan
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ── */
  --dark:      #323039;
  --bg:        #F8F9FB;
  --cyan:      #18C3F8;
  --cyan-dk:   #0DAADE;
  --white:     #FFFFFF;
  --gray-100:  #E4E4E4;
  --gray-500:  #9B99A5;
  --gray-700:  #6B6876;
  --border:    rgba(50,48,57,0.10);

  /* ── Derived / shorthand ── */
  --cyan-12:   rgba(24,195,248,0.12);
  --cyan-25:   rgba(24,195,248,0.25);
  --cyan-light: #EEF9FC;

  /* ── Legacy aliases (product.html backward compat) ── */
  --navy:      #323039;
  --navy-mid:  #5C5A62;
  --navy-90:   rgba(50,48,57,0.90);
  --navy-50:   rgba(50,48,57,0.50);
  --mustard:   #18C3F8;
  --mustard-dk:#0DAADE;
  --mustard-12:rgba(24,195,248,0.12);
  --mustard-25:rgba(24,195,248,0.25);
  --gray-50:   #F8F9FB;
  --gray-200:  #E4E4E4;
  --gray-400:  #9B99A5;
  --gray-600:  #6B6876;
  --r:         12px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html   { scroll-behavior:smooth; font-size:16px; }
body   { font-family:var(--font); background:var(--bg); color:var(--dark); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img    { display:block; max-width:100%; }
a      { text-decoration:none; color:inherit; }
button { font-family:var(--font); }
ul     { list-style:none; }

/* ── Typography ───────────────────────────────────────────── */
h1 { font-size:clamp(40px,5.2vw,64px); font-weight:800; line-height:1.05; letter-spacing:-2px; color:var(--dark); }
h2 { font-size:clamp(28px,3.6vw,48px); font-weight:700; line-height:1.10; letter-spacing:-1px; color:var(--dark); }
h3 { font-size:20px; font-weight:700; line-height:1.28; letter-spacing:-0.2px; color:var(--dark); }

.eyebrow {
  display:block; font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--cyan);
  margin-bottom:14px;
}

/* ── Layout ───────────────────────────────────────────────── */
.container   { max-width:1160px; margin:0 auto; padding:0 40px; }
.section     { padding:96px 0; }
.section--sm { padding:72px 0; }
.section--xs { padding:52px 0; }
.section--white { background:var(--white); }
.section--gray  { background:var(--bg); }
.section--navy  { background:var(--cyan-light); }
.section--dark  { background:var(--dark); }
.rule { height:1px; background:var(--border); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:700; letter-spacing:0.2px;
  padding:14px 28px; border-radius:100px;
  border:2px solid transparent; cursor:pointer;
  position:relative; overflow:hidden;
  transition:background 0.22s ease, transform 0.20s ease, box-shadow 0.22s ease, color 0.22s ease;
  white-space:nowrap; line-height:1;
}
.btn svg { flex-shrink:0; transition:transform 0.22s ease; }
.btn:hover svg { transform:translateX(4px); }
.btn:disabled { opacity:0.55; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* Cyan / Mustard (same button) */
.btn--cyan,
.btn--mustard {
  background:var(--cyan); color:var(--dark);
  box-shadow:0 2px 14px var(--cyan-25);
}
.btn--cyan:hover,
.btn--mustard:hover {
  background:var(--cyan-dk);
  transform:scale(1.04) translateY(-1px);
  box-shadow:
    0 0 0 3px var(--cyan-25),
    0 0 24px rgba(24,195,248,0.50),
    0 8px 30px rgba(24,195,248,0.28);
}

/* Pay button — white text on cyan */
.btn--pay {
  background:var(--cyan); color:#fff; font-weight:700;
  box-shadow:0 2px 14px var(--cyan-25);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn--pay:hover {
  background:var(--cyan-dk);
  transform:scale(1.04) translateY(-1px);
  box-shadow:0 0 0 3px var(--cyan-25), 0 0 24px rgba(24,195,248,0.45), 0 8px 30px rgba(24,195,248,0.25);
}

/* Spinner inside button */
.btn-spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff; border-radius:50%;
  animation:btn-spin 0.7s linear infinite;
  flex-shrink:0;
}
@keyframes btn-spin { to { transform:rotate(360deg); } }

/* Payment success state */
.pay-success { text-align:center; padding:36px 0 8px; }
.pay-success__icon { margin:0 auto 20px; width:64px; height:64px; }
.pay-success__title { font-size:22px; font-weight:700; color:var(--dark); margin-bottom:12px; }
.pay-success__msg { font-size:15px; color:var(--gray-700); margin-bottom:8px; line-height:1.65; }
.pay-success__sub { font-size:13px; color:var(--gray-500); margin-bottom:0; }
.pay-success__back { display:block; margin-top:28px; text-align:center; }

/* Dark */
.btn--dark { background:var(--dark); color:var(--white); }
.btn--dark:hover {
  background:#4a4750;
  transform:scale(1.03) translateY(-1px);
  box-shadow:0 8px 28px rgba(50,48,57,0.30);
}

/* Legacy navy alias */
.btn--navy { background:var(--dark); color:var(--white); }
.btn--navy:hover {
  background:#4a4750;
  transform:scale(1.03) translateY(-1px);
  box-shadow:0 8px 28px rgba(50,48,57,0.30);
}

/* Ghost white */
.btn--ghost-white {
  background:transparent; color:var(--white);
  border-color:rgba(255,255,255,0.30);
}
.btn--ghost-white:hover {
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.55);
  transform:scale(1.02);
}

/* Ghost dark */
.btn--ghost {
  background:transparent; color:var(--dark);
  border-color:var(--border);
}
.btn--ghost:hover {
  background:var(--bg);
  transform:scale(1.02);
}

.btn--lg   { font-size:16px; padding:16px 32px; border-radius:100px; }
.btn--full { width:100%; justify-content:center; }


/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:66px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
.nav.scrolled {
  border-color:var(--border);
  box-shadow:0 1px 12px rgba(50,48,57,0.07);
}

/* Legacy dark variant — still light on this redesign */
.nav--dark { background:rgba(255,255,255,0.97); }
.nav--dark .nav__brand { color:var(--dark); }
.nav--dark.scrolled {
  border-color:var(--border);
  box-shadow:0 1px 12px rgba(50,48,57,0.07);
}

.nav__inner {
  height:66px;
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo */
.nav__logo,
.nav__brand {
  font-size:17px; font-weight:800; color:var(--dark);
  letter-spacing:-0.4px; transition:color 0.2s ease;
}
.nav__logo span,
.nav__brand span { color:var(--cyan); }

/* Links */
.nav__links {
  display:flex; align-items:center; gap:4px; list-style:none;
}
.nav__links a {
  font-size:14px; font-weight:600; color:var(--dark);
  padding:7px 14px; border-radius:100px;
  transition:color 0.18s ease, background 0.18s ease;
}
.nav__links a:hover {
  color:var(--cyan);
  background:var(--cyan-12);
}

/* CTA button */
.nav__cta {
  font-size:13.5px; font-weight:700; color:var(--dark);
  background:var(--cyan); padding:9px 20px; border-radius:100px;
  transition:background 0.2s ease, transform 0.18s ease, box-shadow 0.18s ease;
  white-space:nowrap;
}
.nav__cta:hover {
  background:var(--cyan-dk);
  transform:translateY(-1px);
  box-shadow:0 4px 16px var(--cyan-25);
}

/* Hamburger — hidden on desktop */
.nav__burger {
  display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:40px; height:40px; background:none; border:none; cursor:pointer;
  padding:0;
}
.nav__burger span {
  display:block; width:22px; height:2px;
  background:var(--dark); border-radius:2px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
/* Animate to X when .open */
.nav.open .nav__burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav.open .nav__burger span:nth-child(2) { opacity:0; }
.nav.open .nav__burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav__mobile {
  display:none;
  flex-direction:column;
  background:var(--white);
  border-top:1px solid var(--border);
  padding:16px 24px 24px;
  gap:4px;
}
.nav.open .nav__mobile { display:flex; }
.nav__mobile a {
  font-size:15px; font-weight:600; color:var(--dark);
  padding:11px 14px; border-radius:10px;
  transition:background 0.18s ease, color 0.18s ease;
}
.nav__mobile a:hover { background:var(--bg); color:var(--cyan); }
.nav__mobile-cta {
  margin-top:8px;
  background:var(--cyan) !important; color:var(--dark) !important;
  text-align:center; border-radius:100px !important;
  padding:13px 20px !important;
}
.nav__mobile-cta:hover { background:var(--cyan-dk) !important; }


/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
/* ── Hero — liquid animated gradient ────────── */
.hero {
  background: #FAF8F4;
  padding: 150px 0 96px;
  position: relative;
  overflow: hidden;
}

/* Deep rose orb — top-right, drifts slowly */
.hero::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,80,75,0.17) 0%, transparent 65%);
  filter: blur(100px);
  top: -15%; right: -8%;
  pointer-events: none;
  z-index: 0;
  animation: orbFloat1 20s ease-in-out infinite;
}

/* Warm amber orb — bottom-left, drifts opposite */
.hero::after {
  content: '';
  display: block;
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,142,50,0.15) 0%, transparent 65%);
  filter: blur(110px);
  bottom: -12%; left: 0%;
  pointer-events: none;
  z-index: 0;
  animation: orbFloat2 26s ease-in-out infinite;
}

/* Soft peach orb — center, slowest drift */
.hero__blob {
  position: absolute;
  top: 20%; left: 35%;
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218,148,105,0.11) 0%, transparent 65%);
  filter: blur(130px);
  pointer-events: none; z-index: 0;
  animation: blobDrift 32s ease-in-out infinite;
}

@keyframes heroGradFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 30% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes blobPulse {
  0%,100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.35); opacity: 0.90; }
}

@keyframes blobDrift {
  0%   { transform: translate(0, 0)       scale(1); }
  35%  { transform: translate(-3%, 4%)    scale(1.04); }
  70%  { transform: translate(4%, -3%)    scale(0.97); }
  100% { transform: translate(0, 0)       scale(1); }
}

@keyframes orbFloat1 {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(-4%, 6%); }
  65%  { transform: translate(-7%, 2%); }
  100% { transform: translate(0, 0); }
}

@keyframes orbFloat2 {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(6%, -4%); }
  70%  { transform: translate(9%, -1%); }
  100% { transform: translate(0, 0); }
}

.hero__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
  position:relative; z-index:1;
}

/* Eyebrow pill */
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan);
  background:var(--cyan-12);
  border:1px solid rgba(24,195,248,0.26);
  padding:7px 16px; border-radius:100px;
  margin-bottom:24px;
}
.hero__eyebrow-dot {
  display:inline-block; width:6px; height:6px;
  border-radius:50%; background:var(--cyan); flex-shrink:0;
}

.hero__h1 {
  font-size:clamp(38px,5vw,64px);
  font-weight:800; line-height:1.06; letter-spacing:-2px;
  color:var(--dark); margin-bottom:22px;
}
.hero__sub {
  font-size:17px; line-height:1.72; color:var(--gray-700);
  margin-bottom:38px; max-width:480px;
}
.hero__cta-row { margin-bottom:16px; }

/* Hero CTA button */
.hero__cta {
  display:inline-flex; align-items:center; gap:10px;
  font-size:16px; font-weight:700; color:var(--dark);
  background:var(--cyan); padding:16px 32px; border-radius:100px;
  box-shadow:0 4px 22px rgba(24,195,248,0.40);
  transition:background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
  white-space:nowrap;
}
.hero__cta:hover {
  background:var(--cyan-dk);
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 0 4px rgba(24,195,248,0.20), 0 8px 32px rgba(24,195,248,0.45);
}
.hero__cta svg { flex-shrink:0; transition:transform 0.2s ease; }
.hero__cta:hover svg { transform:translateX(4px); }

.hero__trust { font-size:12.5px; color:var(--gray-500); margin-bottom:32px; }

/* Feature pills */
.hero__pills { display:flex; flex-wrap:wrap; gap:8px; }
.hero__pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--dark);
  background:#ffffff;
  border:1px solid rgba(24,195,248,0.22);
  padding:7px 14px; border-radius:100px;
  box-shadow:0 2px 8px rgba(50,48,57,0.06);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.hero__pill:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(50,48,57,0.10); }
.hero__pill svg { color:var(--cyan); flex-shrink:0; }

/* Hero right column */
.hero__right {
  display:flex; align-items:center; justify-content:center;
}


/* ── Product Mockup Stack (pdm) ─────────────────────── */
.pdm {
  position:relative;
  width:372px; height:330px;
}

.pdm-card,
.pdm-front {
  position:absolute;
  width:295px;
  left:0; bottom:56px;
  border-radius:16px;
  transform-origin:bottom center;
}

.pdm-card {
  background:var(--white);
  padding:20px 22px;
  box-shadow:0 4px 20px rgba(50,48,57,0.08);
}
.pdm-card--3 {
  transform:rotate(9deg);
  background:linear-gradient(145deg,#dff4ff,#c8edff);
  z-index:1;
}
.pdm-card--2 {
  transform:rotate(5deg);
  background:linear-gradient(145deg,#e8f8ff,#d4f1ff);
  z-index:2;
}
.pdm-card--1 {
  transform:rotate(2deg);
  background:linear-gradient(145deg,#f2fbff,#e4f8ff);
  z-index:3;
}

.pdm-card__lbl {
  font-size:10px; font-weight:700;
  letter-spacing:2.2px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px;
}
.pdm-bars { display:flex; flex-direction:column; gap:8px; }
.pdm-bars span {
  display:block; height:8px; border-radius:4px;
  background:rgba(24,195,248,0.18);
}
.pdm-bars span:nth-child(1) { width:76%; }
.pdm-bars span:nth-child(2) { width:58%; }
.pdm-bars span:nth-child(3) { width:42%; }

.pdm-front {
  z-index:4; overflow:hidden; transform:rotate(0deg);
  box-shadow:
    0 24px 64px rgba(50,48,57,0.22),
    0 4px 16px rgba(50,48,57,0.10),
    0 0 0 1px rgba(255,255,255,0.70);
}
.pdm-front img { width:100%; display:block; }

.pdm-badge {
  position:absolute; top:12px; right:12px;
  font-size:10px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  background:rgba(24,195,248,0.90);
  backdrop-filter:blur(6px);
  color:#fff;
  padding:4px 11px; border-radius:100px;
}

.pdm-result {
  position:absolute;
  bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--white);
  border:1px solid rgba(24,195,248,0.18);
  border-radius:100px;
  padding:10px 20px;
  font-size:12px; font-weight:600; color:var(--dark);
  white-space:nowrap;
  box-shadow:0 6px 24px rgba(50,48,57,0.09);
  z-index:5;
}
.pdm-result__star { color:var(--cyan); font-size:14px; }


/* ═══════════════════════════════════════════════════════════
   FEATURES SECTION
   ═══════════════════════════════════════════════════════════ */
.features { padding:96px 0; }

.features__header {
  text-align:center; max-width:640px; margin:0 auto 64px;
}
.features__header h2 { margin-bottom:14px; }
.features__header p  { font-size:17px; line-height:1.70; color:var(--gray-700); }

.features__grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.feat-card {
  background:var(--bg); border:1px solid var(--border);
  border-radius:20px; padding:36px 32px;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.feat-card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 32px rgba(50,48,57,0.10);
}
.feat-card__icon {
  width:52px; height:52px;
  background:var(--cyan-12); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; color:var(--cyan);
  transition:transform 0.18s ease;
}
.feat-card:hover .feat-card__icon { transform:scale(1.10); }
.feat-card h3  { font-size:18px; margin-bottom:10px; }
.feat-card p   { font-size:14.5px; line-height:1.70; color:var(--gray-700); }


/* ═══════════════════════════════════════════════════════════
   RESULTS SECTION
   ═══════════════════════════════════════════════════════════ */
.results { padding:96px 0; }

.results__header {
  text-align:center; max-width:680px; margin:0 auto 56px;
}
.results__header h2 { margin-bottom:14px; }
.results__header p  { font-size:17px; line-height:1.70; color:var(--gray-700); }

.results__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.result-pair {
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  border-radius:16px; overflow:hidden;
  box-shadow:0 2px 12px rgba(50,48,57,0.08);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.result-pair:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 32px rgba(50,48,57,0.12);
}
.result-pair__frame {
  position:relative; aspect-ratio:2/3; overflow:hidden;
  background:var(--gray-100);
}
.result-pair__frame img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform 0.55s ease;
}
.result-pair:hover .result-pair__frame img { transform:scale(1.04); }
.result-pair__label {
  position:absolute; bottom:8px; left:8px;
  background:rgba(50,48,57,0.86); color:var(--white);
  padding:3px 10px; border-radius:4px;
  font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
}
.result-pair__label--after { background:var(--cyan); color:var(--dark); }

/* ── Legacy BA labels (shared with product page slider) ── */
.ba__label {
  position:absolute; bottom:10px; left:10px;
  background:rgba(50,48,57,0.86); color:var(--white);
  padding:4px 12px; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
}
.ba__label--after { background:var(--cyan); color:var(--dark); }


/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
.testimonials { padding:96px 0; }

.testimonials__header {
  text-align:center; max-width:640px; margin:0 auto 56px;
}
.testimonials__header h2 { margin-bottom:12px; }
.testimonials__header p  { font-size:17px; line-height:1.70; color:var(--gray-700); }

.testi-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.testi-grid--2 {
  grid-template-columns:repeat(2,1fr);
  max-width:820px; margin:0 auto;
}

.testi-card {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:20px; padding:32px 28px;
  position:relative; overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.testi-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(50,48,57,0.10);
}

/* Legacy dark variant (product.html compat) — same styles */
.testi-card--dark {
  background:var(--bg);
  border-color:var(--border);
}
.testi-card--dark:hover { box-shadow:0 8px 32px rgba(50,48,57,0.10); }

/* Cyan left accent bar (product.html compat) */
.testi-accent {
  position:absolute; top:0; left:0;
  width:3px; height:100%;
  background:var(--cyan);
}

.testi-stars { display:flex; gap:3px; margin-bottom:16px; }

.testi-quote {
  font-size:15px; line-height:1.78;
  color:var(--gray-700); margin-bottom:24px;
  font-style:italic; position:relative; z-index:1;
}

.testi-meta {
  display:flex; align-items:center; gap:12px;
}
.testi-avatar {
  width:40px; height:40px; border-radius:50%;
  background:var(--cyan-12);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--cyan); flex-shrink:0;
}
.testi-name   { font-size:14px; font-weight:700; color:var(--dark); }
.testi-detail { font-size:12px; color:var(--gray-500); margin-top:2px; }


/* ═══════════════════════════════════════════════════════════
   CTA SECTION
   ═══════════════════════════════════════════════════════════ */
.cta-section {
  background:var(--dark);
  padding:96px 0;
  position:relative; overflow:hidden;
}

/* Radial glow orbs */
.cta-section::before,
.cta-section::after {
  content:''; position:absolute; border-radius:50%;
  pointer-events:none;
}
.cta-section::before {
  width:600px; height:600px;
  top:-200px; right:-100px;
  background:radial-gradient(circle, rgba(24,195,248,0.12) 0%, transparent 70%);
}
.cta-section::after {
  width:400px; height:400px;
  bottom:-150px; left:-80px;
  background:radial-gradient(circle, rgba(24,195,248,0.09) 0%, transparent 70%);
}

.cta-inner {
  text-align:center; max-width:680px;
  margin:0 auto; position:relative; z-index:1;
}
.cta-inner .eyebrow { color:var(--cyan); }
.cta-inner h2 { color:var(--white); margin-bottom:18px; }
.cta-inner p  { font-size:18px; line-height:1.72; color:rgba(255,255,255,0.65); margin-bottom:44px; }

/* Legacy cta-banner / cta-band (landing page) */
.cta-banner {
  text-align:center; max-width:680px; margin:0 auto; padding:48px 0;
}
.cta-banner .eyebrow { margin-bottom:28px; }
.cta-banner h2  { color:var(--white); margin-bottom:24px; }
.cta-banner > p { font-size:18px; line-height:1.75; max-width:540px; margin:0 auto 52px; color:rgba(255,255,255,0.65); }

.cta-band { text-align:center; padding:80px 0; }
.cta-band h2 { color:var(--dark); margin-bottom:14px; }
.cta-band p  { font-size:17px; color:var(--gray-700); margin-bottom:36px; }


/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer {
  background:var(--dark);
  padding:64px 0 36px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer__top {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:48px; margin-bottom:48px;
}
.footer__brand {
  font-size:17px; font-weight:800; color:var(--white);
  margin-bottom:10px; letter-spacing:-0.3px;
}
.footer__brand span { color:var(--cyan); }
.footer__about { font-size:13px; line-height:1.70; color:rgba(255,255,255,0.45); max-width:220px; }
.footer__nav-heading {
  font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,0.40); margin-bottom:16px;
}
.footer__links { list-style:none; }
.footer__links li { margin-bottom:10px; }
.footer__links a { font-size:13.5px; color:rgba(255,255,255,0.60); transition:color 0.18s ease; }
.footer__links a:hover { color:var(--cyan); }
.footer__bottom {
  padding-top:28px; border-top:1px solid rgba(255,255,255,0.08);
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:rgba(255,255,255,0.35);
  flex-wrap:wrap; gap:8px;
}


/* ═══════════════════════════════════════════════════════════
   PRODUCT PAGE — keep all existing classes working
   ═══════════════════════════════════════════════════════════ */

/* ── Compact hero (legacy) ── */
.hero-compact {
  background:var(--cyan-light);
  padding:120px 0 80px; text-align:center;
}
.hero-compact h1   { color:var(--dark); margin-bottom:16px; }
.hero-compact p    { font-size:18px; color:var(--gray-700); max-width:520px; margin:0 auto 36px; line-height:1.68; }
.hero-compact .hero-actions { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }

/* ── Hero split (index legacy) ── */
.hero-split {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:clamp(520px,68vh,780px);
}
.hero-split__left {
  background:var(--white);
  display:flex; align-items:center;
  padding:96px 56px 80px 120px;
  position:relative; z-index:1;
}
.hero-split__content { max-width:500px; width:100%; position:relative; z-index:1; }
.hero-split__content h1  { color:var(--dark); margin-bottom:20px; }
.hero-split__content .hero__sub { font-size:17px; line-height:1.68; color:var(--gray-700); margin-bottom:36px; }
.hero-split__actions,
.hero-split__content .hero__actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-split__note,
.hero-split__content .hero__note { margin-top:22px; font-size:13px; color:var(--gray-500); }
.hero-split__right {
  background:var(--cyan-light);
  display:flex; align-items:center; justify-content:center;
  padding:80px 48px; position:relative;
}
.hero-split__right img {
  width:min(420px,85%); aspect-ratio:1/1; object-fit:cover; object-position:center top;
  border-radius:50%; display:block;
  box-shadow:0 0 0 5px rgba(24,195,248,0.20), 0 0 0 10px rgba(24,195,248,0.07), 0 28px 72px rgba(0,0,0,0.50);
  transition:transform 0.8s ease, box-shadow 0.8s ease;
}

/* ── Hero Two-Column (product page) — liquid animated gradient ── */
.h2c {
  background: #FAF8F4;
  padding:108px 0 88px;
  position:relative; overflow:hidden;
}

/* Deep rose orb — top-right */
.h2c::before {
  content:'';
  position:absolute;
  width:700px; height:700px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(200,80,75,0.17) 0%, transparent 65%);
  filter:blur(100px);
  top:-15%; right:-8%;
  pointer-events:none;
  z-index:0;
  animation:orbFloat1 20s ease-in-out infinite;
}

/* Warm amber orb — bottom-left */
.h2c::after {
  content:'';
  display:block;
  position:absolute;
  width:600px; height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(192,142,50,0.15) 0%, transparent 65%);
  filter:blur(110px);
  bottom:-12%; left:0%;
  pointer-events:none;
  z-index:0;
  animation:orbFloat2 26s ease-in-out infinite;
}

/* Orb divs */
.h2c-orb {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:0;
}
.h2c-orb--1 {
  top:20%; left:35%;
  width:800px; height:800px;
  background:radial-gradient(circle, rgba(218,148,105,0.11) 0%, transparent 65%);
  filter:blur(130px);
  animation:blobDrift 32s ease-in-out infinite;
}
.h2c-orb--2 { display:none; }
.h2c-orb--3 { display:none; }

.h2c-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center; position:relative; z-index:1;
}

.h2c-label {
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--cyan);
  background:var(--cyan-12);
  border:1px solid rgba(24,195,248,0.24);
  padding:7px 16px; border-radius:100px; margin-bottom:22px;
}
.h2c-h1 {
  font-size:clamp(36px,4.8vw,62px);
  font-weight:800; line-height:1.06; letter-spacing:-2px;
  color:var(--dark); margin-bottom:20px;
}
.h2c-sub {
  font-size:17px; line-height:1.72; color:var(--gray-700);
  margin-bottom:36px; max-width:470px;
}
.h2c-actions { margin-bottom:14px; }
.h2c-cta {
  background:var(--cyan);
  color:var(--dark) !important;
  border:none; border-radius:100px;
  box-shadow:0 4px 24px var(--cyan-25);
}
.h2c-cta:hover {
  background:var(--cyan-dk);
  transform:scale(1.03) translateY(-2px);
  box-shadow:0 0 0 3px var(--cyan-25), 0 8px 32px rgba(24,195,248,0.46);
}
.h2c-trust { font-size:12.5px; color:var(--gray-500); margin-bottom:28px; }
.h2c-pills { display:flex; flex-wrap:wrap; gap:8px; }
.h2c-pill {
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:600; color:var(--dark);
  background:var(--white);
  border:1px solid rgba(24,195,248,0.22);
  padding:7px 16px; border-radius:100px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.h2c-right {
  display:flex; align-items:center; justify-content:center;
}

/* ── Transformation Slider ── */
.tx-slider { position:relative; overflow:hidden; border-radius:12px; max-width:820px; margin:0 auto; }
.tx-slider__track { display:flex; transition:transform 0.70s cubic-bezier(0.25,0.46,0.45,0.94); }
.tx-slider__slide { min-width:100%; }
.tx-slider__pair  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tx-slider__frame {
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--gray-100); border-radius:12px;
}
.tx-slider__frame img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.tx-slider__label {
  position:absolute; bottom:12px; left:12px;
  background:rgba(50,48,57,0.88); color:var(--white);
  padding:4px 12px; border-radius:4px;
  font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
}
.tx-slider__label--after { background:var(--cyan); color:var(--dark); }

/* Slider nav */
.slider-nav { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:28px; }
.slider-nav__btn {
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid var(--border);
  background:transparent; color:var(--dark); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
  flex-shrink:0;
}
.slider-nav__btn:hover {
  border-color:var(--cyan); color:var(--cyan);
  box-shadow:0 0 16px var(--cyan-25);
  transform:scale(1.08);
}
.slider-dots { display:flex; gap:8px; align-items:center; }
.slider-dot {
  width:7px; height:7px; border-radius:50%;
  border:none; background:var(--gray-100);
  cursor:pointer; padding:0;
  transition:background 0.25s ease, transform 0.25s ease;
}
.slider-dot.active { background:var(--cyan); transform:scale(1.45); }
.slider-outer { max-width:860px; margin:0 auto; padding:0 44px; }

/* ── Tx grid (landing page results) ── */
.tx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tx-pair {
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px;
  border-radius:12px; overflow:hidden;
}
.tx-pair__frame { position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--gray-100); }
.tx-pair__frame img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 0.55s ease; }
.tx-pair:hover .tx-pair__frame img { transform:scale(1.05); }

/* ── Section header ── */
.section-header { text-align:center; max-width:680px; margin:0 auto 56px; }
.section-header h2 { margin-bottom:16px; }
.section-header p  { font-size:17px; line-height:1.68; color:var(--gray-700); }

/* ── Minimal features (product page) ── */
.features-minimal { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.feat { padding-left:18px; border-left:3px solid var(--cyan); }
.feat h3 { margin-bottom:8px; }
.feat p  { font-size:14.5px; line-height:1.68; color:var(--gray-700); }

/* ── Big quote ── */
.big-quote { max-width:720px; margin:0 auto; text-align:center; }
.big-quote__mark { font-size:52px; line-height:1; color:var(--cyan); font-weight:800; margin-bottom:-8px; }
.big-quote__text {
  font-size:clamp(20px,2.5vw,28px); font-weight:700; line-height:1.45;
  color:var(--dark); margin-bottom:24px; font-style:italic;
}
.big-quote__text::before { content:'\201C'; }
.big-quote__text::after  { content:'\201D'; }
.big-quote__author { margin-top:24px; }
.big-quote__author strong { display:block; font-size:14px; font-weight:700; color:var(--dark); }
.big-quote__author span   { font-size:13px; color:var(--cyan-dk); font-weight:600; }

/* ── Pricing ── */
.pricing-was  { font-size:16px; color:var(--gray-500); text-decoration:line-through; margin-bottom:4px; }
.pricing-now  { font-size:68px; font-weight:800; line-height:1; letter-spacing:-3px; color:var(--dark); margin-bottom:6px; }
.pricing-now sup { font-size:28px; vertical-align:super; font-weight:800; letter-spacing:0; }
.pricing-note { font-size:13px; color:var(--gray-500); margin-bottom:32px; }

.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 12px; border-radius:100px; }
.badge--mustard { background:var(--cyan); color:var(--dark); }

.includes-label { font-size:10.5px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--gray-500); margin-bottom:14px; }
.includes-list  { list-style:none; }
.includes-list li {
  font-size:14.5px; color:var(--dark);
  padding:9px 0; display:flex; align-items:center; gap:11px;
  border-bottom:1px solid var(--border);
}
.includes-list li:last-child { border-bottom:none; }
.includes-list li::before {
  content:''; display:inline-block;
  width:16px; height:16px; flex-shrink:0; border-radius:50%;
  background:var(--mustard-12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2318C3F8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:10px;
}

/* ── Payment layout ── */
.payment-layout { display:grid; grid-template-columns:1fr 1.05fr; gap:72px; align-items:start; }
.payment-summary { padding-top:4px; }
.payment-summary h2 { margin-bottom:12px; }
.payment-summary > .sub-text { font-size:16px; line-height:1.68; color:var(--gray-700); margin-bottom:28px; }

.product-cover-wrap { margin-bottom:28px; }
.product-cover { display:block; width:100%; max-width:260px; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.18); }

.payment-card {
  background:var(--white);
  border:1px solid rgba(50,48,57,0.14);
  border-radius:20px; padding:38px 34px;
  box-shadow:0 12px 48px rgba(50,48,57,0.10);
  position:sticky; top:82px;
}
.payment-card__heading { font-size:20px; font-weight:700; color:var(--dark); margin-bottom:6px; }
.payment-card__sub { font-size:13px; color:var(--gray-500); margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--border); }
.pay-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.pay-was { font-size:15px; color:var(--gray-500); text-decoration:line-through; }
.pay-now { font-size:36px; font-weight:800; color:var(--dark); letter-spacing:-1.5px; line-height:1; }
.pay-now sup { font-size:18px; vertical-align:super; font-weight:800; letter-spacing:0; }

.form-group { margin-bottom:16px; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-label { display:block; font-size:12px; font-weight:700; color:var(--dark); letter-spacing:0.3px; margin-bottom:7px; text-transform:uppercase; }
.form-input {
  width:100%; padding:11px 13px;
  border:1.5px solid var(--gray-200); border-radius:10px;
  font-family:var(--font); font-size:15px; color:var(--dark);
  background:var(--white);
  transition:border-color 0.2s ease, box-shadow 0.2s ease; outline:none;
}
.form-input::placeholder { color:var(--gray-500); }
.form-input:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px var(--cyan-12);
}
.card-host {
  padding:11px 13px; min-height:44px;
  border:1.5px solid var(--gray-200); border-radius:10px;
  background:var(--white);
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-host.focused { border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-12); }
.form-error { font-size:12.5px; color:#dc2626; margin-top:8px; display:none; }
.form-error.visible { display:block; }
.or-divider { display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--gray-500); margin:18px 0; }
.or-divider::before, .or-divider::after { content:''; flex:1; height:1px; background:var(--gray-200); }
#paypal-container { min-height:46px; }
.secure-note { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:18px; font-size:11.5px; color:var(--gray-500); }

/* ── Product features grid ── */
.product-features { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.prod-feat__num { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--cyan); margin-bottom:12px; }
.prod-feat h3  { margin-bottom:8px; font-size:18px; }
.prod-feat p   { font-size:14px; line-height:1.68; color:var(--gray-700); }

/* ── Hero shared ── */
.hero__sub     { font-size:17px; line-height:1.68; color:var(--gray-700); margin-bottom:36px; }
.hero__actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero__note    { margin-top:30px; font-size:13px; color:var(--gray-500); }


/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
[data-anim] { opacity:0; transition:opacity 0.60s ease, transform 0.60s ease; }
[data-anim="up"]    { transform:translateY(24px); }
[data-anim="left"]  { transform:translateX(-24px); }
[data-anim="right"] { transform:translateX(24px); }
[data-anim="fade"]  { transform:none; }
[data-anim].show    { opacity:1; transform:none; }

/* Hero entrance animations */
.hero__left, .hero__right { opacity:0; }
.hero__left  { transform:translateX(-20px); }
.hero__right { transform:translateX(20px); }
.page-ready .hero__left  { animation:heroIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards 0.05s; }
.page-ready .hero__right { animation:heroIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards 0.22s; }

/* Legacy product page hero animations */
.hero-split__content, .hero-split__right { opacity:0; transform:translateY(26px); }
.h2c-left, .h2c-right { opacity:0; transform:translateY(26px); }
.page-ready .hero-split__content { animation:heroIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards 0.05s; }
.page-ready .hero-split__right   { animation:heroIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards 0.22s; }
.page-ready .h2c-left  { animation:heroIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards 0.06s; }
.page-ready .h2c-right { animation:heroIn 0.85s cubic-bezier(0.16,1,0.3,1) forwards 0.24s; }

@keyframes heroIn {
  from { opacity:0; transform:translateY(26px); }
  to   { opacity:1; transform:translateY(0); }
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .features__grid       { grid-template-columns:repeat(2,1fr); }
  .payment-layout       { grid-template-columns:1fr; gap:44px; }
  .payment-card         { position:static; }
  .product-features     { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  .h2c-grid  { grid-template-columns:1fr; gap:52px; }
  .h2c-left  { text-align:center; }
  .h2c-sub   { max-width:100%; }
  .h2c-pills { justify-content:center; }
  .h2c-right { padding-bottom:20px; }
  .pdm       { margin:0 auto; }
}

@media (max-width:860px) {
  /* Nav */
  .nav__links, .nav__cta { display:none; }
  .nav__burger { display:flex; }

  /* Hero */
  .hero { padding:110px 0 72px; }
  .hero__grid { grid-template-columns:1fr; gap:52px; }
  .hero__left { text-align:center; }
  .hero__sub  { max-width:100%; }
  .hero__cta-row  { display:flex; justify-content:center; }
  .hero__pills    { justify-content:center; }
  .hero__right    { padding-bottom:24px; }
  .pdm            { margin:0 auto; }

  /* Results */
  .results__grid  { grid-template-columns:1fr; gap:12px; }

  /* Features */
  .features__grid { grid-template-columns:1fr; }

  /* Testimonials */
  .testi-grid, .testi-grid--2 { grid-template-columns:1fr; max-width:100%; }

  /* Misc */
  .features-minimal  { grid-template-columns:1fr; gap:36px; }
  .product-features  { grid-template-columns:1fr; }
  .footer__top       { flex-direction:column; gap:32px; }
  .footer__bottom    { flex-direction:column; text-align:center; }
  .tx-grid           { grid-template-columns:1fr; gap:10px; }
  .slider-outer      { padding:0 22px; }

  /* Legacy hero split */
  .hero-split { grid-template-columns:1fr; min-height:auto; }
  .hero-split__left { padding:96px 44px 60px 44px; }
  .hero-split__left::after { display:none; }
  .hero-split__content { max-width:100%; }
  .hero-split__right { padding:48px 44px 72px; }
  .hero-split__right img { width:min(340px,72%); }
}

@media (max-width:640px) {
  .container  { padding:0 22px; }
  .section    { padding:72px 0; }
  .section--sm { padding:56px 0; }
  h1 { font-size:36px; letter-spacing:-1.2px; }
  h2 { font-size:26px; letter-spacing:-0.8px; }

  .hero__h1       { font-size:36px; letter-spacing:-1.2px; }

  .payment-card   { padding:28px 20px; }
  .form-row       { grid-template-columns:1fr; gap:0; }
  .pricing-now    { font-size:54px; }

  .pdm            { width:316px; height:290px; }
  .pdm-card, .pdm-front { width:250px; }

  /* Legacy */
  .h2c            { padding:84px 0 68px; }
  .h2c-h1         { font-size:34px; letter-spacing:-0.8px; }
  .h2c-sub        { font-size:16px; }
  .hero-split__left  { padding:88px 22px 52px; }
  .hero-split__right { padding:36px 22px 60px; }
  .hero-split__right img { width:min(260px,68%); }
  .big-quote__text { font-size:19px; }

  /* Slower orbs on mobile — battery-friendly */
  .hero::before, .h2c::before { animation-duration: 28s; }
  .hero::after,  .h2c::after  { animation-duration: 34s; }
  .hero__blob,   .h2c-orb--1  { animation-duration: 42s; }
}