:root{
--ink:#0f1e2e;--ink2:#3d5166;--line:#dde5ec;--bg:#fff;--soft:#f4f8fb;
--brand:#0d6e8c;--brand-d:#08536b;--accent:#e8f4f8;--warn:#fff8e6;--warn-b:#e0b34a;
--max:1120px;--r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
font:400 17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-d)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.22;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(1.85rem,5vw,3rem)}
h2{font-size:clamp(1.45rem,3.4vw,2.1rem);margin-top:0}
h3{font-size:1.12rem}
p{margin:0 0 1em}
section{padding:60px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

/* header */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{font-weight:800;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{color:var(--brand)}
nav{margin-left:auto;display:flex;align-items:center;gap:22px}
nav a{color:var(--ink2);text-decoration:none;font-size:.93rem;font-weight:500}
nav a:hover{color:var(--brand)}
.navcall{background:var(--brand);color:#fff!important;padding:9px 16px;border-radius:99px;font-weight:700;font-size:.93rem;white-space:nowrap}
@media(max-width:480px){.navcall{padding:8px 13px;font-size:.87rem}.ncw{display:none}.brand{font-size:.95rem}}
@media(max-width:360px){.brand span{display:none}}
@media(max-width:820px){nav a:not(.navcall){display:none}}

/* hero */
.hero{background:linear-gradient(160deg,#0f3c50 0%,#0d6e8c 55%,#149bb5 100%);color:#fff;
padding:66px 0 72px;border-top:0}
.hero h1{color:#fff;max-width:17ch}
.hero .lede{font-size:1.14rem;color:#dbeef5;max-width:56ch;margin-bottom:22px}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:0;list-style:none}
.badges li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
padding:7px 14px;border-radius:99px;font-size:.87rem;font-weight:600}
.herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
@media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:34px}}
.cta{display:inline-block;background:#fff;color:var(--brand-d);font-weight:800;
padding:15px 28px;border-radius:var(--r);text-decoration:none;font-size:1.08rem}
.cta:hover{background:#eaf6fa}
.subcta{display:block;margin-top:10px;font-size:.9rem;color:#cfe7ef}

/* form */
.card{background:#fff;color:var(--ink);border-radius:14px;padding:26px;
box-shadow:0 14px 40px rgba(8,40,60,.22)}
.card h2{font-size:1.3rem;margin-bottom:4px}
.card .note{font-size:.86rem;color:var(--ink2);margin-bottom:18px}
label{display:block;font-size:.84rem;font-weight:700;margin:0 0 5px;color:var(--ink2)}
input,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:8px;
font:inherit;font-size:16px;margin-bottom:13px;background:#fdfeff;color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
textarea{min-height:92px;resize:vertical}
button{width:100%;background:var(--brand);color:#fff;border:0;padding:15px;
border-radius:var(--r);font:inherit;font-weight:800;font-size:1.05rem;cursor:pointer}
button:hover{background:var(--brand-d)}

/* grids */
.grid{display:grid;gap:22px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:620px){.g4,.g2{grid-template-columns:1fr}}
.box{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--soft)}
.box h3{margin-bottom:6px}
.box p{margin:0;font-size:.96rem;color:var(--ink2)}
.mark{font-size:1.4rem;line-height:1;margin-bottom:10px;color:var(--brand)}

.notice{background:var(--warn);border-left:4px solid var(--warn-b);
padding:20px 22px;border-radius:var(--r);margin:34px 0 0}
.notice h3{margin-bottom:6px}
.notice p{margin:0;font-size:.97rem}

.price{background:var(--accent);border:1px solid #bcdfe9;border-radius:var(--r);
padding:30px;text-align:center;margin-bottom:22px}
.price .big{font-size:clamp(2rem,6vw,2.9rem);font-weight:800;color:var(--brand-d);letter-spacing:-.02em}
.price .sub{font-size:.95rem;color:var(--ink2);max-width:60ch;margin:8px auto 0}

ol.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:18px;
grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){ol.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){ol.steps{grid-template-columns:1fr}}
ol.steps li{counter-increment:s;border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#fff}
ol.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;
border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:.95rem;margin-bottom:12px}
ol.steps h3{margin-bottom:5px}
ol.steps p{margin:0;font-size:.95rem;color:var(--ink2)}

.areas{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0 0 16px;list-style:none}
.areas li a,.areas li span{display:block;border:1px solid var(--line);background:#fff;
padding:9px 16px;border-radius:99px;font-size:.93rem;font-weight:600;text-decoration:none;color:var(--ink)}
.areas li a:hover{border-color:var(--brand);color:var(--brand)}

details{border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:11px;background:#fff}
details[open]{background:var(--soft)}
summary{font-weight:700;cursor:pointer;font-size:1.02rem}
details p{margin:11px 0 0;color:var(--ink2);font-size:.97rem}

.final{background:var(--soft);text-align:center}
.final .cta{background:var(--brand);color:#fff}
.final .cta:hover{background:var(--brand-d)}
.phone{display:inline-block;font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:800;
color:var(--brand-d);text-decoration:none;margin:6px 0 18px;letter-spacing:-.02em}

footer{background:#0f1e2e;color:#9fb4c6;padding:44px 0;font-size:.92rem}
footer a{color:#7fd3ec}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
footer strong{color:#fff;display:block;margin-bottom:7px}
.fine{border-top:1px solid #23394d;margin-top:30px;padding-top:20px;font-size:.85rem;color:#7d93a6}