:root{
  --ink:#0a1f3d; --text:#243f63; --muted:#4a6381;
  --blue:#2563eb; --blue-deep:#1240b0; --link:#1556d0; --sky:#47a8ff;
  --ice:#eaf5ff; --mist:#f3f9ff; --line:#d3e6fb;
  --navy:#0b2a5b; --navy-2:#0f3b82; --white:#fff;
  --glass:rgba(255,255,255,.68); --edge:rgba(255,255,255,.92);
  --shadow:0 18px 50px rgba(20,80,180,.14);
  --r:22px;
  --font:"Manrope","Inter","SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;font-family:var(--font);color:var(--text);background:linear-gradient(180deg,#f3f9ff 0%,#fff 38%);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none}
body::before{width:560px;height:560px;top:-180px;left:-160px;background:rgba(110,185,255,.40)}
body::after{width:640px;height:640px;top:380px;right:-240px;background:rgba(180,220,255,.55)}
.sprite{position:absolute}
img,svg{max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid rgba(37,99,235,.55);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:100}
.skip:focus{left:12px}
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--sky),var(--blue-deep))}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
h1,h2,h3{color:var(--ink);line-height:1.12;letter-spacing:-.025em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,5.2vw,3.8rem);font-weight:800}
h2{font-size:clamp(1.85rem,3.4vw,2.7rem);font-weight:780}
h3{font-size:1.2rem;font-weight:720;letter-spacing:-.01em}
p{margin:0 0 1em}
.grad{background:linear-gradient(100deg,#1240b0,#2f8cff,#1240b0);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-deep);background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.16);padding:6px 14px;border-radius:999px;margin-bottom:18px}
.lead{font-size:1.2rem;color:var(--text);max-width:560px}
.sub{font-size:1.12rem;color:var(--text)}
.muted{color:var(--muted);font-size:.93rem}

.glass{background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.95)}

/* Кнопки */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:750;font-size:.98rem;padding:12px 24px;border-radius:999px;border:1px solid var(--edge);cursor:pointer;text-decoration:none!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s ease,color .25s ease}
.btn::before{content:"";position:absolute;z-index:-1;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-22deg);transition:left .75s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{left:130%}
.btn:active{transform:translateY(0) scale(.97)}
.btn-lg{padding:15px 30px;font-size:1.04rem}
.btn-primary{color:#fff;background:linear-gradient(180deg,#2563eb,#1240b0);box-shadow:0 10px 24px rgba(18,64,176,.34),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{box-shadow:0 16px 34px rgba(18,64,176,.46),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-ghost{color:var(--ink);background:rgba(255,255,255,.78);box-shadow:0 5px 16px rgba(20,80,180,.12),inset 0 1px 0 #fff}
.btn-ghost:hover{background:#fff;box-shadow:0 12px 26px rgba(20,80,180,.2),inset 0 1px 0 #fff}
.btn-arrow::after{content:"\2192";display:inline-block;font-weight:700;transition:transform .3s var(--ease)}
.btn-arrow:hover::after{transform:translateX(5px)}
.btn-glow{animation:glow 3.6s ease-in-out infinite}

/* Шапка */
.header{position:sticky;top:0;z-index:50;background:rgba(243,249,255,.72);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid rgba(211,230,251,.9);transition:box-shadow .3s ease,background .3s ease}
.header.scrolled{background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(20,70,160,.12)}
.header-in{display:flex;align-items:center;gap:24px;height:74px;transition:height .3s var(--ease)}
.header.scrolled .header-in{height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none!important}
.brand-mark{transition:transform .4s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08)}
.brand-name{font-weight:800;font-size:1.32rem;letter-spacing:-.02em}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{position:relative;color:var(--text);font-weight:650;font-size:.96rem;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:var(--blue-deep);text-decoration:none}
.nav a:hover::after{transform:scaleX(1)}
.header-cta{display:flex;gap:10px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .25s ease,opacity .2s ease}

/* Главный экран */
.hero{padding:68px 0 60px}
.hero-in{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 22px}
.motto-line{margin:22px 0 0;padding:4px 0 4px 18px;border-left:3px solid var(--sky)}
.motto-line .lat{display:block;font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.5rem;color:var(--blue-deep);letter-spacing:.01em;line-height:1.25}
.motto-line .ru{display:block;color:var(--muted);font-size:.98rem;margin-top:2px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.chips li{font-size:.9rem;font-weight:650;color:var(--ink);background:rgba(255,255,255,.82);border:1px solid var(--line);padding:6px 14px;border-radius:999px;transition:transform .25s var(--ease),border-color .25s ease}
.chips li:hover{transform:translateY(-2px);border-color:var(--sky)}

.hero-visual{position:relative;padding:10px 0 28px}
.mock{overflow:hidden;border-radius:26px;transform:perspective(1200px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .25s ease-out;will-change:transform}
.mock-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(255,255,255,.6);border-bottom:1px solid var(--line)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#bcd9f7}
.mock-bar span{margin-left:10px;font-size:.82rem;font-weight:750;color:var(--muted)}
.mock-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}
.mock-col{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.mock-title{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:800;margin-bottom:10px;color:var(--ink)}
.rec{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:#b3202c;font-weight:750}
.rec b{width:8px;height:8px;border-radius:50%;background:#ff5a64;animation:pulse 1.3s infinite}
.wave{display:flex;align-items:center;gap:3px;height:34px;margin-bottom:10px}
.wave s{display:block;width:4px;border-radius:3px;background:linear-gradient(180deg,var(--sky),var(--blue-deep));height:30%;animation:wave 1.2s ease-in-out infinite}
.wave s:nth-child(2n){animation-delay:-.4s}.wave s:nth-child(3n){animation-delay:-.8s}.wave s:nth-child(5n){animation-delay:-.2s}
.line{font-size:.8rem;line-height:1.45;color:var(--text);margin:0 0 7px}
.line em{font-style:normal;font-weight:800;color:var(--link)}
.fld{margin-bottom:8px;font-size:.8rem;line-height:1.4}
.fld b{display:block;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.fld span{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 9px;color:var(--ink)}
.fld-warn span{background:#fff4d6;border-color:#f3dc9a;color:#7a5200}
.mock-btn{margin-top:10px;text-align:center;font-size:.8rem;font-weight:800;color:#fff;background:linear-gradient(180deg,#2563eb,#1240b0);padding:8px;border-radius:999px}
.float{position:absolute;padding:10px 16px;font-size:.84rem;font-weight:750;color:var(--ink);border-radius:16px;animation:bob 6s ease-in-out infinite}
.float-1{left:-18px;bottom:48px}
.float-2{right:-10px;top:-6px;animation-delay:-3s}
.mock-note{position:absolute;left:0;right:0;bottom:-8px;text-align:center;font-size:.78rem;color:var(--muted);margin:0}

/* Секции */
.section{padding:92px 0}
.section.alt{background:linear-gradient(180deg,var(--mist),#eaf4ff)}
.problem{padding:30px 0 80px;text-align:center}
.section-head{text-align:center;max-width:720px;margin:0 auto 48px}

/* Девиз */
.motto{position:relative;overflow:hidden;padding:84px 0;text-align:center;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 60%,#1a56b8 100%);color:#fff}
.motto::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 15% 10%,rgba(71,168,255,.28),transparent 70%),radial-gradient(500px 300px at 90% 90%,rgba(120,190,255,.2),transparent 70%)}
.motto .wrap{position:relative}
.latin{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.1;margin:0 0 14px;color:#fff}
.latin .fly{display:inline-block;animation:fly 5.5s ease-in-out infinite}
.latin .stay{position:relative;display:inline-block}
.latin .stay::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--sky),#fff);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .5s}
.in .latin .stay::after,.js .motto .reveal.in .stay::after{transform:scaleX(1)}
.trans{font-size:clamp(1.1rem,2.2vw,1.45rem);color:#dcebff;margin:0 0 14px}
.motto-sub{color:#c6dcfa;font-size:1rem;max-width:560px;margin:0 auto}

/* Шаги */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{padding:28px 22px;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.step:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(20,80,180,.2),inset 0 1px 0 #fff}
.step p{color:var(--text);margin:0;font-size:.97rem}
.step::after{content:"";position:absolute;top:46px;right:-20px;width:20px;height:2px;background:linear-gradient(90deg,var(--sky),transparent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) .5s}
.js .step.in::after{transform:scaleX(1)}
.step:last-child::after{display:none}
.num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;font-weight:800;color:#fff;background:linear-gradient(180deg,#2563eb,#1240b0);margin-bottom:14px;box-shadow:0 8px 18px rgba(18,64,176,.32);transition:transform .35s var(--ease)}
.step:hover .num{transform:rotate(-8deg) scale(1.1)}

/* Карточки */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{padding:30px 26px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s ease}
.card:hover{transform:translateY(-6px);border-color:#9ccaff;box-shadow:0 26px 54px rgba(20,80,180,.2),inset 0 1px 0 #fff}
.card p{color:var(--text);margin:0 0 .8em;font-size:.97rem}
.ico{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;color:var(--blue-deep);background:linear-gradient(180deg,#fff,#d8ebff);border:1px solid var(--line);margin-bottom:16px;box-shadow:0 8px 18px rgba(20,80,180,.14);transition:transform .35s var(--ease),background .35s ease,color .35s ease}
.card:hover .ico{transform:rotate(-6deg) scale(1.1);background:linear-gradient(180deg,#2563eb,#1240b0);color:#fff}

/* Технология (тёмная секция) */
.dark{background:linear-gradient(135deg,var(--navy) 0%,#0e3472 100%);color:#fff;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 320px at 85% 15%,rgba(71,168,255,.25),transparent 70%)}
.dark .wrap{position:relative}
.dark h2{color:#fff}
.dark .sub{color:#d4e5ff}
.eyebrow-dark{color:#e6f1ff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.tech{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.principles{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.principles li{padding:15px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:16px;color:#d4e5ff;font-size:.97rem;transition:transform .3s var(--ease),background .3s ease}
.principles li:hover{transform:translateX(6px);background:rgba(255,255,255,.14)}
.principles b{color:#fff}
.pipe{padding:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.pipe-item{display:flex;gap:14px;align-items:flex-start}
.pipe-item b{display:block;font-size:1.04rem;color:#fff}
.pipe-item small{display:block;color:#bcd5f7;font-size:.9rem;line-height:1.45}
.pi{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-weight:800;font-size:.92rem;color:var(--navy);background:#fff;box-shadow:0 0 0 4px rgba(71,168,255,.35)}
.pipe-arrow{position:relative;width:2px;height:26px;margin:4px 0 4px 17px;background:rgba(71,168,255,.25);overflow:hidden}
.pipe-arrow::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:linear-gradient(180deg,transparent,#7cc0ff);animation:flow 1.8s linear infinite}

.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding:7px 0 7px 32px;color:var(--text);font-size:.97rem}
.ticks li::before{content:"";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* Вопросы */
.faq details{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:16px;padding:0 22px;margin-bottom:10px;transition:box-shadow .3s ease,border-color .3s ease}
.faq details:hover{border-color:#9ccaff}
.faq details[open]{box-shadow:0 14px 32px rgba(20,80,180,.14);border-color:#9ccaff}
.faq summary{cursor:pointer;list-style:none;font-weight:720;color:var(--ink);padding:19px 30px 19px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--blue);font-weight:500;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{color:var(--text);padding-bottom:18px;margin:0;font-size:.97rem}
.faq details[open] p{animation:fadeDown .35s var(--ease)}

.cta{padding:24px 0 100px}
.cta-box{text-align:center;padding:52px 32px;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(214,234,255,.85))}
.cta-box p{color:var(--text)}
.cta-box .btn{margin:8px 0 18px}

.footer{border-top:1px solid var(--line);background:var(--mist);padding:36px 0}
.footer-in{display:grid;gap:8px}
.footer .brand-name{font-size:1.1rem}
.footer p{margin:0}

/* Появление */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .steps .reveal:nth-child(2),.js .cards .reveal:nth-child(2){transition-delay:.08s}
.js .steps .reveal:nth-child(3),.js .cards .reveal:nth-child(3){transition-delay:.16s}
.js .steps .reveal:nth-child(4),.js .cards .reveal:nth-child(4){transition-delay:.24s}
.js .cards .reveal:nth-child(5){transition-delay:.32s}
.js .cards .reveal:nth-child(6){transition-delay:.4s}
.js .step.reveal.in:hover,.js .card.reveal.in:hover{transition-delay:0s}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,100,.6)}70%{box-shadow:0 0 0 8px rgba(255,90,100,0)}100%{box-shadow:0 0 0 0 rgba(255,90,100,0)}}
@keyframes wave{0%,100%{height:22%}50%{height:100%}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sheen{0%{background-position:0% 0}100%{background-position:220% 0}}
@keyframes glow{0%,100%{box-shadow:0 10px 24px rgba(18,64,176,.34),0 0 0 0 rgba(37,99,235,.35)}50%{box-shadow:0 10px 24px rgba(18,64,176,.34),0 0 0 10px rgba(37,99,235,0)}}
@keyframes fly{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(8px,-7px) rotate(-1.2deg)}}
@keyframes flow{0%{top:-100%}100%{top:100%}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:980px){
  .hero-in,.tech{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .float-1{left:6px}.float-2{right:6px}
}
@media (max-width:820px){
  .header-cta{display:none}
  .burger{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;gap:0;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);padding:8px 24px 16px;display:none}
  .nav.open{display:flex;animation:fadeDown .3s var(--ease)}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:44px 0 40px}
  .section{padding:62px 0}
  .motto{padding:60px 0}
  .steps,.cards,.cards-2{grid-template-columns:1fr}
  .mock-body{grid-template-columns:1fr}
  .float{display:none}
  .hero-actions .btn{width:100%}
}
@media (hover:none){
  .step:hover,.card:hover,.principles li:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .latin .stay::after{transform:scaleX(1)}
  .step::after{transform:scaleX(1)}
}