:root{
  --navy:#0B2A43; --navy-2:#264a66; --sky:#2BAAE1; --sky-deep:#1686b8; --leaf:#4EB657; --leaf-deep:#2f8a39;
  --red:#EA2227; --fog:#EAF3F7; --paper:#FBFDFE; --line:#d3e3ec; --ink-soft:#4b6478;
  --radius-lg:22px; --radius-sm:10px;
  --fs-xs:.8125rem; --fs-s:.9375rem; --fs-m:1.0625rem; --fs-l:1.375rem; --fs-xl:clamp(1.75rem,3.2vw,2.5rem); --fs-xxl:clamp(2.35rem,5.4vw,4.1rem);
}
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{margin:0;font-family:'Ubuntu',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:var(--fs-m);line-height:1.6;color:var(--navy);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky-deep)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:4px}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
h1,h2,h3{text-wrap:balance;line-height:1.12;margin:0;font-weight:700;letter-spacing:-.015em}
h2{font-size:var(--fs-xl);max-width:22ch}
h3{font-size:var(--fs-l);font-weight:500;letter-spacing:-.005em}
p{margin:0}
.lead{font-size:1.1875rem;color:var(--ink-soft);max-width:58ch;font-weight:300}
section{padding:clamp(64px,9vw,112px) 0}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,56px)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(251,253,254,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.logo{display:block;width:124px}
.logo svg{width:100%;height:auto;display:block}
.top nav{display:flex;gap:26px;font-size:var(--fs-s)}
.top nav a{color:var(--navy);text-decoration:none;font-weight:500}
.top nav a:hover{color:var(--sky-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;font:500 var(--fs-m)/1 'Ubuntu',sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--sky-deep)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-sm{padding:10px 18px;font-size:var(--fs-s)}
@media (max-width:860px){.top nav{display:none}}

/* hero */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(64px,8vw,104px);background:linear-gradient(180deg,var(--paper) 0%,var(--fog) 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:var(--fs-xxl);max-width:13ch}
.hero .lead{margin-top:24px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.facts{display:grid;grid-template-columns:repeat(4,auto);gap:10px 28px;margin:44px 0 0;padding:0;list-style:none;justify-content:start}
.facts li{font-size:var(--fs-s);color:var(--ink-soft);line-height:1.35}
.facts b{display:block;font-size:1.375rem;color:var(--navy);font-weight:700}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.facts{grid-template-columns:repeat(2,auto)}}

/* review card — the memorable element */
.review{background:#fff;border-radius:var(--radius-lg);padding:30px 30px 26px;box-shadow:0 30px 60px -30px rgba(11,42,67,.35),0 0 0 1px var(--line)}
.review-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:18px;border-bottom:1px dashed var(--line)}
.review-top span{font-size:var(--fs-s);color:var(--ink-soft)}
.score{display:inline-grid;place-items:center;min-width:54px;height:44px;padding:0 10px;border-radius:12px 12px 12px 3px;background:var(--navy);color:#fff;font-weight:700;font-size:1.25rem;position:relative}
.review-top .score span{grid-area:1/1;transition:opacity .4s;color:#fff;font-size:1.25rem}
.score .to{opacity:0}
.review.done .score{background:var(--leaf-deep)}
.review.done .score .from{opacity:0}
.review.done .score .to{opacity:1}
.complaints{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.complaints li{position:relative;width:fit-content;font-size:1.125rem;color:var(--navy);padding:2px 0}
.complaints li::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:2.5px;background:var(--red);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.complaints li.struck{color:#8aa0b1}
.complaints li.struck::after{transform:scaleX(1)}
.resolution{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);font-size:1.125rem;font-weight:500;color:var(--leaf-deep);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.review.done .resolution{opacity:1;transform:none}
.review-note{margin-top:14px;font-size:var(--fs-xs);color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.complaints li::after,.resolution,.score .from,.score .to{transition:none}}

/* problem */
.problems{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.problems article{background:var(--paper);padding:32px clamp(22px,3vw,40px);display:grid;gap:10px;align-content:start}
.problems p{color:var(--ink-soft)}
.problems .guest{font-style:italic;color:var(--navy);font-size:var(--fs-s);border-left:3px solid var(--red);padding-left:12px;margin-top:6px}
@media (max-width:760px){.problems{grid-template-columns:1fr}}

/* cost strip */
.cost{background:var(--navy);color:#fff}
.cost h2{color:#fff}
.cost .lead{color:#c3d7e5}
.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:48px}
.cost-grid div{border-top:2px solid var(--sky);padding-top:20px}
.cost-grid h3{color:#fff;margin-bottom:10px}
.cost-grid p{color:#c3d7e5}
@media (max-width:860px){.cost-grid{grid-template-columns:1fr}}

/* how it works */
.how .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.how figure{margin:0;background:#fff;border-radius:var(--radius-lg);padding:18px;box-shadow:0 0 0 1px var(--line)}
.how figcaption{font-size:var(--fs-xs);color:var(--ink-soft);padding:10px 6px 0}
.points{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:18px}
.points li{padding-left:30px;position:relative}
.points li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(78,182,87,.18)}
.points b{font-weight:500}
@media (max-width:860px){.how .wrap{grid-template-columns:1fr}}

/* segments */
.segments{background:var(--fog)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tab{padding:12px 22px;border-radius:999px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);font:500 var(--fs-m) 'Ubuntu',sans-serif;cursor:pointer}
.tab[aria-selected="true"]{background:var(--navy);color:#fff}
.panel{background:#fff;border-radius:var(--radius-lg);padding:clamp(26px,4vw,48px);display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,4vw,56px);box-shadow:0 0 0 1px var(--line)}
.panel[hidden]{display:none}
.panel h3{font-size:1.75rem;font-weight:700;margin-bottom:14px}
.panel p{color:var(--ink-soft)}
.panel ul{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.panel li{display:grid;grid-template-columns:22px 1fr;gap:12px}
.panel li svg{margin-top:4px}
.panel .rec{margin-top:22px;padding:14px 16px;background:var(--fog);border-radius:var(--radius-sm);font-size:var(--fs-s);color:var(--navy)}
@media (max-width:860px){.panel{grid-template-columns:1fr}}

/* install steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:0 24px 0 0;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sky);color:#fff;font-weight:700;margin-bottom:18px;position:relative;z-index:1}
.steps li::after{content:"";position:absolute;top:22px;left:44px;right:0;height:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.125rem;font-weight:500;margin-bottom:8px}
.steps p{font-size:var(--fs-s);color:var(--ink-soft)}
.clock{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;padding:22px 28px;border-radius:var(--radius-lg);background:var(--fog)}
.clock-bar{flex:1 1 320px;display:grid;grid-template-columns:2fr 3fr 2fr;height:40px;border-radius:10px;overflow:hidden;font-size:var(--fs-xs);font-weight:500}
.clock-bar span{display:grid;place-items:center;color:#fff}
.clock-bar span:nth-child(1){background:#9fb6c6}
.clock-bar span:nth-child(2){background:var(--leaf-deep)}
.clock-bar span:nth-child(3){background:var(--navy-2)}
.clock p{flex:1 1 260px;font-size:var(--fs-s);color:var(--navy)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:36px 0}.steps li::after{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* models */
.models{background:var(--fog)}
.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.model{background:#fff;border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--line)}
.model img{aspect-ratio:16/10;object-fit:cover;background:#fff}
.model-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.model .use{font-size:var(--fs-s);color:var(--leaf-deep);font-weight:500}
.model p{font-size:var(--fs-s);color:var(--ink-soft)}
.prices{margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:6px;font-size:var(--fs-s)}
.prices div{display:flex;justify-content:space-between;gap:10px}
.prices dt{color:var(--ink-soft)}
.prices dd{margin:0;font-weight:700}
.note{margin-top:22px;font-size:var(--fs-s);color:var(--ink-soft);max-width:80ch}
@media (max-width:900px){.model-grid{grid-template-columns:1fr}}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.calc-form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label,.field legend{font-size:var(--fs-s);font-weight:500}
select,input,textarea{font:inherit;font-size:var(--fs-m);color:var(--navy);padding:12px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--line);background:#fff;width:100%}
select:focus,input:focus,textarea:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px rgba(43,170,225,.2)}
.stepper{display:flex;align-items:center;gap:0;width:fit-content;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.stepper button{width:48px;height:48px;border:0;background:#fff;font-size:1.4rem;color:var(--navy);cursor:pointer}
.stepper button:hover{background:var(--fog)}
.stepper input{width:72px;border:0;text-align:center;font-weight:700;border-radius:0;padding:0;height:48px}
.result{background:var(--navy);color:#fff;border-radius:var(--radius-lg);padding:32px}
.result dl{margin:0;display:grid;gap:10px}
.result dl div{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-s);color:#c3d7e5}
.result dd{margin:0;color:#fff;font-weight:500}
.result .total{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.result .total span{font-size:var(--fs-s);color:#c3d7e5}
.result .total strong{font-size:2.25rem;line-height:1}
.result small{display:block;margin-top:16px;color:#9fb6c6;font-size:var(--fs-xs);line-height:1.5}
.result .btn{margin-top:22px;background:#fff;color:var(--navy);width:100%}
.result .btn:hover{background:var(--sky);color:#fff}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:1.125rem;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 22px;color:var(--ink-soft);max-width:68ch}

/* contact */
.contact{background:linear-gradient(180deg,var(--fog),var(--paper))}
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px)}
.direct{margin-top:32px;display:grid;gap:14px}
.direct a{display:flex;flex-direction:column;text-decoration:none;color:var(--navy);padding:16px 20px;border-radius:var(--radius-sm);background:#fff;box-shadow:0 0 0 1px var(--line)}
.direct a span{font-size:var(--fs-xs);color:var(--ink-soft)}
.direct a b{font-size:1.25rem}
.direct a:hover{box-shadow:0 0 0 2px var(--sky)}
form.lead-form{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:18px;box-shadow:0 30px 60px -40px rgba(11,42,67,.4),0 0 0 1px var(--line)}
form.lead-form .full{grid-column:1/-1}
form.lead-form .btn{width:100%}
.form-status{font-size:var(--fs-s);min-height:1.4em}
.form-status.ok{color:var(--leaf-deep)}
.form-status.err{color:var(--red)}
.consent{font-size:var(--fs-xs);color:var(--ink-soft)}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}}
@media (max-width:520px){form.lead-form{grid-template-columns:1fr}}

footer{background:var(--navy);color:#9fb6c6;padding:40px 0;font-size:var(--fs-s)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
footer a{color:#fff;text-decoration:none}
.mobile-call{display:none}
@media (max-width:640px){
  .mobile-call{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;gap:8px}
  .mobile-call a{flex:1;box-shadow:0 10px 30px -10px rgba(11,42,67,.6)}
  footer{padding-bottom:96px}
}