:root{--bg:#0C2A5A;--fg:#0B1C36;--accent:#3B79FF;--text:#0E1116;--muted:#6B7280}
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#F7F8FB;scroll-behavior:smooth}
a{color:var(--accent);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:14px 20px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(59,121,255,.25)}
.btn--ghost{background:#eef3ff;color:var(--accent)}
.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid #eef1f6;z-index:9}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--fg)}
.hero{background:linear-gradient(135deg,var(--bg) 0%, #134094 65%);color:#fff;padding:70px 0}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 14px}
.hero p{font-size:18px;color:#E4ECFF;margin:0 0 24px}
.trade-select{display:flex;gap:12px;align-items:center}
select{padding:12px 14px;border-radius:10px;border:1px solid #D7DCEC;font-weight:600}
.sample-quote{background:#ffffff;border:1px solid #d3dae6;border-radius:14px;box-shadow:0 16px 40px rgba(13,38,76,.18);padding:18px}
.sample-quote table{width:100%;border-collapse:collapse}
.sample-quote th,.sample-quote td{padding:8px;border-bottom:1px dashed #e5e7eb;color:#0B1C36}
.features{padding:70px 0;background:#fff}
.features .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid #e7ecf5;border-radius:14px;padding:22px}
.section{padding:60px 0}
.steps .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
.cta{padding:70px 0;background:linear-gradient(135deg,#0b1c36,#142a5e);color:#fff;text-align:center}
.footer{padding:38px 0;background:#0B1220;color:#94a3b8}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.small{font-size:12px;color:#94a3b8}
.form{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;max-width:520px;margin:0 auto}
label{display:block;margin:10px 0 6px;color:#334155}
input,select{width:100%;padding:12px;border:1px solid #CBD5E1;border-radius:10px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mockdash{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px}
.mocklist{margin:0;padding:0;list-style:none}
.mocklist li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed #e5e7eb}
.trust{background:#0b1220;color:#cbd5e1;padding:8px 0;font-size:13px}
.trust .container{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.trust .star{display:inline-flex;gap:6px;align-items:center}
.trades{padding:50px 0;background:#f9fbff;border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6}
.trades .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.trade-pill{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:10px 14px;text-align:center;font-weight:600;cursor:pointer}
.hero .cta-row{display:flex;gap:12px;align-items:center;margin-top:12px}
.hero .cta-mini{font-size:13px;color:#cfe1ff}
.scroll-anchor{scroll-margin-top:90px}
@media(max-width:960px){.hero .grid{grid-template-columns:1fr}.features .grid,.steps .grid{grid-template-columns:1fr}.trades .grid{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}}

/* v2.1.4 polish */
.nav a{margin-left:22px;font-weight:600}
.nav a:hover{text-decoration:underline}
#features,#how,#pricing,.faq,.trades{scroll-margin-top:110px}
.sample-quote thead th{background:#f3f6ff}
.sample-quote tbody tr:nth-child(odd){background:#fcfdff}
.sample-quote tbody tr:nth-child(even){background:#f7f9ff}
.sample-quote .totals div{background:#ffffff}
.faq{padding-top:50px;padding-bottom:40px}
.faq details{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;margin:10px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq summary:hover{text-decoration:underline}
.cta{margin-top:30px}

/* v2.1.5 */
.sample-quote{border:1px solid #b9c3d6}
.sample-quote th{font-weight:800}
.sample-quote td, .sample-quote th{font-size:15px}
.sample-quote .grand{background:#eaf0ff !important;border-color:#cfd9ff !important}
.nav a{margin-left:24px}

/* v2.1.7 */
.sample-quote .grand span,
.sample-quote .grand strong{color:#0B1C36 !important;opacity:1 !important}
.sample-quote .totals{max-width:360px;margin-left:auto;margin-top:8px}
/* Hide any leftover ghost bars */
.sample-quote .ghost, .sample-quote .faint, .sample-quote input[disabled]{display:none !important}

/* v2.1.8 */
.sample-quote .totals{max-width:360px;margin-left:auto;margin-top:10px}
.sample-quote .totals > div{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid #dde3f0;border-radius:10px;margin-top:8px}
.sample-quote .totals .grand{background:#eaf0ff;border-color:#cfd9ff}
.sample-quote .totals .grand span,
.sample-quote .totals .grand strong{font-weight:800;color:#0B1C36}

/* v2.1.12: centered hero headline + spacing */
.hero .grid > div:first-child{ text-align:center }
.hero h1{ text-align:center; margin-bottom:10px }
.hero p{ text-align:center }
.hero .cta-row{ justify-content:center }
.hero .trade-select{ justify-content:center }

/* v2.1.13: section text centering + polish */
.features .card h3,
.features .card .sub,
.features .card p { text-align: center; }

.steps h2 { text-align: center; }
.steps .grid .step { text-align: center; }

/* Hero polish: slightly more leading on subhead, tighter gap to CTAs */
#subhead { line-height: 1.5; margin-bottom: 12px; }
.hero .cta-row { margin-top: 8px; }

/* FAQ breathing room above footer (safety even if pricing present) */
.faq { padding-bottom: 56px; }

/* v2.1.14: Hybrid alignment — headings centered, blurbs left */
.features .card h3 { text-align: center; }
.features .card p, .features .card .sub { text-align: left; }

.steps h2 { text-align: center; }
.steps .grid .step { text-align: left; }
.steps .grid .step p, .steps .grid .step .sub { text-align: left; }

/* v2.1.15_PRO: Professional left-aligned pass */
.hero .grid > div:first-child{ text-align:left }
.hero h1{ text-align:left; margin-bottom:12px }
.hero p{ text-align:left }
.hero .cta-row{ justify-content:flex-start }
.hero .trade-select{ justify-content:flex-start }

/* Features & How it works fully left-aligned */
.features .card h3,
.features .card p,
.features .card .sub { text-align:left }

.steps h2 { text-align:left }
.steps .grid .step,
.steps .grid .step p,
.steps .grid .step .sub { text-align:left }

/* Keep FAQ spacing safety */
.faq { padding-bottom: 56px }

/* v2.1.16_PRO: spacing polish */
/* 1) Features: tighten gap between heading and description */
.features .card h3 { margin-bottom: 6px; }
.features .card p, .features .card .sub { margin-top: 0; line-height: 1.5; }

/* 2) Add breathing room before How It Works */
.features { padding-bottom: 48px; }
.steps { padding-top: 32px; }

/* 3) Ensure consistent section rhythm on small screens */
@media (max-width: 960px) {
  .features { padding-bottom: 40px; }
  .steps { padding-top: 28px; }
}

/* v2.1.17_PRO — triple polish */
/* 1) How it works text spacing to match Features */
.steps .grid .step strong{display:block;margin-bottom:6px}
.steps .grid .step .sub{line-height:1.5}

/* 2) Hero: add a touch more space between buttons and the tiny note */
.hero .cta-row{margin-bottom:8px}
.hero .cta-mini{display:block;margin-top:8px}

/* 3) FAQ breathing + readability */
.faq details{padding:16px}
.faq summary{line-height:1.4}
.faq details > div{margin-top:8px;line-height:1.6}