:root {
  --paper:#fcfdff; --line:#dde5f6; --margin:#f4b9c6;
  --ink:#1b2a5c; --blue:#344fba; --blue-d:#22379a; --green:#138a72; --soft:#5b6890; --mark:#ffe9a3; --amber:#f2a516; --red:#d12c3a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:8px}
.wrap{width:calc(100% - 32px);max-width:1080px;margin:0 auto}
.sr{position:absolute;left:-9999px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:100;text-decoration:none}
.skip:focus{top:10px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;padding:12px 12px 0;pointer-events:none}
.hdr-in{pointer-events:auto;width:100%;max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:9px 10px 9px 14px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;color:var(--ink);text-decoration:none;letter-spacing:.005em;margin-right:10px}
.brand img{width:38px;height:38px;border-radius:11px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{position:relative;color:#33407a;text-decoration:none;font-weight:600;font-size:15.5px;padding:9px 12px;border-radius:12px}
.nav a:hover{background:#eef2ff;color:var(--blue)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:8px;background:var(--mark);z-index:-1;border-radius:3px}
.hdr-cta{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;border-radius:13px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--blue);cursor:pointer;font-family:inherit;line-height:1}
.btn.sm{min-height:42px;padding:0 17px;font-size:15px}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 5px 0 var(--blue-d);transform:translateY(-3px);transition:transform .1s,box-shadow .1s}
.btn.primary:hover{transform:translateY(0);box-shadow:0 2px 0 var(--blue-d)}
.btn.ghost{background:#fff;color:var(--blue)}
.btn.ghost:hover{background:#eef2ff}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#1b1500}
.btn.amber:hover{background:#ffb92e;border-color:#ffb92e}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border:2px solid var(--ink);border-radius:13px;background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px;content:"";position:relative;transition:transform .2s,background .2s}
.menu-btn span::before{position:absolute;top:-6.5px}.menu-btn span::after{position:absolute;top:6.5px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6.5px) rotate(-45deg)}
.mobile{display:none;pointer-events:auto;width:100%;max-width:1120px;margin:10px auto 0;background:#fff;border:1.5px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);padding:10px}
.mobile a.l{display:block;padding:13px 14px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:12px;font-size:17px}
.mobile a.l:hover,.mobile a.l[aria-current="page"]{background:#eef2ff}
.mobile .row{display:flex;gap:10px;padding:8px 4px 4px}.mobile .row .btn{flex:1}
@media (max-width:980px){.nav,.hdr-cta{display:none}.menu-btn{display:flex}.mobile.open{display:block}.brand{margin-right:0}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;margin-top:-84px;padding-top:84px;background:
 radial-gradient(520px 320px at 88% 18%,rgba(19,138,114,.16),transparent 70%),
 radial-gradient(560px 360px at 6% 4%,rgba(52,79,186,.14),transparent 70%),
 linear-gradient(90deg,transparent 0 56px,var(--margin) 56px 58px,transparent 58px),
 repeating-linear-gradient(transparent 0 35px,var(--line) 35px 36px);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:60px 0 76px}
h1{font-size:44px;font-size:clamp(34px,5.4vw,60px);line-height:1.08;margin:0 0 18px;letter-spacing:-.02em;font-weight:800}
h1 .hl{background:linear-gradient(transparent 58%,var(--mark) 58% 92%,transparent 92%);padding:0 .08em}
.lead{font-size:19px;color:#33407a;max-width:30em;margin:0 0 26px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.cta .btn{min-height:54px;padding:0 28px;font-size:17px}
.note{margin:18px 0 0;font-size:15px;color:var(--soft)}
.art{position:relative;min-height:330px}
.board{background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1.2deg)}
.board svg,.phone svg{display:block;width:100%;height:auto}
.bar{display:flex;gap:6px;margin-bottom:8px}.bar i{width:11px;height:11px;border-radius:50%;background:#d8def0}
.phone{position:absolute;right:-6px;bottom:-34px;width:38%;background:#fff;border:2px solid var(--ink);border-radius:22px;padding:18px 8px 10px;box-shadow:6px 6px 0 var(--green);transform:rotate(2.4deg)}
.live{position:absolute;top:5px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;color:#fff;background:var(--red);border-radius:9px;padding:0 7px;line-height:15px}
.stroke{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s ease-out forwards}
.s2{animation-delay:1.2s}.s3{animation-delay:2.1s}.s4{animation-delay:2.9s}.stroke.p{animation-delay:1.5s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.stroke{animation:none;stroke-dashoffset:0}.btn.primary{transition:none}html{scroll-behavior:auto}.menu-btn span,.menu-btn span::before,.menu-btn span::after{transition:none}}

/* ---------- join strip ---------- */
.join{background:var(--ink);color:#fff}
.join .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:24px 0}
.join h2{margin:0;font-size:22px}.join p{margin:0;color:#c7d1f5;font-size:15px}
.join form{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.join input{height:54px;width:200px;border:0;border-radius:12px;padding:0 14px;font:700 22px/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;text-align:center;color:var(--ink)}
.join input::placeholder{letter-spacing:.02em;font-size:15px;font-weight:500;text-transform:none;color:#7c88b3}
.join button{height:54px;border:0;border-radius:12px;background:var(--amber);color:#1b1500;font-weight:800;font-size:17px;padding:0 26px;cursor:pointer;font-family:inherit}
.join button:hover{background:#ffb92e}
.join .err{flex-basis:100%;margin:0;color:#ffb3bb;font-size:14px;min-height:0}

/* ---------- sections ---------- */
section{padding:68px 0}
h2.sec{font-size:32px;font-size:clamp(26px,3.6vw,38px);line-height:1.15;margin:0 0 8px;letter-spacing:-.015em}
.sub{color:var(--soft);margin:0 0 34px;max-width:36em}
.tint{background:#f3f6ff;border-block:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--ink);counter-reset:s}
.step{padding:22px 26px 6px 0;counter-increment:s}
.step+.step{padding-left:26px;border-left:1px solid var(--line)}
.step::before{content:counter(s);display:block;font-size:44px;font-weight:800;line-height:1;color:var(--blue);margin-bottom:8px}
.step h3{margin:0 0 6px;font-size:20px}.step p{margin:0;color:#3b4784;font-size:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.cols h3{margin:0 0 10px;font-size:19px}
.cols ul.tick,ul.tick{list-style:none;margin:0 0 30px;padding:0}
ul.tick li{padding:9px 0 9px 28px;border-bottom:1px solid #dbe3f7;position:relative;font-size:16px;max-width:none}
ul.tick li::before{content:"";position:absolute;left:3px;top:16px;width:12px;height:7px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
.more{margin-top:6px}
.inst{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inst>div{border:2px solid var(--ink);border-radius:14px;padding:18px 18px 16px;background:#fff;box-shadow:5px 5px 0 var(--line)}
.inst h3{margin:0 0 6px;font-size:18px}.inst p{margin:0 0 12px;font-size:15.5px;color:#3b4784}.inst .btn{margin-top:4px}
details{border-bottom:1px solid var(--line);padding:14px 0}
summary{font-weight:700;cursor:pointer;font-size:18px}
details p{margin:10px 0 0;color:#3b4784;max-width:46em}
.band{background:linear-gradient(120deg,var(--blue),#2a6fd0 55%,var(--green));color:#fff;text-align:center;padding:64px 0}
.band h2{font-size:34px;font-size:clamp(26px,4vw,40px);margin:0 0 10px;letter-spacing:-.01em}.band p{margin:0 auto 24px;color:#e3e9ff;max-width:34em}
.band .btn.primary{background:#fff;color:var(--blue);border-color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.25)}
.band .btn.ghost{background:transparent;color:#fff;border-color:#fff}.band .btn.ghost:hover{background:rgba(255,255,255,.14)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#c7d1f5;padding:44px 0 26px;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h4{margin:0 0 10px;color:#fff;font-size:15px}
footer a{display:block;color:#c7d1f5;text-decoration:none;padding:4px 0}footer a:hover{color:#fff;text-decoration:underline}
.fbrand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:19px;margin-bottom:8px}.fbrand img{width:34px;height:34px;border-radius:9px}
footer p{margin:0;max-width:22em}
.fbottom{border-top:1px solid #34437f;margin-top:28px;padding-top:16px;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---------- inner pages ---------- */
.phead{padding:46px 0 34px;background:repeating-linear-gradient(transparent 0 35px,var(--line) 35px 36px);border-bottom:1px solid var(--line);margin-top:-84px;padding-top:130px}
.phead h1{font-size:40px;font-size:clamp(32px,5vw,48px);margin:0 0 8px}.phead p{margin:0;color:var(--soft);max-width:40em;font-size:18px}
.page{padding:40px 0 70px}
.page h2{font-size:26px;margin:40px 0 8px;padding-top:10px;border-top:3px solid var(--ink)}
.page h2:first-child{margin-top:0}
.page h3{font-size:19px;margin:22px 0 6px}
.page p,.page li{max-width:44em}.page ol,.page ul{padding-left:22px}.page li{margin:6px 0}
.tip{border-left:5px solid var(--amber);background:#fff7df;padding:10px 16px;margin:16px 0;border-radius:0 10px 10px 0;max-width:44em}
.warn{border-left:5px solid var(--red);background:#fdecee;padding:10px 16px;margin:16px 0;border-radius:0 10px 10px 0;max-width:44em}
kbd{background:#eef2ff;border:1px solid #c9d3f2;border-bottom-width:2px;border-radius:6px;padding:1px 7px;font:600 14px "Segoe UI",sans-serif}
table{border-collapse:collapse;width:100%;max-width:44em;font-size:16px}td,th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{background:#f3f6ff}
.two{display:grid;grid-template-columns:210px 1fr;gap:44px}
.toc{position:sticky;top:100px;align-self:start;font-size:15px}
.toc a{display:block;padding:6px 0 6px 12px;color:var(--soft);text-decoration:none;border-left:3px solid var(--line)}
.toc a:hover{color:var(--blue);border-left-color:var(--blue)}
.fcard{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
form.contact{display:grid;gap:14px;max-width:34em}
form.contact label{font-weight:700;font-size:15px}
form.contact input,form.contact textarea,form.contact select{width:100%;border:2px solid #b9c4e8;border-radius:12px;padding:12px 14px;font:inherit;color:var(--ink);background:#fff}
form.contact textarea{min-height:140px;resize:vertical}
.msgok{padding:12px 16px;border-radius:12px;background:#e4f6ee;border:1px solid #9fd8bf;display:none}
.msgbad{padding:12px 16px;border-radius:12px;background:#fdecee;border:1px solid #f0a7af;display:none}
@media (max-width:860px){
 .hero .wrap{grid-template-columns:1fr;padding:36px 0 64px}
 .hero{background:radial-gradient(420px 280px at 90% 10%,rgba(19,138,114,.16),transparent 70%),radial-gradient(420px 300px at 0 0,rgba(52,79,186,.14),transparent 70%),repeating-linear-gradient(transparent 0 35px,var(--line) 35px 36px)}
 .art{margin-top:10px}.steps,.inst,.cols,.fcard{grid-template-columns:1fr}
 .step+.step{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:14px}
 .join form{margin-left:0;width:100%}.join input{flex:1;width:auto;min-width:0}
 section{padding:48px 0}.fgrid{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr;gap:10px}.toc{position:static;display:flex;flex-wrap:wrap;gap:6px 14px}.toc a{border-left:0;padding:4px 0}
}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}.cta .btn{flex:1}}