:root{
  --ink:#183743;
  --muted:#607985;
  --line:#d8e8ee;
  --wash:#f4f8fa;
  --accent:#96cbe0;
  --accent2:#dff2f9;
  --white:#fff;
  --shadow:0 12px 36px rgba(31,72,88,.08);
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Quicksand,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
a{color:#25667f;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.shell{width:min(1180px,calc(100% - 36px));margin:auto}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:22px;min-height:72px}
.brand{font-family:"Playfair Display",serif;font-weight:800;font-size:24px;color:var(--ink);margin-right:auto}
.nav nav{display:flex;gap:18px;align-items:center}
.nav nav a{color:var(--ink);font-weight:700}
.btn{display:inline-block;border:0;border-radius:9px;background:var(--accent);color:#14323d;padding:12px 18px;font-weight:800;text-decoration:none;cursor:pointer}
.btn:hover{text-decoration:none;filter:brightness(.98)}
.btn.ghost{background:#fff;border:1px solid var(--line)}
.btn.dark{background:var(--ink);color:#fff}
.btn.small{padding:9px 14px}
.hero{padding:86px 0 64px;background:linear-gradient(180deg,#f8fcfd 0,#fff 100%)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.11em;font-size:12px;font-weight:800;color:#44798e}
h1,h2,h3{font-family:"Playfair Display",serif;line-height:1.08;margin:0 0 16px}
h1{font-size:clamp(44px,6vw,72px)}
h2{font-size:clamp(32px,4vw,48px)}
h3{font-size:24px}
.lead{font-size:19px;color:var(--muted);max-width:800px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 16px}
.micro{font-size:13px;color:var(--muted)}
.hero-card{background:#183743;border-radius:24px;padding:18px;box-shadow:0 28px 70px rgba(24,55,67,.24)}
.screen{background:#0f222a;border-radius:15px;overflow:hidden;padding:16px}
.screen-top{display:flex;gap:6px;margin-bottom:14px}
.screen-top span{width:8px;height:8px;background:#96cbe0;border-radius:50%}
.featured{min-height:190px;border-radius:12px;background:linear-gradient(135deg,#365f70,#111d22);display:flex;align-items:end;padding:24px;color:#fff}
.featured strong{display:block;font-family:"Playfair Display",serif;font-size:30px}
.featured em{display:block;font-style:normal;color:#cceaf5;margin-top:8px}
.row-title{color:#fff;margin:18px 0 8px;font-weight:800}
.posters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.posters i{display:block;aspect-ratio:2/3;border-radius:7px;background:linear-gradient(145deg,#6a98aa,#243f4a)}
.section{padding:72px 0}
.section.alt{background:var(--wash)}
.cards,.pricing,.use-grid,.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.cards article,.price-card,.use-card,.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.cards p,.use-card p,.info-card p{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.checklist{display:grid;gap:12px}
.checklist span{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700}
.compare-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-top:28px}
.compare{width:100%;border-collapse:collapse;min-width:860px}
.compare th,.compare td{padding:16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.compare th{background:#f8fbfc}
.compare tr:last-child td{border-bottom:0}
.yes{font-weight:800;color:#1e6c55}
.muted{color:var(--muted)}
.price{font-family:"Playfair Display",serif;font-size:34px;font-weight:800;margin:12px 0}
.price small{font-family:Quicksand,sans-serif;font-size:14px;color:var(--muted)}
.status{margin-top:24px;padding:14px;border:1px dashed #aacbd8;border-radius:10px;color:var(--muted)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tag{font-size:12px;font-weight:800;padding:6px 9px;border-radius:999px;background:var(--accent2)}
.page-hero{padding:62px 0;background:var(--wash);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(40px,5vw,62px)}
.cta{padding:66px 0;background:var(--ink);color:#fff;text-align:center}
.cta p{color:#d5e7ed;max-width:700px;margin:0 auto 24px}
footer{padding:30px 0;border-top:1px solid var(--line);color:var(--muted)}
footer .shell{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:12px 0}
summary{font-weight:800;cursor:pointer}
.kicker{font-weight:800;color:#44798e}
.notice{padding:16px;border-radius:10px;background:#fff7dc;border:1px solid #ecd996}
@media (max-width:900px){
  .hero-grid,.split{grid-template-columns:1fr}
  .cards,.pricing,.use-grid,.mini-grid{grid-template-columns:1fr 1fr}
  .nav nav{display:none}
}
@media (max-width:620px){
  .cards,.pricing,.use-grid,.mini-grid{grid-template-columns:1fr}
  .hero{padding-top:56px}
  .nav-in{min-height:64px}
  h1{font-size:42px}
}