
:root{--b22-bg:#07090c;--b22-card:#10141a;--b22-card2:#151a22;--b22-line:rgba(255,255,255,.10);--b22-yellow:#ffd400;--b22-cyan:#59e4ff;--b22-muted:#a8b0bb;--b22-white:#f7f8fa}
.b22-main{background:radial-gradient(circle at 78% 8%,rgba(89,228,255,.10),transparent 26%),radial-gradient(circle at 18% 12%,rgba(255,212,0,.10),transparent 22%),#07090c;color:var(--b22-white);min-height:70vh}
.b22-wrap{width:min(1180px,calc(100% - 34px));margin:0 auto}.b22-breadcrumb{display:flex;gap:8px;flex-wrap:wrap;padding:22px 0 0;font-size:.82rem;color:#98a1ad}.b22-breadcrumb a{color:#cbd1d8;text-decoration:none}.b22-breadcrumb b{color:#fff}
.b22-hero{padding:58px 0 42px}.b22-hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:46px;align-items:center}.b22-eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,212,0,.26);background:rgba(255,212,0,.07);padding:8px 12px;border-radius:999px;font-weight:800;font-size:.76rem;letter-spacing:.09em;color:#ffe46a}.b22-dot{width:7px;height:7px;background:var(--b22-yellow);border-radius:50%;box-shadow:0 0 16px rgba(255,212,0,.8)}
.b22-hero h1{font-size:clamp(2.25rem,5vw,4.7rem);line-height:.98;letter-spacing:-.055em;margin:19px 0 22px;max-width:920px}.b22-hero h1 em{font-style:normal;color:var(--b22-yellow)}.b22-lead{font-size:clamp(1.05rem,1.5vw,1.23rem);line-height:1.72;color:#c1c8d1;max-width:820px}.b22-lead strong{color:#fff}.b22-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}.b22-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 19px;border-radius:13px;font-weight:900;text-decoration:none;border:1px solid var(--b22-line);color:#fff;background:#151a21}.b22-btn.primary{background:var(--b22-yellow);color:#0b0c0e;border-color:var(--b22-yellow);box-shadow:0 12px 40px rgba(255,212,0,.14)}.b22-btn:hover{transform:translateY(-1px)}
.b22-browser{border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(180deg,#151a21,#0d1116);box-shadow:0 28px 90px rgba(0,0,0,.42);overflow:hidden;transform:rotate(1deg)}.b22-browser-top{display:flex;gap:7px;padding:13px 15px;border-bottom:1px solid var(--b22-line)}.b22-browser-top i{width:8px;height:8px;border-radius:50%;background:#5f6671}.b22-browser-body{padding:25px}.b22-browser-kicker{font-size:.72rem;color:#ffe46a;font-weight:900;letter-spacing:.09em}.b22-browser-title{font-size:1.55rem;line-height:1.1;font-weight:950;margin:9px 0 13px}.b22-browser-line{height:7px;border-radius:99px;background:#252c35;margin:9px 0}.b22-browser-line.sm{width:63%}.b22-browser-cta{margin-top:19px;background:var(--b22-yellow);color:#0b0c0e;font-weight:950;border-radius:10px;padding:11px 13px;display:inline-block}.b22-browser-cards{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}.b22-browser-card{padding:12px;border:1px solid var(--b22-line);border-radius:12px;background:#11161d;font-size:.78rem;color:#bdc5ce}
.b22-section{padding:52px 0;border-top:1px solid rgba(255,255,255,.065)}.b22-section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:28px;margin-bottom:26px}.b22-section-head span{font-size:.76rem;color:#ffe46a;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.b22-section-head h2{font-size:clamp(1.75rem,3vw,3rem);letter-spacing:-.04em;line-height:1.05;margin:0}.b22-section-head p{color:#adb6c1;line-height:1.75;margin:10px 0 0;max-width:800px}
.b22-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.b22-card{border:1px solid var(--b22-line);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));padding:23px}.b22-card b{display:block;font-size:1.07rem;margin-bottom:8px}.b22-card p{margin:0;color:#aeb7c1;line-height:1.63;font-size:.94rem}.b22-card .num{font-size:.72rem;color:#ffe46a;margin-bottom:20px;font-weight:900;letter-spacing:.08em}
.b22-process{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.b22-step{padding:18px;border:1px solid var(--b22-line);border-radius:16px;background:#0e1218}.b22-step span{display:block;color:#ffe46a;font-size:.72rem;font-weight:950;margin-bottom:11px}.b22-step b{font-size:.94rem;line-height:1.35}.b22-step p{font-size:.82rem;color:#98a3ae;line-height:1.55;margin:8px 0 0}
.b22-local{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.b22-local-box{border:1px solid rgba(89,228,255,.2);background:rgba(89,228,255,.055);padding:26px;border-radius:20px}.b22-local-box h3{margin:0 0 10px;font-size:1.35rem}.b22-local-box p{color:#b4c0ca;line-height:1.7}.b22-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.b22-tag{padding:7px 10px;border-radius:999px;border:1px solid var(--b22-line);font-size:.78rem;color:#d9dee4;background:#10151b}
.b22-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.b22-price{border:1px solid var(--b22-line);border-radius:20px;padding:25px;background:#10141a;position:relative}.b22-price.featured{border-color:rgba(255,212,0,.52);box-shadow:0 22px 70px rgba(255,212,0,.08)}.b22-badge{position:absolute;top:14px;right:14px;font-size:.68rem;font-weight:950;color:#111;background:var(--b22-yellow);padding:6px 8px;border-radius:999px}.b22-price h3{font-size:1.2rem;margin:0}.b22-amount{font-size:2.5rem;font-weight:950;letter-spacing:-.05em;margin:15px 0 5px}.b22-amount small{font-size:.82rem;color:#9ea8b4;letter-spacing:0}.b22-price p{color:#a9b3bd;line-height:1.6}.b22-price ul{padding-left:18px;color:#d9dde2;line-height:1.75;font-size:.9rem}
.b22-faq{display:grid;gap:10px}.b22-faq details{border:1px solid var(--b22-line);border-radius:15px;background:#0d1117;padding:0 18px}.b22-faq summary{cursor:pointer;font-weight:850;padding:17px 0}.b22-faq p{color:#aeb7c1;line-height:1.7;margin:0 0 18px}.b22-related{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.b22-related a{display:block;border:1px solid var(--b22-line);border-radius:13px;padding:13px 14px;text-decoration:none;color:#e9edf1;background:#0f141a}.b22-related a:hover{border-color:rgba(255,212,0,.4);color:#ffe46a}
.b22-cta{padding:34px;border-radius:25px;border:1px solid rgba(255,212,0,.28);background:radial-gradient(circle at 80% 30%,rgba(255,212,0,.13),transparent 28%),#11151b;display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center}.b22-cta h2{font-size:clamp(1.8rem,3.8vw,3.25rem);letter-spacing:-.045em;margin:0 0 10px}.b22-cta p{color:#b5bec7;line-height:1.7;margin:0}.b22-cta .b22-actions{justify-content:flex-end;margin:0}
.b22-hub-hero{padding:62px 0 34px}.b22-hub-hero h1{font-size:clamp(2.5rem,6vw,5.2rem);letter-spacing:-.06em;line-height:.96;margin:16px 0 18px}.b22-hub-hero p{max-width:850px;color:#bdc5ce;font-size:1.08rem;line-height:1.7}.b22-search{position:sticky;top:78px;z-index:4;margin:26px 0 34px;padding:10px;background:rgba(11,14,18,.89);backdrop-filter:blur(12px);border:1px solid var(--b22-line);border-radius:16px}.b22-search input{width:100%;background:#151b23;border:0;color:#fff;min-height:50px;border-radius:11px;padding:0 16px;font-size:1rem;outline:none}.b22-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.b22-cat-card{display:block;text-decoration:none;color:#fff;border:1px solid var(--b22-line);border-radius:18px;background:#10151b;padding:21px;min-height:140px}.b22-cat-card:hover{border-color:rgba(255,212,0,.42);transform:translateY(-2px)}.b22-cat-card span{color:#ffe46a;font-size:.72rem;font-weight:950}.b22-cat-card h2{font-size:1.2rem;margin:12px 0 8px}.b22-cat-card p{color:#9faab6;font-size:.88rem;line-height:1.55;margin:0}.b22-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.b22-list a{display:block;text-decoration:none;color:#edf1f5;border:1px solid var(--b22-line);background:#0f141a;border-radius:13px;padding:13px 14px}.b22-list a:hover{color:#ffe46a;border-color:rgba(255,212,0,.35)}.b22-note{border-left:3px solid var(--b22-yellow);padding:13px 17px;background:rgba(255,212,0,.05);color:#cbd2d9;line-height:1.65;border-radius:0 12px 12px 0}
@media(max-width:900px){.b22-hero-grid,.b22-section-head,.b22-local,.b22-cta{grid-template-columns:1fr}.b22-grid3,.b22-pricing,.b22-cat-grid{grid-template-columns:1fr}.b22-process{grid-template-columns:1fr 1fr}.b22-browser{transform:none}.b22-cta .b22-actions{justify-content:flex-start}.b22-related{grid-template-columns:1fr 1fr}.b22-list{grid-template-columns:1fr}}
@media(max-width:560px){.b22-wrap{width:min(100% - 22px,1180px)}.b22-hero{padding-top:38px}.b22-process,.b22-related{grid-template-columns:1fr}.b22-hero h1{font-size:2.45rem}.b22-section{padding:40px 0}.b22-browser-body{padding:18px}}
