/* ================================================================
   ATUNELLE — DESIGN SYSTEM  v3.0
   design.css

   Single source of truth for the entire website.
   Every color, font, shadow, spacing, animation, and shared
   component class lives here. Page files only add layout rules.

   QUICK EDIT GUIDE:
   ┌─ Brand color        → --accent, --accent-hover
   ├─ Background         → --bg-page, --gradient-hero
   ├─ Logo font          → --font-logo  (Google Fonts import below)
   ├─ Body font          → --font-body
   ├─ Section spacing    → --pad-section-v / --pad-section-h
   └─ Card corner radius → --r-card
   ================================================================ */


/* ================================================================
   FONTS
   Cormorant Garamond — ultra-refined serif for the logo
   Plus Jakarta Sans  — clean geometric for all UI & body text
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');


/* ================================================================
   1.  COLOR TOKENS
   ================================================================ */
:root {
  /* Brand purple */
  --accent:           #7C5CBF;
  --accent-hover:     #6B4DAE;
  --accent-light:     #F2EEFB;   /* pill fills, icon bg       */
  --accent-mid:       #B49ADA;   /* decorative, muted accents */
  --accent-subtle:    #FAF7FF;   /* very faint purple tint    */

  /* Text */
  --text-primary:     #1C1428;   /* near-black, purple-toned  */
  --text-secondary:   #6A5C7E;   /* muted purple-grey         */
  --text-hint:        #AFA2C0;   /* labels, meta, placeholders*/
  --text-on-dark:     #FFFFFF;

  /* Surfaces */
  --bg-page:          #FDFBFF;   /* near-white, barely lavender*/
  --bg-surface:       #FFFFFF;
  --bg-alt:           #F8F5FC;   /* alternating sections      */

  /* Cards */
  --card-bg:          #FFFFFF;
  --card-border:      rgba(150, 120, 200, 0.12);
  --card-border-hover:rgba(124,  92, 191, 0.28);
  --card-shadow:      0 1px 12px rgba(124, 92, 191, 0.06);
  --card-shadow-hover:0 10px 36px rgba(124, 92, 191, 0.13);

  /* Semantic */
  --success-bg:       #EDFAF3;
  --success-text:     #1A7A4E;
  --warning-bg:       #FEF8EC;
  --warning-text:     #8A5A0A;
  --warning-border:   rgba(190, 130, 10, 0.16);

  /* Footer */
  --footer-bg:        #100D1C;
  --footer-text:      rgba(255,255,255,0.48);
  --footer-label:     rgba(255,255,255,0.24);
  --footer-logo:      #C8B0EB;
  --footer-border:    rgba(255,255,255,0.06);

  /* Decorative gold dots */
  --dot:              #C9A84C;
}


/* ================================================================
   2.  GRADIENTS
   Barely-there — premium, light, matches app screenshot tone.
   ================================================================ */
:root {
  /* Hero & page banners */
  --gradient-hero: linear-gradient(
    150deg,
    #F7F3FD 0%,    /* softest lavender */
    #FAF1FB 35%,   /* lavender-blush   */
    #FCF2F7 65%,   /* petal pink       */
    #FEF6F2 100%   /* warm cream       */
  );

  /* Quote / soft accent strips */
  --gradient-soft: linear-gradient(
    150deg,
    #F9F5FE 0%,
    #FBF2FA 50%,
    #FEF6F3 100%
  );
}


/* ================================================================
   3.  TYPOGRAPHY
   ================================================================ */
:root {
  --font-logo:    'Dancing Script', cursive;    /* handwritten logo */
  --font-display: 'Cormorant Garamond', serif;  /* big headings  */
  --font-body:    'Plus Jakarta Sans', sans-serif; /* everything else */

  /* Scale */
  --t-2xs:  10px;
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   16px;
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;

  /* Fluid */
  --t-hero:    clamp(44px, 5.5vw, 68px);
  --t-section: clamp(30px, 3.8vw, 46px);
  --t-page:    clamp(34px, 4.2vw, 54px);

  /* Weights */
  --w-light:   300;
  --w-reg:     400;
  --w-med:     500;
  --w-semi:    600;

  /* Leading */
  --lh-tight:   1.06;
  --lh-snug:    1.32;
  --lh-base:    1.55;
  --lh-relax:   1.72;
  --lh-loose:   1.85;

  /* Tracking */
  --ls-logo:    0.01em;   /* logo letter-spacing — tight for script */
  --ls-tight:  -0.025em;  /* display headings    */
  --ls-caps:    0.09em;   /* uppercase labels    */
}


/* ================================================================
   4.  SPACING & LAYOUT
   ================================================================ */
:root {
  --max-w:          1120px;
  --max-w-text:      700px;
  --pad-section-v:   96px;
  --pad-section-h:   52px;
  --card-pad:        28px 30px;
  --card-gap:        20px;
  --gap-sm:  12px;
  --gap-md:  24px;
  --gap-lg:  44px;
  --gap-xl:  68px;
}


/* ================================================================
   5.  RADII
   ================================================================ */
:root {
  --r-sm:     6px;
  --r-md:    10px;
  --r-card:  18px;
  --r-lg:    22px;
  --r-xl:    28px;
  --r-pill: 100px;
  --r-phone: 50px;
}


/* ================================================================
   6.  EASING & TIMING
   ================================================================ */
:root {
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.48, 0.64, 1);
  --t-fast:  140ms;
  --t-base:  220ms;
  --t-slow:  360ms;
}


/* ================================================================
   7.  GLOBAL RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: var(--w-reg);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
strong { font-weight: var(--w-semi); }


/* ================================================================
   8.  SCROLL REVEAL ANIMATION
   Add class="reveal" to any element.
   JS IntersectionObserver (in each page) adds .visible.
   Stagger with reveal-delay-1 through -4.
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }


/* ================================================================
   9.  LAYOUT HELPERS
   ================================================================ */
.section-wrap {
  padding: var(--pad-section-v) var(--pad-section-h);
}
.section-wrap--alt { background: var(--bg-alt); }
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}


/* ================================================================
   10.  EYEBROW
   ================================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ================================================================
   11.  SECTION HEADINGS
   ================================================================ */
.section-title {
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: var(--w-light);          /* Cormorant looks best light */
  color: var(--text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: 14px;
}
.section-title strong {
  font-weight: var(--w-med);
}
.section-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: var(--w-light);
}
.section-sub {
  font-size: var(--t-md);
  color: var(--text-secondary);
  font-weight: var(--w-light);
  line-height: var(--lh-relax);
  max-width: 500px;
}


/* ================================================================
   12.  CARD
   ================================================================ */
.card {
  background: var(--card-bg);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition:
    transform  var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--card-border-hover);
}


/* ================================================================
   13.  BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: var(--w-med);
  letter-spacing: 0.01em;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition:
    background   var(--t-base) ease,
    transform    var(--t-fast) var(--ease-bounce),
    box-shadow   var(--t-base) ease,
    border-color var(--t-base) ease;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--accent);
  color: var(--text-on-dark);
  padding: 13px 30px;
  box-shadow: 0 3px 18px rgba(124,92,191,0.26);
}
.btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 7px 26px rgba(124,92,191,0.34);
}

.btn--secondary {
  background: transparent;
  color: var(--accent);
  padding: 12px 28px;
  border: 1.5px solid var(--card-border-hover);
}
.btn--secondary:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Nav pill */
.btn--nav {
  background: var(--accent) !important;
  color: var(--text-on-dark) !important;
  padding: 8px 20px !important;
  font-size: var(--t-sm) !important;
  font-weight: var(--w-med) !important;
  border-radius: var(--r-pill) !important;
  box-shadow: 0 2px 10px rgba(124,92,191,0.20);
}
.btn--nav:hover {
  background: var(--accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(124,92,191,0.28) !important;
}


/* ================================================================
   14.  STORE BADGES
   ================================================================ */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition:
    transform  var(--t-base) var(--ease),
    background var(--t-base) ease;
}
.store-badge--dark {
  background: var(--text-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(28,20,40,0.18);
}
.store-badge--dark:hover { background: var(--accent); transform: translateY(-2px); }
.store-badge--light {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.26);
}
.store-badge--light:hover { background: rgba(255,255,255,0.26); transform: translateY(-2px); }
.store-badge svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.store-badge__text small  { font-size: var(--t-2xs); opacity: .70; display: block; }
.store-badge__text strong { font-size: var(--t-sm); font-weight: var(--w-med); display: block; }


/* ================================================================
   15.  TAG / PILL
   ================================================================ */
.tag {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: var(--w-med);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}
.tag--muted {
  background: rgba(124,92,191,0.06);
  color: var(--text-secondary);
}


/* ================================================================
   16.  NAVIGATION  (used on every page)
   ================================================================ */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: 68px;
  padding: 0 var(--pad-section-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition:
    background var(--t-slow) ease,
    box-shadow var(--t-slow) ease;
}
.site-nav.scrolled {
  background: rgba(253,251,255,0.90);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 1px 0 rgba(140,110,190,0.09);
}

/* Logo — Cormorant Garamond, light weight, spaced */
.nav-logo {
  font-family: var(--font-logo);
  font-weight: 600;          /* Dancing Script 600 is the sweet spot */
  font-size: 30px;           /* script fonts read smaller — size up */
  letter-spacing: var(--ls-logo);
  color: var(--accent);
  text-decoration: none;
  line-height: 1;
  transition: opacity var(--t-fast) ease, color var(--t-fast) ease;
}
.nav-logo:hover { opacity: .78; }

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  font-size: var(--t-sm);
  font-weight: var(--w-med);
  color: var(--text-secondary);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) ease;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width var(--t-base) var(--ease);
}
.nav-links a:hover        { color: var(--accent); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active       { color: var(--accent); }
.nav-links a.active::after{ width: 100%; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) ease;
}
.nav-toggle:hover { background: var(--accent-light); }
.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transition: all var(--t-base) var(--ease);
}


/* ================================================================
   17.  PAGE HERO BANNER  (legal pages)
   ================================================================ */
.page-hero {
  padding: 148px var(--pad-section-h) 72px;
  background: var(--gradient-hero);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, var(--dot) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--dot) 1px,   transparent 1px),
    radial-gradient(circle, var(--dot) 1.5px, transparent 1.5px),
    radial-gradient(circle, var(--dot) 1px,   transparent 1px);
  background-position: 7% 38%, 93% 20%, 58% 84%, 20% 68%;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.page-hero__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative; z-index: 1;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--t-page);
  font-weight: var(--w-light);
  color: var(--text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 10px 0 8px;
}
.page-hero__meta {
  font-size: var(--t-sm);
  color: var(--text-hint);
  font-weight: var(--w-light);
}


/* ================================================================
   18.  LEGAL CONTENT
   ================================================================ */
.legal-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 72px var(--pad-section-h) 100px;
}

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 40px;
}

.legal-wrap h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: var(--w-light);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  margin: 48px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.legal-wrap h2:first-of-type { margin-top: 0; }

.legal-wrap h3 {
  font-size: var(--t-md);
  font-weight: var(--w-semi);
  color: var(--text-primary);
  margin: 24px 0 8px;
  letter-spacing: -0.01em;
}
.legal-wrap p {
  font-size: var(--t-base);
  color: var(--text-secondary);
  line-height: var(--lh-loose);
  font-weight: var(--w-light);
  margin-bottom: 14px;
}
.legal-wrap ul {
  list-style: none;
  padding: 0;
  margin-bottom: 18px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.legal-wrap ul li {
  font-size: var(--t-base);
  color: var(--text-secondary);
  line-height: var(--lh-relax);
  font-weight: var(--w-light);
  padding: 11px 16px 11px 40px;
  position: relative;
  border-bottom: 1px solid var(--card-border);
  background: var(--bg-surface);
}
.legal-wrap ul li:last-child { border-bottom: none; }
.legal-wrap ul li::before {
  content: '';
  position: absolute;
  left: 16px; top: 18px;
  width: 6px; height: 6px;
  background: var(--accent-mid);
  border-radius: 50%;
}
.legal-wrap a  { color: var(--accent); font-weight: var(--w-med); }
.legal-wrap a:hover { text-decoration: underline; }

.legal-divider {
  border: none;
  border-top: 1px solid var(--card-border);
  margin: 44px 0;
}

/* Info card — purple accent left border */
.legal-card {
  background: var(--accent-subtle);
  border: 1px solid rgba(124,92,191,0.12);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 18px 22px;
  margin-bottom: 20px;
}
.legal-card p { margin-bottom: 0; color: var(--text-primary); font-weight: var(--w-reg); }

/* Warning card — amber */
.legal-card--warning {
  background: var(--warning-bg);
  border-left-color: #BA8010;
  border-color: var(--warning-border);
}
.legal-card--warning p { color: var(--warning-text); }

/* Section badges */
.legal-badge {
  font-family: var(--font-body);
  font-size: var(--t-2xs);
  font-weight: var(--w-semi);
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-light);
  color: var(--accent);
  vertical-align: middle;
}
.legal-badge--new {
  background: var(--success-bg);
  color: var(--success-text);
}

/* Pricing cards */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 32px;
}
.pricing-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: 32px 24px 26px;
  position: relative;
  text-align: center;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) ease;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.pricing-card--featured {
  background: var(--accent-light);
  border-color: rgba(124,92,191,0.26);
}
.pricing-badge-top {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: var(--t-2xs);
  font-weight: var(--w-semi);
  letter-spacing: .7px;
  text-transform: uppercase;
  padding: 3px 14px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pricing-label  { font-size: var(--t-xs); font-weight: var(--w-semi); text-transform: uppercase; letter-spacing: .8px; color: var(--text-hint); margin-bottom: 10px; }
.pricing-amount { font-family: var(--font-display); font-size: 42px; font-weight: var(--w-light); color: var(--accent); line-height: 1; margin-bottom: 4px; }
.pricing-period { font-size: var(--t-xs); color: var(--text-hint); margin-bottom: 14px; }
.pricing-name   { font-size: var(--t-sm); font-weight: var(--w-med); color: var(--text-primary); }


/* ================================================================
   19.  FOOTER  (shared across all pages)
   ================================================================ */
.site-footer {
  background: var(--footer-bg);
  color: #fff;
  padding: 68px var(--pad-section-h) 40px;
}
.site-footer__inner { max-width: var(--max-w); margin: 0 auto; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--footer-border);
  margin-bottom: 32px;
}
.footer-brand__logo {
  font-family: var(--font-logo);
  font-weight: 600;
  font-size: 36px;           /* logo is the anchor of the footer */
  letter-spacing: var(--ls-logo);
  color: var(--footer-logo);
  display: block;
  margin-bottom: 16px;
  line-height: 1.1;
}
.footer-brand p { font-size: var(--t-sm); color: var(--footer-text); line-height: var(--lh-relax); font-weight: var(--w-light); max-width: 240px; }
.footer-col h4  { font-size: var(--t-xs); font-weight: var(--w-semi); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--footer-label); margin-bottom: 18px; }
.footer-col ul  { list-style: none; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { font-size: var(--t-sm); color: var(--footer-text); text-decoration: none; font-weight: var(--w-light); transition: color var(--t-fast) ease; }
.footer-col ul li a:hover { color: var(--footer-logo); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.site-footer__bottom p   { font-size: var(--t-xs); color: rgba(255,255,255,.22); font-weight: var(--w-light); }
.site-footer__bottom a   { color: rgba(255,255,255,.36); }
.site-footer__bottom a:hover { color: var(--footer-logo); }


/* ================================================================
   20.  SHARED PAGE SCRIPT — paste at bottom of every HTML file
   ================================================================

   <script>
     // Nav frost on scroll
     const nav = document.querySelector('.site-nav');
     window.addEventListener('scroll', () =>
       nav.classList.toggle('scrolled', window.scrollY > 20), {passive:true});

     // Reveal on scroll
     new IntersectionObserver(
       entries => entries.forEach(e => e.isIntersecting && e.target.classList.add('visible')),
       {threshold:0.1}
     ).observe(...document.querySelectorAll('.reveal'));  // see note below

     // Mobile nav
     document.querySelector('.nav-toggle')
       ?.addEventListener('click', () =>
         document.getElementById('navLinks').classList.toggle('open'));
   </script>

   ================================================================ */


/* ================================================================
   21.  RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
  :root { --pad-section-h: 36px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  :root {
    --pad-section-v: 64px;
    --pad-section-h: 24px;
  }
  .site-nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(253,251,255,0.97);
    backdrop-filter: blur(22px);
    padding: 24px; gap: 20px;
    border-bottom: 1px solid var(--card-border);
    box-shadow: 0 8px 32px rgba(124,92,191,0.07);
  }
  .nav-toggle { display: flex; }
  .page-hero  { padding: 130px 24px 56px; }
  .legal-wrap { padding: 52px 24px 80px; }
  .pricing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  :root {
    --pad-section-v: 52px;
    --pad-section-h: 20px;
  }
  .site-footer__grid { grid-template-columns: 1fr; }
}