:root {
  --night:#0b0a1c; --night2:#141238; --violet:#5C55CD; --violet-hi:#8a83f0; --violet-lo:#3a3494; --ice:#D5E6F1;
  --muted:#9d9bc6; --line:rgba(213,230,241,.11); --glass:rgba(213,230,241,.045); --glass2:rgba(213,230,241,.085);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif; --ease:cubic-bezier(.22,.8,.2,1);
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--night); color:var(--ice); font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }
.wm { font-family:Impact,"Arial Black","Franklin Gothic Heavy",sans-serif; letter-spacing:1px; text-transform:uppercase; }
em, .serif { font-family:var(--serif); font-style:italic; font-weight:400; color:var(--violet-hi); }

/* ---------- фон: частицы, свечение за курсором, шум ---------- */
#fx { position:fixed; inset:0; z-index:-2; width:100%; height:100%; }
body::before { content:""; position:fixed; inset:0; z-index:-3; background:radial-gradient(60% 50% at 15% 0%,rgba(92,85,205,.28),transparent 70%),radial-gradient(50% 45% at 100% 40%,rgba(92,85,205,.16),transparent 70%),var(--night); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#glow { position:fixed; z-index:-1; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(92,85,205,.22),transparent 65%); transition:transform .25s linear; left:0; top:0; }

/* ---------- загрузка и смена страниц ---------- */
#loader { position:fixed; inset:0; z-index:50; display:grid; place-content:center; justify-items:center; gap:14px; background:var(--night); transition:opacity .7s var(--ease), visibility .7s; }
#loader img { width:96px; position:absolute; top:calc(50% - 70px); left:calc(50% - 48px); }
#loader .ring { width:150px; height:150px; border-radius:50%; border:2px solid rgba(213,230,241,.08); border-top-color:var(--violet-hi); box-shadow:0 0 40px rgba(92,85,205,.5); animation:spin 1.1s linear infinite; }
#loader .wm { font-size:22px; color:var(--ice); }
body.ready #loader { opacity:0; visibility:hidden; }
@keyframes spin { to { transform:rotate(360deg); } }
#curtain { position:fixed; inset:0; z-index:40; pointer-events:none; background:linear-gradient(120deg,var(--violet-lo),var(--violet) 50%,var(--night2)); clip-path:inset(0 0 100% 0); }
#curtain.in { animation:curtainIn .45s var(--ease) forwards; }
#curtain.out { animation:curtainOut .55s var(--ease) forwards; }
@keyframes curtainIn { from { clip-path:inset(100% 0 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes curtainOut { from { clip-path:inset(0 0 0 0); } to { clip-path:inset(0 0 100% 0); } }
#app { min-height:80vh; }
.page { animation:pageIn .8s var(--ease) both; }
@keyframes pageIn { from { opacity:0; transform:translateY(24px); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }

/* ---------- шапка ---------- */
.bar { position:sticky; top:0; z-index:20; backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px); background:rgba(11,10,28,.6); border-bottom:1px solid var(--line); transition:background .3s; }
.bar .wrap { display:flex; align-items:center; gap:20px; height:68px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { width:42px; height:42px; transition:transform .5s var(--ease); }
.brand:hover img { transform:rotate(-8deg) scale(1.08); }
.brand .wm { font-size:22px; }
.bar nav { margin-left:auto; display:flex; gap:24px; font-size:14px; color:var(--muted); }
.bar nav a { position:relative; padding:4px 0; transition:color .2s; }
.bar nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--violet-hi); transition:right .35s var(--ease); }
.bar nav a:hover { color:var(--ice); } .bar nav a:hover::after { right:0; }

/* ---------- кнопки ---------- */
.btn { position:relative; display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:16px; font-weight:700; border:1px solid var(--line); background:var(--glass2); overflow:hidden; cursor:pointer; color:var(--ice); font-size:15px; transition:transform .25s var(--ease), box-shadow .3s, background .3s; will-change:transform; }
.btn i { font-style:normal; transition:transform .3s var(--ease); }
.btn:hover i { transform:translateX(4px); }
.btn.sm { padding:10px 16px; font-size:14px; border-radius:13px; }
.btn.glow { background:linear-gradient(135deg,var(--violet),var(--violet-lo)); border-color:rgba(138,131,240,.8); box-shadow:0 0 0 1px rgba(213,230,241,.08) inset,0 10px 40px rgba(92,85,205,.45); }
.btn.glow:hover { box-shadow:0 0 0 1px rgba(213,230,241,.2) inset,0 14px 60px rgba(92,85,205,.7); }
.btn.glow::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); animation:shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%,55% { transform:translateX(-120%); } 85%,100% { transform:translateX(120%); } }
.btn.ghost:hover { background:rgba(213,230,241,.12); }
.btn span, .btn i { position:relative; }

/* ---------- общие элементы ---------- */
section { padding:110px 0 0; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.eyebrow::before { content:""; width:28px; height:1px; background:var(--violet-hi); }
h2 { font-size:clamp(30px,4.4vw,54px); line-height:1.05; letter-spacing:-.02em; font-weight:800; }
.lead { color:var(--muted); max-width:640px; font-size:17px; margin-top:14px; }
.center { text-align:center; } .center .lead { margin-left:auto; margin-right:auto; }
.glass { background:var(--glass); border:1px solid var(--line); border-radius:24px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 rgba(213,230,241,.07); }
.reveal { opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); transition-delay:var(--d,0s); }
.reveal.on { opacity:1; transform:none; filter:none; }
.tag { display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:6px 13px; border-radius:999px; border:1px solid rgba(138,131,240,.5); background:rgba(92,85,205,.16); }
.tag .dot { width:7px; height:7px; border-radius:50%; background:#6ee7a8; box-shadow:0 0 10px #6ee7a8; animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }

/* ---------- первый экран ---------- */
.hero { min-height:calc(100vh - 68px); display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; padding:40px 0 30px; }
.hero h1 { font-size:clamp(44px,6.6vw,92px); line-height:.98; letter-spacing:-.03em; font-weight:800; margin:22px 0 22px; }
.hero h1 .line { display:block; overflow:hidden; }
.hero h1 .line > span { display:inline-block; transform:translateY(110%); animation:rise 1s var(--ease) forwards; animation-delay:var(--d); }
@keyframes rise { to { transform:none; } }
.hero p.lead { font-size:18px; }
.hero .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero .small { color:var(--muted); font-size:13px; margin-top:12px; }
.stage { position:relative; aspect-ratio:1; display:grid; place-items:center; }
.stage .orbit { position:absolute; border-radius:50%; border:1px solid rgba(138,131,240,.25); }
.stage .o1 { inset:6%; animation:spin 40s linear infinite; }
.stage .o2 { inset:18%; border-style:dashed; animation:spin 28s linear infinite reverse; }
.stage .o1::after, .stage .o2::after { content:""; position:absolute; top:-5px; left:50%; width:10px; height:10px; border-radius:50%; background:var(--ice); box-shadow:0 0 16px var(--violet-hi); }
.stage .halo { position:absolute; inset:20%; border-radius:50%; background:radial-gradient(circle,rgba(92,85,205,.55),transparent 65%); filter:blur(20px); animation:breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform:scale(1.08); opacity:.8; } }
.stage img { position:relative; width:74%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.55)); transition:transform .2s linear; }
.chip { position:absolute; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; font-size:13px; font-weight:600; background:rgba(20,18,56,.75); border:1px solid var(--line); backdrop-filter:blur(10px); box-shadow:0 10px 30px rgba(0,0,0,.4); animation:float 6s ease-in-out infinite; animation-delay:var(--d,0s); white-space:nowrap; }
.chip b { color:var(--violet-hi); }
@keyframes float { 50% { transform:translateY(-12px); } }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); margin-top:10px; }
.stats div { padding:22px 10px 0; } .stats div + div { border-left:1px solid var(--line); padding-left:22px; }
.stats b { font-size:34px; font-weight:800; } .stats b em { font-size:.8em; }
.stats small { display:block; color:var(--muted); font-size:13px; }
.scrollhint { display:flex; justify-content:center; margin-top:24px; color:var(--muted); font-size:11px; letter-spacing:.3em; text-transform:uppercase; gap:10px; align-items:center; }
.scrollhint i { width:22px; height:34px; border:1.5px solid var(--muted); border-radius:12px; position:relative; }
.scrollhint i::after { content:""; position:absolute; left:50%; top:7px; width:4px; height:7px; margin-left:-2px; border-radius:2px; background:var(--ice); animation:wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 60% { transform:translateY(10px); opacity:0; } }

/* ---------- бегущая строка ---------- */
.marquee { margin-top:70px; border-block:1px solid var(--line); overflow:hidden; padding:18px 0; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.marquee .track { display:flex; gap:44px; width:max-content; animation:slide 40s linear infinite; }
.marquee span { font-size:22px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:44px; }
.marquee span::after { content:"✦"; color:var(--violet-hi); font-size:16px; }
.marquee:hover .track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-50%); } }

/* ---------- шаги ---------- */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; counter-reset:s; }
.step { padding:28px; position:relative; overflow:hidden; }
.step .num { font-family:var(--serif); font-style:italic; font-size:64px; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(138,131,240,.6); }
.step h3 { font-size:21px; margin:14px 0 8px; } .step p { color:var(--muted); font-size:15px; }
.step .bar-anim { position:absolute; left:0; bottom:0; height:3px; width:0; background:linear-gradient(90deg,var(--violet),var(--ice)); transition:width 1.4s var(--ease) .3s; }
.step.on .bar-anim { width:100%; }

/* ---------- карточки модулей (наклон + прожектор) ---------- */
.mods { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.mod { position:relative; padding:26px; cursor:pointer; transform-style:preserve-3d; transition:transform .2s ease-out, border-color .3s; overflow:hidden; }
.mod::before { content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(138,131,240,.22),transparent 45%); opacity:0; transition:opacity .3s; pointer-events:none; }
.mod:hover { border-color:rgba(138,131,240,.55); } .mod:hover::before { opacity:1; }
.ic { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(145deg,var(--violet),var(--violet-lo)); box-shadow:inset 0 0 0 1px rgba(213,230,241,.25),0 10px 30px rgba(92,85,205,.4); transform:translateZ(30px); }
.ic svg { width:26px; height:26px; stroke:var(--ice); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mod h3 { margin:16px 0 8px; font-size:19px; transform:translateZ(20px); }
.mod p { color:var(--muted); font-size:14.5px; }
.mod .more { display:inline-flex; gap:6px; margin-top:14px; font-size:13px; font-weight:700; color:var(--violet-hi); }
.mod .more i { font-style:normal; transition:transform .3s var(--ease); } .mod:hover .more i { transform:translateX(5px); }
.mod .plan-badge { position:absolute; top:18px; right:18px; font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }

/* ---------- макет сообщения Discord ---------- */
.discord { background:#1e1f2a; border-radius:18px; padding:18px; box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(213,230,241,.06); font-size:14px; }
.discord .chan { display:flex; align-items:center; gap:8px; color:#9b9cb2; font-weight:700; font-size:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:14px; }
.discord .chan b { color:#e4e5f1; }
.msg { display:grid; grid-template-columns:42px 1fr; gap:12px; }
.msg .ava { width:42px; height:42px; border-radius:50%; background:#2b2a55; object-fit:cover; }
.msg .who { display:flex; align-items:center; gap:6px; font-weight:700; color:#c7c3ff; }
.msg .who small { color:#8e8fa6; font-weight:400; font-size:12px; }
.botag { font-size:10px; background:var(--violet); color:#fff; padding:1px 5px; border-radius:4px; font-weight:700; }
.embed { margin-top:6px; border-left:4px solid var(--violet); background:#2a2b3a; border-radius:8px; padding:12px 14px; max-width:520px; }
.embed img { border-radius:8px; margin-bottom:10px; }
.embed h4 { font-size:16px; margin-bottom:6px; color:#f2f3ff; }
.embed .row { color:#c9cadb; font-size:13.5px; margin:3px 0; }
.embed .row b { color:#fff; }
.embed .sep { height:1px; background:rgba(255,255,255,.07); margin:10px 0; }
.dbtns { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.dbtn { padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; background:#4e5058; color:#fff; border:0; cursor:pointer; transition:filter .2s, transform .15s; }
.dbtn:hover { filter:brightness(1.15); } .dbtn:active { transform:scale(.96); }
.dbtn.p { background:var(--violet); } .dbtn.g { background:#248046; } .dbtn.r { background:#da373c; }
.typing { color:#8e8fa6; font-size:12.5px; margin-top:10px; display:flex; gap:6px; align-items:center; }
.typing i { width:6px; height:6px; border-radius:50%; background:#8e8fa6; animation:bounce 1.2s infinite; } .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce { 30% { transform:translateY(-4px); opacity:.6; } }
.toastd { margin-top:10px; padding:8px 12px; border-radius:8px; background:rgba(36,128,70,.2); color:#8ee5ad; font-size:13px; animation:pageIn .5s var(--ease); }

/* ---------- живое демо ---------- */
.demo { display:grid; grid-template-columns:.85fr 1.15fr; gap:30px; align-items:center; margin-top:44px; }
.tabs { display:grid; gap:8px; }
.tabs button { text-align:left; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; cursor:pointer; position:relative; overflow:hidden; transition:color .3s, border-color .3s, background .3s; }
.tabs button b { display:block; color:var(--ice); font-size:16px; }
.tabs button.on { border-color:rgba(138,131,240,.6); background:rgba(92,85,205,.14); color:var(--ice); }
.tabs button .prog { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--violet-hi); }
.tabs button.on .prog { animation:prog 7s linear forwards; }
@keyframes prog { to { width:100%; } }
.screen { transition:opacity .35s, transform .35s var(--ease); }
.screen.swap { opacity:0; transform:translateY(10px) scale(.98); }

/* ---------- лента баннеров ---------- */
.reel { margin-top:44px; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.reel .track { display:flex; gap:18px; width:max-content; animation:slide 55s linear infinite; }
.reel img { width:420px; border-radius:18px; border:1px solid var(--line); transition:transform .4s var(--ease); }
.reel img:hover { transform:scale(1.04) rotate(-1deg); }
.reel:hover .track { animation-play-state:paused; }

/* ---------- тарифы ---------- */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; align-items:stretch; }
.plan { padding:30px; display:flex; flex-direction:column; gap:16px; position:relative; transition:transform .4s var(--ease), border-color .3s; }
.plan:hover { transform:translateY(-8px); border-color:rgba(138,131,240,.55); }
.plan.hot { border-color:rgba(138,131,240,.7); background:linear-gradient(180deg,rgba(92,85,205,.22),rgba(213,230,241,.03)); box-shadow:0 30px 80px rgba(92,85,205,.25); }
.plan.hot::after { content:"Популярный"; position:absolute; top:-12px; left:30px; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--violet); }
.plan h3 { font-size:24px; } .plan h3 em { font-size:1.05em; }
.price { font-size:40px; font-weight:800; } .price small { font-size:14px; color:var(--muted); font-weight:400; }
.checks { list-style:none; padding:0; display:grid; gap:10px; font-size:14.5px; }
.checks li { display:flex; gap:10px; align-items:flex-start; }
.checks li::before { content:"✓"; flex:none; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:12px; background:rgba(92,85,205,.35); color:var(--ice); margin-top:1px; }
.checks li.no { color:#6f6d93; } .checks li.no::before { content:"–"; background:rgba(213,230,241,.06); }
.plan .btn { justify-content:center; margin-top:auto; }

/* ---------- вопросы ---------- */
.faq { max-width:820px; margin:44px auto 0; display:grid; gap:12px; }
.q { padding:0; overflow:hidden; }
.q button { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 24px; background:none; border:0; color:var(--ice); font:inherit; font-weight:700; font-size:16.5px; cursor:pointer; text-align:left; }
.q button i { font-style:normal; width:30px; height:30px; flex:none; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; transition:transform .4s var(--ease), background .3s; }
.q.open button i { transform:rotate(45deg); background:var(--violet); }
.q .a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.q.open .a { grid-template-rows:1fr; }
.q .a > div { overflow:hidden; } .q .a p { padding:0 24px 22px; color:var(--muted); }

/* ---------- финальный блок ---------- */
.final { margin:110px 0 0; padding:70px 30px; text-align:center; position:relative; overflow:hidden; }
.final::before { content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg,transparent,rgba(92,85,205,.35),transparent 30%); animation:spin 12s linear infinite; }
.final > * { position:relative; }
.final img { width:120px; margin:0 auto 10px; }
.final h2 em { display:block; }

/* ---------- страница тарифа ---------- */
.crumbs { display:flex; gap:8px; color:var(--muted); font-size:13px; padding-top:34px; }
.crumbs a:hover { color:var(--ice); }
.phero { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; padding:40px 0 10px; }
.phero h1 { font-size:clamp(46px,7vw,96px); line-height:.95; font-weight:800; letter-spacing:-.03em; margin:14px 0; }
.phero .price { margin-top:14px; }
.pmods { margin-top:40px; display:grid; grid-template-columns:320px 1fr; gap:26px; align-items:start; }
.plist { display:grid; gap:8px; position:sticky; top:90px; }
.plist button { display:flex; align-items:center; gap:12px; text-align:left; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:transparent; color:var(--muted); font:inherit; font-size:14.5px; cursor:pointer; transition:all .3s var(--ease); }
.plist button .ic { width:36px; height:36px; border-radius:11px; flex:none; transform:none; box-shadow:none; }
.plist button .ic svg { width:19px; height:19px; }
.plist button.on, .plist button:hover { color:var(--ice); border-color:rgba(138,131,240,.55); background:rgba(92,85,205,.13); transform:translateX(4px); }
.plist button.locked { opacity:.45; }
.pdetail { padding:30px; min-height:520px; }
.pdetail h3 { font-size:30px; line-height:1.1; margin-bottom:8px; }
.pdetail .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; align-items:start; }
.lock { display:flex; gap:12px; align-items:center; padding:14px 16px; border-radius:14px; background:rgba(213,230,241,.05); border:1px dashed var(--line); color:var(--muted); font-size:14px; margin-top:18px; }
.compare { margin-top:60px; overflow-x:auto; }
.compare table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px; }
.compare th, .compare td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
.compare th { color:var(--muted); font-weight:600; font-size:13px; }
.compare td.y { color:#8ee5ad; font-weight:700; } .compare td.n { color:#5f5d85; }
.compare tr:hover td { background:rgba(92,85,205,.07); }
.compare .cur { background:rgba(92,85,205,.12); }
.next { display:flex; justify-content:space-between; gap:16px; margin-top:50px; flex-wrap:wrap; }

/* ---------- подвал ---------- */
.foot { margin-top:110px; border-top:1px solid var(--line); padding:34px 0 30px; }
.foot .wrap { display:flex; align-items:center; gap:14px; }
.foot img { width:52px; } .foot small { display:block; color:var(--muted); font-size:13px; } .foot .btn { margin-left:auto; }
.note { text-align:center; color:#6f6d93; font-size:12px; margin-top:16px; }

@media (max-width:980px) {
  .hero, .phero, .demo, .pmods { grid-template-columns:1fr; }
  .stage { max-width:420px; margin:0 auto; order:-1; }
  .mods, .steps, .plans { grid-template-columns:1fr 1fr; }
  .bar nav { display:none; }
  .plist { position:static; grid-template-columns:1fr 1fr; }
  .pdetail .grid2 { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .wrap { padding:0 16px; }
  .mods, .steps, .plans, .plist { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; } .stats div:nth-child(3) { border-left:0; padding-left:10px; }
  .chip { display:none; }
  section { padding-top:80px; }
  .bar .btn { display:none; }
  .reel img { width:300px; }
  .hero { min-height:auto; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; filter:none; }
  .hero h1 .line > span { transform:none; }
}

/* ---------- контакты: сетка подстраивается под число плашек ---------- */
.cgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:10px; }
.ccard { grid-column:span 2; padding:26px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--brand) 30%,transparent); }
.ccard::after { content:""; position:absolute; width:260px; height:260px; right:-90px; top:-110px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--brand) 40%,transparent),transparent 65%); opacity:.55; transition:opacity .4s, transform .6s var(--ease); pointer-events:none; }
.ccard:hover::after { opacity:.9; transform:scale(1.15); }
.ccard::before { content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 22%,transparent),transparent 45%); opacity:0; transition:opacity .3s; pointer-events:none; }
.ccard:hover { border-color:color-mix(in srgb,var(--brand) 65%,transparent); } .ccard:hover::before { opacity:1; }
.cicon { width:58px; height:58px; flex:none; border-radius:18px; display:grid; place-items:center; background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 85%,#fff 0%),color-mix(in srgb,var(--brand) 55%,#0b0a1c)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 12px 34px color-mix(in srgb,var(--brand) 45%,transparent); position:relative; z-index:1; transition:transform .5s var(--ease); }
.ccard:hover .cicon { transform:rotate(-8deg) scale(1.08); }
.cicon svg { width:30px; height:30px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cbody { position:relative; z-index:1; min-width:0; }
.ccard small { display:block; color:var(--muted); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; }
.ccard b { display:block; font-size:21px; word-break:break-word; margin-top:4px; }
.ccard p { color:var(--muted); font-size:14px; margin-top:6px; }
.ccard .row { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; position:relative; z-index:1; }
/* 1 — одна длинная плашка, 2 — две половины, 3 — три колонки, 4 — сетка 2×2, 5 — три сверху и две снизу, 6+ — по три в ряд */
.cgrid.n1 .ccard { grid-column:span 6; flex-direction:row; align-items:center; padding:30px 34px; }
.cgrid.n1 .ccard b { font-size:28px; } .cgrid.n1 .cicon { width:72px; height:72px; } .cgrid.n1 .cicon svg { width:38px; height:38px; }
.cgrid.n1 .ccard .row { margin:0 0 0 auto; }
.cgrid.n2 .ccard, .cgrid.n4 .ccard { grid-column:span 3; }
.cgrid.n2 .ccard { flex-direction:row; align-items:center; flex-wrap:wrap; } .cgrid.n2 .ccard .row { margin-left:auto; }
.cgrid.n5 .ccard:nth-child(n+4) { grid-column:span 3; flex-direction:row; align-items:center; flex-wrap:wrap; }
.cgrid.n5 .ccard:nth-child(n+4) .row { margin-left:auto; }
@media (max-width:860px) { .cgrid .ccard, .cgrid.n4 .ccard, .cgrid.n2 .ccard { grid-column:span 3; } .cgrid.n1 .ccard, .cgrid.n3 .ccard:last-child, .cgrid.n5 .ccard:nth-child(n+4) { grid-column:span 6; } }
@media (max-width:560px) { .cgrid .ccard, .cgrid.n5 .ccard:nth-child(n+4) { grid-column:span 6 !important; flex-direction:column !important; align-items:flex-start !important; } .cgrid .ccard .row { margin:0 !important; } }
.admin-link { opacity:.45; text-decoration:underline dotted; transition:opacity .2s; }
.admin-link:hover { opacity:1; color:var(--ice); }
/* нажатие на плашку: копирует значение и заливает её небесным цветом */
.ccard[data-copy] { cursor:pointer; user-select:none; }
.ccard[data-copy]:active { transform:scale(.985) !important; }
.chint { align-self:center; font-size:12px; color:var(--muted); opacity:.7; }
.cflash { position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:12px; text-align:center; font-weight:800; font-size:18px; color:#141238; background:var(--ice); border-radius:inherit; opacity:0; pointer-events:none; clip-path:circle(0% at var(--mx,50%) var(--my,50%)); }
.ccard.copied .cflash { animation:sky 1.3s var(--ease) forwards; }
@keyframes sky { 0% { opacity:1; clip-path:circle(0% at var(--mx,50%) var(--my,50%)); } 30% { opacity:1; clip-path:circle(150% at var(--mx,50%) var(--my,50%)); } 75% { opacity:1; clip-path:circle(150% at var(--mx,50%) var(--my,50%)); } 100% { opacity:0; clip-path:circle(150% at var(--mx,50%) var(--my,50%)); } }