/* =================================================================
   Версия «дословно по ТЗ» — расширенная анимация, объёмный 3D-телефон,
   переключатель языков RU / EN / हिन्दी.
   Unbounded (заголовки) / Manrope (текст) / JetBrains Mono (цифры)
   Noto Sans Devanagari — для хинди.
================================================================= */

:root {
  --bg:#0A0E1A; --bg-deep:#070B14; --surface:#141A2E; --surface-raised:#1A2238; --surface-chat:#0E1626;
  --border:rgba(255,255,255,0.08); --border-accent:rgba(45,226,166,0.32);
  --text:#EDF1FB; --muted:#9AA3BC; --faint:#7B8BB0;
  --accent:#2DE2A6; --accent-bright:#36E29A; --accent-2:#7B61FF; --gold:#F5C451; --cta-text:#06120D;
  --glow-teal:rgba(45,226,166,0.40);
  --r-lg:22px; --r-md:16px; --ease:cubic-bezier(0.22,1,0.36,1); --maxw:1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px; overflow-x:hidden; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Manrope',system-ui,sans-serif; font-size:16px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3 { font-family:'Unbounded',system-ui,sans-serif; font-weight:700; margin:0; letter-spacing:-0.01em; }
p { margin:0; } a { color:inherit; text-decoration:none; }
::selection { background:rgba(45,226,166,0.28); color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.nowrap { white-space:nowrap; } .hl { color:var(--accent); }

/* ---------- Hindi (Devanagari) ---------- */
html[lang="hi"] body,
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang="hi"] .eyebrow, html[lang="hi"] .status, html[lang="hi"] .hero__badges li,
html[lang="hi"] .toast__body, html[lang="hi"] .ratebadge, html[lang="hi"] .footer__contact,
html[lang="hi"] .footer__legal, html[lang="hi"] .tg, html[lang="hi"] .tg__kbd,
html[lang="hi"] .card__title, html[lang="hi"] .step__title, html[lang="hi"] .section-title,
html[lang="hi"] .section-lead, html[lang="hi"] .btn {
  font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
}
html[lang="hi"] .hero__title { line-height: 1.28; }
html[lang="hi"] .grad, html[lang="hi"] .wordmark__text { font-family: 'Unbounded', sans-serif; } /* латинские бренд-слова */

/* ---------- Индикатор прокрутки ---------- */
.scrollbar { position:fixed; top:0; left:0; height:3px; width:0; z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 12px rgba(45,226,166,0.6); transition:width 0.05s linear; }

/* ---------- Атмосфера ---------- */
.atmosphere { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.mesh { position:absolute; border-radius:50%; will-change:transform; }
.mesh--teal { width:70vw; height:70vw; max-width:720px; max-height:720px; top:-18vw; right:-12vw;
  background:radial-gradient(circle,rgba(45,226,166,0.22),transparent 62%); animation:drift1 24s ease-in-out infinite alternate; }
.mesh--violet { width:80vw; height:80vw; max-width:800px; max-height:800px; bottom:-24vw; left:-20vw;
  background:radial-gradient(circle,rgba(123,97,255,0.22),transparent 64%); animation:drift2 30s ease-in-out infinite alternate; }
.mesh--gold { width:40vw; height:40vw; max-width:420px; max-height:420px; top:42%; left:34%;
  background:radial-gradient(circle,rgba(245,196,81,0.09),transparent 66%); animation:drift3 36s ease-in-out infinite alternate; }
@keyframes drift1 { from{transform:translate(0,0) scale(1);} to{transform:translate(-7%,5%) scale(1.14);} }
@keyframes drift2 { from{transform:translate(0,0) scale(1);} to{transform:translate(8%,-4%) scale(1.12);} }
@keyframes drift3 { from{transform:translate(0,0);} to{transform:translate(10%,8%);} }
.grain { position:absolute; inset:0; opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.particles { position:absolute; inset:0; }
.particle { position:absolute; bottom:-12px; border-radius:50%; background:radial-gradient(circle,var(--accent),transparent 70%);
  opacity:0; animation:rise linear infinite; will-change:transform,opacity; }
@keyframes rise { 0%{transform:translateY(0) scale(.6);opacity:0;} 12%{opacity:.7;} 100%{transform:translateY(-130px) scale(1);opacity:0;} }

/* ---------- Кнопки ---------- */
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:18px; line-height:1; padding:0 30px; height:60px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform 0.12s var(--ease),box-shadow 0.25s var(--ease); }
.btn__icon { width:21px; height:21px; fill:currentColor; flex:none; position:relative; z-index:1; }
.btn--primary { background:linear-gradient(135deg,var(--accent),var(--accent-bright)); color:var(--cta-text);
  box-shadow:0 10px 40px var(--glow-teal),inset 0 1px 0 rgba(255,255,255,0.35); }
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 14px 52px rgba(45,226,166,0.55),inset 0 1px 0 rgba(255,255,255,0.4); }
.btn--primary:active { transform:scale(0.97); }
#cta-hero { animation:breathe 3.2s ease-in-out infinite; }
#cta-hero.paused { animation-play-state:paused; }
@keyframes breathe { 0%,100%{box-shadow:0 10px 34px rgba(45,226,166,0.30),inset 0 1px 0 rgba(255,255,255,0.35);} 50%{box-shadow:0 14px 56px rgba(45,226,166,0.55),inset 0 1px 0 rgba(255,255,255,0.4);} }
.btn__shine { position:absolute; top:0; left:-65%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent); transform:skewX(-20deg); animation:shine 4.8s ease-in-out infinite; }
@keyframes shine { 0%{left:-65%;} 55%{left:135%;} 100%{left:135%;} }

/* ---------- Верхняя панель + переключатель языков ---------- */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  height:58px; padding:0 22px; padding-top:env(safe-area-inset-top);
  background:rgba(10,14,26,0.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:background 0.3s,border-color 0.3s; }
.topbar.scrolled { background:rgba(7,11,20,0.86); border-bottom-color:var(--border); }
.topbar__right { display:flex; align-items:center; gap:12px; }
.wordmark { display:inline-flex; align-items:center; gap:10px; }
.wordmark__mark { width:16px; height:16px; border-radius:4px; transform:rotate(45deg);
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 14px rgba(45,226,166,0.5); animation:markspin 9s ease-in-out infinite; }
@keyframes markspin { 0%,100%{transform:rotate(45deg);} 50%{transform:rotate(135deg);} }
.wordmark__text { font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px; letter-spacing:0.01em; }

.lang { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px;
  background:rgba(255,255,255,0.05); border:1px solid var(--border); }
.lang__btn { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; line-height:1; color:var(--muted);
  background:transparent; border:none; border-radius:999px; padding:6px 10px; cursor:pointer; transition:color 0.2s,background 0.2s; }
.lang__btn:hover:not(.is-active) { color:var(--text); }
.lang__btn.is-active { color:var(--cta-text); background:linear-gradient(135deg,var(--accent),var(--accent-bright)); box-shadow:0 2px 10px rgba(45,226,166,0.35); }

.status { display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--muted); }
.status__dot { width:8px; height:8px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 8px rgba(54,226,154,0.9); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:0.5;} }

/* ---------- HERO ---------- */
.hero { padding:44px 0 64px; }
.hero__grid { display:block; }
.hero__copy { max-width:580px; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; padding:8px 15px; margin-bottom:22px; border-radius:999px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.02em; color:var(--muted); }
.eyebrow__dot { width:7px; height:7px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 8px rgba(54,226,154,0.9); animation:pulse 2.4s ease-in-out infinite; }
.hero__title { font-weight:800; font-size:clamp(1.7rem,6vw,3.3rem); line-height:1.12; letter-spacing:-0.02em; margin-bottom:20px; }
.hero__title-2 { display:block; margin-top:8px; color:var(--muted); font-weight:700; font-size:0.74em; letter-spacing:-0.01em; }
.grad { white-space:nowrap; background:linear-gradient(90deg,var(--accent) 0%,var(--gold) 50%,var(--accent) 100%); background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position:220% center; } }
.hero__sub { color:var(--muted); font-size:16.5px; line-height:1.62; max-width:44ch; margin-bottom:28px; }
.hero__cta { margin-bottom:22px; }
.hero__cta .btn--primary { width:100%; }
.hero__badges { display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.hero__badges li { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.04em; color:var(--muted);
  background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:8px; padding:7px 12px; display:inline-flex; align-items:center; gap:7px; }
.hero__badges li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px rgba(45,226,166,0.8); }

/* ============================================================
   ОБЪЁМНЫЙ 3D-ТЕЛЕФОН
============================================================ */
.hero__stage { margin-top:56px; display:flex; justify-content:center; perspective:1400px; animation:floaty 6.5s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.phone-wrap { position:relative; }

.phone-tilt { position:relative; transform-style:preserve-3d;
  transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-15deg)); transition:transform 0.35s ease; }
/* ореол-подсветка */
.phone-tilt::before { content:""; position:absolute; top:-46px; left:50%; transform:translate(-50%,0) translateZ(-30px);
  width:320px; height:240px; z-index:-1; pointer-events:none;
  background:radial-gradient(circle,rgba(45,226,166,0.3),transparent 68%); animation:glowPulse 4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{opacity:0.7;} 50%{opacity:1;} }

.phone { position:relative; transform-style:preserve-3d;
  width:302px; max-width:calc(100vw - 48px); aspect-ratio:302 / 648; padding:11px;
  border-radius:50px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 16%),
    linear-gradient(315deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 18%),
    linear-gradient(145deg,#343f5e 0%,#1a2233 26%,#0c111b 58%,#05080f 100%);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    /* полированный металлический рант */
    inset 0 0 0 1.5px rgba(255,255,255,0.05),
    inset 2px 2px 1px rgba(255,255,255,0.30),
    inset -2px -2px 2px rgba(0,0,0,0.62),
    inset 0 3px 1px rgba(255,255,255,0.14),
    /* «толщина» корпуса */
    2px 3px 0 #0b0f19, 4px 6px 0 #090d16, 7px 9px 0 #070a12,
    10px 13px 0 #05080f, 13px 17px 0 #04060c, 16px 21px 0 #02040a,
    /* контактная и мягкая тень */
    24px 32px 52px rgba(0,0,0,0.52), 44px 66px 116px rgba(0,0,0,0.72); }
/* задняя панель — реальная глубина при наклоне */
.phone::after { content:""; position:absolute; inset:0; border-radius:50px; transform:translateZ(-32px);
  background:linear-gradient(145deg,#0c111b,#04060c); box-shadow:0 0 0 1px rgba(0,0,0,0.75), inset 0 0 50px rgba(0,0,0,0.65); }
/* контактная тень под устройством */
.phone__shadow { position:absolute; left:50%; bottom:-26px; transform:translateX(-50%); width:72%; height:40px; z-index:-2;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.65), transparent 72%); filter:blur(12px); }

/* боковые кнопки */
.phone__btn { position:absolute; border-radius:3px; background:linear-gradient(180deg,#2c3650,#0c1018);
  box-shadow:-1px 0 2px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.22); }
.phone__btn--pwr { right:-3px; top:168px; width:3.5px; height:58px; transform:translateZ(-9px);
  background:linear-gradient(180deg,#0c1018,#2c3650); box-shadow:1px 0 2px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.22); }
.phone__btn--vu { left:-3px; top:150px; width:3.5px; height:38px; transform:translateZ(-9px); }
.phone__btn--vd { left:-3px; top:196px; width:3.5px; height:38px; transform:translateZ(-9px); }

.phone__screen { position:relative; flex:1; display:flex; flex-direction:column; overflow:hidden;
  border-radius:38px; background:var(--surface-chat); transform:translateZ(5px);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.55), inset 0 3px 10px rgba(0,0,0,0.6); }
.phone__island { position:absolute; top:11px; left:50%; transform:translateX(-50%) translateZ(7px); width:88px; height:23px; border-radius:99px;
  background:#02040a; z-index:6; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.6); }
/* бегущий блик по стеклу */
.phone__sheen { position:absolute; inset:0; z-index:8; pointer-events:none; border-radius:38px; overflow:hidden; }
.phone__sheen::before { content:""; position:absolute; top:-40%; left:-60%; width:55%; height:180%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent); transform:rotate(8deg); animation:sheen 9s ease-in-out infinite; }
@keyframes sheen { 0%,100%{left:-60%;} 50%{left:125%;} }
.phone__island::after { content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#1f3a4d,#04060b); box-shadow:0 0 4px rgba(45,226,166,0.4); }
.phone__gloss { position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:37px;
  background:linear-gradient(135deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,0.04) 100%); }
.phone__home { position:absolute; bottom:7px; left:50%; transform:translateX(-50%); width:108px; height:4px; border-radius:99px; background:rgba(255,255,255,0.3); z-index:6; }

.phone__statusbar { display:flex; align-items:center; justify-content:space-between; padding:11px 22px 6px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--muted); }
.phone__sys { display:inline-flex; gap:6px; }
.phone__sys i { display:inline-block; background:var(--muted); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; }
.ico-signal { width:17px; height:11px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect x='0' y='10' width='3' height='4' rx='1'/%3E%3Crect x='5' y='7' width='3' height='7' rx='1'/%3E%3Crect x='10' y='4' width='3' height='10' rx='1'/%3E%3Crect x='15' y='0' width='3' height='14' rx='1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect x='0' y='10' width='3' height='4' rx='1'/%3E%3Crect x='5' y='7' width='3' height='7' rx='1'/%3E%3Crect x='10' y='4' width='3' height='10' rx='1'/%3E%3Crect x='15' y='0' width='3' height='14' rx='1'/%3E%3C/svg%3E"); }
.ico-wifi { width:16px; height:11px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 4a13 13 0 0 1 18 0l-2 2a10 10 0 0 0-14 0Z'/%3E%3Cpath d='M5 8a7 7 0 0 1 10 0l-2.2 2.2a4 4 0 0 0-5.6 0Z'/%3E%3Ccircle cx='10' cy='12.4' r='1.4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 4a13 13 0 0 1 18 0l-2 2a10 10 0 0 0-14 0Z'/%3E%3Cpath d='M5 8a7 7 0 0 1 10 0l-2.2 2.2a4 4 0 0 0-5.6 0Z'/%3E%3Ccircle cx='10' cy='12.4' r='1.4'/%3E%3C/svg%3E"); }
.ico-batt { width:22px; height:12px; -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Crect x='1' y='2.5' width='18' height='9' rx='2.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='3' y='4.5' width='12' height='5' rx='1'/%3E%3Crect x='20.5' y='5' width='2.2' height='4' rx='1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Crect x='1' y='2.5' width='18' height='9' rx='2.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Crect x='3' y='4.5' width='12' height='5' rx='1'/%3E%3Crect x='20.5' y='5' width='2.2' height='4' rx='1'/%3E%3C/svg%3E"); }

.tg { flex:1; display:flex; flex-direction:column; min-height:0; background:var(--surface-chat); }
.tg__header { display:flex; align-items:center; gap:10px; padding:8px 14px 10px; background:linear-gradient(180deg,var(--surface),rgba(20,26,46,0.92)); border-bottom:1px solid var(--border); }
.tg__avatar { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--cta-text); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:17px; flex:none; }
.tg__meta { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.tg__name { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; }
.tg__verified { width:13px; height:13px; border-radius:50%; background:var(--accent); position:relative; flex:none; }
.tg__verified::after { content:""; position:absolute; left:3.5px; top:4px; width:4px; height:2px; border-left:1.6px solid var(--cta-text); border-bottom:1.6px solid var(--cta-text); transform:rotate(-45deg); }
.tg__online { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); margin-top:2px; }
.tg__odot { width:6px; height:6px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 6px rgba(54,226,154,0.8); }
.tg__menu { margin-left:auto; display:inline-flex; flex-direction:column; gap:3px; padding:4px 2px; align-self:flex-start; }
.tg__menu i { width:3.5px; height:3.5px; border-radius:50%; background:var(--muted); }
.tg__chat { flex:1; display:flex; flex-direction:column; gap:8px; padding:14px 12px; min-height:0;
  background-image:radial-gradient(rgba(255,255,255,0.018) 1px, transparent 1px); background-size:16px 16px; }
.tg__date { align-self:center; font-size:10.5px; color:var(--faint); background:rgba(255,255,255,0.05); padding:3px 10px; border-radius:99px; margin-bottom:2px; }
.bubble { position:relative; display:flex; flex-direction:column; max-width:86%; padding:8px 11px 6px; border-radius:15px; font-size:12.5px; line-height:1.45; color:var(--text); }
.bubble b { color:var(--accent-bright); }
.bubble--in { align-self:flex-start; background:var(--surface-raised); border-bottom-left-radius:5px; }
.bubble--out { align-self:flex-end; background:linear-gradient(135deg,rgba(45,226,166,0.22),rgba(123,97,255,0.20)); border:1px solid rgba(45,226,166,0.24); border-bottom-right-radius:5px; }
.bubble--out b { color:var(--text); }
.bubble__t { align-self:flex-end; margin-top:3px; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--faint); display:inline-flex; align-items:center; }
.ticks::after { content:"✓✓"; letter-spacing:-3px; margin-left:4px; color:var(--accent-bright); }
.ok { display:inline-block; width:14px; height:14px; border-radius:50%; background:var(--accent); position:relative; vertical-align:-3px; margin-left:3px; }
.ok::after { content:""; position:absolute; left:4.5px; top:3px; width:3px; height:6px; border:solid var(--cta-text); border-width:0 2px 2px 0; transform:rotate(40deg); }
.typing { align-self:flex-start; display:inline-flex; gap:4px; padding:11px 14px; background:var(--surface-raised); border-radius:15px; border-bottom-left-radius:5px; }
.typing span { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typedot 1.3s ease-in-out infinite; }
.typing span:nth-child(2){animation-delay:0.18s;} .typing span:nth-child(3){animation-delay:0.36s;}
@keyframes typedot { 0%,60%,100%{transform:translateY(0);opacity:0.5;} 30%{transform:translateY(-4px);opacity:1;} }
.tg__kbd { margin-top:auto; text-align:center; padding:11px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent-bright));
  color:var(--cta-text); font-weight:700; font-size:12.5px; box-shadow:0 6px 18px rgba(45,226,166,0.3); }
.tg__input { display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--surface); border-top:1px solid var(--border); }
.tg__clip { width:17px; height:17px; flex:none; background:var(--faint); -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12l6-6a3 3 0 0 1 4.2 4.2l-7.1 7.1a5 5 0 0 1-7-7l7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12l6-6a3 3 0 0 1 4.2 4.2l-7.1 7.1a5 5 0 0 1-7-7l7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.tg__field { flex:1; padding:8px 14px; border-radius:999px; background:var(--surface-chat); color:var(--faint); font-size:12px; }
.tg__send { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-bright)); }
.tg__send svg { width:15px; height:15px; fill:var(--cta-text); }

/* поэтапное появление сообщений */
.anim { opacity:0; transform:translateY(10px) scale(0.96); transition:opacity 0.45s var(--ease),transform 0.45s var(--ease); }
.anim.show { opacity:1; transform:none; }
.anim.hide { opacity:0; transform:scale(0.9); max-height:0; padding-top:0; padding-bottom:0; margin:0; overflow:hidden; transition:all 0.35s var(--ease); }

/* уведомление об успехе — плоский баннер сверху */
.toast { position:absolute; top:-20px; left:50%; transform:translateX(-50%) translateY(-16px); opacity:0; z-index:9;
  display:flex; align-items:center; gap:11px; width:calc(100% - 36px); max-width:268px; padding:11px 14px; border-radius:15px;
  background:linear-gradient(135deg,rgba(22,32,50,0.97),rgba(14,22,36,0.97)); border:1px solid var(--border-accent);
  box-shadow:0 22px 50px rgba(0,0,0,0.6),0 0 0 4px rgba(45,226,166,0.07); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.toast.show { animation:toastIn 0.6s var(--ease) forwards, toastFloat 4s ease-in-out 0.7s infinite; }
@keyframes toastIn { 0%{opacity:0;transform:translateX(-50%) translateY(-16px) scale(0.9);} 60%{opacity:1;transform:translateX(-50%) translateY(4px) scale(1.03);} 100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);} }
@keyframes toastFloat { 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(-5px);} }
.toast__check { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-bright)); box-shadow:0 0 18px rgba(45,226,166,0.6); }
.toast__check svg { width:18px; height:18px; fill:none; stroke:var(--cta-text); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; }
.toast.show .toast__check svg { animation:drawCheck 0.5s ease 0.45s forwards; }
@keyframes drawCheck { to { stroke-dashoffset:0; } }
.toast__body { display:flex; flex-direction:column; line-height:1.3; }
.toast__body b { font-size:13.5px; }
.toast__body span { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-top:2px; }

/* плавающий бейдж курса */
.ratebadge { position:absolute; bottom:84px; left:-18px; z-index:8; display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; border-radius:12px; font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700;
  color:var(--cta-text); background:linear-gradient(135deg,var(--gold),#ffd873); box-shadow:0 14px 34px rgba(245,196,81,0.4);
  animation:badgeFloat 5s ease-in-out infinite; }
@keyframes badgeFloat { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-10px) rotate(-4deg);} }
.ratebadge__dot { width:7px; height:7px; border-radius:50%; background:#0a3b22; }

/* ---------- БЛОК 2 ---------- */
.usp { padding:70px 0; }
.section-title { font-size:clamp(1.7rem,5.2vw,2.5rem); text-align:center; line-height:1.12; }
.section-lead { text-align:center; color:var(--muted); max-width:42ch; margin:14px auto 0; }
.usp__grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px; }
.card { position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(26,34,56,0.6),rgba(20,26,46,0.5));
  border:1px solid var(--border); border-radius:var(--r-lg); padding:26px 24px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform 0.25s var(--ease),border-color 0.25s,box-shadow 0.25s; }
.card__glow { position:absolute; top:-40%; right:-30%; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(45,226,166,0.18),transparent 70%); opacity:0; transition:opacity 0.35s; pointer-events:none; }
.card:hover { transform:translateY(-6px); border-color:var(--border-accent); box-shadow:0 24px 50px rgba(0,0,0,0.4); }
.card:hover .card__glow { opacity:1; }
.card__icon { display:grid; place-items:center; width:58px; height:58px; border-radius:15px; background:rgba(45,226,166,0.08); border:1px solid var(--border-accent); margin-bottom:18px; }
.card__icon svg { width:32px; height:32px; fill:none; stroke:var(--accent-bright); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card__icon svg > * { stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1.1s ease 0.15s; }
.card.in .card__icon svg > * { stroke-dashoffset:0; }
.card__title { font-size:1.22rem; margin-bottom:9px; }
.card__text { color:var(--muted); font-size:14.5px; line-height:1.6; }

/* ---------- БЛОК 3 ---------- */
.steps { padding:60px 0 84px; }
.steps__list { list-style:none; position:relative; margin:44px auto 0; padding:0; max-width:620px; display:flex; flex-direction:column; gap:30px; }
.steps__line { position:absolute; left:27px; top:26px; bottom:26px; width:2px; border-radius:2px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); opacity:0.5; overflow:hidden; transform:scaleY(0); transform-origin:top; transition:transform 1.1s var(--ease); }
.steps__list.drawn .steps__line { transform:scaleY(1); }
.steps__pulse { position:absolute; left:-1px; top:-80px; width:4px; height:80px; filter:blur(1px); background:linear-gradient(180deg,transparent,var(--accent-bright),transparent); animation:pulseV 5s linear infinite; will-change:top; }
@keyframes pulseV { 0%{top:-80px;} 100%{top:100%;} }
.step { position:relative; display:flex; align-items:flex-start; gap:20px; }
.step__num { position:relative; z-index:1; flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:22px; color:var(--accent-bright); background:var(--surface); border:1px solid var(--border-accent); box-shadow:0 0 0 6px var(--bg); }
.step.in .step__num { animation:numPop 0.6s var(--ease) backwards; animation-delay:calc(var(--i,0) * 90ms + 0.1s); }
@keyframes numPop { 0%{transform:scale(0.3) rotate(-25deg);opacity:0;} 60%{transform:scale(1.12) rotate(4deg);} 100%{transform:scale(1) rotate(0);opacity:1;} }
.step__title { font-size:1.18rem; margin-bottom:6px; padding-top:12px; }
.step__text { color:var(--muted); font-size:14.5px; line-height:1.6; }
.steps__cta { display:flex; justify-content:center; margin-top:48px; }
.steps__cta .btn--primary { width:100%; max-width:340px; }

/* ---------- БЛОК 4 ---------- */
.footer { position:relative; padding:54px 0 48px; }
.footer__line { position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent); opacity:0.5; }
.footer__grid { display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; }
.footer__note { color:var(--muted); font-size:13px; margin-top:12px; max-width:34ch; }
.footer__links { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.footer__contact { display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text);
  background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:999px; padding:10px 16px; transition:border-color 0.2s,background 0.2s; }
.footer__contact:hover { border-color:var(--border-accent); background:rgba(45,226,166,0.06); }
.footer__legal { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13px; color:var(--faint); }
.footer__legal a { color:var(--muted); transition:color 0.2s; }
.footer__legal a:hover, .footer__legal a:focus-visible { color:var(--accent); }

/* ---------- Прилипающий CTA ---------- */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:60; padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,var(--bg) 78%,rgba(10,14,26,0.1) 95%,rgba(10,14,26,0)); transform:translateY(130%); transition:transform 0.4s var(--ease); }
.sticky-cta.is-visible { transform:translateY(0); }
.sticky-cta .btn { width:100%; animation:none; }

/* ---------- Reveal ---------- */
html.js .reveal { opacity:0; transform:translateY(20px); transition:opacity 0.6s var(--ease),transform 0.6s var(--ease); transition-delay:calc(var(--i,0) * 90ms); }
html.js .reveal.in { opacity:1; transform:none; }

/* ---------- Десктоп ---------- */
@media (min-width:600px) {
  .container { padding:0 32px; }
  .topbar { padding-left:32px; padding-right:32px; }
  .usp__grid { grid-template-columns:repeat(2,1fr); }
  .hero__cta .btn--primary { width:auto; min-width:320px; }
}
@media (min-width:940px) {
  .hero { padding:72px 0 96px; }
  .hero__grid { display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:48px; }
  .hero__stage { margin-top:0; }
  .phone { width:318px; }
  .usp { padding:100px 0; }
  .steps { padding:96px 0 110px; }
  .steps__list { flex-direction:row; align-items:flex-start; max-width:100%; gap:24px; }
  .step { flex:1; flex-direction:column; align-items:flex-start; gap:16px; }
  .step__title { padding-top:0; }
  .steps__line { left:8%; right:8%; top:28px; bottom:auto; width:auto; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); transform-origin:left; }
  .steps__list.drawn .steps__line { transform:scaleX(1); }
  .steps__pulse { left:-90px; top:-1px; width:90px; height:4px; background:linear-gradient(90deg,transparent,var(--accent-bright),transparent); animation:pulseH 5s linear infinite; }
  @keyframes pulseH { 0%{left:-90px;} 100%{left:100%;} }
}
@media (min-width:1180px) { .steps__line { left:14%; right:14%; } }

/* ---------- Малые экраны ---------- */
@media (max-width:560px) { .status__label { display:none; } }
@media (max-width:380px) {
  .btn { font-size:16px; padding:0 18px; gap:8px; }
  .lang__btn { padding:5px 8px; font-size:11px; }
  .ratebadge { left:-6px; }
}

/* ---------- Снижаем интенсивность объёма на слабых/мобильных ---------- */
@media (max-width:939px) {
  .phone-tilt { transform:rotateX(var(--rx,3deg)) rotateY(var(--ry,-8deg)); }
}

/* ---------- Доступность ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  html.js .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .card.in .card__icon svg > * { stroke-dashoffset:0 !important; transition:none !important; }
  .steps__list.drawn .steps__line { transform:none !important; }
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}