/* ═══════════════════════════════════════════════════════════════
   DARU / MAGIC KIT — премиальная дизайн-система в эстетике
   21st.dev / Magic UI / shadcn (тёмная тема) для WordPress.
   Компоненты: aurora, grid-pattern, spotlight, border-beam,
   marquee, ticker, shimmer, bento, reveal.
   ═══════════════════════════════════════════════════════════════ */

:root{
	--bg:#050508; --bg2:#0A0A12; --card:#0C0C15; --card2:#10101B;
	--line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.05);
	--txt:#F2F2F7; --muted:#9B9BAC; --faint:#63637A;
	--violet:#8B7CFF; --cyan:#5EE6F2; --pink:#F472B6;
	--grad:linear-gradient(120deg,#8B7CFF 0%,#5EE6F2 100%);
	--sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
	--mono:"JetBrains Mono","SF Mono",Consolas,monospace;
	--gut:clamp(20px,4.5vw,56px); --max:1200px;
	--r:16px; --r-lg:24px;
	--ease:cubic-bezier(.16,1,.3,1);
}

/* ─── база ─── */
body{background:var(--bg);color:var(--txt);font-family:var(--sans)!important;letter-spacing:-.014em}
::selection{background:rgba(139,124,255,.35);color:#fff}
::-webkit-scrollbar-thumb{background:#22222e}

/* ─── обёртки секций ─── */
.mk-sec{position:relative;padding-block:clamp(72px,11vh,128px)}
.mk-sec--tight{padding-block:clamp(44px,7vh,80px)}
.mk-wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);width:100%;position:relative;z-index:1}
.mk-dark{background:var(--bg);color:var(--txt)}
.mk-dark2{background:var(--bg2)}
.mk-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);width:100%;position:relative;z-index:1}

/* ─── фоны: aurora + grid ─── */
.mk-aurora{position:relative;overflow:hidden}
.mk-aurora::before{
	content:"";position:absolute;inset:-40%;
	background:
		radial-gradient(38% 42% at 18% 12%,rgba(139,124,255,.16),transparent 62%),
		radial-gradient(34% 38% at 82% 8%,rgba(94,230,242,.10),transparent 60%),
		radial-gradient(30% 36% at 55% 95%,rgba(244,114,182,.07),transparent 65%);
	filter:blur(30px);animation:mk-aur 16s ease-in-out infinite alternate;pointer-events:none
}
@keyframes mk-aur{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,2%,0) scale(1.06)}}
.mk-grid{position:relative}
.mk-grid::before{
	content:"";position:absolute;inset:0;pointer-events:none;
	background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
	background-size:56px 56px;
	-webkit-mask-image:radial-gradient(70% 60% at 50% 26%,#000 30%,transparent 100%);
	mask-image:radial-gradient(70% 60% at 50% 26%,#000 30%,transparent 100%)
}
.mk-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5}
.mk-glow--v{background:rgba(139,124,255,.16)}
.mk-glow--c{background:rgba(94,230,242,.10)}

/* ─── типографика ─── */
.mk-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mk-kicker::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--violet),transparent)}
.mk-kicker--dot::before{width:6px;height:6px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px rgba(139,124,255,.9)}
.mk-h1{font-family:var(--sans)!important;font-size:clamp(42px,6.2vw,84px)!important;line-height:1.03!important;font-weight:800!important;letter-spacing:-.035em!important;color:var(--txt)!important;margin:0!important}
.mk-h2{font-family:var(--sans)!important;font-size:clamp(30px,4.2vw,56px)!important;line-height:1.06!important;font-weight:700!important;letter-spacing:-.03em!important;color:var(--txt)!important;margin:0!important}
.mk-h3{font-family:var(--sans)!important;font-size:clamp(19px,2vw,24px)!important;font-weight:650!important;letter-spacing:-.02em!important;color:var(--txt)!important;margin:0!important}
.mk-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.mk-lead{color:var(--muted);font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:600px;margin:22px 0 0}
.mk-lead b,.mk-lead strong{color:var(--txt);font-weight:600}
.mk-sub{color:var(--faint);font-size:13px;font-family:var(--mono);letter-spacing:.04em;margin-top:14px}
.mk-num{font-family:var(--mono);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);font-weight:700}

/* ─── бейдж ─── */
.mk-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);backdrop-filter:blur(8px);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mk-badge i{width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 10px rgba(74,222,128,.9);animation:mk-pulse 2.4s ease-in-out infinite;font-style:normal}
.mk-badge--grad i{background:var(--violet);box-shadow:0 0 10px rgba(139,124,255,.9)}
@keyframes mk-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── кнопки ─── */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;text-decoration:none;transition:all .3s var(--ease);cursor:pointer}
.mk-btn--primary{background:#fff;color:#09090f}
.mk-btn--primary:hover{box-shadow:0 0 0 4px rgba(139,124,255,.18),0 12px 40px rgba(139,124,255,.25);transform:translateY(-1px)}
.mk-btn--ghost{border-color:var(--line);color:var(--txt);background:rgba(255,255,255,.02)}
.mk-btn--ghost:hover{border-color:rgba(139,124,255,.5);background:rgba(139,124,255,.07)}
/* shimmer — кнопка с бегущим градиентным ободком */
.mk-shimmer{position:relative;padding:15px 28px;border-radius:999px;background:#0d0d18;color:var(--txt);border:1px solid var(--line);overflow:hidden}
.mk-shimmer::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--sh-ang,0deg),transparent 0%,rgba(139,124,255,.9) 12%,rgba(94,230,242,.9) 22%,transparent 38%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:mk-sh 3.2s linear infinite}
.mk-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);transform:translateX(-100%);animation:mk-shine 3.2s ease infinite}
.mk-shimmer:hover{box-shadow:0 0 40px rgba(139,124,255,.22)}
@keyframes mk-sh{to{--sh-ang:360deg}}
@property --sh-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes mk-shine{60%{transform:translateX(100%)}100%{transform:translateX(100%)}}

/* ─── spotlight-карточка: подсветка за курсором ─── */
.mk-card{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card),#0A0A12);padding:26px;overflow:hidden;transition:border-color .35s,transform .35s var(--ease)}
.mk-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(480px circle at var(--mx,50%) var(--my,50%),rgba(139,124,255,.09),transparent 42%);opacity:0;transition:opacity .4s;pointer-events:none}
.mk-card:hover{border-color:rgba(139,124,255,.32);transform:translateY(-3px)}
.mk-card:hover::before{opacity:1}
.mk-card h3,.mk-card .mk-h3{margin-top:0!important}
.mk-card p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:10px 0 0}
.mk-card .mk-mono{color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.mk-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(139,124,255,.14),rgba(139,124,255,.03));color:var(--violet);font-size:18px;margin-bottom:16px}

/* ─── border beam — бегущий луч по рамке ─── */
.mk-beam{position:relative}
.mk-beam::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--bb-ang,0deg),transparent 0%,rgba(139,124,255,.7) 8%,rgba(94,230,242,.6) 14%,transparent 24%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:mk-bb 5s linear infinite;pointer-events:none}
@property --bb-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes mk-bb{to{--bb-ang:360deg}}

/* ─── сетки ─── */
.mk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mk-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mk-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.mk-grid3,.mk-grid4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.mk-grid2,.mk-grid3,.mk-grid4{grid-template-columns:1fr}}

/* ─── бенто ─── */
.mk-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.mk-bento>*{grid-column:span 2}
.mk-bento>*:first-child,.mk-bento>*:last-child{grid-column:span 3}
@media(max-width:980px){.mk-bento{grid-template-columns:1fr 1fr}.mk-bento>*{grid-column:auto!important}}

/* ─── тикеры (статистика) ─── */
.mk-stat{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--card),#0A0A12);padding:22px}
.mk-stat b{display:block;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mk-stat b em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-stat > span{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ─── marquee ─── */
.mk-marquee{overflow:hidden;position:relative;--gap:44px;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mk-marquee__track{display:flex;align-items:center;gap:var(--gap);width:max-content;animation:mk-mq 28s linear infinite}
.mk-marquee:hover .mk-marquee__track{animation-play-state:paused}
.mk-marquee span{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.mk-marquee span i{font-style:normal;color:var(--violet);padding-left:var(--gap)}
@keyframes mk-mq{to{transform:translateX(-50%)}}

/* ─── шаги процесса ─── */
.mk-step{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card),#0A0A12);padding:26px 24px}
.mk-step__no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--violet);display:inline-flex;align-items:center;gap:8px}
.mk-step__no::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--violet),transparent)}
.mk-step h3{margin:14px 0 0!important}
.mk-step p{color:var(--muted);font-size:14px;line-height:1.7;margin:10px 0 0}
.mk-step .mk-dur{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:999px;padding:5px 11px}

/* ─── FAQ ─── */
.mk-faq{border-top:1px solid var(--line)}
.mk-faq__i{border-bottom:1px solid var(--line2)}
.mk-faq__q{padding:20px 0 6px;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--txt);margin:0!important}
.mk-faq__a{color:var(--muted);font-size:14.5px;line-height:1.75;padding:0 0 20px;margin:0!important}
.mk-faq__a a{color:var(--txt);border-bottom:1px solid rgba(139,124,255,.5)}

/* ─── прайс-реестр ─── */
.mk-price{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--card),#0A0A12)}
.mk-price__r{display:grid;grid-template-columns:56px minmax(0,.9fr) minmax(0,1.25fr) auto;gap:12px 28px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line2);transition:background .25s}
.mk-price__r:last-child{border-bottom:0}
.mk-price__r:hover{background:rgba(139,124,255,.05)}
.mk-price__no{font-family:var(--mono);font-size:12px;color:var(--faint)}
.mk-price__t b{display:block;font-size:17px;font-weight:650;letter-spacing:-.015em}
.mk-price__t span{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint)}
.mk-price__d{color:var(--muted);font-size:13.5px;line-height:1.6}
.mk-price__p{text-align:right}
.mk-price__p b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mk-price__p span{display:block;margin-top:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media(max-width:900px){.mk-price__r{grid-template-columns:44px 1fr auto}.mk-price__d{grid-column:2/-1}.mk-price__p{grid-row:1;grid-column:3}}

/* ─── чипы ─── */
.mk-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:9px 15px;color:var(--muted);transition:all .25s}
.mk-chip:hover{border-color:rgba(139,124,255,.5);color:var(--txt)}
.mk-chip--lit{color:var(--violet);border-color:rgba(139,124,255,.35)}

/* ─── reveal-анимация: scroll-driven (Chromium 115+), остальные браузеры — просто видно ─── */
@keyframes mk-reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.mk-rv{animation:mk-reveal .9s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 55%}
.mk-rv.mk-in,.mk-rv[data-noanim]{animation:none}
@supports not (animation-timeline: view()){
	.mk-rv{animation:none;opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
	.mk-rv{animation:none}
	.mk-aurora::before,.mk-shimmer::before,.mk-shimmer::after,.mk-beam::after,.mk-marquee__track,.mk-badge i{animation:none}
}

/* ─── хедер/футер поверх старой темы ─── */
.top{background:rgba(5,5,8,.72)!important;border-bottom:1px solid var(--line2)!important}
.brand{color:var(--txt)!important}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.brand .dot{background:var(--violet)!important;box-shadow:0 0 14px rgba(139,124,255,.9)!important}
.nav a{color:var(--muted)!important;font-family:var(--mono)!important;font-size:11.5px!important}
.nav a:hover{color:var(--txt)!important}
.nav__cta{border-color:var(--line)!important;color:var(--txt)!important}
.nav__cta:hover{border-color:rgba(139,124,255,.5)!important;background:rgba(139,124,255,.08)!important}
.top__clock{font-family:var(--mono);color:var(--faint)}
.foot{border-top:1px solid var(--line2)!important;color:var(--faint)!important}
.foot a:hover{color:var(--violet)!important}

/* блог-пост под новый стиль */
.single-post p{color:#B9B9C6!important}
.single-post strong{color:var(--txt)!important}
.single-post h2{border-top:1px solid var(--line);padding-top:22px}

/* адаптив составных сеток страниц */
@media(max-width:920px){
	.mk-hero-grid{grid-template-columns:1fr!important}
	.mk-split{grid-template-columns:1fr!important}
}