/* SHIELDS «Хрусталь»: светлая жемчужная тема (основная), тёмная индиго (переключатель, не чёрная). Контраст текста не ниже AA. */
@font-face{font-family:"Manrope";src:url("fonts/manrope-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope-800.ttf") format("truetype");font-weight:800;font-display:swap}
:root{
  color-scheme:light;
  --bg:#F7F5FF; --ink:#1E1B4B; --ink-2:#4F4A80; --line:#D9D2F5; --card:#FFFFFF; --btn-a:#7C3AED; --btn-b:#0E7490; --accent:#6D28D9;
  --sec-mint:#ECFBF8; --sec-sky:#EEF4FF; --sec-rose:#FBF1FA; --shadow:rgba(124,58,237,.16);
  --font:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --s-body:1.0625rem;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1E1B4B; --ink:#EEF0FF; --ink-2:#C9C4F2; --line:#4B3FA0; --card:#2A2470; --accent:#C4B5FD;
  --sec-mint:#1F2A5C; --sec-sky:#1F2660; --sec-rose:#2B1F5E; --shadow:rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--s-body)/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--accent)}
:focus-visible{outline:3px solid #0EA5B7;outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.ic{width:24px;height:24px;flex:none}
.sub{color:var(--ink-2);margin-top:10px;max-width:46em}
.note{color:var(--ink-2);font-size:.95rem}

/* шапка */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.02em;min-height:44px}
.brand-mark{width:40px;height:40px;display:block}
.brand-name span{color:var(--accent)}
.nav{display:flex;gap:4px 14px;flex-wrap:wrap;font-weight:600;font-size:.95rem}
.nav a{text-decoration:none;color:var(--ink-2);padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--accent)}
.tools{display:flex;align-items:center;gap:10px}
.langs{display:flex;gap:6px}
.langs a,.langs span{padding:10px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;color:var(--ink-2);background:var(--card)}
.langs span[aria-current]{background:linear-gradient(90deg,var(--btn-a),var(--btn-b));color:#fff;border-color:transparent}
.theme{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--accent);display:grid;place-items:center;cursor:pointer}

/* кнопки, плашки */
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:14px;font-weight:700;text-decoration:none;color:#fff;background:linear-gradient(90deg,var(--btn-a),var(--btn-b));box-shadow:0 8px 22px -6px var(--shadow)}
.btn.ghost{background:var(--card);color:var(--accent);border:2px solid transparent;background-image:linear-gradient(var(--card),var(--card)),linear-gradient(90deg,var(--btn-a),var(--btn-b));background-origin:border-box;background-clip:padding-box,border-box;box-shadow:none}
.btn:hover{filter:brightness(1.06)}
.btn .ic{width:20px;height:20px}
.pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:.82rem;font-weight:700;padding:5px 12px;border-radius:999px}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:#047857;background:#DDF7EC}.pill.wip{color:#1D4ED8;background:#E0EDFF}.pill.plan{color:#6D28D9;background:#EFE7FF}.pill.check{color:#9A4A06;background:#FFF0D6}.pill.soon{color:#0E7490;background:#D9F6F6}
[data-theme="dark"] .pill.ok{color:#6EE7B7;background:#0F4A44}[data-theme="dark"] .pill.wip{color:#93C5FD;background:#1B3A7A}[data-theme="dark"] .pill.plan{color:#C4B5FD;background:#43329A}[data-theme="dark"] .pill.check{color:#FCD34D;background:#5A3A12}[data-theme="dark"] .pill.soon{color:#67E8F9;background:#0F4A5A}

/* hero */
.hero{padding-block:clamp(28px,5vw,72px);background:radial-gradient(ellipse at 15% 10%,#E4DAFF 0,transparent 55%),radial-gradient(ellipse at 85% 20%,#CFEFFF 0,transparent 50%),radial-gradient(ellipse at 50% 100%,#CFF5EE 0,transparent 55%),var(--bg);position:relative}
[data-theme="dark"] .hero{background:radial-gradient(ellipse at 15% 10%,#3B2A8F 0,transparent 55%),radial-gradient(ellipse at 85% 20%,#1D4A8A 0,transparent 50%),radial-gradient(ellipse at 50% 100%,#14566A 0,transparent 55%),var(--bg)}
.hero{overflow:hidden}.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,4vw,56px);align-items:center}
.hero .wrap>*{min-width:0}
.eyebrow{font-size:.86rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0E7490}
[data-theme="dark"] .eyebrow{color:#67E8F9}
.hero h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin-top:12px;background:linear-gradient(90deg,#6D28D9,#0B6E82);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .hero h1{background:linear-gradient(90deg,#C4B5FD,#67E8F9);-webkit-background-clip:text;background-clip:text}
.hero .lead{font-size:1.2rem;color:var(--ink-2);margin-top:18px;max-width:33em}
.hero .cta{margin-top:24px}
.legend{margin-top:18px;font-size:.9rem;color:var(--ink-2)}
.atom{position:relative;max-width:600px;margin:0 auto;width:100%;aspect-ratio:1}
.atom::before{content:"";position:absolute;inset:-2%;border-radius:50%;background:radial-gradient(circle,#FFFFFF 0,#F1ECFF 66%,rgba(241,236,255,0) 80%)}
.atom img{position:absolute;inset:0;width:100%;height:100%;animation:float 9s ease-in-out infinite}
.ring{position:absolute;inset:-3%;border-radius:50%;border:1.5px dashed rgba(124,58,237,.35)}
.ring::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:#7C3AED;box-shadow:0 0 14px #7C3AED}
.r1{animation:spin 80s linear infinite}
.r2{inset:7%;border-color:rgba(14,165,183,.4);animation:spin 120s linear infinite reverse}
.r2::after{background:#0EA5B7;box-shadow:0 0 14px #0EA5B7}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-8px)}}

/* факты и как это работает */
.facts{padding-block:28px}
.facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.facts li{background:var(--card);border:2px solid #C4B5FD;border-radius:20px;padding:18px 20px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i n" "i t";column-gap:14px;align-items:center;box-shadow:0 10px 28px -14px var(--shadow)}
.facts li:nth-child(2){border-color:#67E8F9}.facts li:nth-child(3){border-color:#6EE7B7}
.facts .ic{grid-area:i;width:34px;height:34px;color:var(--accent)}
.facts b{grid-area:n;font-size:2.4rem;line-height:1;font-weight:800;background:linear-gradient(90deg,#7C3AED,#0B6E82);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .facts b{background:linear-gradient(90deg,#C4B5FD,#67E8F9);-webkit-background-clip:text;background-clip:text}
.facts span{grid-area:t;color:var(--ink-2);font-size:.96rem}
.facts .note{margin-top:12px}
.flow{padding-block:clamp(36px,5vw,60px);background:linear-gradient(180deg,var(--bg),var(--sec-mint) 20%,var(--sec-mint) 80%,var(--bg))}
.flow h2,.tarify h2,.dev h2,.ladder h2,.intro h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800}
.how{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.how li{background:var(--card);border:2px solid #6EE7B7;border-radius:20px;padding:22px;position:relative;display:grid;gap:8px;align-content:start}
.how li:nth-child(2){border-color:#93C5FD}.how li:nth-child(3){border-color:#C4B5FD}
.how .ic{width:34px;height:34px;color:var(--accent)}
.how .hn{position:absolute;top:14px;right:16px;font-weight:800;font-size:1.6rem;color:var(--line)}
.how h3{font-size:1.15rem}.how p{color:var(--ink-2)}

/* модули */
.modules .intro{padding-block:clamp(28px,4vw,48px) 8px}
.mod{padding-block:clamp(36px,6vw,72px);background:linear-gradient(180deg,var(--bg) 0,var(--tint) 14%,var(--tint) 86%,var(--bg) 100%)}
[data-theme="dark"] .mod{background:linear-gradient(180deg,var(--bg) 0,color-mix(in srgb,var(--c1) 20%,var(--bg)) 14%,color-mix(in srgb,var(--c1) 20%,var(--bg)) 86%,var(--bg) 100%)}
.mod .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,4vw,56px);align-items:start}
.mod:nth-of-type(even) .wrap{grid-template-columns:1.15fr .85fr}
.mod:nth-of-type(even) .scene{order:2}
.mod .wrap>*{min-width:0}
.scene{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin:0 auto}
@media (min-width:1101px){.mod .scene{position:sticky;top:96px}}
.scene .glow{position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--c2) 55%,transparent) 0,color-mix(in srgb,var(--c1) 16%,transparent) 48%,transparent 70%)}
.crystal{position:absolute;inset:8%;width:84%;height:84%;animation:float 8s ease-in-out infinite}
.chip{position:absolute;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);border:2px solid var(--c1);color:var(--deep);box-shadow:0 8px 20px -8px var(--c1);backdrop-filter:blur(4px)}
.chip .ic{width:26px;height:26px}
.c0{top:6%;left:6%}.c1{top:12%;right:2%}.c2{bottom:8%;left:50%}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tile{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:#fff;background:linear-gradient(135deg,var(--deep) 0,var(--deep) 60%,var(--c1));box-shadow:0 10px 22px -8px var(--c1)}
.mname{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;color:var(--deep)}
[data-theme="dark"] .mname{color:var(--dk)}
.mod .body{display:grid;gap:16px}
.mod h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.12;font-weight:800}
.ben{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ben li{display:flex;align-items:center;gap:12px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--c1) 40%,var(--line));border-radius:14px;padding:10px 14px;font-weight:600}
.ben .ic{width:38px;height:38px;padding:8px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--deep),var(--c1))}
.accs{display:grid;gap:10px;margin-top:6px}
.accs-h{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.82rem;color:var(--deep)}
[data-theme="dark"] .accs-h{color:var(--dk)}
.acc{background:var(--card);border:1.5px solid color-mix(in srgb,var(--c1) 45%,var(--line));border-left:5px solid var(--c1);border-radius:14px;overflow:hidden}
.acc>summary{list-style:none;cursor:pointer;padding:14px 18px;font-weight:700;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--c1);border-bottom:2.5px solid var(--c1);transform:rotate(45deg);transition:transform .2s;flex:none;margin-right:4px}
.acc[open]>summary::after{transform:rotate(-135deg)}
.acc>div{padding:0 18px 16px;color:var(--ink-2)}
.acc.tech{border-style:dashed;border-left-style:dashed}
.acc ul{margin:0;padding-left:20px;display:grid;gap:8px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps .n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--deep) 0,var(--deep) 60%,var(--c1))}

/* тарифы, разработка, версии */
.tarify{padding-block:clamp(36px,5vw,64px);background:linear-gradient(180deg,var(--bg),var(--sec-sky) 16%,var(--sec-sky) 84%,var(--bg))}
.tars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.tar{background:var(--card);border:2px solid var(--c1);border-top-width:6px;border-radius:22px;padding:22px;display:grid;gap:12px;align-content:start;box-shadow:0 14px 30px -16px var(--c1)}
.tl{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--c1)}
.tar h3{font-size:1.4rem}.tar .who{color:var(--ink-2)}
.tar ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tar li{display:flex;gap:10px;align-items:flex-start}.tar li .ic{width:22px;height:22px;color:var(--c1)}
.price{font-weight:800;color:var(--ink)}
.dev{padding-block:clamp(36px,5vw,64px);background:linear-gradient(180deg,var(--bg),var(--sec-rose) 16%,var(--sec-rose) 84%,var(--bg))}
.host{margin-top:22px;background:var(--card);border:2px solid #7DD3FC;border-radius:22px;padding:24px;display:grid;gap:10px}
.host h3{font-size:1.4rem;display:inline;margin-right:10px}.lead2{font-weight:700;margin-top:8px}
.h3s{margin-top:28px;font-size:1.25rem}
.news{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.news li{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:8px;align-content:start}
.news h3{font-size:1.05rem}.news p{color:var(--ink-2);font-size:.97rem}
.news .pill{justify-self:start}
.ladder{padding-block:clamp(36px,5vw,64px)}
.ladder ol{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.ladder li{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px 16px}
.ladder li b{font-weight:800;color:var(--accent)}
footer{border-top:1.5px solid var(--line);padding-block:28px;color:var(--ink-2);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* подсказки «?» */
.tip{position:relative;border-bottom:1.5px dotted var(--accent)}
.tipd{display:inline-block;position:relative}
.tipd>summary{list-style:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:800;cursor:pointer;position:relative}
.tipd>summary::-webkit-details-marker{display:none}
.tipd>summary::after{content:"";position:absolute;inset:-11px}
.tipbody{position:absolute;z-index:5;left:0;top:30px;width:min(280px,80vw);padding:12px 14px;border-radius:12px;background:var(--card);border:1.5px solid var(--accent);box-shadow:0 12px 28px -10px var(--shadow);font-size:.95rem;color:var(--ink);font-weight:400}

/* страницы журнала, демонстрации и модуля */
.doc main{max-width:960px;margin:auto;padding:24px 16px 48px}
.doc h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.1;margin-top:8px}
.doc h2{font-size:1.5rem;margin-top:30px}
.doc .card{padding:22px;border:2px solid var(--line);border-radius:20px;background:var(--card);margin-top:12px}
.doc .card li{margin-bottom:8px}
.doc .card.ladder{padding:22px}
.mp main{padding-bottom:20px}
.mp .mod{padding-block:32px}

/* адаптивность */
@media (max-width:1100px){
  .mod .wrap,.mod:nth-of-type(even) .wrap{grid-template-columns:minmax(0,1fr)}
  .mod:nth-of-type(even) .scene{order:0}
  .scene{max-width:380px}
}
@media (max-width:900px){.top .brand{order:1}.tools{order:2;margin-left:auto}.nav{order:3;width:100%}}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .atom{max-width:440px}
  .tars,.news,.how,.facts ul{grid-template-columns:1fr 1fr}
  .tars .tar:last-child,.how li:last-child,.facts li:last-child{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  .tars,.news,.how,.facts ul{grid-template-columns:1fr}
  .tars .tar:last-child,.how li:last-child,.facts li:last-child{grid-column:auto}
  .top .wrap{gap:6px}
  .nav{gap:0 10px;order:3;width:100%;font-size:.92rem}
  .ladder li{grid-template-columns:3.6rem minmax(0,1fr)}
  .ladder li .pill{grid-column:2;justify-self:start}
  .ring{display:none}
  .crystal,.atom img{animation:none}
  .chip{width:46px;height:46px}.chip .ic{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
html[lang="zh-Hans"] body{font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC","Noto Sans CJK SC","Segoe UI",sans-serif}
.beta{background:#FFF0D6;color:#8A4A06;text-align:center;padding:10px 16px;font-size:.95rem}

/* круг 2: сцены, подсказки, поток, мобильный первый экран, касания */
.sceneart{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.crystal{inset:19%;width:62%;height:62%}
.value{margin-top:14px;font-weight:700;font-size:1.2rem;color:var(--ink)}
.tcr{position:absolute;top:10px;right:10px;width:72px;height:72px;opacity:.95}
.tar{position:relative}
.stream{display:block;width:60px;height:80px;margin:0 auto 6px}
.stream .sl{stroke-dasharray:6 10}
@media (prefers-reduced-motion:no-preference){.stream .sl{animation:sd 5s linear infinite}@keyframes sd{to{stroke-dashoffset:-64}}}
.glow{will-change:transform}
.sub a,footer a,.doc main a{display:inline-block;padding:10px 2px;min-height:44px}
.doc main p>a{padding:12px 2px}
@media (max-width:900px){.top .brand{order:1}.tools{order:2;margin-left:auto}.nav{order:3;width:100%}}
@media (max-width:860px){
  .hero{padding-block:14px 28px}
  .hero .wrap{gap:12px}
  .atom{order:-1;max-width:300px}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem)}
}
@media (max-width:640px){
  .nav{flex-wrap:nowrap;overflow-x:auto;gap:0 14px;font-size:1rem;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;width:calc(100% + 32px)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:none}
  .top .wrap{padding-block:6px}
  .legend,.note,.facts span,.sub,.news p,.acc>div,.how p,.tar li,.tar .who,.langs a,.langs span,.pill,.mname,.accs-h,.ben li,.eyebrow,.tipbody,footer{font-size:1rem}
  .pill{padding:4px 10px}
  .stream{height:56px}
  .tcr{width:56px;height:56px}
}

/* круг 2: «?» — настоящая область касания 44 px, подсказка меню, широкий экран */
.tipd>summary{width:44px;height:44px;margin:-11px -9px -11px -7px;background:none;color:inherit;font-size:0;position:relative;vertical-align:middle}
.tipd>summary::before{content:"?";position:absolute;top:11px;left:11px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:.8rem;font-weight:800;display:grid;place-items:center}
.tipd>summary::after{display:none}
.tipbody{top:36px}
@media (max-width:640px){
  .nav{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 88%,transparent);padding-right:36px}
  .nav::after{content:"";flex:none;width:1px}
}
@media (min-width:1800px){
  .wrap{max-width:1500px}
  .hero .wrap{grid-template-columns:1fr 1fr}
  .atom{max-width:680px}
  .scene{max-width:540px}
}