:root{
  --bg:#f6f7f9; --surface:#ffffff; --band:#eef1f5; --ink:#15202b; --muted:#5a6675; --line:#d7dde5;
  --accent:#0a5bd3; --accent-ink:#ffffff; --accent-soft:#e6efff; --ok:#137a3a; --bad:#b3261e;
  --paper:#fbfaf6; --steel1:#b8c4d3; --steel2:#8d9bb0; --steel3:#6b7a91;
  --radius:10px; --wrap:1120px;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f141a; --surface:#161d25; --band:#131a21; --ink:#e7edf4; --muted:#9aa7b6; --line:#2a3440;
    --accent:#5b9cff; --accent-ink:#0b1320; --accent-soft:#1b2b44; --ok:#5fd08a; --bad:#ff8a80;
    --paper:#1d252f; --steel1:#6d7c91; --steel2:#56647a; --steel3:#435066;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.55;font-size:17px}
a{color:var(--accent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
h1{font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.1;margin:0 0 .5em;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 .8em;letter-spacing:-.01em}
h3{margin:.2em 0 .4em;font-size:1.1rem}
section{padding:64px 0;scroll-margin-top:64px}
.band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;justify-content:space-between;min-height:60px;flex-wrap:wrap}
.brand{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.1rem;white-space:nowrap}
.brand .mark{color:var(--accent)} .brand .tld{color:var(--muted);font-weight:500}
.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.nav a:hover{color:var(--accent)}
.lang{display:flex;gap:6px}
.lang a{font-size:.8rem;text-decoration:none;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.lang a[aria-current]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
@media (max-width:760px){.nav a:not(.btn){display:none}}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:8px;padding:.7em 1.2em;font-weight:600;text-decoration:none;cursor:pointer;font-size:1rem}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.small{padding:.4em .8em;font-size:.9rem}
.btn[disabled]{opacity:.6;cursor:wait}

/* hero */
.hero{padding:56px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.lead{font-size:1.15rem;color:var(--muted);max-width:40em}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin:1.4em 0}
.trust{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;color:var(--muted);font-size:.95rem}
.trust li::before{content:"✓ ";color:var(--ok);font-weight:700}
@media (max-width:520px){.trust{grid-template-columns:1fr}}
.hero-art{width:100%;height:auto}
.hero-art .paper{fill:var(--paper);stroke:var(--line)}
.hero-art .ink *{stroke:var(--ink);stroke-width:1.6}
.hero-art .center{stroke-dasharray:6 3 1 3;stroke-width:.8!important;stroke:var(--muted)!important}
.hero-art .dim{stroke:var(--accent)!important;stroke-width:1!important}
.hero-art .lbl{fill:var(--muted);font-size:12px;text-anchor:middle;font-family:ui-monospace,monospace}
.hero-art .arrow{stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-art .top{fill:var(--steel1)} .hero-art .left{fill:var(--steel2)} .hero-art .right{fill:var(--steel3)}
.hero-art .hole{fill:var(--steel3);opacity:.9}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.cards article{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.cards p{color:var(--muted);margin:0}
.deliver{margin-top:28px}
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.checks li::before{content:"→ ";color:var(--accent)}
@media (max-width:620px){.checks{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.steps .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700}
.steps p{color:var(--muted);margin:0}

/* prices */
.prices{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.prices td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.prices tr:last-child td{border-bottom:0}
.prices td span{display:block;color:var(--muted);font-size:.92rem}
.prices .num{text-align:right;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.note{color:var(--muted);font-size:.92rem}
.pay{margin-top:24px;background:var(--accent-soft);border-radius:var(--radius);padding:16px 20px}
.pay p{margin:.3em 0}

/* form */
.form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.form label{display:block;font-weight:600;font-size:.95rem}
.form label > input,.form label > select,.form label > textarea,.form label > .row{margin-top:5px}
.form label small{display:block;margin-top:4px}
.form small{color:var(--muted);font-weight:400}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea,.form input[type=file]{
  width:100%;font:inherit;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6em .7em}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form fieldset{border:1px solid var(--line);border-radius:8px;padding:10px 14px}
.form legend{font-weight:600;font-size:.95rem;padding:0 4px}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.form .check input{margin-top:.3em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 .span2{grid-column:span 2}
@media (max-width:560px){.grid2{grid-template-columns:1fr}.grid2 .span2{grid-column:auto}}
.row{display:flex;gap:8px}
.row input{flex:1}
.uidbox{background:var(--accent-soft);border-radius:8px;padding:12px 14px}
.msg{margin:0;font-size:.95rem}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
abbr{color:var(--bad);text-decoration:none}
.done{background:var(--surface);border:2px solid var(--ok);border-radius:var(--radius);padding:24px}

/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin:.6em 0 0}

/* footer + legal */
.foot{border-top:1px solid var(--line);padding:24px 0;color:var(--muted);font-size:.9rem}
.legal{padding:40px 0}
.legal h2{font-size:1.2rem;margin-top:1.6em}
.draft{background:#fff4d6;color:#5a4300;border:1px solid #e8c766;border-radius:8px;padding:10px 14px}
@media (prefers-color-scheme: dark){.draft{background:#3a300f;color:#f3dd9b;border-color:#6d5a1c}}