:root{--bg:#070709;--pan:#0e0e14;--line:#ffffff14;--line2:#ffffff20;--tx:#f3f3f8;--mut:#9a9ab0;--mut2:#616175;--a1:#7c5cff;--a2:#22d3ee;--grad:linear-gradient(120deg,#7c5cff,#22d3ee);--f:'Inter',system-ui,Arial,sans-serif;--d:'Space Grotesk',var(--f)}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--f);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 30px}
nav{position:sticky;top:0;z-index:100;background:rgba(9,9,13,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #ffffff0a;transform:translateZ(0);will-change:transform}
nav .in{display:flex;align-items:center;justify-content:space-between;padding:20px 30px;max-width:1280px;margin:0 auto}
.logo{font-family:var(--d);font-weight:700;font-size:25px;letter-spacing:-1px;display:flex;align-items:center;gap:10px}
.logo .mk{width:32px;height:32px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #7c5cff55;animation:spin 8s linear infinite}
.logo .mk svg{width:18px;height:18px;fill:#070709}
.logo .tld{color:var(--mut);font-weight:500;font-size:16px;letter-spacing:0;margin-left:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.nlinks{display:flex;gap:32px;font-size:15px;color:var(--mut);font-weight:500}.nlinks a:hover{color:var(--tx)}.nlinks a.on{color:var(--tx)}
@media(max-width:900px){.nlinks{display:none}}
.ncta{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:40px;background:var(--grad);color:#070709;font-weight:700;font-size:14px;border:none;transition:transform .25s,box-shadow .25s;box-shadow:0 6px 22px #7c5cff33}
.ncta span{padding:0}
.ncta i{font-style:normal;font-size:16px;display:inline-flex;transition:transform .25s}
.ncta:hover{transform:translateY(-2px);box-shadow:0 14px 36px #7c5cff66}.ncta:hover i{transform:translateX(4px)}
.tag{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--a2)}
.btn-p{display:inline-block;padding:15px 32px;border-radius:40px;background:var(--grad);color:#070709;font-weight:700;font-size:16px;transition:.2s}.btn-p:hover{transform:translateY(-2px)}
.btn-g{display:inline-block;padding:15px 32px;border-radius:40px;background:#ffffff0d;border:1px solid var(--line2);color:var(--tx);font-weight:700;font-size:16px}
/* article */
.article{max-width:760px;margin:0 auto;padding:44px 0 20px}
.crumbs{font-size:14px;color:var(--mut2);margin-bottom:18px}.crumbs a{color:var(--a2)}
.article h1{font-family:var(--d);font-size:clamp(28px,4.6vw,44px);font-weight:700;letter-spacing:-1.2px;line-height:1.06}
.amet{color:var(--mut);font-size:14px;margin-top:14px;display:flex;gap:16px;flex-wrap:wrap}
.acover{width:100%;height:clamp(220px,40vw,360px);object-fit:cover;border-radius:20px;margin:26px 0 6px;border:1px solid var(--line)}
.body h2{font-family:var(--d);font-size:clamp(22px,3vw,27px);font-weight:600;margin:36px 0 12px;letter-spacing:-.5px}
.body p{color:#d8d8e4;font-size:16.5px;margin-bottom:16px}
.body ul{margin:0 0 16px 22px;color:#d8d8e4;font-size:16.5px}.body li{margin-bottom:8px}
.body b{color:#fff}
.body blockquote{border-left:3px solid var(--a1);padding:6px 0 6px 20px;margin:22px 0;color:#fff;font-size:18px;font-style:italic}
.pricebox{background:var(--pan);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin:24px 0}
.pricebox .prow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.pricebox .prow:last-child{border:none}.pricebox .prow b{color:var(--a2);white-space:nowrap}
.cta-band{margin:56px 0 0;background:linear-gradient(150deg,#12101f,#0a0a10);border:1px solid var(--line);border-radius:24px;padding:40px;text-align:center}
.cta-band h2{font-family:var(--d);font-size:clamp(23px,4vw,32px);font-weight:700;margin:0}
.cta-band p{color:var(--mut);margin:12px auto 22px;max-width:520px}
footer{border-top:1px solid var(--line);margin-top:56px;padding:40px 0}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;color:var(--mut2);font-size:14px}
.flinks{display:flex;gap:22px;color:var(--mut);flex-wrap:wrap}.flinks a:hover{color:var(--tx)}
/* share + related */
.share{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:38px 0 6px;padding-top:24px;border-top:1px solid var(--line)}
.share-lbl{font-size:14px;color:var(--mut);font-weight:600;margin-right:2px}
.share a,.share button{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:8px 15px;border-radius:40px;border:1px solid var(--line2);background:#ffffff08;color:var(--tx);cursor:pointer;transition:.2s;font-family:inherit;line-height:1}
.share a:hover,.share button:hover{background:#ffffff14;transform:translateY(-2px)}
.share .s-tg:hover{border-color:#29a9eb;color:#5cc0f2}
.share .s-vk:hover{border-color:#4c75a3;color:#8fb2d9}
.share .s-wa:hover{border-color:#25d366;color:#3ee07a}
.share .s-copy:hover{border-color:var(--a1);color:#a78bfa}
.related{margin:54px 0 0}
.rel-h{font-family:var(--d);font-size:clamp(20px,3vw,26px);font-weight:700;margin-bottom:20px;letter-spacing:-.5px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.rel-grid{grid-template-columns:1fr}}
.relcard{display:flex;flex-direction:column;gap:9px;background:var(--pan);border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;transition:.25s}
.relcard:hover{transform:translateY(-4px);border-color:var(--line2)}
.relcat{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--a2)}
.relt{font-size:16px;font-weight:700;line-height:1.32;color:var(--tx)}
.rel-rd{margin-top:auto;font-size:13px;color:var(--a2);font-weight:600}