/* ---------- fonts ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* metric-matched fallback: text does not jump when the web font swaps in */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root,[data-theme=dark]{
  --bg:#070b18;--bg2:#0b1122;--card:rgba(255,255,255,.045);--card2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.1);--tx:#eef1fb;--mut:#9aa5c2;
  --b1:#22a8f2;--b2:#3d63f5;--b3:#8b3ce0;
  --brand:#5b8cff;--ok:#34d399;--warn:#fbbf24;--bad:#f87171;--info:#a78bfa;
  --grad:linear-gradient(135deg,#22a8f2,#3d63f5 55%,#8b3ce0);
  --glass:rgba(11,17,34,.72);--shadow:0 30px 80px -30px rgba(0,0,0,.7);
  --inv:#fff;--codebg:#060a16;--mockbg:#0a1020;
  color-scheme:dark;
}
[data-theme=light]{
  --bg:#ffffff;--bg2:#f4f6fc;--card:#ffffff;--card2:#f4f6fc;
  --line:#e3e8f3;--tx:#0b1220;--mut:#586179;
  --brand:#3d63f5;--ok:#059669;--warn:#b45309;--bad:#dc2626;--info:#7c3aed;
  --glass:rgba(255,255,255,.8);--shadow:0 30px 70px -30px rgba(30,40,100,.3);
  --inv:#0b1220;--codebg:#0b1220;--mockbg:#ffffff;
  color-scheme:light;
}
:root{--font:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--r:20px}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:84px;scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:16px/1.6 var(--font);color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
h1,h2,h3{line-height:1.1;margin:0;letter-spacing:-.025em;text-wrap:balance}
p{margin:0;text-wrap:pretty}ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--tx);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.wrap--narrow{width:min(820px,100% - 40px)}
.hp{position:absolute;left:-9999px;opacity:0}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;font-weight:600;font-size:15px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .25s,background .2s,border-color .2s;font-family:inherit;color:var(--tx);background:none}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:15px 28px;font-size:16px;border-radius:14px}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -10px rgba(61,99,245,.75)}
.btn--primary:hover{box-shadow:0 18px 38px -10px rgba(139,60,224,.8)}
.btn--outline{border-color:var(--line);background:var(--card)}
.btn--outline:hover{border-color:var(--brand)}
.btn--glass{background:var(--card2);border-color:var(--line);backdrop-filter:blur(8px)}
.btn--glass:hover{border-color:var(--brand)}
.btn--ghost:hover{background:var(--card2)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.is-stuck{border-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:28px;height:70px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav__links{display:flex;gap:26px;margin-left:12px;font-size:15px;font-weight:500;color:var(--mut)}
.nav__links a{transition:color .2s}.nav__links a:hover{color:var(--tx)}
.nav__cta-m{display:none}
.nav__cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.lang{position:relative}
.lang > summary{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--tx);display:grid;place-items:center;cursor:pointer;list-style:none}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary:hover{border-color:var(--brand)}
.lang[open] > summary{border-color:var(--brand);color:var(--brand)}
/* smooth open/close for floating dropdowns (language switcher, contact FAB) instead of an instant pop.
   Tried ::details-content + content-visibility/allow-discrete first (like the FAQ used to); dropped it —
   on a dynamic click (not already open in the HTML source) it left the content stuck invisible, confirmed
   by checking computed styles directly rather than trusting a screenshot. This is the older, boring, but
   actually-reliable version: the menu stays in the box tree at all times (overriding <details>'s native
   display:none-when-closed) and opacity/transform/visibility do the showing and hiding, with visibility
   delayed on the way out so it leaves the tab order only once the fade has actually finished. The menu
   drops from the top for .lang (in the header) and rises from the bottom for .fab (in the corner), so each
   gets its own transform-origin and slide direction. */
.lang__menu,.fab__menu{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s cubic-bezier(.2,.7,.2,1),visibility 0s linear .18s}
.lang__menu{display:block;transform:translateY(-6px) scale(.97);transform-origin:top right}
.fab__menu{transform:translateY(6px) scale(.97);transform-origin:bottom right}
.lang[open] .lang__menu,.fab[open] .fab__menu{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .18s ease,transform .18s cubic-bezier(.2,.7,.2,1),visibility 0s linear}
.lang__menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card2);backdrop-filter:blur(16px);box-shadow:var(--shadow);z-index:5}
.lang__menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--mut)}
.lang__menu a:hover{background:var(--card);color:var(--tx)}
.lang__menu a[aria-current]{color:var(--tx);font-weight:700}
.lang__menu a[aria-current]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--grad);margin-left:auto;flex:none}
.theme{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--tx);display:grid;place-items:center;cursor:pointer}
.theme:hover{border-color:var(--brand)}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--tx);border-radius:2px;transition:.25s}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:22px;transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 0 30px;overflow:hidden;isolation:isolate}
.aurora{position:absolute;inset:0;z-index:-2;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:560px;height:560px;left:-120px;top:-160px;background:#22a8f2}
.aurora i:nth-child(2){width:600px;height:600px;right:-160px;top:-100px;background:#8b3ce0;animation-delay:-6s}
.aurora i:nth-child(3){width:420px;height:420px;left:38%;top:180px;background:#3d63f5;opacity:.35;animation-delay:-12s}
[data-theme=light] .aurora i{opacity:.22}
@keyframes drift{to{transform:translate(50px,40px) scale(1.1)}}
.gridbg{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 30%,transparent 80%);opacity:.55}
.hero__in{text-align:center;display:flex;flex-direction:column;align-items:center}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);padding:7px 16px;border-radius:99px;font-size:13.5px;font-weight:600;color:var(--mut);backdrop-filter:blur(8px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(52,211,153,.2);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}
h1{font-size:clamp(40px,6.4vw,78px);margin:24px 0 22px;font-weight:800;max-width:900px}
.lead{font-size:clamp(17px,1.7vw,20px);color:var(--mut);max-width:700px}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:34px 0 26px}
.hero__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;color:var(--mut);font-size:14.5px}
.hero__facts li{display:flex;align-items:center;gap:8px}
.hero__facts svg{width:16px;height:16px;fill:none;stroke:var(--ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* mockup */
.mock{position:relative;margin:64px auto 0;max-width:1020px;border:1px solid var(--line);border-radius:22px;background:var(--mockbg);box-shadow:var(--shadow),0 0 0 8px var(--card);transform:perspective(1600px) rotateX(5deg);transform-origin:top;transition:transform .6s}
.mock:hover{transform:perspective(1600px) rotateX(0)}
.mock__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--mut);font-size:12.5px}
.mock__bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.mock__bar span{margin:0 auto;background:var(--card2);padding:3px 30px;border-radius:8px}
.mock__body{display:grid;grid-template-columns:190px 1fr;min-height:380px;text-align:left}
.mock__side{border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--mut)}
.mock__brand{color:var(--tx);font-size:15px;margin:0 8px 14px}
.mock__side span{padding:8px 10px;border-radius:9px}
.mock__side .on{background:var(--card2);color:var(--tx);font-weight:600}
.mock__main{padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.kpi small{color:var(--mut);font-size:12px;display:block}
.kpi b{font-size:19px;letter-spacing:-.02em;display:block;margin:2px 0}
.kpi em{font-style:normal;font-size:12px;color:var(--mut)}.kpi em.up{color:var(--ok)}
.chart{background:var(--card);border:1px solid var(--line);border-radius:14px;height:150px;padding:8px}
.chart svg{width:100%;height:100%}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.4s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.tx td,.tx th{padding:9px 10px;font-size:13px;border-bottom:1px solid var(--line);text-align:left}
.tx td:last-child,.tx th:last-child{text-align:right;font-weight:600}
.tx th{color:var(--mut);font-weight:600;font-size:12px}
.tx tr:last-child td{border-bottom:0}
.st{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600}
.st.ok{background:rgba(52,211,153,.14);color:var(--ok)}
.st.wait{background:rgba(167,139,250,.16);color:var(--info)}
.st.ref{background:rgba(251,191,36,.15);color:var(--warn)}
.st.fail{background:rgba(248,113,113,.15);color:var(--bad)}
.float{position:absolute;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
.float b{display:block;font-size:14px}.float small{color:var(--mut);font-size:12.5px}
.fl1{right:-24px;top:-26px;display:flex;gap:12px;align-items:center}
.fl2{left:-28px;bottom:60px;animation-delay:-3s}.fl2 b{font-size:20px;color:var(--ok)}
.float .ok{width:34px;height:34px;border-radius:50%;background:rgba(52,211,153,.18);color:var(--ok);display:grid;place-items:center;font-weight:800;flex:none}
@keyframes float{50%{transform:translateY(-10px)}}

.marquee{margin-top:56px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content;animation:scroll 40s linear infinite}
.marquee__grp{display:flex;gap:14px;padding-right:14px}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{white-space:nowrap;padding:9px 20px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--mut);font-weight:600;font-size:14.5px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stats{padding:48px 0 20px}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stats__grid>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:left}
.stats b{display:block;font-size:clamp(38px,4.4vw,56px);letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:10px;color:var(--mut);font-size:14.5px}

/* ---------- sections ---------- */
.section{padding:96px 0;position:relative}
.section--alt{background:var(--bg2)}
.sec-head{max-width:740px;margin-bottom:52px}
.sec-head h2,.dev h2,.onb h2,.sec h2,.co h2{font-size:clamp(30px,3.9vw,48px);font-weight:800}
.sec-head p:last-child{color:var(--mut);margin-top:16px;font-size:18px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bx{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;overflow:hidden;transition:transform .25s,border-color .25s,background .25s}
.bx::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 200px at var(--mx,50%) var(--my,0%),rgba(91,140,255,.16),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.bx:hover{transform:translateY(-4px);border-color:rgba(91,140,255,.5)}
.bx:hover::before{opacity:1}
.bx h3{font-size:21px;margin-bottom:8px}
.bx p{color:var(--mut);font-size:15.5px}
.bx em{font-style:normal;color:var(--tx);font-weight:600}
.ico{width:46px;height:46px;border-radius:14px;background:var(--card2);border:1px solid var(--line);display:grid;place-items:center;font-size:22px;margin-bottom:16px}
.bx--a{grid-column:span 4;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center}
.bx--b{grid-column:span 2}
.bx--c{grid-column:span 2}
.bx--d{grid-column:span 2}
.bx--e{grid-column:span 2}
.bx--f{grid-column:span 3}
.bx--g{grid-column:span 3;}
.bx--h{grid-column:span 6;display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:center}
.bx--h .ico{grid-row:span 2;margin:0}.bx--h h3{align-self:end}

.viz{margin-top:20px}
.viz--3ds{margin:0;display:flex;align-items:center;justify-content:center;gap:14px}
.v-card{width:170px;height:106px;border-radius:14px;background:var(--grad);padding:14px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;font-size:12px;letter-spacing:.06em;box-shadow:0 20px 40px -18px rgba(61,99,245,.8);transform:rotate(-6deg);position:relative}
.v-card i{position:absolute;top:14px;left:14px;width:28px;height:20px;border-radius:5px;background:rgba(255,255,255,.55)}
.v-arrow{width:40px;height:2px;background:repeating-linear-gradient(90deg,var(--brand) 0 6px,transparent 6px 12px);animation:dash 1s linear infinite}
@keyframes dash{to{background-position:12px 0}}
.v-lock{padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--card2);font-weight:700;color:var(--ok)}
.viz--link{display:flex;align-items:center;gap:0;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:8px 8px 8px 14px;font-size:13px;color:var(--mut);overflow:hidden;white-space:nowrap}
.viz--link b{color:var(--tx);margin-left:1px;flex:1}
.viz--link i{font-style:normal;background:var(--grad);color:#fff;padding:5px 10px;border-radius:8px;font-weight:600;font-size:12px}
.ticks li{position:relative;padding-left:28px;margin:10px 0;font-size:15.5px}
.ticks li::before{content:"";position:absolute;left:0;top:.4em;width:17px;height:17px;border-radius:50%;background:rgba(52,211,153,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%2334d399' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain}

/* flow */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;position:relative;counter-reset:f}
.flow::before{content:"";position:absolute;left:5%;right:5%;top:22px;height:2px;background:repeating-linear-gradient(90deg,var(--brand) 0 8px,transparent 8px 16px);opacity:.5}
.flow li{position:relative;text-align:left}
.flow li>span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;box-shadow:0 0 0 6px var(--bg2),0 10px 24px -8px rgba(61,99,245,.8);margin-bottom:18px;position:relative}
.flow b{display:block;font-size:16px;margin-bottom:6px}
.flow p{color:var(--mut);font-size:14px}

/* tabs */
.tabs{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:10px}
.tabs__nav{display:flex;gap:6px;flex-wrap:wrap;padding:6px}
.tabs__nav button{font:inherit;font-weight:600;font-size:15px;padding:10px 18px;border-radius:12px;border:0;background:none;color:var(--mut);cursor:pointer;transition:.2s}
.tabs__nav button:hover{color:var(--tx)}
.tabs__nav button[aria-selected=true]{background:var(--card2);color:var(--tx);box-shadow:inset 0 0 0 1px var(--line)}
.tabs__panel{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;padding:26px;align-items:center;animation:fade .35s}
.tabs__panel[hidden]{display:none}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
.panel-info h3{font-size:26px;margin-bottom:12px}
.panel-info .btn{margin-top:14px}
.panel-ui{background:var(--mockbg);border:1px solid var(--line);border-radius:16px;padding:8px 14px;min-width:0;overflow-x:auto}
.tx--lg td,.tx--lg th{padding:12px 10px}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line)}
.rows li:last-child{border:0}.rows small{display:block;color:var(--mut);font-size:12.5px}
.settle{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px 0}
.settle>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.settle small{color:var(--mut);display:block;font-size:12.5px}.settle b{font-size:19px;letter-spacing:-.02em}
.settle .neg{color:var(--bad)}.settle .net{border-color:rgba(52,211,153,.5)}.settle .net b{color:var(--ok)}
.steps-s{display:flex;gap:8px;padding:8px 0 14px;flex-wrap:wrap}
.steps-s span{padding:5px 14px;border-radius:99px;font-size:12.5px;font-weight:600;background:var(--card2);color:var(--mut);border:1px solid var(--line)}
.steps-s .done{color:var(--ok)}.steps-s .cur{background:rgba(52,211,153,.16);color:var(--ok);border-color:rgba(52,211,153,.4)}

/* onboarding */
.onb{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.onb__copy>p{color:var(--mut);font-size:18px;margin:16px 0 26px}
.check{background:var(--mockbg);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.check__head{display:flex;justify-content:space-between;font-size:15px}.check__head span{color:var(--mut)}
.bar{height:8px;background:var(--card2);border-radius:99px;margin:12px 0 18px;overflow:hidden}
.bar i{display:block;height:100%;width:var(--w);background:var(--grad);border-radius:99px;transform-origin:left;animation:grow 1.4s .3s both}
@keyframes grow{from{transform:scaleX(0)}}
.check li{display:flex;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.check li i{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);margin-top:2px}
.check li.d i{background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain;border-color:var(--ok)}
.check li.c i{border-color:var(--brand);box-shadow:0 0 0 4px rgba(91,140,255,.2)}
.check b{display:block;font-size:15px}.check small{color:var(--mut);font-size:13.5px}

/* dev */
.dev{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.dev__copy>p{color:var(--mut);font-size:18px;margin:16px 0 22px}
.dev__copy .btn{margin-top:14px}
.code{background:var(--codebg);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.code__bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.code__tabs{display:flex;gap:4px}
.code__tabs button,.copy{font:inherit;font-size:13px;color:#8a97b8;background:none;border:0;padding:6px 12px;border-radius:8px;cursor:pointer}
.code__tabs button[aria-selected=true]{background:rgba(255,255,255,.08);color:#fff}
.copy{background:rgba(255,255,255,.07);color:#cbd5f0}.copy:hover{background:rgba(255,255,255,.14)}
.code pre{margin:0;padding:22px;overflow-x:auto;font:13.5px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#d5dcf0}
.code code[hidden]{display:none}
.code__resp{border-top:1px solid rgba(255,255,255,.08);padding:12px 22px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12.5px;color:#8a97b8}
.code__resp span{color:#34d399;font-weight:700}.code__resp code{font-family:ui-monospace,Consolas,monospace;color:#cbd5f0;overflow-wrap:anywhere}
.c{color:#5d6b8c}.k{color:#7dd3fc}.s{color:#a7f3d0}.p{color:#c4b5fd}

/* cases */
.cases{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cases article{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.25s}
.cases article:hover{transform:translateY(-4px);border-color:rgba(91,140,255,.5)}
.tagline{display:inline-block;font-size:12px;font-weight:700;color:var(--b1);background:rgba(34,168,242,.12);padding:3px 12px;border-radius:99px;margin-bottom:16px}
.cases h3{font-size:20px;margin-bottom:8px}.cases p{color:var(--mut);font-size:15px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);border-radius:24px;padding:34px;display:flex;flex-direction:column;background:var(--card)}
.plan h3{font-size:22px}
.plan__d{color:var(--mut);font-size:14.5px;margin:6px 0 20px}
.plan__p{color:var(--mut);margin-bottom:20px}
.plan__p b{font-size:42px;color:var(--tx);letter-spacing:-.04em}
.plan .ticks{flex:1;margin-bottom:26px}
.plan--hot{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:var(--shadow);transform:translateY(-10px)}
[data-theme=dark] .plan--hot{background:linear-gradient(#0d1430,#0a1024) padding-box,var(--grad) border-box}
.badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:12px;font-weight:700;padding:5px 16px;border-radius:99px}
.fine{margin-top:22px;color:var(--mut);font-size:13px;text-align:center}

/* security */
.sec{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.sec__lead{color:var(--mut);font-size:18px;margin-top:16px}
.sec__list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sec__list li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.sec__list .ico{margin-bottom:12px}
.sec__list b{display:block;margin-bottom:4px}.sec__list small{color:var(--mut);font-size:14px;line-height:1.5;display:block}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:22px 4px}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;line-height:1;color:var(--brand);transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--mut);max-width:680px;margin-top:0;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .3s ease,margin-top .3s ease}
.faq details[open] p{grid-template-rows:1fr;margin-top:12px}

/* cta */
.cta{position:relative;isolation:isolate;overflow:hidden;background:#070b18;color:#eef1fb;padding:100px 0}
.aurora--cta i:nth-child(1){left:-100px;top:-100px;background:#3d63f5;opacity:.45}
.aurora--cta i:nth-child(2){right:-120px;bottom:-160px;top:auto;background:#8b3ce0;opacity:.5}
.cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cta h2{font-size:clamp(30px,3.9vw,48px);font-weight:800}
.cta__copy>p{color:#b3bdd8;font-size:18px;margin:16px 0 26px}
.cta__contacts{margin-top:26px}.cta__contacts li{margin:8px 0;color:#b3bdd8}
.cta__contacts a{border-bottom:1px solid rgba(255,255,255,.3);color:#eef1fb}
.form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);border-radius:24px;padding:32px;display:grid;gap:14px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.form h3{font-size:22px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:#d5dcf0}
.form input,.form select{font:inherit;padding:12px 14px;border:1.5px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(7,11,24,.6);color:#fff}
.form select option{color:#0b1220}
.form input::placeholder{color:#6f7b99}
.form input:focus,.form select:focus{outline:none;border-color:var(--b1);box-shadow:0 0 0 4px rgba(34,168,242,.2)}
.form .invalid{border-color:#f87171}
.form__msg{min-height:1.4em;font-size:14px;font-weight:600}
.form__msg.ok{color:#34d399}.form__msg.err{color:#f87171}
.form__note{font-size:12px;color:#8a97b8}

.footer{background:var(--bg2);border-top:1px solid var(--line);color:var(--mut);padding:60px 0 24px;font-size:14.5px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer__grid nav{display:flex;flex-direction:column;gap:10px}
.footer__grid b{color:var(--tx)}.footer .logo{color:var(--tx)}
.footer a:hover{color:var(--tx)}
.footer__grid p{margin-top:14px;max-width:280px}
.footer__bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px}

/* reveal */
@supports not (animation-timeline:view()){
  .rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .rv.in{opacity:1;transform:none}
}
@supports (animation-timeline:view()){
  /* "backwards": after the entrance the element is free again, so hover transforms keep working */
  .rv{animation:rv linear backwards;animation-timeline:view();animation-range:entry 0% entry 42%}
  @keyframes rv{from{opacity:0;transform:translateY(28px)}}
}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .bento{grid-template-columns:1fr 1fr}
  .bx--a,.bx--h{grid-column:span 2}
  .bx--b,.bx--c,.bx--d,.bx--e,.bx--f,.bx--g{grid-column:span 1}
  .bx--f,.bx--g{grid-column:span 1}
  .flow{grid-template-columns:repeat(3,1fr);row-gap:32px}.flow::before{display:none}
  .onb,.dev,.sec,.cta__grid{grid-template-columns:1fr}
  .tabs__panel{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}.plan--hot{transform:none}
  .stats__grid{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .fl1{right:-6px}.fl2{left:-6px}
}
@media(max-width:820px){
  .burger{display:block}
  .nav__cta{display:flex}.nav__cta>:not(.lang){display:none}
  .nav__links{position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;margin:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 20px;display:none;color:var(--tx)}
  .nav__links.open{display:flex}
  .nav__links>a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav__cta-m{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.nav__cta-m .btn{flex:1}
  .mock__body{grid-template-columns:1fr}.mock__side{display:none}
}
@media(max-width:620px){
  .section{padding:64px 0}.hero{padding-top:44px}
  .bento,.plans,.cases,.sec__list,.stats__grid{grid-template-columns:1fr}
  .bx--a,.bx--h,.bx--b,.bx--c,.bx--d,.bx--e,.bx--f,.bx--g{grid-column:auto}
  .bx--a{grid-template-columns:1fr}.bx--h{grid-template-columns:1fr}.bx--h .ico{margin-bottom:12px}
  .flow{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr}.kpi:nth-child(n+2){display:none}
  .float{display:none}
  .mock{transform:none;margin-top:44px}
  .settle{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__actions .btn{width:100%}
  .tabs__panel{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}.draw{stroke-dashoffset:0}
}

/* polish */
.tx td:last-child,.tx td:first-child{white-space:nowrap}
@media(max-width:620px){
  .aurora i{opacity:.3;width:340px!important;height:340px!important}
  .tx td,.tx th{padding:9px 6px}
}

/* ---------- v3 polish ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;z-index:120}
h1{letter-spacing:-.035em}

/* button shine */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn--primary:hover::after{left:130%}

/* hero cursor glow */
.hero::after{content:"";position:absolute;left:0;top:0;width:520px;height:520px;transform:translate(calc(var(--gx,50vw) - 260px),calc(var(--gy,260px) - 260px));background:radial-gradient(closest-side,rgba(91,140,255,.18),transparent);pointer-events:none;z-index:-1;transition:transform .25s}

/* toast swap */
.fl1 div{transition:opacity .3s,transform .3s}
.fl1.swap div{opacity:0;transform:translateY(6px)}

/* section dividers */
.section--alt::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(760px,80%);height:1px;background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.45}

/* route svg */
.viz--route{width:100%;height:auto;max-height:110px;display:block;margin-top:18px}
.rp{fill:none;stroke:var(--brand);stroke-width:2;stroke-dasharray:5 6;animation:dash2 1.2s linear infinite}
@keyframes dash2{to{stroke-dashoffset:-22}}
.rn{fill:var(--card2);stroke:var(--line)}
.rt{fill:var(--tx);font-size:12px;font-weight:700}

/* flow highlight */
.flow li>span{transition:transform .35s,box-shadow .35s,filter .35s;filter:saturate(.5) brightness(.85)}
.flow li b{transition:color .3s}
.flow li.active>span{transform:scale(1.14);filter:none;box-shadow:0 0 0 6px var(--bg2),0 0 0 8px rgba(91,140,255,.5),0 14px 30px -6px rgba(91,140,255,.9)}
.flow li.active b{color:var(--brand)}

/* calculator */
.calc{margin-top:36px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px;position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;background:radial-gradient(closest-side,rgba(139,60,224,.22),transparent);pointer-events:none}
.calc__l h3{font-size:26px;margin-bottom:6px}
.calc__l>p{color:var(--mut);margin-bottom:22px}
.calc__lab{display:flex;justify-content:space-between;gap:12px;font-weight:600;margin-bottom:12px}
.calc__lab output{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--b1),var(--b3)) 0/var(--p,45%) 100% no-repeat,var(--card2);outline-offset:6px;cursor:pointer}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(91,140,255,.35),0 4px 12px rgba(0,0,0,.4)}
.calc input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(91,140,255,.35)}
.calc__plans{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.calc__plans button{font:inherit;font-weight:600;font-size:14px;padding:10px 18px;border-radius:12px;border:1.5px solid var(--line);background:var(--card2);color:var(--mut);cursor:pointer;transition:.2s}
.calc__plans button.on{color:#fff;background:var(--grad);border-color:transparent}
.calc__r{background:var(--mockbg);border:1px solid var(--line);border-radius:20px;padding:22px;position:relative}
.calc__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;color:var(--mut)}
.calc__row b{color:var(--tx);font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.calc__row em{font-style:normal;background:var(--card2);border:1px solid var(--line);border-radius:99px;padding:1px 9px;font-size:12px;color:var(--tx)}
.calc__row .neg{color:var(--bad)}
.calc__bar{height:10px;border-radius:99px;background:rgba(248,113,113,.35);margin:8px 0 6px;overflow:hidden}
.calc__bar i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--ok),#22d3ee);border-radius:99px;transition:width .35s}
.calc__row--net{border-top:1px dashed var(--line);margin-top:8px;padding-top:14px;color:var(--tx);font-weight:600}
.calc__row--net b{font-size:30px;color:var(--ok)}
.calc__save{min-height:1.4em;font-size:13.5px;color:var(--brand);font-weight:600;margin-top:4px}
.calc__note{font-size:12px;color:var(--mut);margin-top:8px}
@media(max-width:1020px){.calc{grid-template-columns:1fr}}
@media(max-width:620px){.calc{padding:22px}.calc__row--net b{font-size:24px}}


/* =====================================================================
   v4 — modern web layer
   ===================================================================== */

/* icons (inline SVG sprite instead of emoji: identical on every OS, follows the theme) */
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.ico .i{width:22px;height:22px;color:var(--brand)}
.theme .i{width:20px;height:20px}
.theme .i--moon{display:none}
[data-theme=light] .theme .i--sun{display:none}
[data-theme=light] .theme .i--moon{display:block}
.cta__contacts li{display:flex;align-items:center;gap:10px}
.cta__contacts .i{color:#7dd3fc}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* nav scroll-spy + locked page while the mobile menu is open */
.nav__links a{position:relative}
.nav__links a[aria-current=true]{color:var(--tx)}
@media(min-width:821px){
  .nav__links a[aria-current=true]::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--grad)}
}
body.menu-open{overflow:hidden}

/* scroll progress driven by the compositor where supported (JS fallback otherwise) */
@supports (animation-timeline:scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root block)}
  @keyframes prog{to{transform:scaleX(1)}}
}

/* animate only while visible: off-screen hero/marquee/aurora stop costing frames */
.aurora i{will-change:transform}
.is-paused .aurora i,.is-paused .marquee__track,.is-paused .dot,.is-paused .float,.is-paused .draw{animation-play-state:paused}
@media(max-width:620px){.aurora i{filter:blur(60px)}}

/* pricing: rotating conic border (registered custom property = animatable gradient angle) */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
[data-theme] .plan--hot{--plan-bg:var(--bg);background:linear-gradient(var(--plan-bg),var(--plan-bg)) padding-box,conic-gradient(from var(--ang),#22a8f2,#3d63f5,#8b3ce0,#22a8f2) border-box;animation:ang 8s linear infinite}
[data-theme=dark] .plan--hot{--plan-bg:#0d1430}
@keyframes ang{to{--ang:360deg}}

/* FAQ: one open at a time via <details name>; smooth open/close is the grid-template-rows trick on .faq p
   above, not ::details-content — that pseudo-element's content-visibility/allow-discrete transition turned
   out to silently eat clicks on anything but the details that was already open in the HTML source (the
   closed->open transition never actually revealed the content), caught by testing it directly rather than
   trusting the screenshot. Plain opacity/transform/grid-rows transitions below don't have that failure mode. */
.faq summary{min-height:44px;align-items:center}

/* components adapt to the space they get, not to the viewport (container queries) */
.bento,.tabs,.calc{container-type:inline-size}
@container (max-width:720px){
  .bx--a{grid-template-columns:1fr}
  .viz--3ds{justify-content:flex-start}
}
@container (max-width:760px){
  .tabs__panel{grid-template-columns:1fr}
}
.tabs{container-name:tabs}
.calc{container-name:calc}
@container calc (max-width:640px){
  .calc>*{min-width:0}
}
.tabs__panel{animation:none;transition:opacity .35s,transform .35s}
@starting-style{.tabs__panel{opacity:0;transform:translateY(8px)}}

/* lead form: native validity, shown only after the user has interacted (:user-invalid) */
.form input:user-invalid{border-color:#f87171;box-shadow:0 0 0 4px rgba(248,113,113,.16)}
.form input:focus-visible,.form select:focus-visible{outline:none}
.form .btn[disabled]{opacity:.6;cursor:progress;transform:none}
.form{scroll-margin-top:100px}

/* calculator quick picks */
.calc__presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.calc__presets button{font:inherit;font-size:13px;font-weight:600;min-height:36px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--card2);color:var(--mut);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.calc__presets button:hover{color:var(--tx);border-color:var(--brand)}
.calc__presets button.on{color:var(--tx);border-color:var(--brand);background:color-mix(in oklab,var(--brand) 16%,transparent)}

/* sticky mobile call to action */
.mcta{position:fixed;inset:auto 0 0 0;z-index:60;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mcta .btn{width:100%}
.mcta.show{transform:none}
@media(max-width:820px){.mcta{display:block}.footer{padding-bottom:96px}}

/* floating contact button: Telegram / WhatsApp / call / email, collapsed to one round button in the corner */
.fab{position:fixed;right:20px;bottom:20px;z-index:65}
.fab>summary{width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer;list-style:none;box-shadow:0 10px 28px -8px rgba(91,99,245,.55),var(--shadow);transition:transform .2s}
.fab>summary::-webkit-details-marker{display:none}
.fab>summary:hover{transform:scale(1.06)}
.fab>summary .i{width:24px;height:24px}
.fab>summary .i--x{display:none}
.fab[open]>summary .i--chat{display:none}
.fab[open]>summary .i--x{display:block}
.fab__menu{position:absolute;right:0;bottom:calc(100% + 12px);display:flex;flex-direction:column;gap:8px;width:max-content}
.fab__item{display:flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:99px;background:var(--card2);border:1px solid var(--line);backdrop-filter:blur(16px);box-shadow:var(--shadow);font-size:14.5px;font-weight:600;color:var(--tx);transition:border-color .2s,transform .2s}
.fab__item:hover{border-color:var(--brand);transform:translateX(-3px)}
.fab__ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.fab__ico .i{width:16px;height:16px}
.fab__item--tg .fab__ico{background:#29a9eb}
.fab__item--wa .fab__ico{background:#25d366}
.fab__item--call .fab__ico{background:var(--grad)}
.fab__item--mail .fab__ico{background:var(--b2)}
@media(max-width:820px){.fab{right:16px;bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- checkout demo: what the payer sees ---------- */
#checkout{overflow-x:clip}
.co{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.co__copy>p{color:var(--mut);font-size:18px;margin:16px 0 22px}
.co__copy>.co__hint{font-size:14px;margin:20px 0 0}
.phone{position:relative;justify-self:center;width:min(330px,100%);aspect-ratio:9/16.6;border-radius:46px;padding:12px;background:linear-gradient(160deg,#2b3560,#0c1125);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.1);isolation:isolate}
.phone::before{content:"";position:absolute;inset:-46px;z-index:-1;background:radial-gradient(closest-side,rgba(91,140,255,.32),transparent);pointer-events:none}
.phone__notch{position:absolute;top:21px;left:50%;translate:-50% 0;width:86px;height:23px;border-radius:99px;background:#05070f;z-index:3}
.phone__screen{position:relative;height:100%;border-radius:35px;background:#fff;color:#0b1220;overflow:hidden}
.pay{position:absolute;inset:0;display:flex;flex-direction:column;padding:58px 22px 22px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s,transform .35s,visibility 0s .35s}
.phone[data-state=idle] .pay--form,.phone[data-state=wait] .pay--wait,.phone[data-state=tds] .pay--3ds,.phone[data-state=ok] .pay--ok{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s,visibility 0s}
.pay small{color:#5b6580;font-size:13px}
.pay__head b{display:block;font-size:16px;letter-spacing:-.01em}
.pay__amount{margin:18px 0 20px;padding:16px;border-radius:16px;background:#f3f6fd}
.pay__amount b{display:block;font-size:32px;letter-spacing:-.03em;line-height:1.1;margin-top:2px}
.pay__f{display:grid;gap:5px;font-size:12px;font-weight:600;color:#5b6580;margin-bottom:12px}
.pay__f input{font:inherit;font-size:15px;color:#0b1220;padding:12px 13px;border:1.5px solid #e3e8f3;border-radius:12px;background:#fff;pointer-events:none;width:100%;min-width:0}
.pay__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay__btn{margin-top:auto;width:100%}
.pay__safe{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:11.5px;color:#5b6580;text-align:center}
.pay__safe .i{width:13px;height:13px;color:#059669}
.pay--wait,.pay--3ds,.pay--ok{align-items:center;justify-content:center;text-align:center;gap:10px;padding-top:22px}
.pay--wait b,.pay--3ds b,.pay--ok b{font-size:19px;letter-spacing:-.01em}
.spin{width:54px;height:54px;border-radius:50%;border:4px solid #e3e8f3;border-top-color:#3d63f5;animation:rot .8s linear infinite;margin-bottom:8px}
@keyframes rot{to{transform:rotate(360deg)}}
.pay__bank{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#22a8f2,#3d63f5 55%,#8b3ce0);display:grid;place-items:center;color:#fff;margin-bottom:6px;box-shadow:0 14px 30px -10px rgba(61,99,245,.7)}
.pay__bank .i{width:32px;height:32px}
.otp{display:flex;gap:10px;margin-top:14px}
.otp i{width:44px;height:52px;border-radius:12px;border:1.5px solid #d5dcf0;background:#f7f9fd;position:relative}
.otp i::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:#3d63f5;transform:scale(0)}
.phone[data-state=tds] .otp i::after{animation:pop .3s forwards}
.phone[data-state=tds] .otp i:nth-child(1)::after{animation-delay:.25s}
.phone[data-state=tds] .otp i:nth-child(2)::after{animation-delay:.5s}
.phone[data-state=tds] .otp i:nth-child(3)::after{animation-delay:.75s}
.phone[data-state=tds] .otp i:nth-child(4)::after{animation-delay:1s}
@keyframes pop{to{transform:scale(1)}}
.okmark{width:72px;height:72px;border-radius:50%;background:#10b981;display:grid;place-items:center;color:#fff;margin-bottom:8px;box-shadow:0 0 0 10px rgba(16,185,129,.14),0 18px 34px -10px rgba(16,185,129,.7)}
.okmark .i{width:38px;height:38px;stroke-width:2.4;stroke-dasharray:30;stroke-dashoffset:30}
.phone[data-state=ok] .okmark{animation:okpop .5s cubic-bezier(.2,1.4,.4,1)}
.phone[data-state=ok] .okmark .i{animation:tick .45s .2s ease forwards}
@keyframes okpop{from{transform:scale(.4);opacity:0}}
@keyframes tick{to{stroke-dashoffset:0}}
.pay__again{margin-top:18px}
.pay .btn{color:#0b1220}
.pay .btn--outline{border-color:#d5dcf0;background:#f7f9fd}
.pay .btn--primary{color:#fff}
@media(max-width:1020px){.co{grid-template-columns:1fr;gap:44px}}

@media(max-width:620px){.pill{border-radius:22px;padding:8px 16px;font-size:13px;line-height:1.4;text-align:center;text-wrap:balance}}

.plans>*{min-width:0}
.plan__p b{font-size:clamp(30px,8.4vw,42px)}

/* ---------- input-agnostic polish ---------- */
@media(hover:none){.btn:hover,.bx:hover,.cases article:hover{transform:none}.btn--primary:hover::after{left:-60%}}
.btn:active{transform:translateY(0) scale(.98)}
.btn[disabled]{pointer-events:none}
a.btn,button.btn{min-height:44px}

/* view transition for the theme switch: a circular reveal from the button */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* off-screen footer is skipped until needed; not used on sections above it: their estimated height made anchor jumps land off-target */
.footer{content-visibility:auto;contain-intrinsic-size:auto 340px}

/* accessibility preferences */
@media(prefers-contrast:more){
  :root{--line:rgba(255,255,255,.4);--mut:#c3cbe2}
  [data-theme=light]{--line:#7c87a3;--mut:#374057}
  .btn--outline,.btn--glass,.plan,.bx,.cases article{border-width:2px}
}
@media(forced-colors:active){
  .btn--primary,.plan--hot,.calc__plans .on,.tabs__nav [aria-selected=true]{border:2px solid ButtonText}
  .grad,.eyebrow,.stats b,.logo b,.calc__lab output{-webkit-text-fill-color:currentColor;color:CanvasText;background:none}
  .progress,.aurora,.gridbg{display:none}
}
@media(prefers-reduced-motion:reduce){
  .plan--hot{animation:none}
  .mcta{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{
  .nav,.progress,.aurora,.gridbg,.mcta,.marquee,.mock,.float,.form{display:none!important}
  body{background:#fff;color:#000}
  .section,.section--alt{padding:24px 0;background:#fff}
}

/* Touch screens: a link in the footer is at least 44px tall (WCAG 2.2 asks for 24, Apple and Google for 44). */
@media (pointer:coarse){
  .footer__grid nav{gap:0}
  .footer__grid nav a{display:flex;align-items:center;min-height:44px}
  .footer__bot a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  a[href^="mailto:"],a[href*="t.me/"]{padding-block:10px}
}

/* ---------- hairlines ----------
   Lines between the parts of the page are 1px lines that fade out at their ends rather than hard borders from edge to edge, and
   the cards are outlined by a gradient edge that catches light at one corner. Only the look changes; nothing moves. */
:root,[data-theme=dark]{--hl:rgba(255,255,255,.13);--hl-soft:rgba(255,255,255,.06);--edge1:rgba(255,255,255,.26);--edge2:rgba(255,255,255,.07);--edge3:rgba(139,60,224,.38)}
[data-theme=light]{--hl:rgba(15,25,60,.13);--hl-soft:rgba(15,25,60,.06);--edge1:rgba(61,99,245,.34);--edge2:rgba(15,25,60,.09);--edge3:rgba(139,60,224,.3)}

/* the bar at the top: the line appears, fading at both ends with a touch of brand colour in the middle, once the page is scrolled */
.nav,.nav.is-stuck{border-bottom-color:transparent}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;opacity:0;transition:opacity .25s;
  background:linear-gradient(90deg,transparent,var(--hl) 14%,var(--brand) 50%,var(--hl) 86%,transparent)}
.nav.is-stuck::after{opacity:.9}

/* between sections: a quiet line; the tinted sections keep their brand-coloured one */
.section:not(.section--alt)::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hl-soft) 18%,var(--hl) 50%,var(--hl-soft) 82%,transparent)}

/* the footer and the line above its last row */
.footer{border-top-color:transparent;position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hl) 14%,var(--brand) 50%,var(--hl) 86%,transparent);opacity:.8}
.footer__bot{border-top-color:transparent;position:relative}
.footer__bot::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hl) 20%,var(--hl) 80%,transparent)}

/* cards: the gradient edge replaces the flat border (drawn as a ring cut out of a gradient) */
.bx,.stats__grid>div,.kpi,.tabs,.mock,.check,.sec__list li,.settle>div{position:relative;border-color:transparent}
.bx::after,.stats__grid>div::after,.kpi::after,.tabs::after,.mock::after,.check::after,.sec__list li::after,.settle>div::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,var(--edge1),var(--edge2) 34%,var(--edge2) 66%,var(--edge3));
  -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}
.bx:hover{border-color:transparent}
.bx:hover::after{background:linear-gradient(155deg,rgba(91,140,255,.95),var(--edge2) 42%,var(--edge2) 62%,var(--edge3))}