/* ============================================================
   Nova Admin Solutions — Colors, Type Tokens & Site Styles
   ============================================================ */

:root {
  --nova-black:        #000000;
  --nova-purple-900:   #2f1d4b;
  --nova-purple-300:   #c3a8ff;
  --nova-green-700:    #758766;
  --nova-green-50:     #effaef;

  --cream-50:          #faf5ec;
  --cream-100:         #f5ecd9;
  --cream-200:         #ecdfc5;
  --cream-300:         #d9c8a4;

  --purple-50:         #f4eefe;
  --purple-100:        #e7dcfb;
  --purple-500:        #7e5dc7;
  --purple-700:        #4a2f7a;
  --green-100:         #dff0d8;
  --green-300:         #a9bd9a;
  --green-900:         #3f4d35;

  --bg:                var(--cream-50);
  --bg-soft:           var(--cream-100);
  --bg-card:           #ffffff;
  --bg-inverse:        var(--nova-purple-900);

  --fg:                var(--nova-purple-900);
  --fg-muted:          #5a4a73;
  --fg-subtle:         #8a7a9e;
  --fg-inverse:        var(--cream-50);

  --accent:            var(--nova-purple-900);
  --accent-soft:       var(--nova-purple-300);
  --accent-on:         var(--cream-50);

  --secondary:         var(--nova-green-700);
  --secondary-soft:    var(--nova-green-50);

  --border:            rgba(47, 29, 75, 0.14);
  --border-strong:     rgba(47, 29, 75, 0.32);
  --divider:           rgba(47, 29, 75, 0.08);

  --focus-ring:        var(--nova-purple-300);

  --s-1:  4px;  --s-2:  8px;  --s-3:  12px; --s-4:  16px;
  --s-5:  20px; --s-6:  24px; --s-8:  32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --r-xs:  4px; --r-sm:  8px; --r-md:  12px;
  --r-lg:  20px; --r-xl:  28px; --r-pill: 999px;

  --shadow-sm:   0 1px 2px rgba(47, 29, 75, 0.06);
  --shadow-md:   0 4px 14px rgba(47, 29, 75, 0.08);
  --shadow-lg:   0 18px 40px -12px rgba(47, 29, 75, 0.18);
  --shadow-card: 0 1px 0 rgba(47, 29, 75, 0.04), 0 8px 24px -10px rgba(47, 29, 75, 0.10);

  --font-display: "Fraunces", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Open Sauce Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-display: 88px; --t-h1: 64px; --t-h2: 48px; --t-h3: 32px;
  --t-h4: 24px; --t-lg: 20px; --t-base: 16px; --t-sm: 14px;
  --t-xs: 12px; --t-eyebrow: 13px;

  --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --tr-tight: -0.02em; --tr-display: -0.025em; --tr-eyebrow: 0.14em;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;
}

/* ============================================================ Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-normal); }

h1, h2, h3, h4, .display, .serif {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tr-display);
  color: inherit;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
h1, .h1 { font-size: clamp(40px, 6vw, var(--t-h1)); line-height: var(--lh-tight); }
h2, .h2 { font-size: clamp(32px, 4.5vw, var(--t-h2)); line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--t-h4); line-height: var(--lh-snug); }
.display { font-size: clamp(56px, 8vw, var(--t-display)); line-height: 1.02; letter-spacing: -0.03em; }

p, .body { font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-relaxed); color: var(--fg); text-wrap: pretty; }
.lead { font-size: var(--t-lg); line-height: var(--lh-relaxed); }
.small, small { font-size: var(--t-sm); color: var(--fg-muted); }

.eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-muted); }

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--border-strong); transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--purple-500); text-decoration-color: currentColor; }

::selection { background: var(--nova-purple-300); color: var(--nova-purple-900); }

/* ============================================================ Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
}

/* ============================================================ Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; line-height: 1; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn.lg { font-size: 15px; padding: 16px 28px; }
.btn-primary { background: #000; color: var(--cream-50); }
.btn-primary:hover { background: var(--nova-purple-900); }
.btn-accent { background: var(--nova-purple-300); color: var(--nova-purple-900); }
.btn-accent:hover { background: #b896ff; }
.btn-secondary { background: transparent; color: var(--nova-purple-900); border-color: var(--nova-purple-900); }
.btn-secondary:hover { background: var(--nova-purple-900); color: var(--cream-50); }
.btn-on-dark { background: transparent; color: var(--cream-50); border-color: var(--cream-50); }
.btn-on-dark:hover { background: var(--cream-50); color: var(--nova-purple-900); }
.btn-link { background: transparent; color: var(--nova-purple-900); padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn-link:hover { color: var(--purple-500); }

/* ============================================================ Inputs */
.input {
  background: #fff; border: 1px solid rgba(47, 29, 75, 0.18); border-radius: 12px;
  padding: 12px 14px; font-family: var(--font-sans); font-size: 14px;
  color: var(--fg); width: 100%; outline: none;
}
.input:focus { border-color: var(--nova-purple-900); box-shadow: 0 0 0 4px rgba(195, 168, 255, 0.45); }

/* ============================================================ Card */
.card-base { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: 32px; }

/* ============================================================ Nav */
.nav-root {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250,245,236,0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, backdrop-filter 220ms ease;
}
.nav-root.scrolled {
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(47,29,75,0.10);
}
.nav-inner { display: flex; align-items: center; gap: 32px; height: 76px; position: relative; }
.nav-links { display: flex; gap: 28px; flex: 1; }
.nav-link { font-size: 16px; font-weight: 500; color: #2f1d4b; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.nav-link:hover { color: var(--purple-500); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-phone { font-size: 14px; font-weight: 500; color: #5a4a73; text-decoration: none; }
.nav-hamburger { margin-left: auto; background: transparent; border: 0; cursor: pointer; color: #2f1d4b; padding: 4px; }
.nav-mobile-menu { border-top: 1px solid rgba(47,29,75,0.10); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; background: #faf5ec; }
.nav-mobile-link { font-size: 16px; font-weight: 500; color: #2f1d4b; text-decoration: none; }

@media (max-width: 860px) { .nav-desktop { display: none !important; } }
@media (min-width: 861px) { .nav-hamburger { display: none !important; } .nav-mobile-menu { display: none !important; } }

/* ============================================================ Hero */
.hero-root { position: relative; padding: 20px 20px 0; }
.hero-image-wrap {
  position: relative; height: 560px; overflow: hidden;
  background: #1a0f2a;
}
@media (max-width: 640px) { .hero-image-wrap { height: 480px; } }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.9) sepia(0.15); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(47,29,75,0.55) 0%, rgba(0,0,0,0.55) 100%); }
.hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; height: 100%; padding: 0 24px; color: #faf5ec;
}
.hero-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.025em; margin: 0; max-width: 980px; text-wrap: balance; color: #faf5ec; }
.hero-sub { font-size: 18px; line-height: 1.55; margin-top: 22px; max-width: 560px; color: rgba(250,245,236,0.85); text-wrap: pretty; }
.hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }

/* ============================================================ Logo Strip */
.logo-strip { background: #effaef; padding: 56px 0; }
.logo-strip-label { text-align: center; font-size: 14px; font-weight: 600; color: #3f4d35; margin-bottom: 28px; }
.logo-strip-logos { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 36px; opacity: 0.75; }

/* ============================================================ Stats */
.stats-row { padding: 40px 0 0; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.stat-number { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; color: #2f1d4b; }
.stat-dot { color: #758766; }
.stat-label { font-size: 14px; color: #5a4a73; margin-top: 12px; max-width: 260px; line-height: 1.5; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================ Problem Block */
.problem-card { position: relative; background: #f5ecd9; border-radius: 24px; padding: 56px 56px 48px; overflow: hidden; }
.problem-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; color: #2f1d4b; max-width: 720px; margin: 0; position: relative; text-wrap: balance; }
.problem-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; position: relative; max-width: 880px; }
.problem-item { border-top: 1px solid rgba(47,29,75,0.16); padding-top: 18px; }
.problem-item-title { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: #2f1d4b; letter-spacing: -0.02em; }
.problem-item-body { font-size: 14px; color: #5a4a73; margin-top: 6px; line-height: 1.55; }
@media (max-width: 720px) { .problem-grid { grid-template-columns: 1fr; } .problem-card { padding: 36px 24px 32px; } }

/* ============================================================ Services */
.services-section { padding: 96px 0; }
.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; flex-wrap: wrap; gap: 16px; }
.services-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; margin: 10px 0 0; max-width: 720px; text-wrap: balance; }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-card { border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 12px; min-height: 380px; }
.svc-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.svc-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.svc-body { font-size: 14px; line-height: 1.6; margin: 0; }
.svc-bullets { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.svc-bullet { font-size: 13px; padding-left: 18px; position: relative; }
.svc-bullet-dot { position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 999px; }
.svc-cta { align-self: flex-start; margin-top: 12px; border: 0; font-family: var(--font-sans); font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } }

/* ============================================================ Feature Rows */
.feature-rows { padding: 32px 0 96px; }
.feat-rows-inner { display: flex; flex-direction: column; gap: 24px; }
.feat-row { position: relative; border-radius: 24px; padding: 48px 56px; display: grid; gap: 40px; align-items: center; overflow: hidden; }
.feat-row-text-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.feat-row-headline { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.1; letter-spacing: -0.025em; margin: 10px 0 12px; }
.feat-row-body { font-size: 15px; line-height: 1.6; margin: 0; }
.feat-img-wrap { position: relative; aspect-ratio: 1.1/1; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px -16px rgba(47,29,75,0.30); }
.feat-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.feat-badge-tl { position: absolute; left: 16px; top: 16px; background: #faf5ec; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #2f1d4b; box-shadow: 0 4px 14px rgba(0,0,0,0.10); }
.feat-badge-br { position: absolute; right: 16px; bottom: 16px; background: #758766; color: #effaef; padding: 10px 14px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.feat-metrics { position: relative; display: flex; flex-direction: column; gap: 10px; }
.feat-metric { padding: 14px 18px; border-radius: 12px; box-shadow: 0 4px 14px rgba(47,29,75,0.10); }
.feat-metric-num { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; }
.feat-metric-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; margin-top: 2px; opacity: 0.85; }
.feat-quote { font-style: italic; font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: #3f4d35; margin-top: 18px; max-width: 460px; }
.feat-cite { font-size: 12px; color: #3f4d35; margin-top: 6px; }
@media (max-width: 860px) { .feat-row { grid-template-columns: 1fr !important; padding: 32px !important; } }

/* ============================================================ Packages */
.packages-section { padding: 96px 0; background: #f5ecd9; }
.pkg-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; flex-wrap: wrap; gap: 16px; }
.pkg-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; margin: 10px 0 0; max-width: 720px; text-wrap: balance; }
.pkg-toggle { display: inline-flex; padding: 4px; background: #faf5ec; border-radius: 999px; border: 1px solid rgba(47,29,75,0.10); }
.pkg-toggle-btn { font-family: var(--font-sans); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: 0; cursor: pointer; text-transform: capitalize; transition: background 140ms, color 140ms; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pkg-card { border-radius: 24px; padding: 32px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.pkg-popular { position: absolute; top: 14px; right: 14px; background: #c3a8ff; color: #2f1d4b; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; }
.pkg-name { font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: -0.02em; margin: 0; }
.pkg-blurb { font-size: 13px; line-height: 1.55; margin: 0; }
.pkg-price-row { margin-top: 8px; display: flex; align-items: baseline; gap: 6px; }
.pkg-price { font-family: var(--font-display); font-weight: 400; font-size: 44px; letter-spacing: -0.025em; line-height: 1; }
.pkg-freq { font-size: 12px; }
.pkg-bullets { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.pkg-bullet { font-size: 13px; line-height: 1.55; padding-left: 22px; position: relative; }
.pkg-check { position: absolute; left: 0; top: 5px; }
.pkg-cta { width: 100%; margin-top: 14px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; padding: 14px 24px; border-radius: 999px; cursor: pointer; transition: opacity 140ms; }
.pkg-cta:hover { opacity: 0.85; }
.pkg-note { text-align: center; margin-top: 32px; font-size: 13px; color: #5a4a73; }
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } }

/* ============================================================ Testimonials */
.testimonials-section { padding: 96px 0; background: #faf5ec; }
.t-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; margin: 10px 0 36px; max-width: 720px; }
.t-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.t-card { background: #ffffff; border: 1px solid rgba(47,29,75,0.12); border-radius: 24px; padding: 36px; margin: 0; }
.t-quote { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: -0.015em; color: #2f1d4b; margin: 0; }
.t-caption { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.t-avatar { width: 36px; height: 36px; border-radius: 999px; background: #c3a8ff; color: #2f1d4b; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 16px; flex-shrink: 0; }
.t-name { font-size: 14px; font-weight: 600; color: #2f1d4b; }
.t-role { font-size: 12px; color: #5a4a73; }
@media (max-width: 800px) { .t-grid { grid-template-columns: 1fr; } }

/* ============================================================ FAQ */
.faq-section { padding: 96px 0; background: #faf5ec; padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: flex-start; }
.faq-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; margin: 10px 0 16px; }
.faq-sub { font-size: 15px; line-height: 1.6; color: #5a4a73; }
.faq-list { border-top: 1px solid rgba(47,29,75,0.16); }
.faq-item { border-bottom: 1px solid rgba(47,29,75,0.16); }
.faq-btn { width: 100%; padding: 18px 4px; background: transparent; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: #2f1d4b; text-align: left; }
.faq-btn:hover { color: var(--purple-500); }
.faq-icon { font-size: 22px; font-weight: 300; opacity: 0.6; transition: transform 220ms; flex-shrink: 0; line-height: 1; }
.faq-icon.open { transform: rotate(45deg); }
.faq-answer { padding-bottom: 18px; font-size: 14px; line-height: 1.65; color: #5a4a73; max-width: 560px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================ Footer */
.footer-root { background: #2f1d4b; color: #faf5ec; padding-top: 96px; }
.footer-cta-block { text-align: center; padding-bottom: 80px; }
.footer-cta-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 auto; max-width: 820px; text-wrap: balance; color: #faf5ec; }
.footer-cta-sub { font-size: 17px; line-height: 1.55; color: rgba(250,245,236,0.78); margin-top: 18px; max-width: 520px; margin-inline: auto; }
.footer-cta-btn { margin-top: 28px; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 32px; padding: 40px 0; border-top: 1px solid rgba(250,245,236,0.18); }
.footer-col-title { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #c3a8ff; margin-bottom: 14px; }
.footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col-link { color: rgba(250,245,236,0.85); text-decoration: none; font-size: 14px; }
.footer-col-link:hover { color: #c3a8ff; }
.footer-mark { align-self: flex-end; justify-self: end; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; border-top: 1px solid rgba(250,245,236,0.18); flex-wrap: wrap; gap: 16px; font-size: 12px; color: rgba(250,245,236,0.6); }
.footer-legal-links { display: flex; gap: 18px; }
.footer-legal-link { color: rgba(250,245,236,0.7); text-decoration: none; }
.footer-legal-link:hover { color: rgba(250,245,236,0.95); }
@media (max-width: 900px) { .footer-links { grid-template-columns: 1fr 1fr; } .footer-mark { grid-column: 1 / -1; justify-self: center; } }

/* ============================================================ Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(47,29,75,0.55); backdrop-filter: blur(4px); z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-box { background: #faf5ec; border-radius: 24px; padding: 40px; max-width: 480px; width: 100%; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.modal-close { background: transparent; border: 0; font-size: 22px; color: #2f1d4b; cursor: pointer; padding: 0; line-height: 1; }
.modal-headline { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; margin: 8px 0 0; }
.modal-sub { font-size: 14px; color: #5a4a73; line-height: 1.55; }
.modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.modal-full { grid-column: 1 / -1; }
.modal-submit { margin-top: 18px; width: 100%; }
.modal-disclaimer { font-size: 12px; color: #8a7a9e; margin-top: 12px; text-align: center; }

/* ============================================================ Stripe corner utility */
@keyframes stripe-drift {
  from { background-position: 0 0; }
  to   { background-position: 28.28px 0; }
}

.stripe-corner {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  animation: stripe-drift 1.5s linear infinite;
}

@media (max-width: 768px) {
  .stripe-corner  { display: none; }
  .bouncing-star  { display: none; }
}

/* ============================================================ About page */
.about-hero   { background: #faf5ec; padding: 140px 0 88px; position: relative; overflow: hidden; }
.about-hero h1 { font-family: var(--font-display); font-size: clamp(48px, 6vw, 88px); font-weight: 500; color: #2f1d4b; letter-spacing: -0.03em; line-height: 1.05; max-width: 720px; margin: 16px 0 24px; }
.about-hero p  { font-size: 18px; color: #5a4a73; max-width: 560px; line-height: 1.75; margin: 0; }

.about-story  { background: #2f1d4b; padding: 96px 0; position: relative; overflow: hidden; }
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-story h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 52px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 0; }
.about-story p  { font-size: 17px; color: rgba(250,245,236,0.80); line-height: 1.85; margin: 0 0 20px; }
.about-story p:last-child { margin-bottom: 0; }

.about-creds  { background: #faf5ec; padding: 96px 0; position: relative; overflow: hidden; }
.about-creds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about-creds h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 500; color: #2f1d4b; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 32px; }
.about-photo-placeholder { background: #e7dcfb; border-radius: 16px; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; color: #7e5dc7; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.about-cred-row { border-top: 1px solid rgba(47,29,75,0.12); padding: 20px 0; }
.about-cred-row:last-child { border-bottom: 1px solid rgba(47,29,75,0.12); }
.about-cred-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #758766; margin-bottom: 6px; font-family: var(--font-body); }
.about-cred-value { font-size: 16px; color: #2f1d4b; line-height: 1.6; }

.about-personal { background: #effaef; padding: 96px 0; position: relative; overflow: hidden; }
.about-personal h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 500; color: #2f1d4b; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 40px; max-width: 560px; }
.about-personal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.about-personal-card { background: #ffffff; border-radius: 12px; padding: 28px 24px; border: 1px solid rgba(47,29,75,0.08); }
.about-personal-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: #2f1d4b; margin: 0 0 10px; line-height: 1.2; }
.about-personal-card p { font-size: 15px; color: #3f4d35; line-height: 1.75; margin: 0; }

.about-cta    { background: #2f1d4b; padding: 96px 0; text-align: center; position: relative; overflow: hidden; }
.about-cta h2 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 20px; }
.about-cta p  { font-size: 18px; color: rgba(250,245,236,0.75); max-width: 460px; margin: 0 auto 40px; line-height: 1.75; }

@media (max-width: 860px) {
  .about-story-grid, .about-creds-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-personal-grid { grid-template-columns: 1fr 1fr; }
  .about-photo-placeholder { aspect-ratio: 3/2; max-width: 480px; }
}
@media (max-width: 540px) {
  .about-personal-grid { grid-template-columns: 1fr; }
}

/* ============================================================ Packages page */
.pkgp-hero   { background: #2f1d4b; padding: 140px 0 88px; position: relative; overflow: hidden; }
.pkgp-hero h1 { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 80px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.05; max-width: 780px; margin: 16px 0 24px; }
.pkgp-hero p  { font-size: 18px; color: rgba(250,245,236,0.78); max-width: 540px; line-height: 1.75; margin: 0; }

.pkgp-how    { background: #faf5ec; padding: 96px 0; position: relative; overflow: hidden; }
.pkgp-how h2  { font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 48px); font-weight: 500; color: #2f1d4b; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 56px; max-width: 560px; }
.pkgp-steps  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pkgp-step   { background: #fff; border-radius: 14px; padding: 32px 28px; border: 1px solid rgba(47,29,75,0.09); position: relative; }
.pkgp-step-num { font-family: var(--font-display); font-size: 56px; font-weight: 500; color: #e7dcfb; line-height: 1; margin-bottom: 20px; letter-spacing: -0.04em; }
.pkgp-step h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: #2f1d4b; margin: 0 0 10px; }
.pkgp-step p  { font-size: 15px; color: #5a4a73; line-height: 1.75; margin: 0; }

.pkgp-faq    { background: #effaef; padding: 96px 0; position: relative; overflow: hidden; }
.pkgp-faq h2  { font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 48px); font-weight: 500; color: #2f1d4b; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 48px; max-width: 480px; }
.pkgp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pkgp-faq-item { background: #fff; border-radius: 12px; padding: 28px 24px; border: 1px solid rgba(47,29,75,0.08); }
.pkgp-faq-item h3 { font-size: 16px; font-weight: 600; color: #2f1d4b; margin: 0 0 10px; line-height: 1.4; }
.pkgp-faq-item p  { font-size: 15px; color: #3f4d35; line-height: 1.75; margin: 0; }

@media (max-width: 860px) {
  .pkgp-steps { grid-template-columns: 1fr; max-width: 480px; }
  .pkgp-faq-grid { grid-template-columns: 1fr; }
}

/* ============================================================ FAQ page */
.faqp-hero    { background: #2f1d4b; padding: 140px 0 88px; position: relative; overflow: hidden; }
.faqp-hero h1 { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 80px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.05; max-width: 720px; margin: 16px 0 24px; }
.faqp-hero p  { font-size: 18px; color: rgba(250,245,236,0.78); max-width: 520px; line-height: 1.75; margin: 0; }

.faqp-section        { padding: 96px 0; position: relative; overflow: hidden; }
.faqp-section.cream  { background: #faf5ec; }
.faqp-section.white  { background: #ffffff; }
.faqp-section.green  { background: #effaef; }

.faqp-inner   { display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: start; }
.faqp-label h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); font-weight: 500; color: #2f1d4b; letter-spacing: -0.03em; line-height: 1.15; margin: 16px 0 16px; }
.faqp-label p  { font-size: 15px; color: #5a4a73; line-height: 1.75; margin: 0; }

.faqp-list         { border-top: 1px solid rgba(47,29,75,0.12); }
.faqp-item         { border-bottom: 1px solid rgba(47,29,75,0.12); }
.faqp-btn          { width: 100%; background: none; border: 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; text-align: left; }
.faqp-q            { font-size: 16px; font-weight: 600; color: #2f1d4b; line-height: 1.45; }
.faqp-icon         { font-size: 22px; font-weight: 300; color: #758766; flex-shrink: 0; transition: transform 200ms ease; line-height: 1; }
.faqp-icon.open    { transform: rotate(45deg); }
.faqp-answer       { font-size: 15px; color: #5a4a73; line-height: 1.8; padding-bottom: 22px; max-width: 640px; }

@media (max-width: 860px) {
  .faqp-inner { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================================ Page-level CTA (shared) */
.page-cta      { background: #2f1d4b; padding: 96px 0; text-align: center; position: relative; overflow: hidden; }
.page-cta h2   { font-family: var(--font-display); font-size: clamp(32px, 4vw, 56px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 20px; }
.page-cta p    { font-size: 18px; color: rgba(250,245,236,0.75); max-width: 500px; margin: 0 auto 40px; line-height: 1.75; }

/* ============================================================ Services page */
.svcp-hero    { background: #2f1d4b; padding: 140px 0 88px; position: relative; overflow: hidden; }
.svcp-hero h1 { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 80px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.05; max-width: 780px; margin: 16px 0 24px; }
.svcp-hero p  { font-size: 18px; color: rgba(250,245,236,0.78); max-width: 560px; line-height: 1.75; margin: 0; }

.svcp-service       { padding: 96px 0; position: relative; overflow: hidden; }
.svcp-service.cream { background: #faf5ec; }
.svcp-service.green { background: #effaef; }
.svcp-service.dark  { background: #2f1d4b; }
.svcp-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.svcp-service.dark .svcp-grid { gap: 80px; }

.svcp-label h2  { font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 48px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 20px; }
.svcp-label p   { font-size: 17px; line-height: 1.8; margin: 0 0 28px; }
.svcp-service.cream .svcp-label h2 { color: #2f1d4b; }
.svcp-service.cream .svcp-label p  { color: #5a4a73; }
.svcp-service.green .svcp-label h2 { color: #2f1d4b; }
.svcp-service.green .svcp-label p  { color: #3f4d35; }
.svcp-service.dark  .svcp-label h2 { color: #faf5ec; }
.svcp-service.dark  .svcp-label p  { color: rgba(250,245,236,0.78); }

.svcp-tasks-label   { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.svcp-service.cream .svcp-tasks-label { color: #758766; }
.svcp-service.green .svcp-tasks-label { color: #3f4d35; }
.svcp-service.dark  .svcp-tasks-label { color: #c3a8ff; }

.svcp-task-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.svcp-task-card { border-radius: 10px; padding: 18px 16px; }
.svcp-service.cream .svcp-task-card { background: #fff; border: 1px solid rgba(47,29,75,0.09); }
.svcp-service.green .svcp-task-card { background: #fff; border: 1px solid rgba(47,29,75,0.09); }
.svcp-service.dark  .svcp-task-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(195,168,255,0.18); }
.svcp-task-name { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.svcp-task-desc { font-size: 13px; line-height: 1.6; }
.svcp-service.cream .svcp-task-name { color: #2f1d4b; }
.svcp-service.cream .svcp-task-desc { color: #5a4a73; }
.svcp-service.green .svcp-task-name { color: #2f1d4b; }
.svcp-service.green .svcp-task-desc { color: #3f4d35; }
.svcp-service.dark  .svcp-task-name { color: #faf5ec; }
.svcp-service.dark  .svcp-task-desc { color: rgba(250,245,236,0.70); }

.svcp-addons      { background: #fff; padding: 96px 0; position: relative; overflow: hidden; }
.svcp-addons h2   { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 500; color: #2f1d4b; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 12px; }
.svcp-addons-sub  { font-size: 17px; color: #5a4a73; line-height: 1.75; max-width: 560px; margin: 0 0 48px; }
.svcp-addon-grid  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svcp-addon-card  { background: #faf5ec; border-radius: 12px; padding: 28px 24px; border: 1px solid rgba(47,29,75,0.08); }
.svcp-addon-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: #2f1d4b; margin: 0 0 10px; line-height: 1.2; }
.svcp-addon-card p  { font-size: 14px; color: #5a4a73; line-height: 1.75; margin: 0; }

@media (max-width: 860px) {
  .svcp-grid { grid-template-columns: 1fr; gap: 40px; }
  .svcp-task-grid { grid-template-columns: 1fr; }
  .svcp-addon-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .svcp-addon-grid { grid-template-columns: 1fr; }
}

/* ============================================================ Use Cases page */
.ucp-hero    { background: #2f1d4b; padding: 140px 0 88px; position: relative; overflow: hidden; }
.ucp-hero h1 { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 80px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.05; max-width: 820px; margin: 16px 0 24px; }
.ucp-hero p  { font-size: 18px; color: rgba(250,245,236,0.78); max-width: 560px; line-height: 1.75; margin: 0; }

.ucp-grid-section { background: #faf5ec; padding: 96px 0; position: relative; overflow: hidden; }
.ucp-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.ucp-card    { background: #fff; border-radius: 16px; border: 1px solid rgba(47,29,75,0.09); overflow: hidden; display: flex; flex-direction: column; }
.ucp-card-top { padding: 32px 28px 24px; }
.ucp-card-tag { display: inline-block; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }
.ucp-card h3  { font-family: var(--font-display); font-size: 24px; font-weight: 500; color: #2f1d4b; line-height: 1.2; margin: 0 0 10px; }
.ucp-card-pain { font-size: 15px; color: #5a4a73; line-height: 1.7; margin: 0; }
.ucp-card-tasks { padding: 20px 28px 28px; border-top: 1px solid rgba(47,29,75,0.08); flex: 1; }
.ucp-card-tasks-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #758766; margin-bottom: 14px; }
.ucp-task-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ucp-task     { font-size: 14px; color: #2f1d4b; line-height: 1.5; display: flex; gap: 10px; align-items: baseline; }
.ucp-task::before { content: "–"; color: #758766; flex-shrink: 0; }

.ucp-bridge   { background: #2f1d4b; padding: 80px 0; position: relative; overflow: hidden; }
.ucp-bridge-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ucp-bridge h2 { font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 48px); font-weight: 500; color: #faf5ec; letter-spacing: -0.03em; line-height: 1.1; margin: 16px 0 0; }
.ucp-bridge p  { font-size: 17px; color: rgba(250,245,236,0.80); line-height: 1.85; margin: 0 0 20px; }
.ucp-bridge p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .ucp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ucp-grid { grid-template-columns: 1fr; }
  .ucp-bridge-inner { grid-template-columns: 1fr; gap: 36px; }
}