/* top bar */
.topbar { display:flex; align-items:center; justify-content:space-between; max-width:900px; margin:0 auto; padding:14px 18px; }
.topbar .brand { font-weight:800; color:var(--navy); font-size:18px; }

/* hero */
.hero { background:linear-gradient(160deg, var(--navy-light), var(--cream)); text-align:center; padding:40px 0 50px; }
.hero h1 { font-size:46px; margin:8px 0 6px; }
.hero .tag { font-size:19px; font-weight:600; color:var(--navy-mid); }
.hero .sub { font-size:16px; color:var(--text-mid); max-width:520px; margin:12px auto 22px; }

/* gates */
.gates { display:grid; gap:14px; }
@media(min-width:560px){ .gates{ grid-template-columns:1fr 1fr; } }
.door { border-radius:18px; padding:26px 20px; color:#fff; text-align:center; transition:transform .14s ease; box-shadow:0 10px 24px rgba(20,40,60,.16); }
.door:hover { transform:translateY(-3px); }
.door.fix { background:linear-gradient(135deg, var(--orange), var(--orange-deep)); }
.door.learn { background:linear-gradient(135deg, var(--navy), var(--navy-mid)); }
.door .t { font-size:24px; font-weight:800; }
.door .s { font-size:14.5px; opacity:.94; margin-top:6px; }

/* problem chips */
.chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }
.chip { background:#fff; border:1px solid var(--border); border-radius:30px; padding:10px 18px; font-weight:600; color:var(--navy); font-size:14.5px; box-shadow:0 1px 3px var(--shadow); }
.muted { color:var(--text-light); font-size:13.5px; text-align:center; margin-top:12px; }

/* inside cards */
.inside { display:grid; gap:14px; margin-top:18px; }
@media(min-width:560px){ .inside{ grid-template-columns:repeat(3,1fr); } }
.icard { background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; text-align:center; box-shadow:0 2px 8px var(--shadow); }
.icard .t { font-weight:800; color:var(--navy); font-size:17px; margin-bottom:4px; }
.icard .s { font-size:14px; color:var(--text-mid); }

/* trust */
.trust { background:var(--navy); color:#fff; border-radius:20px; padding:30px 24px; }
.trust h2 { color:#fff; font-size:24px; }
.trust p { margin-top:10px; opacity:.95; font-size:16px; }
.trust .quotes { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.trust .q { background:rgba(255,255,255,.12); border-radius:12px; padding:8px 14px; font-size:14px; }

/* pricing */
.tiers { display:grid; gap:14px; margin-top:22px; }
@media(min-width:560px){ .tiers{ grid-template-columns:repeat(3,1fr); align-items:stretch; } }
.tier { background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px 18px; text-align:center; position:relative; display:flex; flex-direction:column; }
.tier.best { border:2px solid var(--orange-deep); box-shadow:0 10px 26px rgba(232,133,74,.18); }
.tier .flag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--orange-deep); color:#fff; font-size:11px; font-weight:700; padding:3px 12px; border-radius:14px; white-space:nowrap; }
.tier .nm { font-weight:700; color:var(--navy); font-size:16px; }
.tier .price { font-size:38px; font-weight:800; color:var(--navy); margin:6px 0 0; }
.tier .price small { font-size:15px; font-weight:600; }
.tier .unit { font-size:13px; color:var(--text-light); margin-bottom:14px; }
.tier .soon { background:var(--navy-light); color:var(--navy-mid); border-radius:10px; padding:9px; font-size:13px; font-weight:700; margin-top:auto; }
.tier .btn { margin-top:auto; }

/* final */
.final { text-align:center; }
.final h2 { font-size:28px; }

/* footer */
.foot { text-align:center; color:var(--text-light); font-size:13px; padding:26px 18px; border-top:1px solid var(--border); margin-top:20px; }