:root{--bg:#f7f8fa;--surface:#fff;--text:#14202e;--muted:#5a6878;--accent:#0b6e8a;--accent-t:#fff;--line:#dde3ea;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e151d;--surface:#16202b;--text:#e8edf2;--muted:#9aa8b6;--accent:#4cc3e0;--accent-t:#06222b;--line:#25323f}}
:root[data-theme="dark"]{--bg:#0e151d;--surface:#16202b;--text:#e8edf2;--muted:#9aa8b6;--accent:#4cc3e0;--accent-t:#06222b;--line:#25323f}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.w{max-width:960px;margin:0 auto;padding:0 20px}
.hero{position:relative;background:radial-gradient(ellipse at 50% 120%,#12305a,#070d1a 70%);color:#eef4ff;overflow:hidden;min-height:560px;display:flex;flex-direction:column}
#sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .w{position:relative;z-index:1;width:100%;flex:1;display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo{font-weight:800;font-size:1.3rem;letter-spacing:-.02em}.logo span{color:#6fd6f0}
nav a{color:#b8c7dc;text-decoration:none;margin-left:16px;font-size:.95rem}
.hb{margin:auto 0;padding:30px 0 56px}
.badge{display:inline-block;border:1px solid #2c4a73;color:#8fdcf2;border-radius:99px;padding:4px 12px;font-size:.85rem;margin-bottom:16px;background:#0a1a30aa}
h1{font-size:clamp(1.9rem,6vw,3.1rem);line-height:1.15;letter-spacing:-.03em;margin:0 0 16px}
.hb p{font-size:1.1rem;color:#b8c7dc;max-width:560px;margin:0 0 24px}
.btn{display:inline-block;background:var(--accent);color:var(--accent-t);padding:13px 22px;border-radius:10px;font-weight:700;text-decoration:none;border:0;font:inherit;font-weight:700;cursor:pointer}
.hero .btn{background:#4cc3e0;color:#06222b}
.btn.o{background:transparent;color:var(--text);border:1px solid var(--line);margin-left:8px}
.hero .btn.o{color:#eef4ff;border-color:#3a5a86;background:transparent}
section{padding:40px 0;border-top:1px solid var(--line)}
h2{font-size:1.6rem;margin:0 0 20px;letter-spacing:-.02em}
.g{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.c{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.c h3{margin:0 0 6px;font-size:1.1rem}.c p{margin:0;color:var(--muted);font-size:.95rem}
.price{font-size:1.9rem;font-weight:800;margin:6px 0}.price small{font-size:.9rem;font-weight:500;color:var(--muted)}
.c ul{padding-left:18px;margin:10px 0 0;color:var(--muted);font-size:.95rem}
.hl{border-color:var(--accent)}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none;margin:0}
.tags li{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:.92rem}
.refs a{display:block;text-decoration:none;color:var(--text);font-weight:600}.refs a span{display:block;color:var(--accent);font-weight:400;font-size:.85rem}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;padding-left:46px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-t);display:grid;place-items:center;font-weight:700}
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}details p{color:var(--muted);margin:8px 0 0}
footer{padding:30px 0 40px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
#bo{position:fixed;inset:0;background:#000a;z-index:50;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:max(20px,env(safe-area-inset-top,0px)) 16px 20px}
#bo.on{display:flex}
#bo .p{background:var(--surface);color:var(--text);border-radius:14px;padding:20px;width:100%;max-width:480px}
#bo label{display:block;font-size:.85rem;color:var(--muted);margin:12px 0 4px}
#bo input,#bo textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
#bo .r{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
#bo .btn{padding:10px 16px}
#msg{font-size:.85rem;color:var(--accent);margin-top:10px;min-height:1.2em}

.hero.s{min-height:0}.hero.s .hb{padding:10px 0 30px;margin:0}.hero.s h1{font-size:1.8rem;margin:0}
input,textarea,select{width:100%;padding:11px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
label{display:block;font-size:.85rem;color:var(--muted);margin:12px 0 4px}
.post h2{margin:24px 0 8px;font-size:1.3rem}.post{max-width:700px}.meta{color:var(--muted);font-size:.85rem}
.ok{background:#1b7f4b22;border:1px solid #1b7f4b;padding:10px 14px;border-radius:10px;margin:12px 0}
.er{background:#b3261e22;border:1px solid #b3261e;padding:10px 14px;border-radius:10px;margin:12px 0}
table{width:100%;border-collapse:collapse;font-size:.92rem}td,th{border-bottom:1px solid var(--line);padding:8px 4px;text-align:left;vertical-align:top}
.hp{position:absolute;left:-9999px}.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tech{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.tech div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center;font-size:.9rem;font-weight:600}
.lg{display:block;width:40px;height:40px;margin:0 auto 8px;background:var(--b);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

.hero h1 em{font-style:normal;background:linear-gradient(90deg,#6fd6f0,#a98bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.c{transition:transform .2s,border-color .2s,box-shadow .2s}.c:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px #0003}
.btn{transition:transform .15s,filter .15s}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.post ul{padding-left:20px;color:var(--text)}.post p{color:var(--text)}
@media (prefers-reduced-motion:reduce){.c,.btn{transition:none}.c:hover,.btn:hover{transform:none}}

.strip{display:flex;flex-wrap:wrap;gap:18px;margin-top:30px}
.strip .lg{width:30px;height:30px;margin:0;background:#cfe0f5;opacity:.75;transition:opacity .2s,background .2s}
.strip .lg:hover{opacity:1;background:#6fd6f0}