/* ===== HELIX FLOW v3 — Luxury White Edition ===== */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@300,400,500,700&display=swap');

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;

  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Montserrat', 'Arial Black', sans-serif;
  --font-body: 'Montserrat', 'Inter', sans-serif;
  --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px;
}

/* ── LIGHT (default) palette — white luxury ── */
:root, [data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-offset: #f1f5f9;
  --border: #dde4ee;
  --divider: #e8edf5;
  --text: #0c1524;
  --text-muted: #4a6280;
  --text-faint: #8fa4bc;
  --text-inv: #ffffff;

  /* Logo-derived palette: deep navy + teal + gold */
  --navy: #0d2240;
  --teal: #5eb6cf;
  --teal-hover: #4aa0ba;
  --teal-active: #3a8aa5;
  --teal-glow: rgba(94,182,207,0.12);
  --teal-subtle: rgba(94,182,207,0.07);

  --gold: #b8892a;
  --gold-light: #d4a843;
  --gold-glow: rgba(184,137,42,0.10);

  --chrome: #4a6a84;
  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.08);
  --warn: #d97706;
  --warn-bg: rgba(217,119,6,0.08);
  --error: #dc2626;

  --shadow-sm: 0 1px 3px rgba(13,34,64,0.06);
  --shadow-md: 0 4px 16px rgba(13,34,64,0.10);
  --shadow-lg: 0 12px 40px rgba(13,34,64,0.14);
  --shadow-teal: 0 0 24px rgba(26,143,160,0.15);
  --shadow-gold: 0 0 24px rgba(184,137,42,0.12);
}

/* ── DARK palette ── */
[data-theme="dark"] {
  --bg: #08090b;
  --surface: #0f1115;
  --surface-2: #14171d;
  --surface-offset: #191d25;
  --border: #242a36;
  --divider: #1a1f29;
  --text: #e4e8ed;
  --text-muted: #7e8a9e;
  --text-faint: #3e4a5c;
  --text-inv: #08090b;

  --navy: #1e3a5f;
  --teal: #5eb6cf;
  --teal-hover: #4aa0ba;
  --teal-active: #3a8aa5;
  --teal-glow: rgba(46,196,212,0.12);
  --teal-subtle: rgba(46,196,212,0.06);

  --gold: #d4a843;
  --gold-light: #e8c068;
  --gold-glow: rgba(212,168,67,0.12);

  --chrome: #8faabe;
  --success: #4ade80;
  --success-bg: rgba(74,222,128,0.08);
  --warn: #f59e0b;
  --warn-bg: rgba(245,158,11,0.08);
  --error: #f87171;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7);
  --shadow-teal: 0 0 30px rgba(46,196,212,0.15);
  --shadow-gold: 0 0 30px rgba(212,168,67,0.12);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:var(--space-16)}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg);line-height:1.6}
img,video,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;line-height:1.1;font-family:var(--font-display)}
p,li{text-wrap:pretty;max-width:72ch}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul[role="list"]{list-style:none}
::selection{background:rgba(26,143,160,0.18);color:var(--text)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--radius-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-8);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(20px);border-bottom:1px solid var(--divider);gap:var(--space-4)}
.nav-logo{display:flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;letter-spacing:-0.02em;flex-shrink:0}
.nav-logo img{width:42px;height:42px;object-fit:contain}
.nav-logo .brand-text{color:var(--navy)}
.nav-logo .teal{color:var(--teal)}
.nav-logo .sub{font-size:var(--text-xs);color:var(--text-faint);font-weight:400;letter-spacing:0.08em;text-transform:uppercase;margin-left:var(--space-1)}
.nav-links{display:flex;align-items:center;gap:var(--space-5);flex-shrink:0}
.nav-links a{font-size:var(--text-sm);color:var(--text-muted);transition:color var(--transition);font-weight:500}
.nav-links a:hover{color:var(--teal)}
.nav-right{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.nav-phone{font-size:var(--text-sm);font-weight:700;color:var(--navy);display:flex;align-items:center;gap:6px;text-decoration:none;transition:color var(--transition)}
.nav-phone:hover{color:var(--teal)}
@media(max-width:900px){.nav-links,.hide-mobile{display:none!important}}
@media(max-width:600px){.nav{padding:var(--space-3) var(--space-4)}}

/* ── Theme toggle ── */
.theme-toggle{width:36px;height:36px;border-radius:var(--radius-full);background:var(--surface-offset);color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.theme-toggle:hover{background:var(--border);color:var(--text)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);font-family:var(--font-body);font-size:var(--text-sm);font-weight:700;letter-spacing:0.01em;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--teal);color:#fff;box-shadow:var(--shadow-teal)}
.btn-primary:hover{background:var(--teal-hover);box-shadow:0 0 40px rgba(26,143,160,0.3);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:var(--shadow-md)}
.btn-navy:hover{background:#0a1c35;transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:var(--shadow-gold)}
.btn-gold:hover{background:#a07820;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.btn-outline:hover{background:var(--teal-subtle)}
.btn-secondary{background:var(--surface-offset);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--teal);color:var(--teal)}
.btn-ghost{background:transparent;color:var(--text-muted)}
.btn-ghost:hover{color:var(--teal)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;letter-spacing:0.05em;background:var(--teal-subtle);border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);color:var(--teal)}
.badge-gold{background:var(--gold-glow);border-color:color-mix(in srgb,var(--gold) 35%,transparent);color:var(--gold)}
.badge-navy{background:color-mix(in srgb,var(--navy) 8%,transparent);border-color:color-mix(in srgb,var(--navy) 25%,transparent);color:var(--navy)}

/* ── Promo banner ── */
.promo-banner{background:var(--navy);color:#fff;text-align:center;padding:var(--space-3) var(--space-6);font-size:var(--text-sm);font-weight:600;position:sticky;top:70px;z-index:99;border-bottom:1px solid color-mix(in srgb,var(--teal) 30%,transparent)}
.promo-banner .promo-highlight{color:var(--gold-light);font-weight:800}
.promo-banner a{color:#fff;text-decoration:underline}

/* ── Layout ── */
.section{padding:var(--space-20) var(--space-8)}
.container{max-width:var(--content-wide);margin-inline:auto}
.container-narrow{max-width:var(--content-narrow);margin-inline:auto;padding-inline:var(--space-6)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
@media(max-width:900px){.g4{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--space-6);transition:box-shadow var(--transition),transform var(--transition)}
.card:hover{box-shadow:var(--shadow-md)}
.card-featured{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),var(--shadow-teal)}
.card-gold{border-color:color-mix(in srgb,var(--gold) 35%,var(--border))}
.card-navy{border-color:color-mix(in srgb,var(--navy) 30%,var(--border));background:color-mix(in srgb,var(--navy) 4%,var(--surface))}

/* ── Forms ── */
.fi{width:100%;padding:var(--space-3) var(--space-4);background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--text);transition:border-color var(--transition)}
.fi:focus{outline:none;border-color:var(--teal)}
.ft{width:100%;padding:var(--space-3) var(--space-4);background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--text);min-height:80px;resize:vertical;transition:border-color var(--transition)}
.ft:focus{outline:none;border-color:var(--teal)}
.fs{width:100%;padding:var(--space-3) var(--space-4);background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--text);transition:border-color var(--transition)}
.fs:focus{outline:none;border-color:var(--teal)}
.fg{display:flex;flex-direction:column;gap:var(--space-2)}
.fl{font-size:var(--text-sm);font-weight:600;color:var(--text-muted)}

/* ── Tier cards ── */
.tier-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-2xl);padding:var(--space-8);position:relative;transition:all .25s}
.tier-card:hover{box-shadow:var(--shadow-lg)}
.tier-card.featured{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),var(--shadow-teal)}
.tier-label{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2)}
.tier-name{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-1)}
.tier-save{font-size:var(--text-sm);font-weight:700;margin-bottom:var(--space-4)}
.tier-price{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,4rem);font-weight:700;color:var(--teal);line-height:1}
.tier-per{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1);margin-bottom:var(--space-6)}
.tier-features{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-8);padding:0}
.tier-features li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm)}
.tier-features li::before{content:'✓';color:var(--teal);font-weight:800;flex-shrink:0}

/* ── Section dividers ── */
.divider-strip{border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);padding:var(--space-5) var(--space-8);background:var(--surface-2)}

/* ── Stats ── */
.stat .stat-val{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;color:var(--teal)}
.stat .stat-label{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}

/* ── Toast ── */
.toast-wrap{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:9999;display:flex;flex-direction:column;gap:var(--space-2)}
.toast{background:var(--navy);color:#fff;border-radius:var(--radius-xl);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);box-shadow:var(--shadow-lg);animation:fadeUp .3s ease;display:flex;align-items:center;gap:var(--space-2)}
.toast.warn{background:#92400e}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseTeal{0%,100%{box-shadow:0 0 0 0 rgba(26,143,160,.4)}50%{box-shadow:0 0 0 12px rgba(26,143,160,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{to{transform:translateY(-6px);opacity:.4}}

/* ── Guarantee strip ── */
.guarantee-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-6);padding:var(--space-4) var(--space-8)}
.guarantee-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;color:var(--navy)}
.guarantee-item .g-icon{color:var(--teal);font-size:1.1rem}