@import url('https://fonts.cdnfonts.com/css/satoshi');

:root {
  --brand: #0CCAA8; /* Teal Green */
  --brand-accent: #4D77FF; /* Accent Blue */
  --bg: #030404;
  --section: #161819;
  --text: #F5F9F8;
  --text-muted: #8A9391;
  --border: #2B3230;
  --gradient: linear-gradient(135deg, #0CCAA8 0%, #4D77FF 100%);
  --danger: #FF4A4A;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height:1.55; overflow-x:hidden; font-size:16px;
}
img, svg { max-width:100%; height:auto; }
nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; position:sticky; top:0; background:rgba(3,4,4,0.75); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); z-index:100; }
nav.scrolled { background:rgba(3,4,4,0.95); }
logo { display:flex; gap:.6rem; text-decoration:none; align-items:center; }
logo-img { width:40px; height:40px; display:block; }
logo-text { font-weight:700; font-size:1.4rem; color:var(--text); letter-spacing:.5px; }
nav-links { display:flex; gap:2rem; }
nav-link { color:var(--text); text-decoration:none; font-weight:500; }
nav-link:hover { color:var(--brand); }
cta-button { background:var(--gradient); color:#031210; padding:.6rem 1.2rem; border-radius:8px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:all .2s; }
cta-button:hover { transform:translateY(-2px); }
cta-button.secondary { background:transparent; color:var(--brand); border:1px solid var(--brand); }
cta-button.secondary:hover { background:var(--brand); color:#031210; }

/* Mobile-specific language buttons (top bar) */
lang-compact { display:none; gap:.4rem; align-items:center; }
lang-compact .lang-btn { font-size:.8rem; padding:.25rem .45rem; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:6px; }

/* On compact screens, move language into drawer (hide in top bar) */
@media (max-width:1000px){
  .lang-compact{ display:none !important; }
}

/* Final compact overrides (win over earlier rules) */
@media (max-width:1000px){
  /* Hide desktop links; show hamburger */
  .nav-links{ display:none !important; }
  .lang-switcher{ display:none !important; }
  .menu-toggle{ display:flex !important; order:0; min-width:44px; min-height:44px; padding:.35rem .5rem; }
  nav { justify-content:flex-start; gap:.5rem; }
  .logo{ order:1; }
  /* Sticky CTA to avoid top bar overlap */
  nav .cta-button{ position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:120; box-shadow:0 8px 20px rgba(0,0,0,.35);} 
  /* Ensure drawer layout for mobile menu */
  .mobile-menu{ top:0; bottom:0; left:0; right:auto; width:min(82vw, 360px); border-right:1px solid var(--border); border-bottom:none; transform:translateX(-100%); }
  body.menu-open .mobile-menu{ transform:translateX(0); }
}

/* Remove Menu label text (icon only) */

/* Drawer uses full height; no top offset needed */

/* Sticky primary CTA on small/medium screens */
@media (max-width:1000px){ nav .cta-button{ position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:120; box-shadow:0 8px 20px rgba(0,0,0,.35);} }

/* Mobile menu as left side drawer */
.mobile-menu{ position:fixed; top:0; bottom:0; left:0; width:min(82vw, 360px); background:rgba(3,4,4,0.98); border-right:1px solid var(--border); z-index:110; transform:translateX(-100%); opacity:0; pointer-events:none; transition:none; overflow-y:auto; }
.mobile-menu .mobile-menu-inner{ padding:calc(1rem + env(safe-area-inset-top)) 1rem 1rem; display:flex; flex-direction:column; gap:.75rem; }
.mobile-link{ color:var(--text); text-decoration:none; padding:.6rem .25rem; border-radius:8px; border:1px solid transparent; }
.mobile-link:active{ background:#0b0c0d; border-color:var(--border); }
.mobile-lang{ display:flex; gap:.5rem; margin-top:.25rem; }
.cta-button.full{ width:100%; margin-top:.25rem; }
/* Open state */
body.menu-open .mobile-menu{ transform:translateX(0); opacity:1; pointer-events:auto; }
/* Backdrop for drawer */
.mobile-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; opacity:0; pointer-events:none; transition:none; }
body.menu-open .mobile-backdrop{ opacity:1; pointer-events:auto; }

/* Mobile menu panel */
.mobile-menu{ position:fixed; left:0; right:0; top:56px; background:rgba(3,4,4,0.98); border-bottom:1px solid var(--border); z-index:110; transform:translateY(-8px); opacity:0; pointer-events:none; transition:none; }
.mobile-menu .mobile-menu-inner{ padding:1rem; display:flex; flex-direction:column; gap:.75rem; }

/* Drawer uses full height */
/* Drawer backdrop */
/* On compact layouts, language lives inside the drawer */
@media (max-width:1000px){
  .lang-compact{ display:none !important; }
}

/* Menu label text */
.menu-toggle .menu-text{ color:var(--text); font-size:.8rem; margin-left:.5rem; vertical-align:middle; }
@media (min-width:1101px){ .menu-toggle .menu-text{ display:none; } }

/* Position mobile menu just below actual navbar height */
#navbar{ --nav-h: 56px; }
.mobile-menu{ top: var(--nav-h); }
@media (min-width:1101px){ .mobile-menu{ top:auto; }}

/* Layout: hamburger on the far left, then logo; hide top-bar language on compact */
@media (max-width:1000px){
  nav { justify-content:flex-start; gap:.5rem; }
  .menu-toggle{ display:flex; align-items:center; padding:.35rem .5rem; order:0; min-width:44px; min-height:44px; }
  .logo{ order:1; }
  .lang-switcher{ display:none !important; }
  .lang-compact{ display:none !important; }
}

/* Hide fixed CTA when mobile menu is open */
body.menu-open nav .cta-button { display:none; }

/* Mobile menu as left side drawer */
.mobile-menu{ position:fixed; top:0; bottom:0; left:0; width:min(82vw, 360px); background:rgba(3,4,4,0.98); border-right:1px solid var(--border); z-index:110; transform:translateX(-100%); opacity:0; pointer-events:none; transition:none; overflow-y:auto; }
.mobile-menu .mobile-menu-inner{ padding:calc(1rem + env(safe-area-inset-top)) 1rem 1rem; display:flex; flex-direction:column; gap:.75rem; }
.mobile-link{ color:var(--text); text-decoration:none; padding:.6rem .25rem; border-radius:8px; border:1px solid transparent; }
.mobile-link:active{ background:#0b0c0d; border-color:var(--border); }
.mobile-lang{ display:flex; gap:.5rem; margin-top:.25rem; }
.cta-button.full{ width:100%; margin-top:.25rem; }
/* Open state */
body.menu-open .mobile-menu{ transform:translateX(0); opacity:1; pointer-events:auto; }
/* Backdrop for drawer */
.mobile-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; opacity:0; pointer-events:none; transition:none; }
body.menu-open .mobile-backdrop{ opacity:1; pointer-events:auto; }

/* Mobile-specific language buttons (top bar) */
.lang-compact{ display:none; gap:.4rem; align-items:center; }
.lang-compact .lang-btn{ font-size:.8rem; padding:.25rem .45rem; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:6px; }

/* Show compact language in top bar on small screens, hide full lang-switcher */
@media (max-width:1000px){
  .lang-compact{ display:flex; }
}

/* Remove Menu label text (icon only) */

/* Drawer uses full height; no top offset needed */
@import url('https://fonts.cdnfonts.com/css/satoshi');

:root {
  --brand: #0CCAA8; /* Teal Green */
  --brand-accent: #4D77FF; /* Accent Blue */
  --bg: #030404;
  --section: #161819;
  --text: #F5F9F8;
  --text-muted: #8A9391;
  --border: #2B3230;
  --gradient: linear-gradient(135deg, #0CCAA8 0%, #4D77FF 100%);
  --danger: #FF4A4A;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height:1.55; overflow-x:hidden; font-size:16px;
}
img, svg { max-width:100%; height:auto; }
nav { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; position:sticky; top:0; background:rgba(3,4,4,0.75); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); z-index:100; }
nav.scrolled { background:rgba(3,4,4,0.95); }
.logo { display:flex; gap:.6rem; text-decoration:none; align-items:center; }
.logo-img { width:40px; height:40px; display:block; }
.logo-text { font-weight:700; font-size:1.4rem; color:var(--text); letter-spacing:.5px; }
.nav-links { display:flex; gap:2rem; }
.nav-link { color:var(--text); text-decoration:none; font-weight:500; }
.nav-link:hover { color:var(--brand); }
.cta-button { background:var(--gradient); color:#031210; padding:.6rem 1.2rem; border-radius:8px; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:all .2s; }
.cta-button:hover { transform:translateY(-2px); }
.cta-button.secondary { background:transparent; color:var(--brand); border:1px solid var(--brand); }
.cta-button.secondary:hover { background:var(--brand); color:#031210; }

.hero { min-height:88vh; display:flex; align-items:center; justify-content:center; padding:0 2rem; text-align:center; }
.hero h1 { font-size:clamp(1.75rem, 6vw, 3rem); margin:0 0 1rem; font-weight:700; }
.hero-subtitle { font-size:1.25rem; color:var(--text-muted); max-width:780px; margin:0 auto 2rem; }
.hero-buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-footnote { margin-top:2rem; font-size:.95rem; color:var(--text-muted); }

section { padding:4rem 2rem; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-header h2 { font-size:2.4rem; margin:0 0 .75rem; font-weight:700; }
.section-header p { max-width:640px; margin:0 auto; color:var(--text-muted); }

.why-now { background:var(--section); }
.why-now-list { list-style:none; padding:0; margin:0 auto; max-width:1050px; display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.why-now-list li { background:var(--bg); border:1px solid var(--border); padding:1.5rem; border-radius:14px; display:flex; gap:1rem; font-size:1.05rem; line-height:1.5; }
.why-now-list li i { color:var(--brand); font-size:1.4rem; margin-top:.15rem; }

.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; max-width:1000px; margin:0 auto; }
.feature { background:var(--section); border:1px solid var(--border); padding:2rem; border-radius:14px; }
.feature h3 { margin:0 0 .6rem; font-size:1.15rem; color:var(--brand); display:flex; gap:.6rem; align-items:center; }
.feature p { margin:0; color:var(--text-muted); font-size:.98rem; }

.how-it-works { background:var(--section); }
.steps-vertical { display:flex; flex-direction:column; gap:2rem; max-width:800px; margin:0 auto; }
.step { background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:2rem; }
.step h3 { margin:0 0 .75rem; font-size:1.15rem; }
.step p { margin:0; color:var(--text-muted); }

.cost-strip { background:var(--gradient); margin:4rem auto; max-width:1000px; padding:3rem 2rem; border-radius:14px; text-align:center; }
.cost-strip h2 { margin:0 0 .75rem; font-size:2rem; color:#031210; }
.cost-strip p { margin:0 0 1.5rem; color:#07352C; }
.cost-strip .cta-button { background:#fff; color:#031210; }

footer { text-align:center; padding:3rem 2rem; color:var(--text-muted); border-top:1px solid var(--border); font-size:.9rem; }
footer a { color:var(--brand); text-decoration:none; }
footer a:hover { text-decoration:underline; }

/* Modal & Form */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:1000; align-items:center; justify-content:center; }
.modal[style*="display: flex"] { display:flex; }
.modal-content { background:var(--section); border:1px solid var(--border); border-radius:14px; padding:2rem; width:90vw; max-width:440px; position:relative; box-shadow:0 8px 32px rgba(0,0,0,.35); }
.close { position:absolute; top:1rem; right:1rem; font-size:2rem; cursor:pointer; color:var(--text-muted); }
.close:hover { color:var(--brand); }
.form-group { margin-bottom:1.15rem; }
.form-group label { display:block; margin-bottom:.45rem; font-weight:500; }
.form-group input, .form-group select { width:100%; padding:.75rem .85rem; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:1rem; }
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--brand); }
.checkbox-label { display:flex; align-items:center; gap:.75rem; cursor:pointer; }
.checkbox-label input { width:auto; margin:0; }
.checkmark { width:20px; height:20px; border:1px solid var(--border); border-radius:4px; position:relative; background:var(--bg); }
.checkbox-label input:checked + .checkmark { background:var(--brand); border-color:var(--brand); }
.checkbox-label input:checked + .checkmark::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#031210; }
.form-message { margin-top:1rem; padding:1rem; border-radius:8px; font-size:.9rem; }
.form-message.success { background:rgba(12,202,168,0.1); border:1px solid var(--brand); color:var(--brand); }
.form-message.error { background:rgba(255,74,74,0.1); border:1px solid var(--danger); color:var(--danger); }

@media (max-width:1000px){
  body { padding-bottom:84px; }
  .hero { padding:0 1rem; min-height:78vh; }
  .hero h1 { font-size:2rem; line-height:1.2; }
  .hero-subtitle { font-size:1rem; margin-bottom:1.25rem; }
  .section-header h2 { font-size:clamp(1.4rem, 5vw, 1.75rem); }
  nav { padding-top:calc(.75rem + env(safe-area-inset-top)); padding-bottom:.5rem; padding-left:calc(1rem + env(safe-area-inset-left)); padding-right:calc(1rem + env(safe-area-inset-right)); }
  .nav-links { display:none; }
  section { padding:2.5rem 1rem; }
  .logo-img { width:28px; height:28px; }
  .logo-text { font-size:1.1rem; }
}

/* === Numbered steps replacing horizontal flow === */
.steps-list { list-style:none; margin:0; padding:0; counter-reset: hs-step; display:flex; flex-direction:column; gap:.75rem; }
.step-item { display:flex; gap:.85rem; align-items:flex-start; background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:1rem; }
.step-index { flex:0 0 28px; height:28px; border-radius:50%; background:var(--brand); color:#031210; font-weight:800; display:flex; align-items:center; justify-content:center; }
.step-index::before { counter-increment: hs-step; content: counter(hs-step); }
.step-body { display:flex; flex-direction:column; gap:.15rem; }
.step-title { font-weight:700; }
.step-hint { color:var(--text-muted); font-size:.9rem; }
@media (min-width:900px){
  .steps-list { gap:1rem; }
  .step-item { padding:1.1rem 1.25rem; }
}

/* Hide fixed CTA when modal is open to avoid overlap */
body.modal-open nav .cta-button { display:none; }

.success-screen .success-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }

/* Impact grid for merged Why section */
.impact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0.75rem 1.25rem; }
.impact-grid li { margin:0; }
.impact-grid li i { color:var(--brand); opacity:0.9; }
@media (min-width:900px){ .impact-grid { gap:1rem 2rem; } }

/* Agency Outcomes additions */
.why-footnote { margin:1.5rem auto 0; max-width:800px; font-size:.75rem; letter-spacing:.3px; text-align:center; color:var(--text-muted); opacity:.85; }
.micro-faq { display:none; }
.faq-accordion{ margin:1.25rem auto 0; max-width:900px; display:flex; flex-direction:column; gap:.75rem; }
.faq-item{ background:var(--bg); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:1rem 1.1rem; position:relative; font-weight:700; display:flex; align-items:center; gap:.6rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item .faq-question{ color:var(--text); }
.faq-item .faq-answer{ color:var(--text-muted); padding:0 1.1rem 1rem 1.1rem; }
.faq-item[open]{ border-color:var(--brand); box-shadow:0 0 0 1px rgba(12,202,168,0.15) inset; }
.faq-item summary::after{ content:"+"; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:var(--text-muted); font-weight:800; }
.faq-item[open] summary::after{ content:"−"; color:var(--brand); }
.faq-section{ scroll-margin-top:84px; }
.channel-badges { margin:2.25rem auto 0; font-size:.78rem; letter-spacing:.6px; text-align:center; text-transform:uppercase; color:var(--text-muted); opacity:.9; }

/* FAQ section spacing */
.faq-section { background:var(--section); padding-top:2rem; }

/* Sticky primary CTA on small/medium screens */
@media (max-width:1000px){ nav .cta-button{ position:fixed; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:120; box-shadow:0 8px 20px rgba(0,0,0,.35);} }

/* ICP tabs */
.icp { background:var(--section); }
.icp-tabs { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:0 auto 1rem; max-width:900px; }
.icp-tab { background:transparent; border:1px solid var(--border); color:var(--text); padding:.5rem .9rem; border-radius:999px; cursor:pointer; font-weight:600; }
.icp-tab.active, .icp-tab:hover { border-color:var(--brand); color:var(--brand); }
.icp-panels { max-width:950px; margin:1rem auto 0; display:grid; gap:1rem; }
.icp-panel { display:none; background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:1.5rem; }
.icp-panel.active { display:block; }
.icp-panel ul { margin:0 0 1rem; padding-left:1.1rem; color:var(--text-muted); }
.icp-panel .micro-proof { color:var(--brand); font-weight:600; margin-top:.5rem; list-style:none; }

/* Visuals */
.visuals { max-width:1100px; margin:2rem auto 0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.visual { background:var(--section); border:1px solid var(--border); border-radius:14px; padding:1rem; }
.funnel .funnel-row { display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; border-bottom:1px dashed var(--border); }
.funnel .funnel-row:last-child { border-bottom:none; }
.before-after { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.75rem; }
.ba-card { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.75rem; }
.ba-card .label { color:var(--text-muted); font-size:.8rem; }
.ba-card .value { font-weight:700; font-size:1.1rem; }

/* Flow diagram */
.flow-diagram { display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.flow-step { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; text-align:center; min-width:135px; }
.flow-step span { font-weight:700; display:block; }
.flow-step small { color:var(--text-muted); font-size:.8rem; }
.flow-arrow { color:var(--text-muted); padding:0 .25rem; }

/* Narrow screens adjustments */
@media (max-width:480px){
  #hero-metrics.metric-row, .metric-row { grid-template-columns: 1fr; }
  .trust-strip { font-size:.9rem; }
}

/* Proof & Local */
.proof { padding:2rem 2rem 0; }
.badges { display:flex; gap:1.25rem; align-items:center; justify-content:center; flex-wrap:wrap; color:var(--text-muted); }
.badges .cities { font-size:.9rem; letter-spacing:.4px; }
.micro-quote { text-align:center; margin:1rem auto 0; color:var(--text-muted); max-width:780px; font-style:italic; }

/* Multi-step form extras */
.form-step { display:none; }
.form-step.active { display:block; }
.form-nav { display:flex; gap:.75rem; justify-content:flex-end; margin-top:.5rem; }

/* Hamburger toggle */
.menu-toggle{ display:none; appearance:none; background:transparent; border:0; padding:.5rem; cursor:pointer; flex-direction:column; gap:5px; justify-content:center; align-items:center; }
.menu-toggle .bar{ display:block; width:24px; height:3px; background:var(--text); border-radius:2px; transition:none; }

@media (max-width:1000px){
  /* Layout: hamburger on the far left, then logo, then compact lang on far right */
  nav { justify-content:flex-start; gap:.5rem; }
  .menu-toggle{ display:flex; align-items:center; padding:.35rem .5rem; order:0; min-width:44px; min-height:44px; }
  .logo{ order:1; }
  .lang-switcher{ display:none !important; }
  .lang-compact{ order:2; margin-left:auto; }
}

/* Hide fixed CTA when mobile menu is open */
body.menu-open nav .cta-button { display:none; }

/* Mobile menu as left side drawer */
.mobile-menu{ position:fixed; top:0; bottom:0; left:0; width:min(82vw, 360px); background:rgba(3,4,4,0.98); border-right:1px solid var(--border); z-index:110; transform:translateX(-100%); opacity:0; pointer-events:none; transition:none; overflow-y:auto; }
.mobile-menu .mobile-menu-inner{ padding:calc(1rem + env(safe-area-inset-top)) 1rem 1rem; display:flex; flex-direction:column; gap:.75rem; }
.mobile-link{ color:var(--text); text-decoration:none; padding:.6rem .25rem; border-radius:8px; border:1px solid transparent; }
.mobile-link:active{ background:#0b0c0d; border-color:var(--border); }
.mobile-lang{ display:flex; gap:.5rem; margin-top:.25rem; }
.cta-button.full{ width:100%; margin-top:.25rem; }
/* Open state */
body.menu-open .mobile-menu{ transform:translateX(0); opacity:1; pointer-events:auto; }
/* Backdrop for drawer */
.mobile-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; opacity:0; pointer-events:none; transition:none; }
body.menu-open .mobile-backdrop{ opacity:1; pointer-events:auto; }

/* Mobile-specific language buttons (top bar) */
.lang-compact{ display:none; gap:.4rem; align-items:center; }
.lang-compact .lang-btn{ font-size:.8rem; padding:.25rem .45rem; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:6px; }

/* Show compact language in top bar on small screens, hide full lang-switcher */
@media (max-width:1000px){
  .lang-compact{ display:flex; }
}

/* Remove Menu label text (icon only) */

/* Drawer uses full height; no top offset needed */

/* ===== NEW STYLES FOR REDESIGN ===== */

/* Language buttons */
.lang-btn {
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-muted);
  padding:.35rem .65rem;
  border-radius:6px;
  cursor:pointer;
  font-size:.85rem;
  font-weight:600;
  transition:all .2s;
}
.lang-btn:hover, .lang-btn.active {
  border-color:var(--brand);
  color:var(--brand);
}

/* Feature cards for new Features section */
.feature-card {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:2rem;
  text-align:center;
  transition:all .3s;
}
.feature-card:hover {
  border-color:var(--brand);
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(12,202,168,0.1);
}
.feature-card h3 {
  margin:0 0 .75rem;
  font-size:1.1rem;
  line-height:1.3;
}
.feature-card p {
  margin:0;
  color:var(--text-muted);
  font-size:.95rem;
  text-align:left;
}

/* Pricing section */
.pricing {
  background:var(--section);
}
.pricing-tiers {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  max-width:1200px;
  margin:2rem auto;
}
.pricing-card {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:2rem 1.5rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:all .3s;
}
.pricing-card:hover {
  transform:translateY(-4px);
  border-color:var(--brand);
}
.pricing-card.highlight {
  border:2px solid var(--brand);
  background:rgba(12,202,168,0.05);
  position:relative;
}
.pricing-card.highlight::before {
  content:"RECOMMENDED";
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--brand);
  color:#031210;
  padding:.25rem .75rem;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.5px;
}
.pricing-card h3 {
  margin:0;
  font-size:1.3rem;
  color:var(--text);
}
.pricing-card .price {
  font-size:1.8rem;
  font-weight:800;
  color:var(--brand);
  margin:.5rem 0;
}
.pricing-card p {
  margin:0;
  color:var(--text-muted);
  font-size:.9rem;
  line-height:1.5;
  flex:1;
}
.pricing-card .cta-button {
  margin-top:auto;
}

/* Step numbers for How It Works */
.step-number {
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--brand);
  color:#031210;
  font-weight:800;
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
}
.steps-vertical .step {
  position:relative;
  display:flex;
  flex-direction:column;
}
.steps-vertical .step:not(:last-child)::after {
  content:"";
  position:absolute;
  left:24px;
  top:72px;
  bottom:-2rem;
  width:2px;
  background:linear-gradient(to bottom, var(--brand) 0%, transparent 100%);
  opacity:0.3;
}

/* Trust strip in hero */
.trust-strip {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:.95rem;
  margin-top:1.5rem;
}
.trust-strip span {
  display:flex;
  align-items:center;
  gap:.4rem;
}

/* Why matters callout */
.why-matters {
  margin-top:2rem;
  padding:1rem;
  background:#0b0c0d;
  border:1px solid var(--border);
  border-radius:12px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
}

/* Responsive adjustments for new sections */
@media (max-width:780px) {
  .pricing-tiers {
    grid-template-columns:1fr;
  }
  .feature-card {
    padding:1.5rem;
  }
  .step-number {
    flex-shrink:0;
    width:40px;
    height:40px;
    font-size:1.2rem;
  }
  .steps-vertical .step:not(:last-child)::after {
    left:20px;
    top:64px;
  }
}