/* ============================================================
   AnswerCatch — Global Stylesheet  (v2 — premium redesign)
   AI Receptionist & Missed-Call Recovery for Home Services
   ============================================================ */

:root {
  /* Brand palette — deep midnight + electric blue → cyan */
  --navy: #060b1a;
  --navy-2: #0a1430;
  --navy-3: #0f1d44;
  --blue: #2f6bff;
  --blue-2: #4d8bff;
  --blue-dark: #1f4fd6;
  --indigo: #5b5bf0;
  --cyan: #22d3ee;
  --accent: #10d9b0;      /* success / booking */
  --blue-light: #eaf1ff;
  --ink: #0c1530;
  --body: #4a556e;
  --muted: #7b87a3;
  --line: #e7ebf3;
  --line-soft: #eef2f8;
  --bg: #ffffff;
  --bg-soft: #f6f8fd;
  --bg-alt: #eef3fc;
  --white: #ffffff;
  --star: #ffb020;

  --grad: linear-gradient(120deg, #5b5bf0 0%, #2f6bff 50%, #22d3ee 100%);
  --grad-btn: linear-gradient(120deg, #3f78ff 0%, #2f6bff 55%, #4bb9ff 100%);
  --grad-dark: radial-gradient(1200px 700px at 78% -12%, #16307a 0%, transparent 58%), radial-gradient(900px 600px at 8% 8%, #241a6b 0%, transparent 55%), linear-gradient(165deg, #060b1a 0%, #0a1430 55%, #0c1c46 100%);

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 12px rgba(12, 21, 48, 0.06);
  --shadow: 0 16px 40px rgba(12, 21, 48, 0.10);
  --shadow-lg: 0 30px 70px rgba(12, 21, 48, 0.18);
  --glow: 0 0 0 1px rgba(47,107,255,.14), 0 20px 50px rgba(47,107,255,.18);
  --container: 1180px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--blue-dark); }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.14; font-weight: 800; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }
h3 { font-size: 1.28rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

section { padding: 92px 0; }
.section-soft { background: var(--bg-soft); }
.section-alt { background: linear-gradient(180deg, #eef3fc 0%, #f6f8fd 100%); }

.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--blue); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.section-head { max-width: 740px; margin: 0 auto 56px; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.1rem; margin-top: 14px; }
.lead { font-size: 1.16rem; color: var(--body); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  padding: 15px 28px; border-radius: 14px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; line-height: 1;
}
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: 0 10px 26px rgba(47,107,255,.36); }
.btn-primary:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(47,107,255,.46); }
.btn-primary::after { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s ease; }
.btn-primary:hover::after { left: 160%; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.06); color:#fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 1.06rem; }
.btn-block { width: 100%; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(231,235,243,.9);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.03em; }
.brand:hover { color: var(--ink); }
.brand .logo-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--grad-btn);
  display: grid; place-items: center; color:#fff; box-shadow: 0 6px 16px rgba(47,107,255,.42);
}
.brand .logo-mark svg { width: 21px; height: 21px; }
.brand b { background: var(--grad); -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color: transparent; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a {
  color: var(--ink); font-weight: 600; font-size: 0.97rem; padding: 9px 15px; border-radius: 10px; position: relative;
}
.nav-links a:hover { background: var(--bg-alt); color: var(--blue); }
.nav-links a.active { color: var(--blue); }
.nav-cta { margin-left: 10px; }
.nav-cta .btn { padding: 11px 21px; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px;
  width: 44px; height: 44px; border-radius: 10px;
}
.nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; margin: 5px auto; transition: all .25s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--grad-dark);
  color: #eaf1fb; padding: 108px 0 116px;
}
.hero::before {
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 78%);
}
.orb { position:absolute; border-radius:50%; filter: blur(60px); opacity:.55; pointer-events:none; }
.orb.o1 { width:420px; height:420px; background: radial-gradient(circle, #2f6bff, transparent 70%); top:-120px; right:-80px; animation: float1 14s ease-in-out infinite; }
.orb.o2 { width:360px; height:360px; background: radial-gradient(circle, #22d3ee, transparent 70%); bottom:-140px; left:-100px; opacity:.4; animation: float2 16s ease-in-out infinite; }
.orb.o3 { width:300px; height:300px; background: radial-gradient(circle, #5b5bf0, transparent 70%); top:30%; left:40%; opacity:.3; animation: float1 20s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(-24px,26px);} }
@keyframes float2 { 0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,-24px);} }

.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 60px; align-items: center; }
.hero h1 { color: #fff; }
.hero h1 .grad-text { background: linear-gradient(120deg,#7db4ff, #b9e6ff 60%, #7ff0dc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero .subhead { font-size: 1.24rem; color: #b6c8e6; margin: 22px 0 34px; max-width: 560px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:9px; background: rgba(16,217,176,.12);
  color:#68f0d3; border:1px solid rgba(16,217,176,.32); padding:8px 16px; border-radius: 999px;
  font-size:.84rem; font-weight:700; margin-bottom:24px; letter-spacing:.02em; backdrop-filter: blur(6px);
}
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:#10d9b0; animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(16,217,176,.6);} 70%{box-shadow:0 0 0 9px rgba(16,217,176,0);} 100%{box-shadow:0 0 0 0 rgba(16,217,176,0);} }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-trust { margin-top: 32px; display:flex; align-items:center; gap: 16px; color:#8ba1c2; font-size:.9rem; flex-wrap: wrap; }
.hero-trust .stars { color: var(--star); letter-spacing: 2px; font-size:1rem; }

/* Hero call card — glass */
.call-card {
  position: relative;
  background: rgba(255,255,255,0.9); border:1px solid rgba(255,255,255,.6);
  border-radius: 22px; padding: 24px; box-shadow: var(--shadow-lg); color: var(--ink);
  backdrop-filter: blur(10px);
}
.call-card::before { content:""; position:absolute; inset:-1px; border-radius:23px; padding:1px; background: var(--grad); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.5; pointer-events:none; }
.call-card .cc-top { display:flex; align-items:center; justify-content: space-between; margin-bottom: 18px; }
.call-card .cc-live { display:flex; align-items:center; gap:8px; font-weight:800; font-size:.86rem; color:#0e9e83; }
.call-card .cc-live .dot { width:9px;height:9px;border-radius:50%;background:#10d9b0; animation: pulse 2s infinite; }
.call-card .cc-time { color: var(--muted); font-size:.82rem; font-weight:700; }
.bubble { padding: 12px 15px; border-radius: 15px; margin-bottom: 10px; font-size: .95rem; max-width: 86%; line-height:1.45; animation: rise .5s ease both; }
.bubble.ai { background: var(--blue-light); color: #16357e; border-bottom-left-radius: 5px; }
.bubble.caller { background: #f1f4fa; color: var(--ink); margin-left: auto; border-bottom-right-radius: 5px; }
.bubble:nth-child(3){animation-delay:.1s;} .bubble:nth-child(4){animation-delay:.2s;} .bubble:nth-child(5){animation-delay:.3s;}
@keyframes rise { from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }
.bubble small { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; opacity:.55; margin-bottom:3px; }
.cc-booked {
  margin-top: 14px; background: linear-gradient(120deg, rgba(16,217,176,.14), rgba(34,211,238,.12)); border:1px solid rgba(16,217,176,.4);
  border-radius: 14px; padding: 13px 15px; display:flex; align-items:center; gap:11px; font-weight:800; color:#0c8f77; font-size:.94rem;
}
.cc-booked svg { width:22px; height:22px; flex-shrink:0; }

/* Floating stat chips on hero card */
.chip {
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 15px; box-shadow: var(--shadow);
  display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink); font-size:.85rem; z-index:3;
}
.chip .ci { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--blue-light);color:var(--blue); }
.chip .ci svg{width:17px;height:17px;}
.chip small{display:block; font-weight:600; color:var(--muted); font-size:.72rem;}
.chip.c1 { top:-18px; left:-26px; animation: bob 5s ease-in-out infinite; }
.chip.c2 { bottom:-20px; right:-22px; animation: bob 6s ease-in-out infinite .5s; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }

/* ---------- Trust marquee ---------- */
.trustbar { background:#fff; border-bottom:1px solid var(--line-soft); padding: 26px 0; }
.trustbar .tb-label { text-align:center; color:var(--muted); font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display:flex; gap:56px; width:max-content; animation: scroll 26s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.trade { display:flex; align-items:center; gap:11px; color:#8794ad; font-weight:800; font-size:1.05rem; white-space:nowrap; }
.trade svg { width:26px; height:26px; color:var(--blue); opacity:.85; }

/* ---------- Cards / Grid ---------- */
.grid { display: grid; gap: 26px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; overflow: hidden;
}
.card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad); transform: scaleX(0); transform-origin:left; transition: transform .3s ease; }
.card:hover { transform: translateY(-6px); box-shadow: var(--glow); border-color: rgba(47,107,255,.28); }
.card:hover::before { transform: scaleX(1); }
.card .icon {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(135deg, #eaf1ff, #e3ecff); color: var(--blue); margin-bottom: 20px;
  box-shadow: inset 0 0 0 1px rgba(47,107,255,.12);
}
.card .icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--body); font-size: 1rem; }

/* Problem / Solution */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.panel { border-radius: var(--radius); padding: 36px 32px; }
.panel-problem { background: linear-gradient(180deg,#fff6f4,#fff); border:1px solid #ffdcd4; }
.panel-solution { background: linear-gradient(180deg,#eefaf6,#fff); border:1px solid #c6efe3; }
.panel h3 { display:flex; align-items:center; gap:10px; margin-bottom: 18px; font-size:1.4rem; }
.panel ul { list-style: none; }
.panel li { position: relative; padding-left: 34px; margin-bottom: 14px; color: var(--ink); font-size: 1.02rem; }
.panel li::before {
  position:absolute; left:0; top:1px; width:23px; height:23px; border-radius:50%;
  display:grid; place-items:center; font-size:.72rem; font-weight:900; color:#fff;
}
.panel-problem li::before { content:"✕"; background:#f0603f; }
.panel-solution li::before { content:"✓"; background:#10d9b0; }

/* ---------- Steps ---------- */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; counter-reset: step; }
.step { position: relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 36px 30px 32px; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; }
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.step .num {
  counter-increment: step; width: 50px; height: 50px; border-radius: 14px;
  background: var(--grad-btn); color:#fff; font-weight:900; font-size:1.3rem;
  display:grid; place-items:center; margin-bottom: 20px; box-shadow: 0 8px 20px rgba(47,107,255,.34);
}
.step .num::before { content: counter(step); }
.step h3 { margin-bottom: 10px; }
.step p { font-size:1rem; }

/* ---------- Stats strip ---------- */
.stats { background: var(--grad-dark); color:#fff; position: relative; overflow:hidden; }
.stats::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.5;}
.stats .container { position: relative; z-index:1; }
.stats .grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align:center; }
.stat .n { font-size: clamp(2.3rem,4.2vw,3.2rem); font-weight:900; letter-spacing:-.04em; line-height:1; background: linear-gradient(120deg,#8ec2ff,#c9ecff 60%,#8ff0dc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .l { color:#93a8c8; font-size:.98rem; margin-top:12px; font-weight:500; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--grad-btn);
  color:#fff; border-radius: 28px; padding: 62px; text-align:center; box-shadow: 0 30px 70px rgba(47,107,255,.4);
  position: relative; overflow:hidden;
}
.cta-band::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px;opacity:.5;}
.cta-band::before{content:""; position:absolute; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%); top:-180px; right:-60px;}
.cta-band > * { position: relative; z-index:1; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#e2ebff; font-size:1.14rem; max-width:620px; margin:16px auto 30px; }
.cta-band .hero-actions { justify-content:center; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--grad-dark); color:#eaf1fb; padding: 88px 0 78px; text-align:center;
}
.page-hero::before {
  content:""; position:absolute; inset:0; opacity:.45;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(110% 90% at 50% 0%, #000 45%, transparent 80%); mask-image: radial-gradient(110% 90% at 50% 0%, #000 45%, transparent 80%);
}
.page-hero .container { position: relative; z-index:2; }
.page-hero h1 { color:#fff; }
.page-hero p { color:#b6c8e6; font-size:1.16rem; max-width:660px; margin: 18px auto 0; }

/* ---------- Feature rows ---------- */
.feature-row { display:grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items:center; margin-bottom: 78px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse .fr-media { order: 2; }
.fr-media { position: relative; background: var(--grad-dark); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); overflow:hidden; }
.fr-media::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(47,107,255,.4),transparent 70%);top:-100px;right:-70px;filter:blur(30px);}
.fr-media > * { position: relative; z-index:1; }
.fr-text .badge-step { display:inline-flex; align-items:center; gap:10px; font-weight:900; color:var(--blue); margin-bottom:16px; }
.fr-text .badge-step span { width:36px;height:36px;border-radius:11px;background:var(--grad-btn);color:#fff;display:grid;place-items:center; box-shadow:0 6px 14px rgba(47,107,255,.3); }
.fr-text ul { list-style:none; margin-top:18px; }
.fr-text li { position:relative; padding-left:32px; margin-bottom:12px; color:var(--ink); }
.fr-text li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.72rem;font-weight:900;display:grid;place-items:center;}

/* transcript mock inside media */
.mock-line { display:flex; gap:11px; margin-bottom:13px; align-items:flex-start; }
.mock-line .av { width:36px;height:36px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;font-weight:900;font-size:.78rem; }
.mock-line .av.ai { background:var(--grad-btn); color:#fff; }
.mock-line .av.you { background:#28376a; color:#bcd2f5; }
.mock-line .txt { background:rgba(255,255,255,.08); color:#dbe7f7; padding:11px 14px; border-radius:12px; font-size:.92rem; border:1px solid rgba(255,255,255,.06); }

/* ---------- Pricing ---------- */
.pricing-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; align-items: stretch; }
.price-card {
  position: relative; background:#fff; border:1px solid var(--line); border-radius: 22px; padding: 36px 30px;
  display:flex; flex-direction:column; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; overflow:hidden;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.price-card.featured { border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; box-shadow: var(--glow); transform: scale(1.03); }
.price-card.featured:hover { transform: scale(1.03) translateY(-6px); }
.price-badge { position:absolute; top:0; right:0; background:var(--grad-btn); color:#fff; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; padding:7px 16px; border-bottom-left-radius:14px; box-shadow:0 6px 14px rgba(47,107,255,.3); }
.price-card h3 { font-size:1.34rem; }
.price-card .tag { color:var(--muted); font-size:.95rem; margin:6px 0 20px; min-height: 42px; }
.price-card .amt { display:flex; align-items:baseline; gap:6px; }
.price-card .amt .cur { font-size:1.5rem; font-weight:800; color:var(--ink); }
.price-card .amt .val { font-size:3.2rem; font-weight:900; color:var(--ink); letter-spacing:-.04em; line-height:1; }
.price-card .amt .per { color:var(--muted); font-weight:600; }
.price-card .setup { font-size:.9rem; color:var(--muted); margin:12px 0 4px; }
.price-card .setup b { color: var(--ink); }
.price-card .divider { height:1px; background:var(--line); margin:24px 0; }
.price-card ul { list-style:none; margin-bottom: 28px; flex-grow:1; }
.price-card li { position:relative; padding-left:30px; margin-bottom:13px; color:var(--body); font-size:.98rem; }
.price-card li::before{content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--blue-light);color:var(--blue);font-size:.7rem;font-weight:900;display:grid;place-items:center;}
.price-card li.muted { color: var(--muted); }
.price-card li.muted::before { content:"—"; background:#eef1f6; color:var(--muted); }
.pricing-note { text-align:center; margin-top: 44px; }
.pricing-note .save-line { display:inline-block; background: linear-gradient(120deg,#eaf1ff,#e6fbf6); color:#123a86; font-weight:700; padding:14px 24px; border-radius:14px; border:1px solid #d6e4ff; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 840px; margin: 0 auto; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius: 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm); overflow:hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.faq-item.open { border-color: rgba(47,107,255,.3); box-shadow: var(--shadow); }
.faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding: 22px 24px; font-family:var(--font); font-size:1.08rem; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q .chev { width:22px;height:22px;flex-shrink:0;transition:transform .25s ease; color:var(--blue); }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p { padding: 0 24px 22px; color:var(--body); }
.faq-item.open .faq-a { max-height: 800px; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items:start; }
.contact-info .info-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:16px; box-shadow:var(--shadow-sm); display:flex; gap:15px; align-items:flex-start; transition: transform .2s ease, box-shadow .2s ease; }
.contact-info .info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-info .info-card .ic { width:46px;height:46px;border-radius:12px;background:var(--blue-light);color:var(--blue);display:grid;place-items:center;flex-shrink:0; }
.contact-info .info-card h4 { color:var(--ink); font-size:1.02rem; margin-bottom:3px; }
.contact-info .info-card p, .contact-info .info-card a { color:var(--body); font-size:.98rem; }
.form-wrap { background:#fff; border:1px solid var(--line); border-radius:22px; padding: 36px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display:block; font-weight:700; color:var(--ink); font-size:.92rem; margin-bottom:7px; }
.field input, .field textarea {
  width:100%; font-family:var(--font); font-size:1rem; color:var(--ink);
  padding: 14px 16px; border:1.5px solid var(--line); border-radius:12px; background:var(--bg-soft); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(47,107,255,.12); }
.field textarea { resize:vertical; min-height: 130px; }
.form-note { font-size:.85rem; color:var(--muted); margin-top:14px; text-align:center; }
.form-success {
  display:none; background: linear-gradient(180deg, rgba(16,217,176,.1), rgba(34,211,238,.06)); border:1px solid rgba(16,217,176,.4); border-radius:18px;
  padding: 30px; text-align:center; color:#0c8f77;
}
.form-success.show { display:block; animation: rise .4s ease both; }
.form-success svg { width:52px; height:52px; margin: 0 auto 14px; }
.form-success h3 { color:#0c8f77; margin-bottom:6px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color:#9db2d4; padding: 66px 0 28px; border-top:1px solid rgba(255,255,255,.05); }
.footer-grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.footer-brand .brand { color:#fff; margin-bottom:16px; }
.footer-brand p { color:#7f96bd; font-size:.96rem; max-width: 350px; }
.footer-col h5 { color:#fff; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:11px; }
.footer-col a { color:#9db2d4; font-size:.96rem; }
.footer-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:.9rem; color:#7189b1; }
.footer-bottom a { color:#9db2d4; }

/* ---------- Utility ---------- */
.text-center { text-align:center; }
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 54px; }
  .hero .subhead { max-width: none; }
  .feature-row { grid-template-columns: 1fr; gap: 30px; }
  .feature-row.reverse .fr-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .stats .grid-4 { grid-template-columns: repeat(2,1fr); gap: 38px 20px; }
}
@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
    background:#fff; padding: 16px 20px 26px; border-bottom:1px solid var(--line); box-shadow: var(--shadow);
    transform: translateY(-140%); transition: transform .32s ease; z-index: 99;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { padding: 13px 14px; font-size: 1.05rem; border-radius: 10px; }
  .nav-links a:hover { background: var(--bg-alt); }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; padding: 14px; }
}
@media (max-width: 800px) {
  section { padding: 64px 0; }
  .hero { padding: 78px 0 84px; }
  .grid-3, .steps, .split, .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-6px); }
  .cta-band { padding: 44px 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .chip { display:none; }
}
@media (max-width: 470px) {
  .stats .grid-4 { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-band .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity:1; transform:none; }
}