*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fff7ee;--ink:#172032;--muted:#687084;--soft:#fff2e8;
  --panel:rgba(255,255,255,.62);--panel-strong:rgba(255,255,255,.88);
  --line:rgba(145,101,79,.16);--neo:#34aef2;--mira:#ef7fae;--gold:#e8bd62;
  --shadow:0 26px 90px rgba(180,128,91,.18);
  --hero:image-set(url("/assets/hero-light.webp?v=20260703c") type("image/webp"),url("/assets/hero-light.jpg?v=20260703c") type("image/jpeg"));
}
body.dark{
  --bg:#070b18;--ink:#f6f7ff;--muted:#a4abc2;--soft:#10172d;
  --panel:rgba(12,16,34,.56);--panel-strong:rgba(16,22,42,.80);
  --line:rgba(255,255,255,.14);--shadow:0 28px 100px rgba(0,0,0,.42);
  --hero:image-set(url("/assets/hero-dark.webp?v=20260703c") type("image/webp"),url("/assets/hero-dark.jpg?v=20260703c") type("image/jpeg"));
}
html{scroll-behavior:smooth;background:var(--bg)}
body{min-height:100vh;font-family:"Nunito Sans",Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;transition:background .45s ease,color .45s ease;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
p{font-weight:520}
.site-bg{min-height:100vh;position:relative;isolation:isolate;overflow:hidden}
.site-bg::before{content:"";position:fixed;inset:0;z-index:-4;background-image:var(--hero);background-size:cover;background-position:center;transform:scale(1.02);filter:saturate(1.08) brightness(1.04);transition:opacity .45s ease}
.site-bg::after{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(circle at 50% 33%,rgba(255,255,255,.72),transparent 23%),radial-gradient(circle at 80% 12%,rgba(255,211,157,.34),transparent 28%),radial-gradient(circle at 18% 20%,rgba(169,222,255,.28),transparent 26%),linear-gradient(90deg,rgba(255,249,240,.68),rgba(255,255,255,.28) 40%,rgba(255,246,236,.22) 64%,rgba(255,222,211,.42));transition:background .45s ease}
body.dark .site-bg::after{background:radial-gradient(circle at 50% 38%,rgba(125,120,190,.18),transparent 24%),linear-gradient(90deg,rgba(3,8,20,.82),rgba(10,12,30,.46) 38%,rgba(10,9,24,.38) 62%,rgba(31,13,27,.66))}
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.24;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.orb{position:fixed;border-radius:999px;pointer-events:none;filter:blur(4px);opacity:.74;animation:float 8s ease-in-out infinite}
.orb.neo{left:8%;top:22%;width:210px;height:210px;border:1px solid rgba(79,195,247,.32);box-shadow:0 0 70px rgba(79,195,247,.28),inset 0 0 40px rgba(79,195,247,.13)}
.orb.mira{right:9%;top:22%;width:230px;height:230px;border:1px solid rgba(244,143,177,.30);box-shadow:0 0 80px rgba(244,143,177,.30),inset 0 0 48px rgba(227,184,79,.12);animation-delay:-2s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-16px) scale(1.03)}}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.30);backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}
body.dark .nav{background:rgba(5,8,20,.42)}
.mobile-nav{display:none}
.brand-wrap{display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:950;letter-spacing:-.04em;font-size:21px}
.brand em{font-style:normal;color:var(--neo)}
.brand-mark{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--neo),var(--mira));box-shadow:0 10px 34px rgba(79,195,247,.22);position:relative}
.brand-mark::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid rgba(255,255,255,.82);border-left-color:transparent}
.theme{border:1px solid var(--line);background:var(--panel-strong);color:var(--ink);height:38px;min-width:38px;border-radius:999px;cursor:pointer;box-shadow:0 10px 34px rgba(40,55,90,.1);font-size:16px}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{color:var(--muted);font-size:14px;text-decoration:none;font-weight:750}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:10px}
.cta,.pill-cta{background:linear-gradient(135deg,var(--neo),#92ddff);color:#06101a;border:0;text-decoration:none;font-weight:950;padding:12px 19px;border-radius:999px;box-shadow:0 16px 40px rgba(40,174,234,.24);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.cta.mira,.pill-cta.mira{background:linear-gradient(135deg,var(--mira),#ffd7a3);color:#150714;box-shadow:0 16px 40px rgba(244,143,177,.24)}
.hero{min-height:calc(100vh - 74px);display:grid;place-items:center;padding:48px 24px 82px;text-align:center}
.hero-inner{width:min(1060px,100%);display:grid;justify-items:center}
.portal-stage{width:min(1240px,100%);display:grid;grid-template-columns:minmax(220px,280px) minmax(560px,1fr) minmax(220px,280px);gap:20px;align-items:center}
.guide-card{min-height:390px;border-radius:42px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(255,255,255,.18));border:1px solid rgba(255,255,255,.58);box-shadow:var(--shadow);backdrop-filter:blur(18px);position:relative;overflow:hidden}
.guide-card::before{content:"";position:absolute;inset:0;background:var(--guide-art);opacity:.88}
.guide-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(255,255,255,.82),rgba(255,255,255,.25) 42%,transparent)}
body.dark .guide-card::after{background:linear-gradient(to top,rgba(8,12,28,.86),rgba(8,12,28,.22) 45%,transparent)}
.guide-card>*{position:relative;z-index:1}.guide-card.neo-guide{--guide-art:radial-gradient(circle at 50% 35%,rgba(255,255,255,.9),transparent 9%),radial-gradient(circle at 50% 35%,rgba(70,190,255,.72),transparent 22%),repeating-radial-gradient(circle at 50% 35%,rgba(52,174,242,.28) 0 2px,transparent 3px 22px),linear-gradient(160deg,rgba(109,207,255,.58),rgba(40,114,210,.18) 58%,rgba(255,255,255,.1))}
.guide-card.mira-guide{--guide-art:radial-gradient(circle at 55% 30%,rgba(255,239,173,.92),transparent 12%),radial-gradient(circle at 48% 36%,rgba(255,139,186,.66),transparent 25%),radial-gradient(circle at 72% 22%,rgba(255,255,255,.55),transparent 6%),linear-gradient(145deg,rgba(255,172,205,.56),rgba(255,225,171,.25) 62%,rgba(255,255,255,.1))}
.guide-kicker{font-size:13px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:950;margin-bottom:10px}.guide-card h2{font-size:26px;letter-spacing:-.035em;line-height:1.05;margin-bottom:8px}.guide-card p{color:var(--muted);line-height:1.55;font-weight:650}
.hero-core{display:grid;justify-items:center;text-align:center}
.hero-core h1{font-size:clamp(54px,5.2vw,82px);white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;color:var(--muted);background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 10px 36px rgba(40,55,90,.08);font-size:13px;font-weight:800;margin-bottom:20px}
h1,.h1{font-size:clamp(43px,6.3vw,88px);line-height:1.08;letter-spacing:-.026em;max-width:980px;font-weight:850;text-wrap:balance}
.neo-word{color:var(--neo);text-shadow:0 0 32px rgba(79,195,247,.22)}
.mira-word{color:var(--mira);text-shadow:0 0 32px rgba(244,143,177,.24)}
.lead{margin-top:24px;max-width:780px;color:var(--muted);font-size:clamp(17px,1.65vw,23px);line-height:1.58;font-weight:650;text-wrap:balance}
.mirror{width:min(760px,100%);margin-top:34px;padding:18px;border:1px solid rgba(255,255,255,.58);border-radius:34px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,250,242,.58));backdrop-filter:blur(24px);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.7)}
body.dark .mirror{background:linear-gradient(135deg,rgba(16,22,42,.82),rgba(19,18,40,.58));border-color:var(--line)}
.mirror-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-weight:950;margin-bottom:14px}
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.36);color:var(--ink);min-height:66px;border-radius:20px;font-weight:950;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;font:inherit}
body.dark .chip{background:rgba(255,255,255,.05)}
.chip:hover,.chip.active{transform:translateY(-3px);background:rgba(255,255,255,.74);border-color:rgba(244,143,177,.35);box-shadow:0 14px 40px rgba(244,143,177,.18)}
body.dark .chip:hover,body.dark .chip.active{background:rgba(255,255,255,.1)}
.answer{margin-top:14px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;padding:16px;border-radius:22px;background:rgba(255,255,255,.48);border:1px solid var(--line)}
body.dark .answer{background:rgba(255,255,255,.06)}
.avatar{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,rgba(79,195,247,.18),rgba(244,143,177,.18))}
.answer strong{display:block;font-size:16px;margin-bottom:3px}.answer span{color:var(--muted);font-size:14px;line-height:1.45}.answer a{white-space:nowrap}
.hero-duo-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}.hero-duo-actions .pill-cta{min-width:150px}
.scenario-grid{width:min(1060px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.card,.scenario{background:linear-gradient(145deg,var(--panel-strong),var(--panel));border:1px solid rgba(255,255,255,.56);border-radius:28px;backdrop-filter:blur(20px);box-shadow:0 18px 52px rgba(180,128,91,.12);position:relative;overflow:hidden}
body.dark .card,body.dark .scenario{border-color:var(--line);box-shadow:0 12px 40px rgba(0,0,0,.22)}
a.card{text-decoration:none!important;color:var(--ink);display:block}
a.card,a.card:visited,a.card:hover,a.card:focus,a.card *,a.card *:hover{text-decoration:none!important}
a.card:hover{transform:translateY(-3px);transition:transform .2s ease,border-color .2s ease;border-color:rgba(244,143,177,.32)}
.scenario{text-align:left;min-height:168px;padding:20px}
.scenario::after,.info-card::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;opacity:.62;background:var(--art,linear-gradient(135deg,rgba(52,174,242,.18),rgba(239,127,174,.16)));pointer-events:none;mask-image:linear-gradient(to top,#000,transparent)}
.scenario::before{content:"";position:absolute;inset:auto 16px 0 16px;height:2px;background:linear-gradient(90deg,var(--neo),var(--mira));opacity:.55}
.scenario .icon{font-size:27px;margin-bottom:18px}.scenario h3{font-size:17px;letter-spacing:-.03em;margin-bottom:8px}.scenario p{font-size:13px;color:var(--muted);line-height:1.55}
.scenario:nth-child(1),.info-card:nth-child(4n+1){--art:radial-gradient(circle at 75% 35%,rgba(255,255,255,.68),transparent 18%),linear-gradient(135deg,rgba(88,190,255,.34),rgba(105,156,255,.10)),linear-gradient(180deg,transparent,rgba(50,133,218,.26))}
.scenario:nth-child(2),.info-card:nth-child(4n+2){--art:radial-gradient(circle at 78% 38%,rgba(255,234,183,.7),transparent 18%),linear-gradient(135deg,rgba(255,180,205,.30),rgba(255,232,184,.20)),linear-gradient(180deg,transparent,rgba(239,127,174,.20))}
.scenario:nth-child(3),.info-card:nth-child(4n+3){--art:radial-gradient(circle at 76% 38%,rgba(255,255,255,.64),transparent 18%),linear-gradient(135deg,rgba(206,181,255,.32),rgba(255,199,226,.18)),linear-gradient(180deg,transparent,rgba(132,95,214,.20))}
.scenario:nth-child(4),.info-card:nth-child(4n){--art:radial-gradient(circle at 80% 40%,rgba(255,248,210,.7),transparent 18%),linear-gradient(135deg,rgba(255,201,130,.34),rgba(255,143,177,.16)),linear-gradient(180deg,transparent,rgba(231,151,83,.22))}
.section{padding:78px 24px}.wrap{width:min(1120px,100%);margin:0 auto}.section-head{max-width:760px;margin-bottom:28px}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:950;margin-bottom:12px}.title{font-size:clamp(31px,4vw,56px);line-height:1.12;letter-spacing:-.026em;font-weight:850;text-wrap:balance}.copy{color:var(--muted);font-size:17px;line-height:1.65;margin-top:15px}
.section[data-tone]{position:relative}.section[data-tone]::before{content:"";position:absolute;inset:24px max(24px,calc((100vw - 1180px)/2)) 10px;border-radius:46px;background:var(--tone-bg);opacity:.42;z-index:-1;pointer-events:none}
.section[data-tone="kids"]{--tone-bg:linear-gradient(135deg,rgba(160,222,255,.38),rgba(255,231,171,.34),rgba(255,183,207,.28))}
.section[data-tone="rest"]{--tone-bg:linear-gradient(135deg,rgba(115,199,255,.30),rgba(255,213,163,.34))}
.section[data-tone="puzzle"]{--tone-bg:linear-gradient(135deg,rgba(194,206,255,.30),rgba(255,255,255,.20))}
.section[data-tone="self"]{--tone-bg:linear-gradient(135deg,rgba(255,170,207,.34),rgba(255,222,164,.32))}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}
.info-card{padding:26px;text-align:left;min-height:210px}.info-card .icon{font-size:31px;margin-bottom:24px;position:relative;z-index:1}.info-card h2,.info-card h3{font-size:20px;line-height:1.24;letter-spacing:-.012em;margin-bottom:10px;font-weight:820;text-wrap:balance;position:relative;z-index:1}.info-card p,.info-card li{color:var(--muted);line-height:1.66;font-size:15px;position:relative;z-index:1}.info-card .eyebrow{text-decoration:none!important}.info-card ul{padding-left:18px;margin-top:10px}
.scene-card{min-height:260px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--scene);border:1px solid rgba(255,255,255,.62);box-shadow:0 22px 70px rgba(172,116,86,.18);overflow:hidden}
.scene-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 16%,rgba(255,255,255,.78),transparent 12%),radial-gradient(circle at 18% 24%,rgba(255,255,255,.42),transparent 16%);opacity:.8}
.scene-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,rgba(255,255,255,.84),rgba(255,255,255,.26),transparent);mask-image:none}
.scene-card>*{position:relative;z-index:1}.scene-card h3{font-size:22px}.scene-card .icon{width:54px;height:54px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.72);box-shadow:0 14px 38px rgba(80,60,40,.12)}
.scene-world{--scene:linear-gradient(135deg,rgba(111,203,255,.72),rgba(197,232,255,.30) 52%,rgba(255,255,255,.12))}
.scene-self{--scene:linear-gradient(135deg,rgba(255,157,200,.68),rgba(255,224,176,.36) 58%,rgba(255,255,255,.12))}
.scene-travel{--scene:linear-gradient(135deg,rgba(180,204,255,.58),rgba(255,214,174,.30) 58%,rgba(255,255,255,.12))}
.scene-play{--scene:linear-gradient(135deg,rgba(255,203,127,.64),rgba(255,163,196,.30) 58%,rgba(255,255,255,.12))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.soft-panel{padding:30px}.quote{font-size:clamp(24px,3.6vw,44px);line-height:1.12;letter-spacing:-.035em;font-weight:900;text-wrap:balance}
.page-hero{padding:88px 24px 44px;text-align:center}.page-hero .lead{margin-left:auto;margin-right:auto}.page-title{font-size:clamp(41px,5.3vw,72px);line-height:1.1;letter-spacing:-.026em;font-weight:850;text-wrap:balance;max-width:1060px;margin:0 auto}
.app-frame{padding:18px;border-radius:34px}.app-frame iframe{width:100%;min-height:720px;border:0;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.game-shell{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:18px;align-items:start}.device-frame{max-width:460px;margin:0 auto;padding:14px;border-radius:38px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.36));border:1px solid var(--line);box-shadow:var(--shadow)}body.dark .device-frame{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.04))}
.device-frame iframe{width:100%;height:760px;border:0;border-radius:26px;background:#fff}
.faq details{padding:20px 22px;margin-bottom:10px}.faq summary{cursor:pointer;font-weight:900}.faq p{color:var(--muted);line-height:1.62;margin-top:10px}
.footer{padding:46px 24px 38px;color:var(--muted)}.footer-inner{width:min(1120px,100%);margin:0 auto;display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:24px}.footer a{color:var(--muted);text-decoration:none;margin-right:14px}.footer a:hover{color:var(--ink)}
.ticker{overflow:hidden;color:var(--muted);font-size:13px;opacity:.86;padding:14px 0}.ticker-track{display:flex;gap:28px;width:max-content;animation:ticker 28s linear infinite}@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:1100px) and (min-width:901px){.grid.four{grid-template-columns:repeat(2,1fr)}.hero-inner{width:min(900px,100%)}}
@media(max-width:1180px){.portal-stage{grid-template-columns:1fr}.guide-card{min-height:220px;width:100%}.guide-card.neo-guide,.guide-card.mira-guide{display:none}.hero-core{width:100%}.hero-core h1{white-space:normal}}
@media(max-width:900px){.nav{padding:0 16px}.nav-links{display:none}.mobile-nav{position:sticky;top:68px;z-index:45;display:flex;gap:8px;overflow-x:auto;padding:9px 16px;background:rgba(255,255,255,.30);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);scrollbar-width:none}.mobile-nav::-webkit-scrollbar{display:none}body.dark .mobile-nav{background:rgba(5,8,20,.44)}.mobile-nav a{flex:0 0 auto;padding:9px 13px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13px;font-weight:850}.chips{grid-template-columns:1fr 1fr}.chip:last-child{grid-column:1/-1}.answer{grid-template-columns:auto 1fr}.answer a{grid-column:1/-1}.scenario-grid,.grid,.grid.two,.grid.three,.grid.four,.split,.game-shell{grid-template-columns:1fr}.orb{display:none}.hero{padding-top:28px;min-height:auto}.footer-inner{display:block}.app-frame iframe{min-height:640px}.device-frame iframe{height:min(680px,78svh)}}
@media(max-width:560px){.nav-actions{display:none}.nav{height:68px}.mirror{padding:14px;border-radius:24px}.lead{font-size:17px}.section{padding:44px 16px}.page-hero{padding:44px 16px 24px}.page-title{font-size:clamp(37px,11vw,54px);letter-spacing:-.02em;line-height:1.08}.nav-actions{gap:6px}.brand{font-size:18px}.brand-mark{width:30px;height:30px}.hero{padding:28px 16px 54px}.chip{min-height:64px}.answer{padding:14px}.device-frame{padding:8px;border-radius:28px}.device-frame iframe{height:min(640px,76svh);border-radius:20px}}
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){.nav{height:62px}.mobile-nav{top:62px;padding:7px 16px}.hero{padding:20px 24px 30px}.badge{margin-bottom:12px}.lead{margin-top:14px}.mirror{margin-top:20px;width:min(760px,100%)}.chips{grid-template-columns:repeat(5,1fr)}.chip{min-height:52px}.answer{grid-template-columns:auto 1fr auto;padding:12px}.answer a{grid-column:auto}.page-hero{padding:34px 24px 22px}.section{padding:34px 24px}.page-title{font-size:clamp(38px,6vw,58px)}}

/* readability fix 2026-07-03: text on light glass cards (Andrey: описания сливаются) */
body:not(.dark) .info-card p,body:not(.dark) .info-card li,body:not(.dark) .scenario p,body:not(.dark) .scene-card p{color:#2f3647}
body:not(.dark) .info-card .eyebrow,body:not(.dark) .scene-card .eyebrow,body:not(.dark) .card .eyebrow{color:#4a4a5e}
body.dark .info-card p,body.dark .info-card li,body.dark .scenario p,body.dark .scene-card p{color:#c9cee0}
body.dark .info-card .eyebrow,body.dark .scene-card .eyebrow,body.dark .card .eyebrow{color:#b7bdd4}