@font-face{font-family:Outfit;src:url(/fonts/outfit-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Outfit;src:url(/fonts/outfit-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Outfit;src:url(/fonts/outfit-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Outfit;src:url(/fonts/outfit-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Outfit;src:url(/fonts/outfit-extrabold.woff2) format("woff2");font-weight:800;font-display:swap}
:root{--g:#008B78;--g2:#2FD3B8;--n:#0F2433;--t2:#5B6B77;--bg2:#F4F7F8;--mint:#E1F4EF}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Outfit,system-ui,sans-serif;color:var(--n);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.w{max-width:1120px;margin:0 auto;padding:0 20px}
nav.top{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px}
.logo img{height:32px;width:auto;display:block}
.links{display:flex;gap:32px;font-size:16px;font-weight:500;color:#33495A}
.links a:hover{color:var(--g)}
.hero{background:linear-gradient(160deg,#0F2433 0%,#12384A 60%,#0B5B52 100%);color:#fff;overflow:hidden}
.hero .w{display:flex;align-items:center;gap:40px;min-height:560px}
.hl{flex:1.1;padding:60px 0}
.pill{display:inline-block;background:#008B7833;color:#7FE3D2;border:1px solid var(--g);border-radius:20px;padding:6px 14px;font-size:14px;font-weight:600;margin-bottom:22px}
h1{font-size:62px;line-height:1.05;font-weight:800;letter-spacing:-1px}
h1 span{color:var(--g2)}
.sub{font-size:20px;color:#C5D3DC;margin:22px 0 32px;max-width:500px}
.stores{display:flex;gap:14px;flex-wrap:wrap}
.st{background:#000;border:1px solid #ffffff40;border-radius:12px;padding:9px 18px;display:flex;align-items:center;gap:10px;min-width:190px;color:#fff;cursor:default}
.st small{display:block;font-size:11px;color:#aaa;line-height:1.2}.st b{white-space:nowrap;font-size:19px;font-weight:600;line-height:1.2}
.soon{font-size:13px;color:#8FA6B4;margin-top:12px}
.phones{flex:1;position:relative;height:560px;min-width:520px}
.ph{position:absolute;width:250px;height:520px;border:8px solid #0B1A24;border-radius:34px;background:#fff;overflow:hidden;box-shadow:0 20px 50px #0007}
.ph img{width:100%;height:auto;display:block}
.p1{left:0;top:70px;transform:rotate(-6deg)}
.p2{left:150px;top:30px;z-index:2}
.p3{left:300px;top:80px;transform:rotate(6deg)}
section{padding:80px 0}
h2{font-size:40px;font-weight:800;line-height:1.15}
.center{text-align:center}
.lead{color:var(--t2);font-size:18px;margin:12px 0 48px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{background:var(--bg2);border-radius:18px;padding:28px 24px}
.ic{width:52px;height:52px;border-radius:14px;background:var(--g);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ic svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20px;font-weight:700;margin-bottom:8px}.card p{font-size:15px;color:var(--t2)}
.band{background:var(--mint)}
.band .w{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.band h2{font-size:34px}.band p{color:#33495A;font-size:17px;margin-top:8px}
.btn{display:inline-block;background:var(--g);color:#fff;border-radius:12px;padding:16px 28px;font-weight:600;font-size:17px}
.btn:hover{background:#007565}
footer{background:var(--n);color:#C5D3DC;padding:56px 0 30px;font-size:15px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-size:15px;margin-bottom:14px}
footer ul{list-style:none}footer li{margin-bottom:9px}
footer a:hover{color:#fff}
.copy{border-top:1px solid #ffffff22;margin-top:40px;padding-top:20px;font-size:13px;color:#8FA6B4;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* documents */
.doc{max-width:760px;margin:0 auto;padding:56px 20px 80px}
.doc h1{font-size:44px;letter-spacing:-.5px}
.doc .upd{color:var(--t2);margin:10px 0 36px}
.doc h2{font-size:24px;margin:36px 0 10px}
.doc h3{font-size:18px;margin:20px 0 6px}
.doc p,.doc li{font-size:16.5px;color:#26394A;margin-bottom:10px}
.doc ul,.doc ol{padding-left:22px;margin-bottom:12px}
.doc a{color:var(--g);text-decoration:underline}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:15px}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid #E3E8EC;vertical-align:top}
.doc th{background:var(--bg2);font-weight:600}
.box{background:var(--mint);border-radius:14px;padding:20px 22px;margin:18px 0}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding-left:46px;margin-bottom:16px}
.steps li:before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--g);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.app{display:flex;align-items:center;gap:16px;background:#ffffff12;border:1px solid #ffffff26;border-radius:20px;padding:14px 22px 14px 14px;width:max-content;max-width:100%;margin-bottom:18px}
.app img{width:72px;height:72px;border-radius:17px;box-shadow:0 6px 18px #0006;flex:none}
.app b{display:block;font-size:21px;font-weight:800;line-height:1.1}.app .dev{display:block;font-size:14px;color:#D4FF3A;font-weight:600;margin-top:2px}.app .cat{display:block;font-size:13px;color:#9FB3C0;margin-top:2px}
.app .look{font-size:13px;color:#C5D3DC;border-left:1px solid #ffffff26;padding-left:16px;margin-left:6px;line-height:1.35}
.phones::before{content:"";position:absolute;left:50%;top:50%;width:460px;height:460px;transform:translate(-50%,-50%);background:radial-gradient(circle,#2FD3B833 0%,transparent 65%);pointer-events:none}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:#fff;color:var(--n);border-radius:16px;padding:10px 16px 10px 10px;box-shadow:0 14px 34px #0006;font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap}
.chip small{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;color:#6B7A86;text-transform:uppercase}
.chip b{color:#E5484D;font-weight:800}
.chip i{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.chip .live{background:#FDECEC;position:relative}.chip .live::after{content:"";width:12px;height:12px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 5px #E5484D33}
.chip .cup{background:#0B1F2E}.chip .cup svg{width:22px;height:22px;fill:none;stroke:#D4FF3A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c1{left:-44px;top:250px}.c2{right:-24px;bottom:14px}
@media (max-width:900px){
  .links{display:none}
  .hero .w{flex-direction:column;min-height:0}
  .hl{padding:44px 0 0}
  h1{font-size:44px}
  .sub{font-size:18px}
  .phones{flex:none;min-width:0;width:100%;height:420px;transform:scale(.78);transform-origin:top center;margin-bottom:-60px}
  .phones .p1{left:calc(50% - 275px)}.phones .p2{left:calc(50% - 125px)}.phones .p3{left:calc(50% + 25px)}
  .grid{grid-template-columns:1fr 1fr}
  .fg{grid-template-columns:1fr 1fr}
  h2{font-size:32px}
  section{padding:56px 0}
  .doc h1{font-size:34px}
}
@media (max-width:560px){
  .app .look{display:none}
  .grid,.fg{grid-template-columns:1fr}
  .phones{transform:scale(.6);height:340px;margin-bottom:-40px}
  .st{min-width:0;flex:1}
}