:root { --ink:#16222e; --muted:#5d6b79; --line:#dbe3ea; --brand:#b82820; --brand-dark:#8f1f19; --black:#000; --bg:#f7f5f4; --ok:#1e7f4f; --err:#b3261e; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:#fff; }
a { color:var(--brand); }
.top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 2rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { display:flex; align-items:center; text-decoration:none; } .brand img { height:38px; width:auto; display:block; }
.top nav { display:flex; align-items:center; gap:1.2rem; }
.top nav a { text-decoration:none; color:var(--ink); }
.top nav a.on { color:var(--brand); font-weight:600; }
.btn { display:inline-block; background:var(--brand); color:#fff !important; padding:.65rem 1.3rem; border-radius:8px; border:0; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; }
.btn:hover { background:var(--brand-dark); }
.btn.small { padding:.35rem .9rem; }
.btn.ghost { background:transparent; color:var(--brand) !important; border:2px solid var(--brand); padding:.55rem 1.2rem; }
.hero { text-align:center; padding:5rem 1.5rem 4rem; background:linear-gradient(180deg,var(--bg),#fff); }
.hero h1 { font-size:2.6rem; margin:0 0 .6rem; line-height:1.15; }
.hero p { max-width:640px; margin:0 auto 1.2rem; color:var(--muted); font-size:1.15rem; }
.hero .btn + .btn { margin-left:.6rem; }
.features { max-width:1000px; margin:0 auto; padding:2rem 1.5rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem 2rem; }
.features h3 { margin:0 0 .2rem; } .features p { margin:0; color:var(--muted); }
.plans { background:var(--bg); padding:3.5rem 1.5rem; text-align:center; }
.plans h2 { font-size:2rem; margin:0 0 2rem; }
.plans .grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.plan { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.6rem; text-align:left; display:flex; flex-direction:column; }
.plan h3 { margin:0; font-size:1.3rem; }
.price { font-size:2rem; font-weight:700; margin:.4rem 0; } .price small { font-size:.9rem; font-weight:400; color:var(--muted); }
.plan ul { padding-left:1.1rem; margin:.5rem 0 1.4rem; flex:1; }
.plan .btn { text-align:center; }
main.narrow { max-width:560px; margin:2.5rem auto; padding:0 1.5rem; }
.card { border:1px solid var(--line); border-radius:10px; padding:1.2rem; margin:1rem 0; background:#fff; }
.form label { display:block; margin-bottom:1rem; font-weight:600; }
.form input, .form select { display:block; width:100%; margin-top:.3rem; padding:.55rem .7rem; font:inherit; border:1px solid var(--line); border-radius:6px; }
.form small { display:block; font-weight:400; color:var(--muted); }
.summary { width:100%; border-collapse:collapse; } .summary td { padding:.35rem 0; } .summary td:first-child { color:var(--muted); width:35%; }
.flash { padding:.7rem 1rem; border-radius:8px; margin:1rem 0; } .flash.ok { background:#e6f4ec; color:var(--ok); } .flash.error { background:#fbeaea; color:var(--err); }
.muted { color:var(--muted); }
footer { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.5rem 2rem; background:var(--black); color:#bbb; font-size:.9rem; }
footer a { color:#fff; }
.hero .logo-full { display:block; margin:0 auto 1.2rem; width:150px; height:auto; }