/* Новый дизайн «стекло» (25.10, основной с 25.10). Работает только при html.glass — включает glass.js.
   Выключить = убрать класс (переключатель внизу слева на ноутбуке) — site.css остаётся как был. */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");

/* :root усиливает правило, чтобы тёмная тема из site.css (prefers-color-scheme / data-theme) его не перебивала */
html.glass:root {
    --bg: #0b1128; --surface: rgba(255,255,255,.80); --soft: rgba(28,37,65,.06); --text: #ffffff; --muted: rgba(255,255,255,.68);
    --line: rgba(255,255,255,.16); --accent: #ffffff; --accent-text: #1C2541;
    --green: #34d399; --green-soft: rgba(52,211,153,.16); --red: #ff8a8f; --red-soft: rgba(255,138,143,.14);
    --ink: #17171b; --ink-muted: rgba(23,23,27,.58);
    --shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 34px -18px rgba(0,5,25,.6);
    --g-ease: cubic-bezier(.2,.8,.2,1); --g-spring: cubic-bezier(.34,1.35,.64,1);
    --radius: 22px;
}
html.glass body { background: #0b1128; font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; -webkit-font-smoothing: antialiased; }

/* фон: ночной синий + медленные пятна света */
.gbg { display: none; }
html.glass .gbg { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 0%, #24346b 0%, #141d40 45%, #0b1128 100%); }
html.glass .gbg i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .85; animation: gdrift 22s ease-in-out infinite alternate; }
html.glass .gbg i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: #3b63f0; }
html.glass .gbg i:nth-child(2) { width: 38vw; height: 38vw; right: -6vw; top: 20vh; background: #6a7dff; opacity: .5; animation-duration: 28s; }
html.glass .gbg i:nth-child(3) { width: 36vw; height: 36vw; left: 26vw; bottom: -16vw; background: #1e3a9e; animation-duration: 25s; }
html.glass .gbg i:nth-child(4) { width: 16vw; height: 16vw; right: 20vw; bottom: 6vh; background: #B3262E; opacity: .32; animation-duration: 30s; }
@keyframes gdrift { to { transform: translate(6vw, 4vh) scale(1.12); } }

/* стекло — общее */
html.glass header.top .nav,
html.glass .demo-box, html.glass .final, html.glass .mnav.on {
    background: rgba(255,255,255,.07); backdrop-filter: blur(34px) saturate(125%); -webkit-backdrop-filter: blur(34px) saturate(125%);
    border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 30px 60px -30px rgba(0,5,25,.6);
}

/* шапка — плавающая «таблетка» */
html.glass header.top { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; padding-top: 12px; }
html.glass header.top .nav { height: 60px; border-radius: 999px; padding: 0 10px 0 12px; max-width: 1160px; position: relative; }
html.glass .logo { color: #fff; }
html.glass .logo .mark { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.7); width: 36px; height: 36px; font-size: 22px; }
html.glass .nav .links { position: relative; gap: 4px; }
html.glass .nav .links a { position: relative; z-index: 1; color: rgba(255,255,255,.82); padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 14px; transition: color .3s; }
html.glass .nav .links a.hov { color: var(--ink); }
html.glass .nav .links .gind { position: absolute; top: 0; height: 100%; border-radius: 999px; background: #fff; opacity: 0; box-shadow: 0 4px 14px rgba(0,0,0,.15);
    transition: left .45s var(--g-spring), width .45s var(--g-spring), opacity .25s; }
html.glass .lang { background: rgba(255,255,255,.12); border-radius: 999px; }
html.glass .lang button { color: rgba(255,255,255,.75); border-radius: 999px; font-weight: 600; }
html.glass .lang button.on { background: #fff; color: var(--ink); }
html.glass .burger { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; border-radius: 50%; }
html.glass .mnav.on { margin: 8px 16px 0; border-radius: 24px; }
html.glass .mnav a { color: #fff; }

/* кнопки — капсулы */
html.glass .btn { border-radius: 999px; font-weight: 600; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff;
    transition: transform .3s var(--g-spring), box-shadow .3s, background .3s; }
html.glass .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
html.glass .btn:active { transform: scale(.96); }
html.glass .btn.main { background: var(--nar); border-color: var(--nar); color: #fff; box-shadow: 0 10px 30px -10px rgba(179,38,46,.7); }
html.glass .btn.dark { background: #fff; border-color: #fff; color: var(--navy); }
html.glass .btn.small.main { box-shadow: none; }

/* первый экран */
html.glass .pill { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(20px); font-weight: 500; }
html.glass .pill b { box-shadow: 0 0 10px #ff4d57; }
html.glass h1.title { font-weight: 600; letter-spacing: -.02em; }
html.glass h1.title em { color: #ff8a8f; }
html.glass .lead { color: rgba(255,255,255,.72); }
html.glass .hero-note span::before { color: #34d399; }
html.glass .laptop, html.glass .phone { background: rgba(255,255,255,.1); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
html.glass .laptop::after { background: rgba(255,255,255,.25); }

/* карточки — настоящее стекло, как в образце: фон просвечивает и размыт, светлая кромка, белый текст */
html.glass .card, html.glass .strip > div, html.glass .faq details {
    background: linear-gradient(140deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.04) 100%);
    color: #fff; border: 1px solid rgba(255,255,255,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.03), 0 20px 40px -24px rgba(0,5,25,.75);
    backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
    transition: translate .4s var(--g-ease), box-shadow .4s, background .4s, opacity .55s, filter .8s var(--g-ease), transform .8s var(--g-ease);
}
html.glass .card:hover, html.glass .strip > div:hover {
    translate: 0 -5px; background: linear-gradient(140deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,.06) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 30px 50px -24px rgba(0,5,25,.85);
}
html.glass .card p, html.glass .card span, html.glass .strip span, html.glass .faq details p, html.glass .steps p, html.glass .req .card span,
html.glass .card .hint, html.glass .card ol.howto, html.glass .card label.l, html.glass .dl .grow span { color: rgba(255,255,255,.7); }
html.glass .card b, html.glass .card h2, html.glass .card h3, html.glass ol.howto b, html.glass .faq summary { color: #fff; }
html.glass .feat li { color: rgba(255,255,255,.88); }
html.glass .feat li::before { color: #ff8a8f; }
html.glass .strip .ic { background: rgba(255,255,255,.14); color: #ff9aa0; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
html.glass .feat .ic, html.glass .dl .ic { border-radius: 50%; background: #fff; color: var(--navy); box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); }
html.glass .faq summary::after { color: #ff8a8f; }
html.glass .soon { background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
html.glass .card .btn:not(.main):not(.dark) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
html.glass .card .btn.dark { background: #fff; color: var(--navy); }
html.glass .card .note { background: rgba(255,90,100,.18); color: #ffb3b8; }
html.glass .card .status .big-ic, html.glass .card .code { background: rgba(255,255,255,.12); color: #fff; }
html.glass .card .dl { border-color: rgba(255,255,255,.12); }
/* разделы */
html.glass .kicker { color: #ff8a8f; font-weight: 700; letter-spacing: .14em; }
html.glass h2.h { font-weight: 600; letter-spacing: -.015em; }
html.glass .sub { color: rgba(255,255,255,.7); }
html.glass .checks li::before { background: rgba(52,211,153,.16); color: #34d399; }
html.glass .frame { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
html.glass .steps .card::before { box-shadow: 0 6px 16px -4px rgba(179,38,46,.6); }
html.glass .demo-box { border-radius: 36px; }
html.glass .demo-box .kicker { color: #ffc56b; }
html.glass .demo-phone { box-shadow: 0 40px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12); }
html.glass .final { border-radius: 36px; }
html.glass .final .btn:not(.main) { background: rgba(255,255,255,.12); }
html.glass footer.bot { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }

/* кабинет: формы */
html.glass .seg { background: rgba(255,255,255,.12); border-radius: 999px; }
html.glass .seg button { color: rgba(255,255,255,.75); border-radius: 999px; }
html.glass .seg button.on { background: #fff; color: var(--ink); }
html.glass .input, html.glass select.input { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); border-radius: 14px; }
html.glass .input::placeholder { color: rgba(255,255,255,.4); }
html.glass select.input option { color: #1C2541; }
html.glass .input:focus { background: rgba(255,255,255,.14); outline: 2px solid rgba(255,138,143,.5); border-color: rgba(255,138,143,.7); }
html.glass label.l { color: rgba(255,255,255,.7); }
html.glass .opt { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.18); }
html.glass .opt span { color: rgba(255,255,255,.65); }
html.glass .opt.on { background: rgba(255,255,255,.16); border-color: #ff8a8f; }
html.glass .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08)); background-size: 200% 100%; }
html.glass .toast { background: rgba(255,255,255,.92); color: var(--ink); backdrop-filter: blur(12px); border-radius: 999px; }

/* появление: из размытия в резкость, волной */
html.glass .rv { opacity: 0; filter: blur(14px); transform: translateY(12px) scale(.985);
    transition: opacity .6s ease var(--gd, 0ms), filter .9s var(--g-ease) var(--gd, 0ms), transform .9s var(--g-ease) var(--gd, 0ms), translate .4s var(--g-ease), box-shadow .4s; }
html.glass .rv.in { opacity: 1; filter: blur(0); transform: none; }
html.glass .hero-grid > div:first-child > *, html.glass .shots { animation: gin 1s var(--g-ease) both; }
html.glass .hero-grid > div:first-child > :nth-child(2) { animation-delay: .08s; }
html.glass .hero-grid > div:first-child > :nth-child(3) { animation-delay: .18s; }
html.glass .hero-grid > div:first-child > :nth-child(4) { animation-delay: .28s; }
html.glass .hero-grid > div:first-child > :nth-child(5) { animation-delay: .36s; }
html.glass .shots { animation-delay: .3s; animation-duration: 1.3s; }
@keyframes gin { from { opacity: 0; filter: blur(16px); transform: translateY(14px); } }

/* переход по пункту меню: раздел заново проявляется из размытия */
html.glass .gnow .rv { transition: none !important; }
html.glass section.gre .kicker, html.glass section.gre h2.h, html.glass section.gre .sub { animation: gin .9s var(--g-ease) both; }
html.glass section.gre h2.h { animation-delay: .08s; }
html.glass section.gre .sub { animation-delay: .16s; }
html.glass .nav .links a.act { color: var(--ink); }

/* переключатель «новый / старый» (только на ноутбуке) */
.gsw { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: center; gap: 10px;
    padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid rgba(28,37,65,.15); background: #fff; color: #1C2541;
    font: 600 13px/1 "Rubik", system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: pointer; }
.gsw .tg { width: 36px; height: 22px; border-radius: 11px; background: #c9cfdb; position: relative; transition: background .3s; }
.gsw .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .35s cubic-bezier(.34,1.35,.64,1); }
html.glass .gsw .tg { background: #B3262E; }
html.glass .gsw .tg::after { left: 17px; }

/* «без движения» в Windows/телефоне (25.10, владелец: анимации нужны всегда) — замирает только фон */
@media (prefers-reduced-motion: reduce) { html.glass .gbg i { animation: none; } html.glass:root { scroll-behavior: smooth; } }