:root{
  --ink:#11202e; --ink-2:#1b3247; --sand:#f7f3ea; --sand-2:#efe6d6;
  --sunrise:#ee6c2b; --amber:#f4a64d; --sea:#2f6f7e;
  --text:#22323f; --muted:#5f7080; --line:rgba(17,32,46,0.12);
  --horizon:linear-gradient(90deg,var(--sunrise),var(--amber));
  --shadow:0 18px 50px -22px rgba(17,32,46,0.45); --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--text);background:var(--sand);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.08;letter-spacing:-0.015em;color:var(--ink)}
a{color:inherit}
.wrap{width:min(1060px,92vw);margin-inline:auto}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-logo{height:40px;width:auto;display:block}
.brand-tag{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;padding-left:.7rem;border-left:1px solid var(--line)}
.nav-links{display:flex;align-items:center;gap:1.35rem}
.nav-links a{font-size:.9rem;text-decoration:none;color:var(--ink-2);font-weight:500}
.nav-links a:hover{color:var(--sunrise)}
.btn{display:inline-block;font-weight:700;font-size:.95rem;text-decoration:none;padding:.7rem 1.3rem;border-radius:999px;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer}
.btn-primary{background:var(--sunrise);color:#fff;box-shadow:0 10px 24px -10px rgba(238,108,43,.7)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--sand)}
.btn-dark:hover{transform:translateY(-2px)}
.nav .btn{padding:.5rem 1.1rem}

/* page hero */
.page-hero{color:var(--sand);background:radial-gradient(120% 90% at 80% -10%,rgba(238,108,43,.4),transparent 55%),radial-gradient(90% 80% at 10% 110%,rgba(47,111,126,.5),transparent 60%),linear-gradient(160deg,#0c1a26 0%,var(--ink) 55%,var(--ink-2) 100%)}
.page-hero .wrap{padding:3.4rem 0 3.6rem}
.crumbs{font-size:.8rem;color:rgba(247,243,234,.65);margin:0 0 1.1rem}
.crumbs a{color:var(--amber);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.page-hero h1{color:#fff;font-size:clamp(1.9rem,4.6vw,3.1rem);margin:0 0 .9rem;max-width:22ch;font-weight:800}
.page-hero p.lead{color:rgba(247,243,234,.85);font-size:1.1rem;max-width:60ch;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--amber);margin-bottom:1rem}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--horizon);border-radius:2px}

/* content */
main.page{padding:3.2rem 0 4rem}
.prose{max-width:70ch}
.prose h2{font-size:1.7rem;margin:2.4rem 0 .8rem}
.prose h3{font-size:1.2rem;margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.05rem}
.prose ul{margin:0 0 1.05rem;padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.prose .note{font-size:.85rem;color:var(--muted);border-left:3px solid var(--amber);padding:.6rem .9rem;background:#fff;border-radius:0 10px 10px 0}
.grid{display:grid;gap:1.1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.6rem;text-decoration:none;display:block;transition:transform .15s ease,box-shadow .15s ease}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card h3{margin:0 0 .4rem;font-size:1.12rem}
.card p{margin:0;font-size:.93rem;color:var(--muted)}
.card .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--sunrise);display:block;margin-bottom:.5rem}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
.cmp th,.cmp td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{background:var(--ink);color:var(--sand);font-family:"Bricolage Grotesque"}
.cmp thead th:last-child{color:var(--amber)}
.cmp tr:last-child td{border-bottom:none}
.cmp td:first-child{font-weight:600;color:var(--ink);width:22%}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:1.05rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:"Bricolage Grotesque";font-weight:600;font-size:1.1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sunrise);font-weight:700;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.8rem 0 0;color:var(--muted);max-width:72ch}

/* timeline */
.timeline{list-style:none;margin:1.4rem 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--sand-2)}
.timeline li{position:relative;padding:0 0 1.5rem 2.4rem}
.timeline li::before{content:"";position:absolute;left:3px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--horizon);border:3px solid var(--sand)}
.timeline b{display:block;color:var(--ink);font-family:"Bricolage Grotesque";font-size:1.05rem}
.timeline span{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sunrise)}
.timeline p{margin:.3rem 0 0;color:var(--muted);font-size:.95rem;max-width:64ch}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.panel.dark{background:var(--ink);color:var(--sand);border-color:transparent}
.panel h3{margin:0 0 1rem}
.panel.dark h3{color:#fff}
.panel label{display:block;font-size:.8rem;font-weight:700;color:var(--sunrise);margin:.85rem 0 .3rem}
.panel.dark label{color:var(--amber)}
.panel input,.panel select{width:100%;padding:.7rem .8rem;border-radius:10px;border:1px solid var(--line);font-family:inherit;font-size:1rem;background:var(--sand)}
.panel.dark input,.panel.dark select{background:rgba(11,20,30,.55);color:var(--sand);border-color:rgba(247,243,234,.2)}
.result{margin-top:1.4rem;background:linear-gradient(135deg,#173040,var(--ink-2));color:var(--sand);border-radius:var(--radius);padding:1.7rem}
.result .row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(247,243,234,.12);font-size:1rem}
.result .row:last-child{border-bottom:none}
.result .row b{font-family:"Bricolage Grotesque";font-size:1.15rem;color:#fff}
.result .delta b{color:var(--amber);font-size:1.5rem}
.smallprint{font-size:.78rem;color:var(--muted);margin-top:1rem;max-width:72ch}

/* CTA band */
.cta-band{background:var(--horizon);color:#2a1505;margin-top:3.4rem;border-radius:18px}
.cta-band .inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.2rem;padding:2rem 2.2rem}
.cta-band h2{margin:0;color:#2a1505;font-size:clamp(1.3rem,2.6vw,1.8rem);max-width:24ch}
.cta-band p{margin:.3rem 0 0;color:rgba(42,21,5,.8);font-size:.98rem}

/* footer */
footer.site{background:#0b141d;color:rgba(247,243,234,.7);padding:2.6rem 0;font-size:.9rem;margin-top:4rem}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem}
.foot-logo{display:inline-block;background:#fff;border-radius:10px;padding:.45rem .75rem;margin-bottom:.8rem;line-height:0}
.foot-logo img{height:30px;width:auto;display:block}
footer a{color:var(--amber);text-decoration:none}
footer .cols{display:flex;gap:2.6rem;flex-wrap:wrap}
footer .cols h4{margin:0 0 .5rem;color:var(--sand);font-family:"Bricolage Grotesque";font-size:.95rem}
footer .cols ul{list-style:none;margin:0;padding:0}
footer .cols li{margin-bottom:.35rem}
footer .legal{max-width:52ch;font-size:.78rem;color:rgba(247,243,234,.42)}

@media(max-width:880px){
  .grid-3,.grid-2,.calc{grid-template-columns:1fr}
  .nav-links a:not(.btn){display:none}
}