@font-face{font-family:Nunito;src:url('./fonts/Nunito-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('./fonts/Nunito-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('./fonts/Nunito-Black.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:Caveat;src:url('./fonts/Caveat-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--ink:#111019;--muted:#77728f;--pink:#ff2876;--paper:#fbf7fa}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{font:inherit}
.js .hero-enter{opacity:0;translate:0 22px;scale:.985}
.js.loaded .hero-enter{opacity:1;translate:0 0;scale:1;transition:opacity .72s cubic-bezier(.16,1,.3,1) var(--delay,0ms),translate .72s cubic-bezier(.16,1,.3,1) var(--delay,0ms),scale .72s cubic-bezier(.16,1,.3,1) var(--delay,0ms)}
.js .reveal{opacity:0;translate:0 30px;scale:.985;transition:opacity .8s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1),scale .8s cubic-bezier(.16,1,.3,1)}
.js .reveal.is-visible{opacity:1;translate:0 0;scale:1}
.magnetic{--mx:0px;--my:0px;transform:translate3d(var(--mx),var(--my),0);transition:transform .34s cubic-bezier(.34,1.56,.64,1),filter .25s ease,box-shadow .25s ease}
.magnetic:hover{filter:saturate(1.08) brightness(1.025)}
.magnetic:focus-visible{outline:3px solid rgba(255,40,118,.25);outline-offset:4px}
.screen .sprite{transition:scale .65s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.screen:hover .sprite{scale:1.012}}
.desktop{display:none}
.mobile{--u:.117233vw;position:relative;width:100vw;height:calc(1844 * var(--u));overflow:hidden;background:#fcf8fb}
.mobile::before,.mobile::after{content:"";position:absolute;left:0;right:0;pointer-events:none;background-image:url('./img/hero-bg.png');background-repeat:no-repeat}
.mobile::before{top:0;height:calc(650 * var(--u));background-image:linear-gradient(to bottom,transparent 44%,#fcf8fb 79%),url('./img/hero-bg.png');background-size:100% 100%,100vw auto;background-position:0 0,center calc(-95 * var(--u));background-repeat:no-repeat}
.mobile::after{bottom:0;height:calc(390 * var(--u));background-size:auto calc(520 * var(--u));background-position:center bottom;-webkit-mask-image:linear-gradient(transparent 0,#000 48%);mask-image:linear-gradient(transparent 0,#000 48%)}
.layer{position:absolute}
.logo{object-fit:contain}
.mobile .logo{left:calc(45 * var(--u));top:calc(30 * var(--u));width:calc(332 * var(--u));height:calc(94 * var(--u))}
.mobile h1{left:calc(66 * var(--u));top:calc(137 * var(--u));margin:0;font-size:calc(80 * var(--u));line-height:1;font-weight:900;letter-spacing:-.042em}
.mobile .lead{left:calc(67 * var(--u));top:calc(224 * var(--u));margin:0;font-size:calc(27 * var(--u));line-height:1.2;color:#737393;font-weight:700}
.cta{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:900;background:linear-gradient(90deg,#ffa15e,#ff527c 48%,#f6227b);box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(255,43,117,.22);border-radius:999px}
.mobile .cta{left:calc(180 * var(--u));top:calc(278 * var(--u));width:calc(486 * var(--u));height:calc(78 * var(--u));font-size:calc(30 * var(--u))}
.cta-arrow{position:absolute;right:calc(9 * var(--u));display:grid;place-items:center;width:calc(61 * var(--u));height:calc(61 * var(--u));border-radius:50%;background:#fff;color:var(--pink)}
.cta-arrow svg{width:43%;height:43%}
.gesture{color:var(--pink);pointer-events:none}
.mobile .gesture{top:calc(279 * var(--u));width:calc(122 * var(--u));height:calc(83 * var(--u))}
.mobile .gesture.left{left:calc(52 * var(--u))}
.mobile .gesture.right{right:calc(51 * var(--u));transform:scaleX(-1)}
.stores{display:flex}
.mobile .stores{left:calc(112 * var(--u));top:calc(372 * var(--u));gap:calc(27 * var(--u))}
.store{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88);border:1px solid rgba(151,139,176,.13);box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(75,59,104,.1);color:#74708f;white-space:nowrap}
.mobile .store{width:calc(291 * var(--u));height:calc(57 * var(--u));gap:calc(10 * var(--u));border-radius:calc(20 * var(--u));font-size:calc(18 * var(--u))}
.store strong{color:var(--ink);font-weight:900}
.store svg{width:calc(28 * var(--u));height:calc(28 * var(--u));flex:none}
.mobile .motto{left:0;right:0;top:calc(485 * var(--u));margin:0;text-align:center;color:#9691aa;font-size:calc(20 * var(--u));font-weight:700}
.copy{position:absolute}
.copy .num{display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.58);font-weight:900}
.copy h2,.copy p{margin:0}
.copy h2{font-weight:900;line-height:1.12;letter-spacing:-.025em}
.copy p{color:#7c7694;line-height:1.35}
.mobile .copy .num{width:calc(66 * var(--u));height:calc(66 * var(--u));font-size:calc(32 * var(--u));color:var(--pink);margin-bottom:calc(19 * var(--u))}
.mobile .copy h2{font-size:calc(34 * var(--u))}
.mobile .copy p{margin-top:calc(12 * var(--u));font-size:calc(23 * var(--u))}
.mobile .copy.one{left:calc(63 * var(--u));top:calc(526 * var(--u));width:calc(165 * var(--u))}
.screen{position:absolute;overflow:hidden}
.screen .sprite{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;object-fit:fill}
.mobile .promise-screen{left:calc(248 * var(--u));top:calc(449 * var(--u));width:calc(410 * var(--u));height:calc(789 * var(--u));border-radius:calc(38 * var(--u));filter:drop-shadow(0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(83,64,112,.12))}
.mobile .note{left:calc(696 * var(--u));top:calc(766 * var(--u));width:calc(135 * var(--u));font:600 calc(31 * var(--u))/1.08 Caveat,cursive;color:#ff4d91;transform:rotate(-7deg)}
.mobile .note-arrow{left:calc(683 * var(--u));top:calc(947 * var(--u));width:calc(87 * var(--u));height:calc(76 * var(--u));color:#ff8ebd;transform:rotate(14deg)}
.mobile .step-card{left:calc(32 * var(--u));width:calc(789 * var(--u));border-radius:calc(28 * var(--u))}
.mobile .step-card.two{top:calc(1250 * var(--u));height:calc(217 * var(--u));background:rgba(224,220,249,.74)}
.mobile .step-card.three{top:calc(1479 * var(--u));height:calc(244 * var(--u));background:rgba(255,220,234,.73)}
.mobile .copy.two,.mobile .copy.three{left:calc(147 * var(--u));width:calc(235 * var(--u))}
.mobile .copy.two{top:calc(1270 * var(--u))}
.mobile .copy.three{top:calc(1500 * var(--u))}
.mobile .copy.two .num,.mobile .copy.three .num{position:absolute;left:calc(-84 * var(--u));top:calc(-4 * var(--u));margin:0}
.mobile .copy.two .num{color:#7b56ed}
.mobile .deadline-screen{left:calc(381 * var(--u));top:calc(1268 * var(--u));width:calc(412 * var(--u));height:calc(194 * var(--u));border-radius:calc(22 * var(--u))}
.mobile .feed-screen{left:calc(374 * var(--u));top:calc(1486 * var(--u));width:calc(420 * var(--u));height:calc(229 * var(--u));border-radius:calc(22 * var(--u))}
.mobile .footer-note{left:0;right:0;top:calc(1734 * var(--u));text-align:center;font:600 calc(29 * var(--u))/1 Caveat,cursive;color:#8499d0}
.mobile .footer-line{left:calc(394 * var(--u));top:calc(1797 * var(--u));width:calc(64 * var(--u));height:calc(3 * var(--u));border-radius:3px;background:#8796c4}
.layer,.screen,.copy{z-index:2}

@media (min-width:901px){
  .mobile{display:none}
  .desktop{--u:.063052vw;display:block;position:relative;width:100vw;height:calc(992 * var(--u));min-height:625px;overflow:hidden;background:#fbf8fb}
  .desktop::before{content:"";position:absolute;inset:0 0 auto;height:calc(645 * var(--u));background:url('./img/hero-bg.png') center calc(-166 * var(--u))/100vw auto no-repeat;-webkit-mask-image:linear-gradient(#000 0 80%,transparent 100%);mask-image:linear-gradient(#000 0 80%,transparent 100%)}
  .desktop::after{content:"";position:absolute;inset:auto 0 0;height:calc(355 * var(--u));background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,247,251,.64)),url('./img/hero-bg.png') center bottom/cover no-repeat}
  .desktop .logo{left:calc(87 * var(--u));top:calc(10 * var(--u));width:calc(240 * var(--u));height:calc(68 * var(--u))}
  .desktop nav{left:calc(364 * var(--u));top:calc(39 * var(--u));display:flex;gap:calc(49 * var(--u));font-size:calc(17 * var(--u));font-weight:700;color:#67658d}
  .desktop nav a{color:inherit;text-decoration:none}
  .desktop nav a{position:relative;transition:color .2s ease}
  .desktop nav a::after{content:"";position:absolute;left:0;right:0;bottom:calc(-7 * var(--u));height:2px;border-radius:2px;background:var(--pink);scale:0 1;transform-origin:center;transition:scale .3s cubic-bezier(.16,1,.3,1)}
  .desktop nav a:hover{color:var(--ink)}
  .desktop nav a:hover::after,.desktop nav a:focus-visible::after{scale:1 1}
  .desktop .nav-cta{right:calc(101 * var(--u));top:calc(22 * var(--u));width:calc(199 * var(--u));height:calc(48 * var(--u));display:grid;place-items:center;border-radius:999px;background:linear-gradient(90deg,#ff9d5b,#ff287d);color:#fff;text-decoration:none;font-size:calc(18 * var(--u));font-weight:900}
  .desktop h1{left:calc(115 * var(--u));top:calc(149 * var(--u));margin:0;font-size:calc(96 * var(--u));line-height:1;font-weight:900;letter-spacing:-.042em}
  .desktop .lead{left:calc(117 * var(--u));top:calc(259 * var(--u));margin:0;font-size:calc(31 * var(--u));color:#777492}
  .desktop .cta{left:calc(211 * var(--u));top:calc(325 * var(--u));width:calc(453 * var(--u));height:calc(67 * var(--u));font-size:calc(27 * var(--u))}
  .desktop .cta-arrow{right:calc(9 * var(--u));width:calc(49 * var(--u));height:calc(49 * var(--u))}
  .desktop .gesture{top:calc(326 * var(--u));width:calc(123 * var(--u));height:calc(78 * var(--u))}
  .desktop .gesture.left{left:calc(77 * var(--u))}
  .desktop .gesture.right{left:calc(669 * var(--u));transform:scaleX(-1)}
  .desktop .stores{left:calc(140 * var(--u));top:calc(416 * var(--u));gap:calc(28 * var(--u))}
  .desktop .store{width:calc(273 * var(--u));height:calc(50 * var(--u));gap:calc(10 * var(--u));border-radius:calc(18 * var(--u));font-size:calc(16 * var(--u))}
  .desktop .store svg{width:calc(26 * var(--u));height:calc(26 * var(--u))}
  .desktop .motto{left:calc(287 * var(--u));top:calc(486 * var(--u));margin:0;font-size:calc(18 * var(--u));color:#7c7793}
  .desktop .hero-screen{left:calc(874 * var(--u));top:calc(55 * var(--u));width:calc(381 * var(--u));height:calc(585 * var(--u));border-radius:calc(24 * var(--u))}
  .desktop .step-card{top:calc(655 * var(--u));height:calc(249 * var(--u));border-radius:calc(28 * var(--u));background:rgba(226,226,249,.58)}
  .desktop .step-card.one{left:calc(107 * var(--u));width:calc(447 * var(--u))}
  .desktop .step-card.two{left:calc(579 * var(--u));width:calc(429 * var(--u))}
  .desktop .step-card.three{left:calc(1027 * var(--u));width:calc(451 * var(--u))}
  .desktop .login-screen{left:calc(170 * var(--u));top:calc(665 * var(--u));width:calc(324 * var(--u));height:calc(238 * var(--u));border-radius:calc(17 * var(--u))}
  .desktop .promise-small{left:calc(643 * var(--u));top:calc(663 * var(--u));width:calc(305 * var(--u));height:calc(241 * var(--u));border-radius:calc(17 * var(--u))}
  .desktop .feed-small{left:calc(1094 * var(--u));top:calc(663 * var(--u));width:calc(350 * var(--u));height:calc(241 * var(--u));border-radius:calc(17 * var(--u))}
  .desktop .connector{left:calc(486 * var(--u));top:calc(720 * var(--u));width:calc(1100 * var(--u));height:calc(120 * var(--u));color:#ff76c1;opacity:.72}
  .desktop .step-label{top:calc(908 * var(--u));display:grid;grid-template-columns:calc(48 * var(--u)) 1fr;column-gap:calc(16 * var(--u));align-items:start}
  .desktop .label1{left:calc(210 * var(--u));width:calc(340 * var(--u))}
  .desktop .label2{left:calc(639 * var(--u));width:calc(360 * var(--u))}
  .desktop .label3{left:calc(1101 * var(--u));width:calc(375 * var(--u))}
  .desktop .step-label .num{grid-row:1/3;width:calc(44 * var(--u));height:calc(44 * var(--u));display:grid;place-items:center;border-radius:50%;background:var(--pink);color:#fff;font-size:calc(20 * var(--u));font-weight:900}
  .desktop .step-label h2{margin:0;font-size:calc(19 * var(--u));line-height:1.15;font-weight:900}
  .desktop .step-label p{margin:calc(4 * var(--u)) 0 0;font-size:calc(15 * var(--u));line-height:1.32;color:#777492}
}

.site-footer{position:relative;z-index:5;min-height:126px;padding:30px clamp(28px,5.2vw,84px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;border-top:1px solid rgba(98,114,160,.1);background-color:#f4f7fb;background-image:radial-gradient(circle,rgba(100,151,223,.24) 1.3px,transparent 1.5px);background-size:44px 44px;color:#70809c}
.footer-brand{justify-self:start;display:block;width:122px;height:44px;opacity:.82;transition:opacity .2s ease,translate .25s cubic-bezier(.16,1,.3,1)}
.footer-brand img{width:100%;height:100%;object-fit:contain}
.footer-brand:hover{opacity:1;translate:0 -2px}
.footer-links{display:flex;align-items:center;justify-content:center;gap:26px}
.footer-links a{position:relative;color:#70809c;text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap;transition:color .2s ease,translate .25s cubic-bezier(.16,1,.3,1)}
.footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--pink);scale:0 1;transition:scale .28s cubic-bezier(.16,1,.3,1)}
.footer-links a:hover,.footer-links a:focus-visible{color:#302b49;translate:0 -2px}
.footer-links a:hover::after,.footer-links a:focus-visible::after{scale:1 1}
.site-footer>p{justify-self:end;margin:0;font-size:13px;font-weight:700;color:#8a96ab}

@media (max-width:900px){
  .site-footer{min-height:210px;padding:28px 24px max(30px,env(safe-area-inset-bottom));grid-template-columns:1fr;justify-items:center;gap:20px;text-align:center;background-size:40px 40px}
  .footer-brand,.site-footer>p{justify-self:center}
  .footer-links{flex-wrap:wrap;gap:17px 24px;max-width:390px}
  .footer-links a{font-size:13px}
}

/* ——— ОТКЛИК КНОПОК ———
   ⛔ transform у .magnetic УЖЕ занят курсорным смещением (--mx/--my из motion.js). Написать
   свой transform в :hover — значит затереть магнит: кнопка перестанет следовать за курсором,
   и правка «оживить» сделает её мертвее, чем была. Поэтому подъём и нажатие входят в ту же
   формулу отдельными переменными, а не новым правилом transform.
   Геометрия в покое не меняется ни на точку: только transform, тень и фильтр. */
.magnetic{transform:translate3d(var(--mx),calc(var(--my) + var(--lift,0px)),0) scale(var(--press,1))}
.cta,.nav-cta{--lift:0px;--press:1}
.cta-arrow{transition:translate .32s cubic-bezier(.34,1.56,.64,1),scale .32s cubic-bezier(.34,1.56,.64,1)}
.store{transition:background .25s ease,box-shadow .25s ease}

@media (hover:hover){
  .cta:hover{--lift:-3px;--press:1.018;box-shadow:0 calc(20 * var(--u)) calc(46 * var(--u)) rgba(255,43,117,.34)}
  .cta:hover .cta-arrow{translate:3px 0;scale:1.07}
  .nav-cta:hover{--lift:-2px;--press:1.03;box-shadow:0 8px 20px rgba(255,43,117,.3)}
  /* Плашки магазинов пока НЕ кнопки — на них «Coming soon». Отклик мягкий и без курсора-руки:
     иначе страница обещает переход, которого нет. */
  .store:hover{background:rgba(255,255,255,.97);box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(75,59,104,.16)}
}

/* ⛔ Нажатие стоит ПОСЛЕ блока :hover намеренно. Пока палец на кнопке, активны оба состояния,
   специфичность у них одинаковая, и медиазапрос её не повышает — выигрывает то, что ниже
   в файле. Стояло выше: кнопка подсвечивалась, но на нажатие не отвечала вовсе. */
.cta:active,.nav-cta:active{--press:.972;--lift:0px;transition-duration:.09s}

/* Один мягкий вдох главной кнопки, когда герой уже встал на место. Анимируется ТОЛЬКО тень:
   scale ушёл бы в тот же transform, что и магнит, и они бы подрались. */
@keyframes вдох-кнопки{
  0%,100%{box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(255,43,117,.22)}
  50%{box-shadow:0 calc(18 * var(--u)) calc(52 * var(--u)) rgba(255,43,117,.42)}
}
.js.loaded .cta{animation:вдох-кнопки 1.5s cubic-bezier(.4,0,.35,1) 1.05s 2}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero-enter,.js.loaded .hero-enter,.js .reveal,.js .reveal.is-visible{opacity:1;translate:none;scale:1;transition:none}
  .magnetic,.screen .sprite,.footer-brand,.footer-links a{transition:none!important;transform:none!important}
  .js.loaded .cta{animation:none}
  .cta-arrow{transition:none}
}