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

    :root {
      --cream: #F4EFE6;
      --cream-dark: #EDE7DB;
      --dark: #0F1A10;
      --dark-forest: #0A1610;
      --forest: #1B5E36;
      --forest-mid: #2E7D52;
      --sage: #4CAF7D;
      --stone: #7D7870;
      --stone-light: #A5A09A;
      --border: #D8D2C7;
      --white: #FFFFFF;
      --font-display: 'Fraunces', Georgia, serif;
      --font-body: 'Plus Jakarta Sans', sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      background: var(--cream);
      color: var(--dark);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    /* ── NAV ── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(244,239,230,0.93);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      transition: background 0.35s, border-color 0.35s;
    }
    .nav.over-hero {
      background: rgba(10,22,16,0.82);
      border-bottom-color: rgba(255,255,255,0.07);
    }
    .nav-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 32px;
      height: 64px; display: flex; align-items: center; justify-content: space-between;
    }
    .nav-logo {
      text-decoration: none; display: flex; align-items: center;
    }
    .nav-logo img { height: 36px; width: auto; display: block; }
    .nav-logo .logo-light { display: block; }
    .nav-logo .logo-dark { display: none; }
    .nav.over-hero .logo-light { display: none; }
    .nav.over-hero .logo-dark { display: block; }
    .footer-logo { height: 36px; width: auto; display: block; }
    .nav-links { display: flex; gap: 28px; list-style: none; }
    .nav-links a {
      font-size: 13.5px; font-weight: 500; color: var(--stone);
      text-decoration: none; letter-spacing: 0.01em; transition: color 0.2s;
    }
    .nav.over-hero .nav-links a { color: rgba(255,255,255,0.65); }
    .nav-links a:hover { color: var(--dark); }
    .nav.over-hero .nav-links a:hover { color: white; }
    .nav-ctas { display: flex; gap: 10px; }
    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
      letter-spacing: 0.045em; text-transform: uppercase;
      padding: 9px 18px; border-radius: 3px; border: none;
      cursor: pointer; text-decoration: none; transition: all 0.2s;
    }
    .btn-outline {
      background: transparent; color: var(--dark); border: 1.5px solid var(--border);
    }
    .btn-outline:hover { border-color: var(--dark); }
    .nav.over-hero .btn-outline { color: white; border-color: rgba(255,255,255,0.28); }
    .nav.over-hero .btn-outline:hover { border-color: white; }
    .btn-solid { background: var(--forest); color: white; }
    .btn-solid:hover { background: var(--forest-mid); transform: translateY(-1px); }

    /* ── HERO ── */
    .hero {
      height: 100vh; min-height: 700px;
      background: var(--dark-forest);
      position: relative; overflow: hidden;
      display: flex; align-items: flex-end; padding-bottom: 88px;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 65% 55% at 72% 38%, rgba(27,94,54,0.38) 0%, transparent 68%),
        radial-gradient(ellipse 35% 50% at 28% 72%, rgba(76,175,125,0.1) 0%, transparent 55%);
    }
    .hero-grid {
      position: absolute; inset: 0; opacity: 0.03;
      background-image: linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px);
      background-size: 64px 64px;
    }
    .hero-visual {
      position: absolute; right: 0; top: 0; bottom: 0; width: 44%;
      background: linear-gradient(135deg, #152b1f 0%, #0c1f14 40%, #0f2419 100%);
      overflow: hidden;
    }
    /* Atmospheric charger glow */
    .hero-glow {
      position: absolute; bottom: 18%; right: 18%; width: 140px; height: 140px;
      background: radial-gradient(circle, rgba(76,175,125,0.55) 0%, transparent 70%);
      border-radius: 50%; animation: pulse 3.5s ease-in-out infinite;
    }
    .hero-glow-2 {
      position: absolute; top: 30%; left: 35%; width: 80px; height: 80px;
      background: radial-gradient(circle, rgba(76,175,125,0.25) 0%, transparent 70%);
      border-radius: 50%; animation: pulse 4.5s ease-in-out infinite 1s;
    }
    @keyframes pulse {
      0%,100% { transform: scale(1); opacity: 0.7; }
      50% { transform: scale(1.35); opacity: 1; }
    }
    /* SVG car + charger illustration */
    .hero-illustration {
      position: absolute; bottom: 0; left: 0; right: 0; height: 70%;
      opacity: 0.18;
    }
    .hero-fade {
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(10,22,16,0.95) 0%, rgba(10,22,16,0.35) 50%, rgba(10,22,16,0.0) 100%);
    }
    .hero-content {
      position: relative; z-index: 2;
      max-width: 1280px; margin: 0 auto; padding: 0 32px; width: 100%;
    }
    .kicker {
      font-size: 11.5px; font-weight: 700; letter-spacing: 0.13em;
      text-transform: uppercase; color: var(--sage);
      display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
    }
    .kicker::before { content:''; width:30px; height:1.5px; background:var(--sage); }
    .hero-h1 {
      font-family: var(--font-display);
      font-size: clamp(54px, 7.5vw, 100px);
      font-weight: 300; line-height: 1.0;
      color: white; letter-spacing: -0.025em;
      max-width: min(620px, 50vw); margin-bottom: 28px;
    }
    .hero-h1 em { font-style: italic; font-weight: 200; color: var(--sage); }
    .hero-sub {
      font-size: 17px; font-weight: 300;
      color: rgba(255,255,255,0.58); max-width: 400px;
      line-height: 1.75; margin-bottom: 44px;
    }
    .hero-actions { display: flex; align-items: center; gap: 18px; }
    .btn-hero {
      background: var(--sage); color: var(--dark);
      font-size: 13px; font-weight: 700; letter-spacing: 0.045em;
      text-transform: uppercase; padding: 15px 30px; border-radius: 3px;
      text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
      transition: all 0.2s;
    }
    .btn-hero:hover { background: #5dc48e; transform: translateY(-2px); }
    .btn-ghost-hero {
      color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600;
      letter-spacing: 0.045em; text-transform: uppercase; text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
      border-bottom: 1.5px solid rgba(255,255,255,0.28); padding-bottom: 3px;
      transition: all 0.2s;
    }
    .btn-ghost-hero:hover { color: white; border-color: white; gap: 12px; }
    .hero-scroll-hint {
      position: absolute; bottom: 36px; right: 32px; z-index: 2;
      writing-mode: vertical-rl; font-size: 10.5px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(255,255,255,0.28); display: flex; align-items: center; gap: 12px;
    }
    .hero-scroll-hint::after {
      content: ''; width: 1.5px; height: 44px;
      background: rgba(255,255,255,0.18);
    }

    /* ── TRUST STRIP ── */
    .trust-strip {
      background: var(--dark); padding: 18px 32px;
      display: flex; justify-content: center; align-items: center;
      gap: 56px; overflow-x: auto;
    }
    .trust-item {
      display: flex; align-items: center; gap: 9px;
      color: rgba(255,255,255,0.45); font-size: 12.5px; font-weight: 500;
      letter-spacing: 0.04em; white-space: nowrap;
    }
    .trust-item svg { width: 14px; height: 14px; stroke: var(--sage); fill: none; stroke-width: 2.5; }

    /* ── SHARED SECTION UTILITIES ── */
    .section-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
      text-transform: uppercase; color: var(--forest); margin-bottom: 14px;
    }
    .section-h2 {
      font-family: var(--font-display);
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 300; line-height: 1.08;
      letter-spacing: -0.022em; color: var(--dark);
    }
    .section-h2 em { font-style: italic; font-weight: 200; }

    /* ── PILLARS ── */
    .pillars { padding: 100px 32px; background: var(--cream); }
    .pillars-inner { max-width: 1280px; margin: 0 auto; }
    .pillars-top {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 32px; align-items: end; margin-bottom: 72px;
    }
    .pillars-desc {
      font-size: 16px; font-weight: 300; color: var(--stone);
      line-height: 1.8; max-width: 400px;
    }
    .pillars-grid {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 1px; background: var(--border);
      border: 1px solid var(--border); border-radius: 7px; overflow: hidden;
    }
    .pillar {
      background: var(--cream); padding: 38px 30px;
      transition: background 0.22s;
    }
    .pillar:hover { background: var(--cream-dark); }
    .pillar-icon { margin-bottom: 22px; }
    .pillar-icon svg {
      width: 26px; height: 26px; stroke: var(--forest); fill: none; stroke-width: 1.6;
    }
    .pillar h3 {
      font-family: var(--font-display); font-size: 21px; font-weight: 400;
      letter-spacing: -0.01em; margin-bottom: 10px; line-height: 1.2;
    }
    .pillar p { font-size: 13.5px; color: var(--stone); line-height: 1.72; }

    /* ── FEATURE SPLIT ── */
    .split { padding: 96px 32px; }
    .split.alt { background: var(--cream-dark); }
    .split-inner {
      max-width: 1280px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 72px; align-items: center;
    }
    .split.flip .split-inner { direction: rtl; }
    .split.flip .split-content,
    .split.flip .split-media { direction: ltr; }
    .split-media {
      aspect-ratio: 4/3; border-radius: 7px; overflow: hidden; position: relative;
    }
    .split-media-bg { position: absolute; inset: 0; }
    .bg-green { background: linear-gradient(135deg,#1a3a26,#0c1f14,#1e3d28); }
    .bg-purple { background: linear-gradient(135deg,#2a1f3d,#1a1426,#2d2040); }
    .split-media-quote {
      position: absolute; bottom: 26px; left: 26px; right: 26px;
      font-family: var(--font-display); font-size: 26px; font-weight: 300;
      font-style: italic; color: rgba(255,255,255,0.22); line-height: 1.25;
    }
    .feat-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--forest); margin-bottom: 18px;
      display: flex; align-items: center; gap: 10px;
    }
    .feat-label::before { content:''; width:22px; height:1.5px; background:var(--forest); }
    .feat-h2 {
      font-family: var(--font-display);
      font-size: clamp(30px, 3.5vw, 46px);
      font-weight: 300; letter-spacing: -0.02em;
      line-height: 1.1; color: var(--dark); margin-bottom: 22px;
    }
    .feat-h2 em { font-style: italic; font-weight: 200; color: var(--forest-mid); }
    .feat-body {
      font-size: 15.5px; font-weight: 300; color: var(--stone);
      line-height: 1.82; margin-bottom: 32px; max-width: 390px;
    }
    .feat-list { list-style: none; margin-bottom: 38px; }
    .feat-list li {
      font-size: 13.5px; font-weight: 500; color: var(--dark);
      padding: 9px 0; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 11px;
    }
    .feat-list li:last-child { border: none; }
    .feat-list li::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: var(--sage); flex-shrink: 0;
    }
    .link-arrow {
      font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--dark); text-decoration: none;
      display: inline-flex; align-items: center; gap: 9px;
      border-bottom: 1.5px solid var(--dark); padding-bottom: 2px; transition: all 0.2s;
    }
    .link-arrow:hover { color: var(--forest); border-color: var(--forest); gap: 13px; }

    /* ── HOW IT WORKS ── */
    .how { background: var(--dark-forest); padding: 112px 32px; color: white; }
    .how-inner { max-width: 1280px; margin: 0 auto; }
    .how-top {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 72px; gap: 32px;
    }
    .how-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
      text-transform: uppercase; color: var(--sage); margin-bottom: 14px;
    }
    .how-h2 {
      font-family: var(--font-display); font-size: clamp(36px,4vw,54px);
      font-weight: 300; letter-spacing: -0.022em; line-height: 1.1;
    }
    .how-h2 em { font-style: italic; font-weight: 200; color: var(--sage); }
    .how-desc {
      font-size: 15.5px; font-weight: 300; color: rgba(255,255,255,0.5);
      line-height: 1.78; max-width: 320px;
    }
    .how-steps {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 1px; background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.06); border-radius: 7px; overflow: hidden;
    }
    .step {
      background: var(--dark-forest); padding: 44px 38px;
      transition: background 0.25s; position: relative;
    }
    .step:hover { background: rgba(27,94,54,0.14); }
    .step-num {
      font-family: var(--font-display); font-size: 68px; font-weight: 200;
      font-style: italic; color: rgba(255,255,255,0.05);
      line-height: 1; margin-bottom: 22px; user-select: none;
    }
    .step-icon {
      width: 44px; height: 44px;
      background: rgba(76,175,125,0.1); border: 1px solid rgba(76,175,125,0.22);
      border-radius: 7px; display: flex; align-items: center; justify-content: center;
      margin-bottom: 22px;
    }
    .step-icon svg { width: 20px; height: 20px; stroke: var(--sage); fill: none; stroke-width: 1.6; }
    .step h3 {
      font-family: var(--font-display); font-size: 23px; font-weight: 400;
      letter-spacing: -0.01em; margin-bottom: 12px; color: white;
    }
    .step p { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,0.52); line-height: 1.75; }

    /* ── PRICING ── */
    .pricing { padding: 112px 32px; background: var(--cream); }
    .pricing-inner { max-width: 1280px; margin: 0 auto; }
    .pricing-head { text-align: center; margin-bottom: 72px; }
    .pricing-head .section-h2 { max-width: 100%; }
    .pricing-subhead {
      font-size: 16px; font-weight: 300; color: var(--stone);
      max-width: 420px; margin: 14px auto 0; line-height: 1.75;
    }
    .pricing-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
    .plan {
      background: white; border: 1px solid var(--border);
      border-radius: 7px; padding: 42px 34px; position: relative; transition: all 0.25s;
    }
    .plan:hover { border-color: var(--forest-mid); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(27,94,54,0.09); }
    .plan.featured { background: var(--dark); border-color: var(--dark); color: white; }
    .plan.featured:hover { border-color: var(--forest); }
    .plan-badge {
      position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
      background: var(--sage); color: var(--dark);
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
      text-transform: uppercase; padding: 4px 13px; border-radius: 20px;
    }
    .plan-tier {
      font-family: var(--font-display); font-size: 12px; font-weight: 500;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--stone); margin-bottom: 6px;
    }
    .plan.featured .plan-tier { color: rgba(255,255,255,0.45); }
    .plan-price {
      font-family: var(--font-display); font-size: 50px; font-weight: 300;
      letter-spacing: -0.03em; line-height: 1; color: var(--dark); margin-bottom: 3px;
    }
    .plan.featured .plan-price { color: white; }
    .plan-price sup { font-size: 18px; vertical-align: top; margin-top: 10px; display: inline-block; font-weight: 400; }
    .plan-price-was {
      display: block; font-size: 14px; font-weight: 400; letter-spacing: 0;
      color: var(--stone); text-decoration: line-through; margin-bottom: 2px;
    }
    .plan.featured .plan-price-was { color: rgba(255,255,255,0.35); }
    .plan-price-period { font-size: 0.42em; font-weight: 300; letter-spacing: 0; }
    .plan-cycle { font-size: 12.5px; color: var(--stone); margin-bottom: 30px; }
    .plan.featured .plan-cycle { color: rgba(255,255,255,0.4); }
    .plan-div { height: 1px; background: var(--border); margin-bottom: 26px; }
    .plan.featured .plan-div { background: rgba(255,255,255,0.1); }
    .plan-feats { list-style: none; margin-bottom: 34px; }
    .plan-feats li {
      font-size: 13.5px; color: var(--stone); padding: 7px 0;
      display: flex; align-items: center; gap: 9px;
    }
    .plan.featured .plan-feats li { color: rgba(255,255,255,0.68); }
    .plan-feats li svg { width: 14px; height: 14px; stroke: var(--sage); fill: none; stroke-width: 2.5; flex-shrink: 0; }
    .plan-cta {
      display: block; width: 100%; padding: 13px; border-radius: 3px;
      font-size: 12.5px; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; text-align: center; text-decoration: none;
      transition: all 0.2s; cursor: pointer; border: none;
    }
    .plan-cta-outline { border: 1.5px solid var(--border); color: var(--dark); background: transparent; }
    .plan-cta-outline:hover { border-color: var(--dark); }
    .plan-cta-fill { background: var(--sage); color: var(--dark); }
    .plan-cta-fill:hover { background: #5dc48e; transform: translateY(-1px); }

    /* ── TESTIMONIALS ── */
    .testimonials { padding: 96px 32px; background: var(--cream-dark); }
    .testimonials-inner { max-width: 1280px; margin: 0 auto; }
    .testi-head { margin-bottom: 56px; }
    .testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
    .testi-card {
      background: white; border: 1px solid var(--border); border-radius: 7px; padding: 34px;
    }
    .testi-stars { display: flex; gap: 3px; margin-bottom: 18px; }
    .testi-stars svg { width: 13px; height: 13px; fill: var(--sage); }
    .testi-quote {
      font-family: var(--font-display); font-size: 17px; font-weight: 300;
      font-style: italic; line-height: 1.65; color: var(--dark); margin-bottom: 22px;
    }
    .testi-author { display: flex; align-items: center; gap: 11px; }
    .author-av {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg,var(--forest),var(--sage));
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 600; color: white;
    }
    .author-av.purple { background: linear-gradient(135deg,#4a2c8a,#7c50c8); }
    .author-name { font-size: 13px; font-weight: 600; color: var(--dark); }
    .author-role { font-size: 11.5px; color: var(--stone); }

    /* ── CTA BAND ── */
    .cta-band {
      background: var(--forest); padding: 112px 32px; text-align: center;
      position: relative; overflow: hidden;
    }
    .cta-band::before {
      content: ''; position: absolute; top: -40%; left: 50%;
      transform: translateX(-50%); width: 900px; height: 900px;
      background: radial-gradient(circle,rgba(255,255,255,0.07) 0%,transparent 62%);
      border-radius: 50%;
    }
    .cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
    .cta-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.13em;
      text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 18px;
    }
    .cta-h2 {
      font-family: var(--font-display);
      font-size: clamp(40px,5.5vw,68px); font-weight: 300;
      line-height: 1.04; color: white; letter-spacing: -0.022em; margin-bottom: 18px;
    }
    .cta-h2 em { font-style: italic; font-weight: 200; }
    .cta-sub {
      font-size: 16.5px; font-weight: 300; color: rgba(255,255,255,0.68);
      line-height: 1.75; margin-bottom: 46px;
    }
    .cta-actions { display: flex; justify-content: center; gap: 14px; }
    .btn-cta-white {
      background: white; color: var(--forest); font-size: 13px; font-weight: 700;
      letter-spacing: 0.045em; text-transform: uppercase;
      padding: 15px 32px; border-radius: 3px; text-decoration: none; transition: all 0.2s;
    }
    .btn-cta-white:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.18); }
    .btn-cta-border {
      color: rgba(255,255,255,0.82); font-size: 13px; font-weight: 600;
      letter-spacing: 0.045em; text-transform: uppercase; text-decoration: none;
      padding: 15px 24px; border: 1.5px solid rgba(255,255,255,0.28); border-radius: 3px;
      display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s;
    }
    .btn-cta-border:hover { border-color: white; color: white; }
    .store-badges { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:28px; }
    .store-badge {
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 20px; border-radius:9px; text-decoration:none;
      background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.28);
      color:#fff; transition:background .2s, border-color .2s;
    }
    .store-badge:hover { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.55); }
    .store-badge-soon { opacity:0.55; cursor:default; pointer-events:none; }
    .store-badge-text { text-align:left; line-height:1.25; }
    .store-badge-text span { display:block; font-size:10px; letter-spacing:0.03em; opacity:0.8; }
    .store-badge-text strong { display:block; font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; }
    .store-icon { width:22px; height:22px; flex-shrink:0; fill:currentColor; }
    html[data-theme="bright"] .store-badge { background:rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.2); color:#0b0f14; }
    html[data-theme="bright"] .store-badge:hover { background:rgba(0,0,0,0.18); }

    /* ── PURCHASE OPTIONS ── */
    .purchase-options { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
    .po { border:1.5px solid var(--border); border-radius:10px; padding:22px 20px; display:flex; flex-direction:column; gap:5px; }
    .po-featured { background:var(--forest); border-color:var(--forest); color:#fff; }
    .po-tag { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); }
    .po-featured .po-tag { color:rgba(155,252,163,0.85); }
    .po-name { font-size:14px; font-weight:600; color:var(--dark); margin-top:2px; }
    .po-featured .po-name { color:#fff; }
    .po-price-row { display:flex; align-items:baseline; gap:7px; margin:8px 0 2px; flex-wrap:wrap; }
    .po-main-price { font-family:var(--font-display); font-size:34px; font-weight:300; color:var(--dark); line-height:1; }
    .po-featured .po-main-price { color:#fff; }
    .po-price-suffix { font-family:var(--font-display); font-size:16px; font-weight:300; color:var(--stone); }
    .po-featured .po-price-suffix { color:rgba(255,255,255,0.55); }
    .po-was-price { font-family:var(--font-display); font-size:17px; font-weight:300; color:var(--stone); text-decoration:line-through; }
    .po-note { font-size:12px; color:var(--stone); line-height:1.5; }
    .po-featured .po-note { color:rgba(255,255,255,0.55); }
    .po-founders { background:rgba(0,0,0,0.04); border:1px solid var(--border); border-radius:7px; padding:10px 12px; margin:8px 0 4px; }
    .po-code { font-family:monospace; font-size:15px; font-weight:700; letter-spacing:0.08em; color:var(--dark); }
    .po-expiry { font-size:11px; color:var(--stone); margin-top:3px; }
    .po-btn { margin-top:auto; width:100%; text-align:center; display:block; box-sizing:border-box; padding:13px 20px; }
    @media (max-width:640px) { .purchase-options { grid-template-columns:1fr; } }

    /* ── FOOTER ── */
    footer { background: var(--dark); padding: 76px 32px 36px; }
    .footer-inner { max-width: 1280px; margin: 0 auto; }
    .footer-top {
      display: grid; grid-template-columns: 260px 1fr;
      gap: 80px; padding-bottom: 56px;
      border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 36px;
    }
    .footer-brand-name {
      font-family: var(--font-display); font-size: 18px; font-weight: 500;
      color: white; margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
    }
    .footer-brand p { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,0.4); line-height: 1.75; }
    .footer-cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
    .footer-col h4 {
      font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 18px;
    }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 10px; }
    .footer-col a { font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; }
    .footer-col a:hover { color: white; }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; }
    .footer-copy { font-size: 12.5px; color: rgba(255,255,255,0.28); }
    .footer-social { display: flex; gap: 10px; }
    .footer-social a {
      width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.1);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45);
      text-decoration: none; transition: all 0.2s;
    }
    .footer-social a:hover { border-color: rgba(255,255,255,0.35); color: white; }

    /* ── SCROLL REVEAL ── */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.72s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.72s cubic-bezier(0.25,0.46,0.45,0.94); }
    .reveal.in { opacity: 1; transform: none; }
    .d1 { transition-delay: 0.1s; }
    .d2 { transition-delay: 0.2s; }
    .d3 { transition-delay: 0.3s; }
    .d4 { transition-delay: 0.4s; }

    /* ── BRIGHT COLORFUL THEME ── */
    html[data-theme="bright"] {
      --cream: #ffffff;
      --cream-dark: #f0f9ff;
      --dark: #0b0f14;
      --dark-forest: #080c12;
      --forest: #00aeef;
      --forest-mid: #0090d0;
      --sage: #9bfca3;
      --stone: #4a5568;
      --stone-light: #718096;
      --border: #bde4f7;
      --font-display: 'Plus Jakarta Sans', sans-serif;
    }
    /* Nav over hero */
    html[data-theme="bright"] .nav.over-hero {
      background: rgba(8,12,18,0.88);
      border-bottom-color: rgba(0,174,239,0.18);
    }
    /* Hero */
    html[data-theme="bright"] .hero-bg {
      background:
        radial-gradient(ellipse 70% 55% at 70% 38%, rgba(0,174,239,0.42) 0%, transparent 68%),
        radial-gradient(ellipse 45% 50% at 22% 72%, rgba(155,252,163,0.22) 0%, transparent 55%);
    }
    html[data-theme="bright"] .hero-glow {
      background: radial-gradient(circle, rgba(119,250,245,0.75) 0%, transparent 70%);
    }
    html[data-theme="bright"] .hero-glow-2 {
      background: radial-gradient(circle, rgba(0,174,239,0.55) 0%, transparent 70%);
    }
    /* Kicker / section labels */
    html[data-theme="bright"] .kicker { color: #9bfca3; }
    html[data-theme="bright"] .kicker::before { background: #9bfca3; }
    html[data-theme="bright"] .section-label { color: #00aeef; }
    html[data-theme="bright"] .feat-label { color: #00aeef; }
    html[data-theme="bright"] .feat-label::before { background: #00aeef; }
    html[data-theme="bright"] .how-label { color: #77faf5; }
    /* Buttons */
    html[data-theme="bright"] .btn-solid {
      background: linear-gradient(90deg, #9bfca3, #00aeef);
      color: #0b0f14;
    }
    html[data-theme="bright"] .btn-solid:hover {
      background: linear-gradient(90deg, #77faf5, #0090d0);
      transform: translateY(-1px);
    }
    html[data-theme="bright"] .btn-hero {
      background: linear-gradient(90deg, #9bfca3, #77faf5);
      color: #0b0f14;
    }
    html[data-theme="bright"] .btn-hero:hover {
      background: linear-gradient(90deg, #77faf5, #00aeef);
    }
    /* Trust strip */
    html[data-theme="bright"] .trust-strip {
      background: linear-gradient(90deg, #080c12, #0d1e35);
    }
    html[data-theme="bright"] .trust-item svg { stroke: #77faf5; }
    /* Pillars */
    html[data-theme="bright"] .pillar-icon svg { stroke: #00aeef; }
    html[data-theme="bright"] .pillar:hover { background: #edf8ff; }
    html[data-theme="bright"] .feat-list li::before { background: #00aeef; }
    html[data-theme="bright"] .feat-h2 em { color: #00aeef; }
    html[data-theme="bright"] .link-arrow { color: #00aeef; border-color: #00aeef; }
    html[data-theme="bright"] .link-arrow:hover { color: #0090d0; border-color: #0090d0; gap: 13px; }
    /* How it works */
    html[data-theme="bright"] .how { background: #080c12; }
    html[data-theme="bright"] .how-h2 em { color: #77faf5; }
    html[data-theme="bright"] .step-icon {
      background: rgba(0,174,239,0.12);
      border-color: rgba(0,174,239,0.3);
    }
    html[data-theme="bright"] .step-icon svg { stroke: #77faf5; }
    html[data-theme="bright"] .step:hover { background: rgba(0,174,239,0.07); }
    /* Pricing */
    html[data-theme="bright"] .plan:hover { border-color: #00aeef; }
    html[data-theme="bright"] .plan.featured {
      background: linear-gradient(160deg, #0d1e35 0%, #0a1520 100%);
      border-color: #00aeef;
      box-shadow: 0 0 0 1px #00aeef, 0 16px 48px rgba(0,174,239,0.18);
    }
    html[data-theme="bright"] .plan.featured:hover { border-color: #77faf5; }
    html[data-theme="bright"] .plan-badge {
      background: linear-gradient(90deg, #9bfca3, #77faf5);
      color: #0b0f14;
    }
    html[data-theme="bright"] .plan-feats li svg { stroke: #9bfca3; }
    html[data-theme="bright"] .plan-cta-fill {
      background: linear-gradient(90deg, #9bfca3, #77faf5);
      color: #0b0f14;
    }
    html[data-theme="bright"] .plan-cta-fill:hover {
      background: linear-gradient(90deg, #77faf5, #00aeef);
      transform: translateY(-1px);
    }
    /* FAQ cards */
    html[data-theme="bright"] .testimonials { background: #f0f9ff; }
    html[data-theme="bright"] .testi-card { border-color: #bde4f7; }
    html[data-theme="bright"] .testi-card:hover { border-color: #00aeef; box-shadow: 0 4px 16px rgba(0,174,239,0.1); }
    html[data-theme="bright"] .testi-quote { color: #00aeef; }
    /* CTA band */
    html[data-theme="bright"] .cta-band {
      background: linear-gradient(120deg, #9bfca3 0%, #77faf5 45%, #00aeef 100%);
    }
    html[data-theme="bright"] .cta-band::before { display: none; }
    html[data-theme="bright"] .cta-label { color: rgba(0,0,0,0.5); }
    html[data-theme="bright"] .cta-h2 { color: #0b0f14; }
    html[data-theme="bright"] .cta-sub { color: rgba(0,0,0,0.65); }
    html[data-theme="bright"] .btn-cta-white { background: #0b0f14; color: #fff; }
    html[data-theme="bright"] .btn-cta-white:hover { background: #1a2535; box-shadow: 0 8px 28px rgba(0,0,0,0.3); }
    html[data-theme="bright"] .btn-cta-border { color: rgba(0,0,0,0.75); border-color: rgba(0,0,0,0.3); }
    html[data-theme="bright"] .btn-cta-border:hover { color: #000; border-color: #000; }
    /* Footer */
    html[data-theme="bright"] footer { background: #080c12; }
    html[data-theme="bright"] .footer-top { border-bottom-color: rgba(0,174,239,0.15); }
    /* ── HAMBURGER ── */
    .nav-hamburger {
      display: flex; flex-direction: column; justify-content: space-between;
      width: 26px; height: 18px; background: none; border: none;
      cursor: pointer; padding: 0; flex-shrink: 0;
    }
    .nav-hamburger span {
      display: block; width: 100%; height: 2px;
      background: var(--dark); border-radius: 2px;
      transition: transform 0.3s, opacity 0.3s;
    }
    .nav.over-hero .nav-hamburger span { background: white; }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    @media (min-width: 769px) { .nav-hamburger { display: none; } }

    /* ── MOBILE MENU ── */
    .nav-mobile-menu {
      display: none; position: fixed; top: 64px; left: 0; right: 0;
      background: var(--cream); border-bottom: 1px solid var(--border);
      padding: 20px 24px 28px; z-index: 99;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }
    .nav-mobile-menu.open { display: block; }
    .nav-mobile-links { list-style: none; margin-bottom: 20px; }
    .nav-mobile-links li { border-bottom: 1px solid var(--border); }
    .nav-mobile-links li:last-child { border: none; }
    .nav-mobile-links a {
      display: block; padding: 14px 0;
      font-size: 15px; font-weight: 500; color: var(--dark);
      text-decoration: none; transition: color 0.2s;
    }
    .nav-mobile-links a:hover { color: var(--forest); }
    .nav-mobile-ctas { display: flex; gap: 10px; padding-top: 4px; }
    .nav-mobile-ctas .btn { flex: 1; justify-content: center; font-size: 13px; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .pillars-top { grid-template-columns: 1fr; }
      .pillars-grid { grid-template-columns: repeat(2,1fr); }
      .how-top { flex-direction: column; align-items: flex-start; }
      .how-steps { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
      .testi-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
      .footer-top { grid-template-columns: 1fr; gap: 48px; }
      .footer-cols { grid-template-columns: repeat(2,1fr); }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-ctas { display: none; }
      .nav-hamburger { display: flex; }
      .split-inner { grid-template-columns: 1fr; direction: ltr !important; gap: 44px; }
      .split.flip .split-inner { direction: ltr; }
      /* Show hero image full-bleed on mobile */
      .hero-visual { display: block; left: 0; width: 100%; }
      .hero-fade {
        background: linear-gradient(
          to bottom,
          rgba(10,22,16,0.45) 0%,
          rgba(10,22,16,0.75) 50%,
          rgba(10,22,16,0.96) 100%
        );
      }
      .pillars-grid { grid-template-columns: 1fr; }
      .footer-cols { grid-template-columns: 1fr; }
      .cta-actions { flex-direction: column; align-items: center; }
      .trust-strip { gap: 28px; padding: 16px 20px; }
    }