/* ============================================================
   ENERGY EXCHANGE MARKET — PREMIUM DESIGN SYSTEM v2
   ============================================================ */

/* ─────────────────────────────────────────
   TOKENS
───────────────────────────────────────── */
:root {
  --ink:      #040C1A;
  --ink2:     #081221;
  --ink3:     #0C1A2E;
  --ink4:     #0F2040;

  --blue:     #2563EB;
  --blue2:    #3B82F6;
  --blue3:    #1D4ED8;
  --blueglow: rgba(37,99,235,.4);

  --green:    #10B981;
  --green2:   #34D399;
  --greenglow:rgba(16,185,129,.35);

  --orange:   #F59E0B;
  --red:      #EF4444;

  --bg:       #F5F8FF;
  --bg2:      #EBF0FF;
  --white:    #fff;

  --tx:       #0F172A;
  --tx2:      #334155;
  --tx3:      #64748B;
  --txlt:     #F8FAFC;
  --txlt2:    #94A3B8;

  --bdr:      rgba(255,255,255,.07);
  --bdrlt:    #E2E8F0;

  --sans: 'Inter', system-ui, sans-serif;
  --head: 'Syne', system-ui, sans-serif;

  --ease:     cubic-bezier(.4,0,.2,1);
  --spring:   cubic-bezier(.34,1.56,.64,1);
  --t:        .26s var(--ease);

  --r1: 6px; --r2: 10px; --r3: 16px; --r4: 22px; --r5: 32px; --rfull: 9999px;

  --sh1: 0 1px 4px rgba(0,0,0,.07);
  --sh2: 0 4px 16px rgba(0,0,0,.10);
  --sh3: 0 12px 40px rgba(0,0,0,.16);
  --sh4: 0 28px 80px rgba(0,0,0,.24);
  --shblue: 0 8px 32px rgba(37,99,235,.35);
  --shgreen: 0 8px 32px rgba(16,185,129,.3);
}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);background:var(--bg);color:var(--tx2);line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;-webkit-appearance:none}
fieldset{border:none}

.container{max-width:1180px;margin-inline:auto;padding-inline:2rem}
.section{padding:6rem 0}
.gradient-text{background:linear-gradient(135deg,#3B82F6,#10B981);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.green{color:var(--green)!important}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.16);padding:.35rem .9rem;border-radius:var(--rfull);margin-bottom:1.125rem}
.pill.light{color:var(--green2);background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.18)}
.sh{font-family:var(--head);font-size:clamp(1.9rem,3.8vw,2.875rem);font-weight:800;line-height:1.18;letter-spacing:-.022em;color:var(--tx);margin-bottom:1rem}
.sh.light{color:var(--txlt)}
.sp{font-size:1.0625rem;color:var(--tx3);max-width:620px;margin-bottom:3rem;line-height:1.75}
.opt-tag{font-size:.78rem;font-weight:400;color:var(--tx3);margin-left:.25rem;font-style:normal}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:.7rem 1.4rem;border-radius:var(--r2);font-size:.9375rem;font-weight:600;line-height:1;transition:var(--t);white-space:nowrap;cursor:pointer;position:relative;overflow:hidden}
.btn-sm{padding:.55rem 1rem;font-size:.875rem}
.btn-lg{padding:.9rem 1.875rem;font-size:1rem;border-radius:var(--r3)}
.btn-xl{padding:1.0625rem 2.25rem;font-size:1.0625rem;border-radius:var(--r3)}

.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shblue)}
.btn-primary:hover{background:var(--blue3);transform:translateY(-2px);box-shadow:0 12px 40px rgba(37,99,235,.45)}

.btn-ghost{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.38);transform:translateY(-2px)}

/* Shimmer on CTAs */
.shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);transform:translateX(-100%);transition:transform .55s var(--ease)}
.shimmer:hover::after{transform:translateX(100%)}

/* ─────────────────────────────────────────
   STICKY BAR
───────────────────────────────────────── */
.sticky-bar{position:fixed;top:0;inset-inline:0;z-index:2000;background:var(--blue3);color:#fff;transform:translateY(-100%);transition:transform .4s var(--ease);padding:.6rem 0}
.sticky-bar.visible{transform:translateY(0)}
.sticky-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sticky-bar-text{font-size:.875rem;display:flex;align-items:center;gap:.625rem}
.sticky-pulse{width:8px;height:8px;background:var(--green2);border-radius:50%;animation:spulse 2s ease infinite;flex-shrink:0}
@keyframes spulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}
.btn-sticky{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;padding:.45rem 1rem;border-radius:var(--rfull);font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--t)}
.btn-sticky:hover{background:rgba(255,255,255,.28)}
.sticky-close{color:rgba(255,255,255,.65);font-size:1rem;padding:.25rem;cursor:pointer;transition:color var(--t);line-height:1}
.sticky-close:hover{color:#fff}

/* ─────────────────────────────────────────
   HEADER / NAV
───────────────────────────────────────── */
.header{position:fixed;inset:0 0 auto;z-index:1000;transition:background var(--t),box-shadow var(--t),top var(--t)}
.header.pushed{top:38px}
.header.scrolled{background:rgba(4,12,26,.93);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 1px 0 var(--bdr),0 8px 32px rgba(0,0,0,.28)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.125rem 2rem}
.logo{display:flex;align-items:center;gap:7px;color:#fff;flex-shrink:0}
.logo-bolt{font-size:1.35rem;filter:drop-shadow(0 0 10px rgba(59,130,246,.9));animation:boltglow 3s ease infinite}
@keyframes boltglow{0%,100%{filter:drop-shadow(0 0 10px rgba(59,130,246,.9))}50%{filter:drop-shadow(0 0 18px rgba(16,185,129,.85))}}
.logo-name{font-family:var(--head);font-size:.9875rem;font-weight:700;letter-spacing:-.01em}
.logo-name em{color:var(--green2);font-style:normal}
.nav-links{display:flex;align-items:center;gap:1.875rem}
.nav-links a{color:rgba(255,255,255,.68);font-size:.875rem;font-weight:500;position:relative;transition:color var(--t);padding-bottom:2px}
.nav-links a::after{content:'';position:absolute;bottom:-1px;left:0;right:100%;height:2px;background:var(--green2);border-radius:1px;transition:right var(--t)}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
.nav-right{display:flex;align-items:center;gap:.875rem}
.nav-phone{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.68);font-size:.855rem;font-weight:500;transition:color var(--t)}
.nav-phone:hover{color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;width:28px;padding:2px 0;flex-shrink:0}
.hamburger span{height:2px;background:#fff;border-radius:2px;transition:var(--t);display:block}

/* Mobile nav open */
.nav-links.open{display:flex;flex-direction:column;position:fixed;inset:68px 0 0;background:rgba(4,12,26,.97);align-items:center;justify-content:center;gap:2.5rem;z-index:999;backdrop-filter:blur(20px)}
.nav-links.open a{font-size:1.5rem;color:rgba(255,255,255,.82)}

/* ─────────────────────────────────────────
   TICKER
───────────────────────────────────────── */
.ticker-bar{position:fixed;top:68px;inset-inline:0;z-index:999;height:34px;display:flex;align-items:center;background:rgba(4,12,26,.96);border-bottom:1px solid var(--bdr);overflow:hidden;transition:top var(--t)}
.ticker-bar.pushed{top:106px}
.ticker-lbl{flex-shrink:0;background:var(--blue);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;height:100%;padding-inline:.875rem;display:flex;align-items:center}
.ticker-track-wrap{flex:1;overflow:hidden}
.ticker-track{display:flex;align-items:center;width:max-content;animation:tk 34s linear infinite}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:center;gap:5px;padding-inline:1.5rem;font-size:.775rem;color:rgba(255,255,255,.58);white-space:nowrap}
.tk b{color:#fff;font-weight:600}
.tk i{font-style:normal;font-size:.7rem;font-weight:600}
.tk i.up{color:var(--green2)}
.tk i.dn{color:var(--red)}
.tk-sep{color:rgba(255,255,255,.18);font-size:.7rem}
.ticker-cta{flex-shrink:0;font-size:.72rem;font-weight:700;color:var(--green2);padding-inline:1rem;white-space:nowrap;transition:color var(--t);text-decoration:underline;text-underline-offset:2px}
.ticker-cta:hover{color:#fff}

/* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:130px;padding-bottom:5rem;background:var(--ink);overflow:hidden}

.hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.hc-grad{position:absolute;inset:0;background:radial-gradient(ellipse 90% 65% at 65% 25%,rgba(37,99,235,.16) 0%,transparent 58%),radial-gradient(ellipse 55% 50% at 10% 80%,rgba(16,185,129,.11) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 95% 60%,rgba(245,158,11,.05) 0%,transparent 50%),linear-gradient(180deg,#040C1A 0%,#07122A 100%)}
.hc-grid{position:absolute;top:0;right:0;bottom:0;left:50%;background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.06) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to right,transparent 0%,black 30%,black 70%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 30%,black 70%,transparent 100%)}
.hc-orb{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none}
.orb-a{width:700px;height:700px;top:-250px;right:-180px;background:radial-gradient(circle,rgba(37,99,235,.13) 0%,transparent 70%);animation:orbA 14s ease-in-out infinite alternate}
.orb-b{width:450px;height:450px;bottom:-120px;left:-100px;background:radial-gradient(circle,rgba(16,185,129,.09) 0%,transparent 70%);animation:orbA 18s ease-in-out infinite alternate-reverse}
.orb-c{width:300px;height:300px;top:30%;left:35%;background:radial-gradient(circle,rgba(37,99,235,.06) 0%,transparent 70%);animation:orbA 22s ease-in-out infinite alternate}
@keyframes orbA{from{transform:translate(0,0) scale(1)}to{transform:translate(28px,-28px) scale(1.08)}}
.hc-lines{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent,transparent 53px,rgba(37,99,235,.03) 53px,rgba(37,99,235,.03) 54px);animation:linesSlide 60s linear infinite}
@keyframes linesSlide{from{background-position:0 0}to{background-position:54px 0}}

.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 440px;gap:4rem;align-items:center;width:100%}
.hero-right{position:relative}

/* Hero left */
.hero-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);color:var(--green2);font-size:.8rem;font-weight:500;padding:.4rem 1rem;border-radius:var(--rfull);margin-bottom:1.5rem}
.chip-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:chipblink 2.4s ease infinite}
@keyframes chipblink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.hero-h1{font-family:var(--head);font-size:clamp(2.75rem,5.5vw,4.5rem);font-weight:800;line-height:1.09;letter-spacing:-.025em;color:#fff;margin-bottom:1.375rem}
.h1-accent{background:linear-gradient(135deg,#3B82F6 0%,#10B981 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-p{font-size:1.0625rem;color:rgba(255,255,255,.6);max-width:550px;line-height:1.78;margin-bottom:2.25rem}
.hero-p strong{color:rgba(255,255,255,.88);font-weight:600}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-trust{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap}
.ht-item{display:flex;align-items:center;gap:5px;font-size:.8rem;color:rgba(255,255,255,.42);font-weight:500}
.ht-item svg{color:var(--green2);flex-shrink:0;opacity:.75}
.ht-dot{width:3px;height:3px;background:rgba(255,255,255,.2);border-radius:50%}

/* Hero card */
.hero-card{background:rgba(9,18,33,.85);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.1);border-radius:var(--r5);padding:2rem;box-shadow:0 40px 90px rgba(0,0,0,.55),var(--shblue);transition:transform var(--t),box-shadow var(--t);position:relative}
.hero-card::before{content:'';position:absolute;inset:-1px;border-radius:calc(var(--r5) + 1px);background:linear-gradient(135deg,rgba(37,99,235,.35),rgba(16,185,129,.2),transparent 60%);z-index:-1}
.hero-card:hover{transform:translateY(-5px);box-shadow:0 52px 100px rgba(0,0,0,.6),0 0 60px rgba(37,99,235,.32)}
.hero-card-top{display:flex;align-items:center;gap:.875rem;padding-bottom:1.25rem;margin-bottom:1.375rem;border-bottom:1px solid var(--bdr)}
.hct-icon{font-size:1.75rem;filter:drop-shadow(0 0 12px rgba(59,130,246,.9))}
.hct-title{font-weight:700;color:#fff;font-size:1.0625rem;line-height:1.2}
.hct-sub{font-size:.78rem;color:rgba(255,255,255,.4);margin-top:2px}
.hct-live{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:.7rem;font-weight:700;color:var(--green2);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);padding:.25rem .625rem;border-radius:var(--rfull)}
.hct-live span{width:6px;height:6px;background:var(--green2);border-radius:50%;animation:chipblink 2s ease infinite}

.hc-body label{display:block;font-size:.8375rem;font-weight:600;color:rgba(255,255,255,.65);margin-bottom:.5rem}
.money-input{display:flex;align-items:center;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);padding-inline:.875rem;transition:var(--t)}
.money-input:focus-within{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.money-input span{color:rgba(255,255,255,.38);font-size:.9375rem}
.money-input input{flex:1;background:none;border:none;outline:none;color:#fff;font-size:1.125rem;font-weight:700;padding:.75rem .375rem}
.money-input input::placeholder{color:rgba(255,255,255,.22);font-weight:400}

.hc-results{margin-top:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r2);overflow:hidden}
.hcr-row{display:flex;justify-content:space-between;align-items:center;padding:.625rem .875rem;font-size:.875rem}
.hcr-row span{color:rgba(255,255,255,.5)}
.hcr-row strong{color:#fff;font-weight:700}
.hcr-row.highlight{background:rgba(16,185,129,.1);border-top:1px solid rgba(16,185,129,.15)}
.hcr-row.highlight strong{color:var(--green2);font-size:1.125rem}
.hcr-bar{padding:.625rem .875rem;border-top:1px solid rgba(255,255,255,.06)}
.hcr-bar-track{display:flex;height:28px;border-radius:var(--r1);overflow:hidden;gap:2px}
.hcr-bar-current{display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.3);border:1px solid rgba(239,68,68,.3);flex:1;border-radius:var(--r1) 0 0 var(--r1);font-size:.72rem;color:rgba(255,255,255,.65);transition:flex var(--t)}
.hcr-bar-new{display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,.25);border:1px solid rgba(16,185,129,.3);border-radius:0 var(--r1) var(--r1) 0;font-size:.72rem;color:var(--green2);font-weight:600;transition:flex var(--t)}
.hero-card-foot{display:flex;align-items:center;gap:6px;margin-top:1.125rem;padding-top:1rem;border-top:1px solid var(--bdr);font-size:.775rem;color:rgba(255,255,255,.32)}

/* Floating badges — desktop only, hidden everywhere else */
.float-badge{display:none}
@media(min-width:1100px){
  .float-badge{display:block;position:absolute;background:rgba(9,18,33,.9);border:1px solid rgba(255,255,255,.12);border-radius:var(--r3);padding:.625rem 1rem;backdrop-filter:blur(12px);text-align:center;animation:floatBadge 4s ease-in-out infinite alternate;z-index:3;pointer-events:none}
  .float-badge strong{display:block;font-family:var(--head);font-size:1.25rem;font-weight:800;color:var(--green2)}
  .float-badge span{display:block;font-size:.7rem;color:rgba(255,255,255,.45);margin-top:1px}
  /* Stick to the SIDES of the card — never over text */
  .fb-top{top:18%;right:-14px;animation-delay:0s}
  .fb-bottom{bottom:28%;left:-14px;animation-delay:1.5s}
}
@keyframes floatBadge{from{transform:translateY(0)}to{transform:translateY(-8px)}}

/* Hero scroll hint */
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.hs-mouse{width:22px;height:36px;border:1.5px solid rgba(255,255,255,.2);border-radius:11px;display:flex;justify-content:center;padding-top:6px}
.hs-dot{width:3px;height:7px;background:rgba(255,255,255,.4);border-radius:2px;animation:hsdrop 2s ease infinite}
@keyframes hsdrop{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}

/* ─────────────────────────────────────────
   STATS BAR
───────────────────────────────────────── */
.stats-bar{background:var(--ink2);border-bottom:1px solid var(--bdr);padding:2rem 0}
.stats-inner{display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.stat-num{font-family:var(--head);font-size:2rem;font-weight:800;color:var(--green2);line-height:1;text-shadow:0 0 24px rgba(52,211,153,.4)}
.stat-item span{font-size:.75rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.06em}
.stat-div{width:1px;height:44px;background:rgba(255,255,255,.08)}

/* ─────────────────────────────────────────
   PROBLEM SECTION
───────────────────────────────────────── */
.problem-section{background:var(--white)}
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3rem}
.prob-card{background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r4);padding:1.875rem;position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t);box-shadow:var(--sh1)}
.prob-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.04),transparent 60%);opacity:0;transition:opacity var(--t)}
.prob-card:hover{transform:translateY(-5px);box-shadow:var(--sh3);border-color:var(--blue)}
.prob-card:hover::before{opacity:1}
.pc-num{position:absolute;top:1rem;right:1.125rem;font-family:var(--head);font-size:3rem;font-weight:800;color:var(--blue);opacity:.07;line-height:1}
.pc-icon{font-size:2rem;margin-bottom:.875rem;display:block}
.prob-card h3{font-family:var(--head);font-size:1rem;font-weight:700;color:var(--tx);margin-bottom:.5rem}
.prob-card p{font-size:.88rem;color:var(--tx3);line-height:1.65}

/* Rate compare visual */
.rate-compare{background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r4);padding:2.25rem;margin-top:3rem;box-shadow:var(--sh2)}
.rc-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:.5rem}
.rc-header h3{font-family:var(--head);font-size:1.125rem;font-weight:700;color:var(--tx)}
.rc-note{font-size:.775rem;color:var(--tx3)}
.rc-bars{display:flex;flex-direction:column;gap:1.25rem}
.rcb-item{display:grid;grid-template-columns:200px 1fr 140px;align-items:center;gap:1rem}
.rcb-label{font-size:.875rem;font-weight:500;color:var(--tx2)}
.rcb-track{background:var(--bg2);border-radius:var(--rfull);height:36px;overflow:hidden;position:relative}
.rcb-fill{height:100%;border-radius:var(--rfull);display:flex;align-items:center;justify-content:flex-end;padding-right:1rem;font-size:.875rem;font-weight:700;color:#fff;width:var(--w);transition:width 1.2s var(--ease);position:relative}
.rcb-fill.bad{background:linear-gradient(90deg,#ef4444,#dc2626)}
.rcb-fill.mid{background:linear-gradient(90deg,#f59e0b,#d97706)}
.rcb-fill.good{background:linear-gradient(90deg,#10b981,#059669)}
.rcb-tag{font-size:.78rem;font-weight:600;padding:.3rem .7rem;border-radius:var(--rfull);text-align:center}
.rcb-tag.bad{background:rgba(239,68,68,.1);color:#dc2626}
.rcb-tag.mid{background:rgba(245,158,11,.1);color:#d97706}
.rcb-tag.good{background:rgba(16,185,129,.1);color:var(--green)}

/* ─────────────────────────────────────────
   COMPARISON TABLE
───────────────────────────────────────── */
.compare-section{background:var(--bg)}
.compare-table{border:1px solid var(--bdrlt);border-radius:var(--r4);overflow:hidden;box-shadow:var(--sh3);background:var(--white)}
.ct-head{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;background:var(--bg)}
.ct-feature-col,.ct-opt{padding:1.5rem 1.25rem}
.ct-opt{border-left:1px solid var(--bdrlt);text-align:center}
.ct-opt.blue{background:linear-gradient(180deg,rgba(37,99,235,.06),transparent);border-left:2px solid var(--blue);position:relative}
.ct-best-badge{display:inline-block;background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .75rem;border-radius:var(--rfull);margin-bottom:.5rem}
.ct-opt-name{font-family:var(--head);font-weight:700;font-size:1rem;color:var(--tx)}
.ct-opt.blue .ct-opt-name{color:var(--blue3)}
.ct-opt-sub{font-size:.78rem;color:var(--tx3);margin-top:2px}
.ct-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;border-top:1px solid var(--bdrlt)}
.ct-row.alt{background:var(--bg)}
.ct-feat{padding:.9rem 1.25rem;font-size:.875rem;font-weight:600;color:var(--tx2);display:flex;align-items:center}
.ct-val{padding:.9rem 1.25rem;display:flex;align-items:center;justify-content:center;border-left:1px solid var(--bdrlt);text-align:center;font-size:.875rem}
.ct-val.blue{border-left:2px solid rgba(37,99,235,.2);background:rgba(37,99,235,.02)}
.cv-good{color:var(--green);font-weight:600}
.cv-mid{color:var(--orange);font-weight:600}
.cv-bad{color:var(--tx3)}
.ct-foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;border-top:1px solid var(--bdrlt);background:var(--bg)}
.ct-foot .ct-val.blue{padding:1.25rem;background:rgba(37,99,235,.03)}

/* ─────────────────────────────────────────
   CALCULATOR
───────────────────────────────────────── */
.calc-section{background:var(--white)}
.calc-card{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;background:var(--white);border:1px solid var(--bdrlt);border-radius:var(--r5);padding:2.5rem;box-shadow:var(--sh4)}

.cg{margin-bottom:1.75rem}
.cg:last-child{margin-bottom:0}
.cg>label{display:block;font-size:.875rem;font-weight:600;color:var(--tx2);margin-bottom:.625rem}

.type-toggle{display:flex;gap:4px;background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r2);padding:3px}
.tt-btn{flex:1;padding:.6rem .5rem;border-radius:calc(var(--r2) - 2px);font-size:.84rem;font-weight:500;color:var(--tx3);transition:var(--t);display:flex;align-items:center;justify-content:center;gap:5px}
.tt-btn span{font-size:1rem}
.tt-btn.active{background:var(--blue);color:#fff;box-shadow:var(--shblue)}
.tt-btn:not(.active):hover{background:var(--bg2);color:var(--tx)}

.ci-wrap{display:flex;align-items:center;background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r2);padding-inline:.875rem;transition:var(--t)}
.ci-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1);background:var(--white)}
.ci-pre{color:var(--tx3);font-size:.9375rem}
.ci-suf{color:var(--tx3);font-size:.875rem;white-space:nowrap}
.ci-wrap input{flex:1;background:none;border:none;outline:none;color:var(--tx);font-size:1rem;font-weight:600;padding:.75rem .375rem}
.ci-wrap input::placeholder{color:var(--tx3);font-weight:400}
.ci-hint{font-size:.775rem;color:var(--tx3);margin-top:.375rem;line-height:1.55}

.c-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:linear-gradient(to right,var(--blue) 5%,var(--bdrlt) 5%);outline:none;cursor:pointer;margin-top:.75rem}
.c-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--blue);box-shadow:0 2px 10px rgba(37,99,235,.45);cursor:pointer;transition:transform var(--t)}
.c-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.c-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--blue);box-shadow:0 2px 10px rgba(37,99,235,.45);border:none;cursor:pointer}
.slider-ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--tx3);margin-top:4px}

.urgency-block{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(239,68,68,.06));border:1px solid rgba(245,158,11,.2);border-radius:var(--r3);padding:1.125rem;display:flex;gap:.875rem;align-items:flex-start}
.ub-icon{font-size:1.5rem;flex-shrink:0;margin-top:.1rem}
.urgency-block strong{display:block;font-size:.875rem;font-weight:700;color:var(--tx);margin-bottom:.25rem}
.urgency-block p{font-size:.8rem;color:var(--tx3);line-height:1.55}

/* Calc output */
.calc-output{background:linear-gradient(150deg,var(--ink) 0%,var(--ink3) 100%);border-radius:var(--r4);padding:2rem;color:#fff;display:flex;flex-direction:column;gap:0}
.co-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:1.125rem;margin-bottom:1.25rem;border-bottom:1px solid var(--bdr)}
.co-header h3{font-family:var(--head);font-size:1.125rem;font-weight:700}
.co-tag{font-size:.68rem;font-weight:700;color:var(--green2);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.18);padding:.2rem .6rem;border-radius:var(--rfull)}
.co-hero{text-align:center;padding:1.5rem 0;border-bottom:1px solid var(--bdr);margin-bottom:1.125rem}
.co-label{font-size:.78rem;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}
.co-big{font-family:var(--head);font-size:3rem;font-weight:800;color:var(--green2);line-height:1;text-shadow:0 0 32px rgba(52,211,153,.4)}
.co-sub{font-size:.85rem;color:rgba(255,255,255,.4);margin-top:.5rem}
.co-details{display:flex;flex-direction:column;gap:0;margin-bottom:1rem}
.cod-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.875rem}
.cod-row:last-child{border-bottom:none}
.cod-row span{color:rgba(255,255,255,.5)}
.cod-row strong{font-weight:700;color:#fff}
.cod-row strong.green{color:var(--green2)}

/* Chart */
.co-chart{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r2);padding:1rem;margin-bottom:1rem}
.coc-label{font-size:.75rem;color:rgba(255,255,255,.45);margin-bottom:.875rem;text-align:center}
.coc-bars{display:flex;justify-content:center;gap:3rem;height:260px;align-items:flex-end}
.coc-bar{display:flex;flex-direction:column;align-items:center;gap:6px;width:72px}
.coc-track{width:56px;height:180px;background:rgba(255,255,255,.06);border-radius:var(--r2);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.coc-fill{border-radius:var(--r2);transition:height .8s var(--ease)}
.coc-fill.red{background:linear-gradient(180deg,#f87171,#ef4444)}
.coc-fill.green{background:linear-gradient(180deg,#34d399,#10b981)}
.coc-bar span{font-size:.78rem;font-weight:700;color:#fff}
.coc-bar small{font-size:.65rem;color:rgba(255,255,255,.35)}
.co-disc{font-size:.72rem;color:rgba(255,255,255,.28);line-height:1.55}

/* ─────────────────────────────────────────
   HOW IT WORKS
───────────────────────────────────────── */
.hiw-section{background:var(--bg)}
.hiw-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;margin-top:3.5rem;gap:0}
.hiw-step{background:var(--white);border:1px solid var(--bdrlt);border-radius:var(--r4);padding:2.25rem 2rem;text-align:center;box-shadow:var(--sh1);transition:transform var(--t),box-shadow var(--t)}
.hiw-step:hover{transform:translateY(-5px);box-shadow:var(--sh3)}
.hiw-n{font-family:var(--head);font-size:3rem;font-weight:800;color:var(--blue);opacity:.15;line-height:1;margin-bottom:.75rem}
.hiw-icon{width:56px;height:56px;background:var(--bg2);border:1px solid var(--bdrlt);border-radius:var(--r3);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;color:var(--blue);transition:var(--t)}
.hiw-step:hover .hiw-icon{background:rgba(37,99,235,.1);border-color:rgba(37,99,235,.2)}
.hiw-step h3{font-family:var(--head);font-size:1.125rem;font-weight:700;color:var(--tx);margin-bottom:.625rem}
.hiw-step p{font-size:.9rem;color:var(--tx3);line-height:1.65}
.hiw-time{display:inline-block;background:rgba(37,99,235,.08);color:var(--blue);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:var(--rfull);margin-top:1rem}
.hiw-arrow{display:flex;align-items:center;justify-content:center;padding-top:3.5rem;color:var(--blue);opacity:.35;flex-shrink:0;padding-inline:0.5rem}

/* ─────────────────────────────────────────
   SUPPLIERS
───────────────────────────────────────── */
.suppliers-section{background:var(--white)}
.sup-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.875rem;margin:2.5rem 0}
.sup-tile{background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r3);padding:1.125rem .875rem;text-align:center;font-size:.8rem;font-weight:600;color:var(--tx3);transition:var(--t);box-shadow:var(--sh1);cursor:default}
.sup-tile:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px);box-shadow:var(--sh2)}
.sup-tile.plus{background:var(--bg2);color:var(--blue);font-style:italic}
.market-chips{display:flex;gap:.625rem;flex-wrap:wrap;justify-content:center}
.mchip{display:inline-flex;align-items:center;gap:6px;background:rgba(37,99,235,.07);border:1px solid rgba(37,99,235,.13);color:var(--blue);font-size:.8rem;font-weight:500;padding:.4rem .875rem;border-radius:var(--rfull)}

/* ─────────────────────────────────────────
   RESULTS
───────────────────────────────────────── */
.results-section{background:var(--bg)}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.res-card{background:var(--white);border:1px solid var(--bdrlt);border-radius:var(--r5);padding:2rem;position:relative;box-shadow:var(--sh1);transition:transform var(--t),box-shadow var(--t)}
.res-card:hover{transform:translateY(-6px);box-shadow:var(--sh4)}
.res-card.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh3)}
.res-featured-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .875rem;border-radius:var(--rfull);white-space:nowrap}
.res-type{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:.75rem}
.res-amount{font-family:var(--head);font-size:2.25rem;font-weight:800;color:var(--green);line-height:1.1;margin-bottom:1.25rem}
.res-amount span{font-size:.9375rem;font-weight:500;color:var(--tx3)}
.res-table{border-block:1px solid var(--bdrlt);padding-block:.875rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.5rem}
.rt-row{display:flex;justify-content:space-between;font-size:.875rem}
.rt-row span{color:var(--tx3)}
.rt-row b{font-weight:600;color:var(--tx)}
.rt-row b.green{color:var(--green)}
.res-card blockquote{font-size:.875rem;color:var(--tx3);font-style:italic;line-height:1.65;border-left:2px solid var(--bdrlt);padding-left:.875rem;margin:0}

/* Trust strip */
.trust-strip{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;margin-top:3.5rem;padding:1.75rem 2rem;background:var(--white);border:1px solid var(--bdrlt);border-radius:var(--r4);box-shadow:var(--sh1)}
.ts-item{display:flex;align-items:center;gap:.625rem;font-size:.875rem;font-weight:500;color:var(--tx2)}
.ts-item svg{color:var(--green);flex-shrink:0}
.ts-div{width:1px;height:20px;background:var(--bdrlt)}

/* ─────────────────────────────────────────
   GUARANTEE
───────────────────────────────────────── */
.guarantee-section{background:linear-gradient(150deg,var(--ink) 0%,var(--ink2) 60%,#08162A 100%);padding:6rem 0}
.guarantee-card{display:grid;grid-template-columns:auto 1fr;gap:3.5rem;align-items:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--r5);padding:3.5rem;position:relative;overflow:hidden}
.guarantee-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 20% 50%,rgba(37,99,235,.12),transparent 60%);pointer-events:none}
.gc-icon{font-size:5rem;filter:drop-shadow(0 0 32px rgba(37,99,235,.5));flex-shrink:0;animation:shieldpulse 3s ease-in-out infinite}
@keyframes shieldpulse{0%,100%{filter:drop-shadow(0 0 24px rgba(37,99,235,.4))}50%{filter:drop-shadow(0 0 48px rgba(16,185,129,.6))}}
.gc-content h2{font-family:var(--head);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:#fff;line-height:1.15;margin:.625rem 0 1rem}
.gc-content p{font-size:1rem;color:rgba(255,255,255,.6);line-height:1.78;max-width:560px}

/* ─────────────────────────────────────────
   URGENCY / TREND
───────────────────────────────────────── */
.urgency-section{background:var(--bg)}
.urgency-card{display:grid;grid-template-columns:1fr 420px;gap:4rem;align-items:center;background:var(--white);border:1px solid var(--bdrlt);border-radius:var(--r5);padding:3rem;box-shadow:var(--sh3)}
.uc-left .sh{font-size:clamp(1.5rem,2.8vw,2.25rem)}
.uc-left p{color:var(--tx3);line-height:1.75;margin-bottom:1.5rem}
.urgency-list{display:flex;flex-direction:column;gap:.625rem}
.urgency-list li{display:flex;align-items:flex-start;gap:.625rem;font-size:.9rem;color:var(--tx2);font-weight:500}
.urgency-list svg{color:var(--green);flex-shrink:0;margin-top:1px}

/* Trend chart */
.trend-chart{background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r4);padding:1.75rem}
.tc-title{font-size:.82rem;font-weight:600;color:var(--tx3);margin-bottom:1.5rem;text-align:center}
.tc-chart{display:flex;align-items:flex-end;justify-content:center;gap:.75rem;height:100px}
.tc-bar{display:flex;flex-direction:column;align-items:center;gap:4px;width:56px}
.tc-bar>div{width:44px;height:var(--h);background:linear-gradient(180deg,var(--blue2),var(--blue3));border-radius:var(--r2) var(--r2) 0 0;transition:height 1s var(--ease);position:relative;min-height:8px}
.tc-bar.highlight>div{background:linear-gradient(180deg,#f87171,#ef4444)}
.tc-bar span{font-size:.75rem;font-weight:700;color:var(--tx)}
.tc-bar small{font-size:.68rem;color:var(--tx3)}
.tc-note{font-size:.75rem;color:var(--tx3);text-align:center;margin-top:1rem}
.tc-eem-line{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--green);font-weight:600;margin-top:.75rem;padding:.5rem .75rem;background:rgba(16,185,129,.07);border-radius:var(--r2)}
.tcel-dot{width:8px;height:8px;background:var(--green);border-radius:50%;flex-shrink:0;animation:chipblink 2s ease infinite}

/* ─────────────────────────────────────────
   AUDIT FORM
───────────────────────────────────────── */
.audit-section{background:linear-gradient(160deg,var(--ink) 0%,var(--ink2) 55%,#071325 100%)}
.audit-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:4rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--r5);padding:3.5rem}
.audit-info h2{font-family:var(--head);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:#fff;line-height:1.15;margin:.625rem 0 1rem}
.audit-info p{font-size:1rem;color:rgba(255,255,255,.58);line-height:1.78;margin-bottom:2rem}
.audit-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.audit-list li{display:flex;align-items:flex-start;gap:.875rem}
.al-check{width:24px;height:24px;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--green2);font-size:.75rem;font-weight:700;flex-shrink:0;margin-top:2px}
.audit-list li strong{display:block;color:#fff;font-size:.9rem;font-weight:600;margin-bottom:2px}
.audit-list li span{font-size:.82rem;color:rgba(255,255,255,.45)}
.audit-phone-cta{display:flex;align-items:center;gap:.875rem;padding:1.125rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r3)}
.apc-icon{font-size:1.5rem;flex-shrink:0}
.audit-phone-cta strong{display:block;font-size:.82rem;color:rgba(255,255,255,.5);margin-bottom:2px}
.audit-phone-cta a{font-size:1.125rem;font-weight:700;color:#fff;transition:color var(--t)}
.audit-phone-cta a:hover{color:var(--green2)}

/* Form */
.audit-form{background:var(--white);border-radius:var(--r4);padding:2rem}
.af-header{margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--bdrlt)}
.af-header h3{font-family:var(--head);font-size:1.25rem;font-weight:700;color:var(--tx)}
.af-sub{font-size:.8rem;color:var(--tx3);margin-top:3px;display:block}
.af-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.af-group{margin-bottom:1.125rem}
.af-group label{display:block;font-size:.8375rem;font-weight:600;color:var(--tx2);margin-bottom:.375rem}
.af-group input,.af-group select,.af-group textarea{width:100%;padding:.7rem .875rem;background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r2);font-size:.9375rem;color:var(--tx);outline:none;transition:var(--t);-webkit-appearance:none;resize:none}
.af-group input:focus,.af-group select:focus,.af-group textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.10);background:var(--white)}
.af-group input.error,.af-group select.error{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.1)}
.af-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem;cursor:pointer}
.af-disc{font-size:.72rem;color:var(--tx3);text-align:center;margin-top:.875rem;line-height:1.55}

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
.faq-section{background:var(--bg)}
.faq-list{margin-top:3rem;display:flex;flex-direction:column;gap:.625rem}
.faq-item{background:var(--white);border:1px solid var(--bdrlt);border-radius:var(--r3);overflow:hidden;transition:border-color var(--t),box-shadow var(--t);box-shadow:var(--sh1)}
.faq-item.open{border-color:var(--blue);box-shadow:0 0 0 1px rgba(37,99,235,.08),var(--sh2)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.125rem 1.375rem;font-size:.9375rem;font-weight:600;color:var(--tx);text-align:left;cursor:pointer;transition:color var(--t)}
.faq-q:hover{color:var(--blue)}
.faq-item.open .faq-q{color:var(--blue)}
.fq-icon{font-size:1.375rem;font-weight:300;color:var(--tx3);flex-shrink:0;line-height:1;transition:transform var(--t),color var(--t);user-select:none}
.faq-item.open .fq-icon{transform:rotate(45deg);color:var(--blue)}
.faq-a{padding:0 1.375rem 1.125rem}
.faq-a p{font-size:.9375rem;color:var(--tx3);line-height:1.72}

/* ─────────────────────────────────────────
   FINAL CTA
───────────────────────────────────────── */
.final-cta-section{position:relative;overflow:hidden;padding:9rem 0;text-align:center;background:var(--ink)}
.fcta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(37,99,235,.22) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 15% 80%,rgba(16,185,129,.1) 0%,transparent 55%),radial-gradient(ellipse 45% 45% at 85% 20%,rgba(245,158,11,.06) 0%,transparent 50%)}
.fcta-inner{position:relative;z-index:1}
.final-cta-section h2{font-family:var(--head);font-size:clamp(2rem,4.5vw,3.25rem);font-weight:800;color:#fff;line-height:1.18;letter-spacing:-.02em;margin-bottom:1.125rem}
.final-cta-section p{font-size:1.0625rem;color:rgba(255,255,255,.55);max-width:500px;margin:0 auto 2.75rem;line-height:1.78}
.fcta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
.footer{background:#020810;border-top:1px solid var(--bdr);padding:4rem 0 2rem}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;margin-bottom:2rem;border-bottom:1px solid var(--bdr)}
.ft-brand .logo{margin-bottom:1rem}
.ft-brand p{font-size:.875rem;color:rgba(255,255,255,.35);line-height:1.72;margin-bottom:1rem;max-width:270px}
.ft-phone{font-size:1.0625rem;font-weight:700;color:var(--green2);transition:color var(--t)}
.ft-phone:hover{color:#fff}
.ft-col h4{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.28);margin-bottom:.875rem}
.ft-col ul{display:flex;flex-direction:column;gap:.5rem}
.ft-col a{font-size:.875rem;color:rgba(255,255,255,.48);transition:color var(--t)}
.ft-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;font-size:.775rem;color:rgba(255,255,255,.22);line-height:1.6}

/* ─────────────────────────────────────────
   FAB (floating phone)
───────────────────────────────────────── */
.fab-phone{position:fixed;bottom:1.75rem;right:1.75rem;z-index:990;width:56px;height:56px;background:var(--green);border-radius:50%;display:none;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 24px rgba(16,185,129,.5);transition:transform var(--t),box-shadow var(--t);animation:fabpulse 3s ease infinite}
@keyframes fabpulse{0%,100%{box-shadow:0 6px 24px rgba(16,185,129,.5)}50%{box-shadow:0 6px 40px rgba(16,185,129,.7),0 0 0 8px rgba(16,185,129,.12)}}
.fab-phone:hover{transform:scale(1.1);box-shadow:0 10px 32px rgba(16,185,129,.6)}

/* ─────────────────────────────────────────
   TOAST NOTIFICATIONS
───────────────────────────────────────── */
.toast-stack{position:fixed;bottom:2rem;left:2rem;z-index:980;display:flex;flex-direction:column;gap:.625rem;pointer-events:none}
.toast{background:var(--white);border:1px solid var(--bdrlt);border-radius:var(--r3);padding:.875rem 1.125rem;box-shadow:var(--sh4);min-width:280px;max-width:320px;display:flex;align-items:flex-start;gap:.75rem;transform:translateX(-120%);transition:transform .45s var(--spring),opacity .45s var(--ease);opacity:0;pointer-events:auto}
.toast.show{transform:translateX(0);opacity:1}
.toast.hide{transform:translateX(-120%);opacity:0}
.toast-icon{font-size:1.25rem;flex-shrink:0;margin-top:1px}
.toast-body strong{display:block;font-size:.875rem;font-weight:700;color:var(--tx);margin-bottom:2px}
.toast-body span{font-size:.78rem;color:var(--tx3)}
.toast-saving{font-size:.875rem;font-weight:800;color:var(--green);margin-left:auto;flex-shrink:0;align-self:center}

/* ─────────────────────────────────────────
   EXIT INTENT MODAL
───────────────────────────────────────── */
.exit-overlay{position:fixed;inset:0;z-index:3000;background:rgba(4,12,26,.85);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.exit-overlay.active{opacity:1;pointer-events:all}
.exit-modal{background:var(--white);border-radius:var(--r5);padding:2.75rem 2.5rem;max-width:460px;width:100%;position:relative;transform:scale(.92) translateY(24px);transition:transform .4s var(--spring);text-align:center;box-shadow:var(--sh4)}
.exit-overlay.active .exit-modal{transform:scale(1) translateY(0)}
.exit-close{position:absolute;top:1.125rem;right:1.125rem;width:32px;height:32px;background:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.875rem;color:var(--tx3);cursor:pointer;transition:var(--t)}
.exit-close:hover{background:var(--bg2);color:var(--tx)}
.em-icon{font-size:3rem;margin-bottom:1rem}
.exit-modal h2{font-family:var(--head);font-size:1.625rem;font-weight:800;color:var(--tx);line-height:1.2;margin-bottom:.875rem}
.exit-modal p{font-size:.9375rem;color:var(--tx3);line-height:1.7;margin-bottom:1.5rem}
.exit-form input{width:100%;padding:.8rem 1rem;background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r2);font-size:1rem;color:var(--tx);outline:none;transition:var(--t)}
.exit-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.exit-dismiss{display:block;margin:1rem auto 0;font-size:.8rem;color:var(--tx3);cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color var(--t)}
.exit-dismiss:hover{color:var(--tx)}

/* ─────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .58s var(--ease),transform .58s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.problem-grid>.reveal:nth-child(2){transition-delay:.08s}
.problem-grid>.reveal:nth-child(3){transition-delay:.16s}
.problem-grid>.reveal:nth-child(4){transition-delay:.24s}
.results-grid>.reveal:nth-child(2){transition-delay:.10s}
.results-grid>.reveal:nth-child(3){transition-delay:.20s}
.hiw-steps>.reveal:nth-child(3){transition-delay:.12s}
.hiw-steps>.reveal:nth-child(5){transition-delay:.24s}
.faq-list>.reveal:nth-child(n+2){transition-delay:calc((.05s) * var(--i,1))}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media(max-width:1100px){
  .problem-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
  .ct-head,.ct-row,.ct-foot{grid-template-columns:1.2fr .9fr .9fr 1.1fr}
  .rcb-item{grid-template-columns:160px 1fr 120px}
}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:3rem}
  .hero-p,.hero-chip{display:inline-flex}
  .hero-p{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-trust{justify-content:center}
  .hero-card{max-width:460px;margin-inline:auto}
  .hiw-steps{grid-template-columns:1fr;gap:2rem}
  .hiw-arrow{display:none}
  .calc-card{grid-template-columns:1fr}
  .audit-wrapper{grid-template-columns:1fr;gap:2.5rem;padding:2.5rem}
  .urgency-card{grid-template-columns:1fr;gap:2rem}
  .guarantee-card{grid-template-columns:1fr;text-align:center;gap:2rem}
  .gc-content p{margin-inline:auto}
  .results-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .hamburger{display:flex}
  .nav-links{display:none}
  .nav-phone{display:none}
  .ct-head,.ct-row,.ct-foot{font-size:.82rem}
}

@media(max-width:640px){
  .container{padding-inline:1.25rem}
  .section{padding:4.5rem 0}
  .hero{padding-top:120px}
  .stats-inner{gap:1.5rem}
  .stat-div{display:none}
  .stats-inner{display:grid;grid-template-columns:1fr 1fr;justify-items:center}
  .problem-grid{grid-template-columns:1fr}
  .sup-grid{grid-template-columns:repeat(2,1fr)}
  .compare-table{overflow-x:auto}
  .ct-head,.ct-row,.ct-foot{min-width:580px}
  .af-row{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;text-align:center}
  .toast-stack{left:1rem;right:1rem;bottom:5rem}
  .toast{max-width:100%}
  .rcb-item{grid-template-columns:1fr;gap:.375rem}
  .rcb-label{font-size:.8rem}
  .guarantee-section,.final-cta-section{padding:4.5rem 0}
  .audit-wrapper{padding:2rem 1.25rem}
  .fab-phone{display:flex}
}

@media(max-width:400px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .fcta-actions{flex-direction:column;align-items:stretch}
  .fcta-actions .btn{justify-content:center}
}

/* ─────────────────────────────────────────
   FOCUS & MOTION
───────────────────────────────────────── */
:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .ticker-track{animation:none}
  html{scroll-behavior:auto}
}

/* ─────────────────────────────────────────
   MULTI-STEP FORM
───────────────────────────────────────── */
/* Progress bar */
.af-progress{display:flex;align-items:center;gap:0;margin-bottom:1.5rem}
.afp-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}
.afp-dot{width:30px;height:30px;border-radius:50%;background:var(--bdrlt);color:var(--tx3);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background var(--t),color var(--t),box-shadow var(--t)}
.afp-step span{font-size:.72rem;font-weight:600;color:var(--tx3);transition:color var(--t);white-space:nowrap}
.afp-step.active .afp-dot{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.afp-step.active span{color:var(--blue)}
.afp-step.done .afp-dot{background:var(--green);color:#fff}
.afp-step.done span{color:var(--green)}
.afp-line{flex:1;height:2px;background:var(--bdrlt);margin:0 6px;margin-bottom:16px;transition:background .4s var(--ease)}
.afp-line.done{background:var(--green)}

/* Step panels */
.af-step{display:none}
.af-step.active{display:block;animation:stepIn .32s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.af-step.back{animation:stepBack .32s var(--ease) both}
@keyframes stepBack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}

/* Back / Next nav */
.af-nav{display:flex;gap:.75rem;margin-top:.25rem}
.af-nav .btn-ghost{flex-shrink:0;border:1px solid var(--bdrlt);color:var(--tx3);padding:.75rem 1.125rem;border-radius:var(--r2)}
.af-nav .btn-ghost:hover{border-color:var(--blue2);color:var(--blue)}

/* Review summary box */
.af-review{background:var(--bg);border:1px solid var(--bdrlt);border-radius:var(--r2);padding:1rem 1.125rem;margin-bottom:1.25rem}
.af-review-title{font-size:.78rem;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.625rem}
.af-review-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;border-bottom:1px solid var(--bdrlt);font-size:.875rem}
.af-review-row:last-child{border-bottom:none}
.af-review-row span{color:var(--tx3)}
.af-review-row strong{color:var(--tx);text-align:right;max-width:60%}

/* Visitor badge */
.visitor-badge{display:flex;align-items:center;gap:.5rem;background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);color:var(--green);font-size:.8rem;font-weight:600;border-radius:var(--rfull);padding:.4rem .875rem;margin-bottom:1.25rem;width:fit-content}
.vb-dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-in-out infinite}

/* Calendly / schedule CTA */
.calendly-cta{display:inline-flex;align-items:center;gap:.5rem;color:var(--blue);font-size:.9rem;font-weight:600;margin-top:1rem;padding:.5rem .75rem;border-radius:var(--r2);border:1px solid rgba(37,99,235,.22);background:rgba(37,99,235,.05);transition:var(--t)}
.calendly-cta:hover{background:rgba(37,99,235,.10);border-color:var(--blue);gap:.7rem}
.calendly-cta svg{flex-shrink:0}

@media(max-width:640px){
  .af-progress{gap:0}
  .afp-step span{display:none}
  .af-nav{flex-direction:column}
  .af-nav .btn-ghost{order:1}
}
