@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');*{box-sizing:border-box;margin:0;padding:0}
:root{--p:#2c4a72;--ink:#080b14;--muted:#a1a3b2}
html{scroll-behavior:smooth}
html{max-width:100%;overflow-x:hidden}body{max-width:100%;font-family:'DM Sans',sans-serif;background:#080b14;color:#fff;overflow-x:hidden}
a{color:inherit}
.nav{position:fixed;z-index:20;top:16px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 28px));height:62px;padding:0 13px 0 22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(8,11,20,.7);backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;transition:transform .35s ease,opacity .35s ease}.nav.nav-hidden{transform:translate(-50%,-115%);opacity:0}
.examples{padding:110px 6vw;background:#080b14}.examples-head{max-width:800px;margin:0 auto 45px;text-align:center}.examples-head h2{font:800 clamp(40px,6vw,72px)/1 Manrope;letter-spacing:-.05em}.examples-head p{color:#a1a3b2;margin-top:16px}.example-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:14px;max-width:1200px;margin:auto}.example-grid img{width:100%;height:430px;object-fit:cover;border-radius:20px;border:1px solid rgba(255,255,255,.12);transition:.35s}.example-grid img:hover{transform:translateY(-7px);box-shadow:0 25px 70px rgba(44,74,114,.25)}.experience-link{display:inline-flex;margin-top:28px;padding:14px 20px;border-radius:11px;background:#2c4a72;color:white;text-decoration:none;font-weight:800}@media(max-width:820px){.example-grid{grid-template-columns:1fr}.example-grid img{height:300px}}
.logo{font:800 21px Manrope;text-decoration:none;display:flex;gap:10px;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--p),#979fff);box-shadow:0 0 0 6px rgba(44,74,114,.14)}
.navlinks{display:flex;gap:22px;align-items:center}
.lang{border:0;background:transparent;color:#96baff;font-weight:800;cursor:pointer;padding:10px}
.navlinks a{text-decoration:none;font-size:13px;color:#c8cbd7}
.navlinks .cta{color:white}
.cta{display:inline-flex;padding:13px 19px;background:white;color:#0a0d19!important;border-radius:11px;text-decoration:none;font-weight:800}
.menu-toggle{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px;margin-right:4px}
.menu-toggle i{width:20px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.menu-toggle.open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle.open i:nth-child(2){opacity:0}
.menu-toggle.open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5vw;padding:120px 7vw 60px;background:radial-gradient(circle at 72% 30%,rgba(44,74,114,.25),transparent 35%)}
.copy small{color:#7fadff;font-weight:800;letter-spacing:.14em}
.copy h1{font:800 clamp(50px,7vw,94px)/.94 Manrope;letter-spacing:-.065em;margin-top:18px}
.copy p{color:var(--muted);font-size:18px;line-height:1.6;max-width:530px;margin:24px 0 30px}
.demo{height:min(720px,78vh);position:relative;display:grid;place-items:center;perspective:1400px}
.device{width:320px;height:640px;max-height:75vh;border:8px solid #2b2f38;border-radius:49px;background:#040509;box-shadow:0 50px 120px #000;overflow:hidden;position:relative;animation:float 4s ease-in-out infinite}
.phone-screen{position:absolute;inset:0;text-align:center;padding:55px 20px;background:radial-gradient(circle at 50% 20%,rgba(44,74,114,.35),transparent 30%)}
.island{position:absolute;top:13px;left:50%;transform:translateX(-50%);width:94px;height:25px;background:#000;border-radius:99px}
.avatar{width:72px;height:72px;border-radius:50%;margin:45px auto 13px;display:grid;place-items:center;background:linear-gradient(145deg,#4988e9,#9abeff);font:800 26px Manrope}
.wave{height:58px;margin:35px 0;display:flex;align-items:center;justify-content:center;gap:4px}
.wave i{width:3px;height:9px;background:#85b1ff;border-radius:5px;animation:wave .7s infinite alternate}
.wave i:nth-child(2n){animation-delay:-.3s}
.bubble{padding:14px;background:#12151f;border-radius:14px;text-align:left;font-size:12px;line-height:1.5}
.success{margin-top:12px;padding:12px;border-radius:12px;background:var(--p);font-size:12px;font-weight:700}
.browser{width:min(650px,48vw);height:min(650px,72vh);border-radius:25px;background:#fff;color:#10131f;overflow:hidden;box-shadow:0 50px 120px #000;animation:float 4s ease-in-out infinite}
.browserbar{height:50px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;font-size:12px}
.shophero{height:44%;margin:14px;border-radius:16px;background:linear-gradient(135deg,#141620,#5992eb);color:#fff;display:grid;place-items:center;text-align:center}
.shophero b{font:800 35px Manrope}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 14px}
.product{height:155px;border-radius:12px;background:linear-gradient(145deg,#e8ebf6,#c5cfe7);animation:shimmer 2.4s infinite alternate}
.order{position:absolute;right:0;bottom:13%;padding:15px 18px;border-radius:14px;background:var(--p);font-weight:800;animation:pop 3s infinite}
.adphone{background:radial-gradient(circle at 50% 28%,#a4b5ff,transparent 23%),linear-gradient(150deg,#0c1226,#1f3a5c 58%,#7f8df2);display:grid;place-items:center;text-align:center}
.adphone h2{font:800 38px/1 Manrope;position:relative}
.orbit{position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.45);border-radius:50%;animation:spin 7s linear infinite}
.live-phone{display:block;background:#070b15;text-align:left;color:#fff}
.live-phone .live-island{position:absolute;z-index:20;top:12px;left:50%;width:92px;height:25px;transform:translateX(-50%);border-radius:99px;background:#020307}
.live-status{position:absolute;z-index:19;top:17px;left:21px;right:18px;display:flex;justify-content:space-between;font-size:9px;font-weight:800;color:#dce6ff}
.app-screen{position:absolute;inset:0;padding:62px 22px 45px;background:linear-gradient(165deg,#0b1324,#172a49 58%,#29466f);opacity:0;transform:translateX(28px) scale(.97);animation:phoneScreen 16s infinite}
.phone-home{animation-delay:0s;text-align:center;background:radial-gradient(circle at 72% 14%,rgba(146,171,230,.7),transparent 22%),radial-gradient(circle at 22% 62%,rgba(46,77,126,.9),transparent 34%),linear-gradient(155deg,#101827,#273f67 58%,#6c7fc5)}
.shop-screen{animation-delay:4s}.calendar-screen{animation-delay:8s}.ads-screen{animation-delay:12s}
.ios-date{margin-top:9px;font-size:11px;color:rgba(255,255,255,.86)}.ios-clock{font:700 48px/1 Manrope;letter-spacing:-.06em;margin-top:2px}
.ios-widget{margin-top:29px;padding:15px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:rgba(8,16,30,.48);backdrop-filter:blur(16px);display:flex;text-align:left;justify-content:space-between;align-items:center;box-shadow:0 12px 34px rgba(0,0,0,.22)}.ios-widget div{display:grid}.ios-widget small{font-size:7px;letter-spacing:.12em;color:#b9caef}.ios-widget b{margin-top:6px;font:800 23px Manrope}.ios-widget span{font-size:8px;color:#ced7e8}.ios-widget i{padding:6px 8px;border-radius:99px;background:rgba(39,190,116,.18);color:#7aebb1;font-size:9px;font-style:normal}
.ios-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:17px 10px;margin-top:31px}.ios-app{display:grid;justify-items:center;gap:5px}.ios-app small{font-size:7px;color:#fff;text-shadow:0 2px 6px #000}.app-icon,.mini-app{display:grid;place-items:center;color:#fff;font-weight:800}.app-icon{width:47px;height:47px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.28)}.shop-icon{background:linear-gradient(145deg,#20a565,#11603e)}.calendar-icon{background:linear-gradient(#fff 25%,#f5f5f6 25%);color:#e94d51!important}.ads-icon{background:linear-gradient(145deg,#8b70ee,#5137aa)}.mail-icon{background:linear-gradient(145deg,#6cb8ff,#2671dc)}
.ios-dock{position:absolute;left:15px;right:15px;bottom:17px;height:67px;padding:10px 12px;border:1px solid rgba(255,255,255,.22);border-radius:22px;background:rgba(238,244,255,.2);backdrop-filter:blur(19px);display:flex;justify-content:space-between}.dock-icon{width:45px;height:45px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800}.phone-icon{background:#36bd68}.safari-icon{background:#eef7ff;color:#2b82df}.message-icon{background:#48c86d;font-size:10px}.music-icon{background:linear-gradient(145deg,#ff6b85,#b941d3)}
.app-head{display:flex;align-items:center;gap:12px;margin-top:10px}.app-head .mini-app{width:42px;height:42px;border-radius:12px}.app-head div{display:grid;gap:2px}.app-head b{font:700 17px Manrope}.app-head small{color:#9eacc7;font-size:9px}
.generated{margin-top:44px;color:#91b1ff;font-size:9px;font-weight:800;letter-spacing:.16em}.big-result{display:block;margin-top:9px;font:800 41px/1 Manrope;letter-spacing:-.04em}.result-label{display:block;margin-top:7px;color:#bac6dc;font-size:11px}
.mini-chart{height:122px;margin-top:32px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.045);display:flex;align-items:flex-end;gap:9px}.mini-chart i{flex:1;border-radius:6px 6px 2px 2px;transform-origin:bottom;animation:barGrow 16s infinite;background:linear-gradient(#79a1ff,#355787)}.mini-chart i:nth-child(1){height:27%}.mini-chart i:nth-child(2){height:43%}.mini-chart i:nth-child(3){height:38%}.mini-chart i:nth-child(4){height:65%}.mini-chart i:nth-child(5){height:72%}.mini-chart i:nth-child(6){height:94%}.ads-chart i{background:linear-gradient(#a48cff,#5b43a8)}
.live-card{margin-top:14px;padding:14px;border-radius:13px;background:rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;font-size:10px}.live-card b{color:#78e2ad;font-size:16px}
.appointment{margin-top:13px;padding:13px 11px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.05);display:grid;grid-template-columns:42px 1fr 18px;align-items:center;gap:7px;font-size:9px}.appointment:first-of-type{margin-top:31px}.appointment i{color:#91b1ff;font-style:normal}.appointment b{color:#72dfa6}
.phone-progress{position:absolute;z-index:30;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:5px}.phone-progress i{width:15px;height:3px;border-radius:9px;background:rgba(255,255,255,.2);animation:phoneDot 16s infinite}.phone-progress i:nth-child(2){animation-delay:4s}.phone-progress i:nth-child(3){animation-delay:8s}.phone-progress i:nth-child(4){animation-delay:12s}
.tap-cursor{position:absolute;z-index:40;width:32px;height:32px;border:2px solid rgba(255,255,255,.8);border-radius:50%;opacity:0;pointer-events:none;animation:tapApps 16s infinite}
@keyframes phoneScreen{0%,21%{opacity:1;transform:translateX(0) scale(1)}25%,96%{opacity:0;transform:translateX(-25px) scale(.97)}97%,100%{opacity:0;transform:translateX(28px) scale(.97)}}
@keyframes phoneDot{0%,21%{width:34px;background:#8eadeb}25%,100%{width:15px;background:rgba(255,255,255,.2)}}
@keyframes barGrow{0%,4%{transform:scaleY(.08)}14%,100%{transform:scaleY(1)}}
@keyframes tapApps{0%,13%,100%{opacity:0;transform:scale(1.35)}15%{opacity:1;left:33px;top:304px;transform:scale(1)}18%{opacity:0;left:33px;top:304px;transform:scale(.55)}38%{opacity:0;transform:scale(1.35)}40%{opacity:1;left:104px;top:304px;transform:scale(1)}43%{opacity:0;left:104px;top:304px;transform:scale(.55)}63%{opacity:0;transform:scale(1.35)}65%{opacity:1;left:175px;top:304px;transform:scale(1)}68%{opacity:0;left:175px;top:304px;transform:scale(.55)}}
.social{position:absolute;right:17px;bottom:25px;display:grid;gap:15px;font-size:20px}
.caption{position:absolute;left:18px;bottom:25px;text-align:left;font-size:11px}
.ticker{position:absolute;left:-10%;right:-10%;top:17%;transform:rotate(-7deg);padding:10px;background:#fff;color:#0d1220;font-weight:800;white-space:nowrap;animation:ticker 8s linear infinite}
.proof{padding:120px 7vw;background:#f1f6ff;color:#10131f;text-align:center}
.proof h2{font:800 clamp(42px,6vw,75px)/1 Manrope;letter-spacing:-.05em;max-width:900px;margin:auto}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-width:1100px;margin:50px auto 0;text-align:left}
.card{padding:28px;border-radius:20px;background:white;border:1px solid rgba(17,29,62,.09)}
.card b{font:800 25px Manrope}
.card p{color:#676a79;line-height:1.55;margin-top:10px}
.bottom{padding:120px 20px;text-align:center;background:linear-gradient(145deg,#2c4a72,#7c96ff)}
.bottom h2{font:800 clamp(43px,6vw,76px)/1 Manrope;letter-spacing:-.05em;max-width:850px;margin:auto}
.bottom .cta{margin-top:30px}
.bottom.about-photo{position:relative;isolation:isolate;min-height:clamp(540px,68vw,820px);padding:clamp(95px,12vw,170px) 20px;background:#03060c url("../media/photo-apropos-amaxia.png") center/cover no-repeat;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.bottom.about-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,5,11,.28),rgba(2,5,11,.12) 45%,rgba(2,5,11,.7))}
.bottom.about-photo h2{text-shadow:0 4px 32px rgba(0,0,0,.95)}
.bottom.about-photo .cta{box-shadow:0 14px 42px rgba(0,0,0,.42)}
.bottom.about-photo .photo-message{position:absolute;z-index:1;top:clamp(34px,5vw,70px);left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 44px));font:800 clamp(32px,3.7vw,58px)/1.02 Manrope;letter-spacing:-.045em;text-align:center;color:#fff;text-shadow:0 5px 32px rgba(0,0,0,.95)}
.bottom.about-photo .photo-message span{display:block;margin-top:14px;color:#8eadeb;font-size:.38em;line-height:1.25;letter-spacing:.025em;text-transform:uppercase}
@media(max-width:700px){.bottom.about-photo .photo-message{top:30px;font-size:clamp(28px,7vw,40px)}.bottom.about-photo .photo-message span{font-size:.48em;margin-top:10px}}
.footer{padding:32px 6vw;color:#8e909f;display:flex;justify-content:space-between}
.footer a{text-decoration:none}
@keyframes wave{to{height:38px}
}
@keyframes float{50%{transform:translateY(-10px) rotateY(3deg)}
}
@keyframes spin{to{transform:rotate(360deg)}
}
@keyframes pop{0%,30%{opacity:0;transform:translateY(20px)}
50%,90%{opacity:1;transform:none}
100%{opacity:0}
}
@keyframes shimmer{to{filter:hue-rotate(25deg);transform:translateY(-5px)}
}
@keyframes ticker{to{transform:rotate(-7deg) translateX(-30%)}
}
@media(max-width:820px){.menu-toggle{display:flex}
.navlinks{position:absolute;top:70px;left:13px;right:13px;flex-direction:column;align-items:stretch;gap:0;background:#0d1018;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:8px;box-shadow:0 25px 60px rgba(0,0,0,.4);max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:.25s}
.navlinks.nav-open{max-height:70vh;opacity:1;pointer-events:auto;padding:10px}
.navlinks a:not(.cta){display:block;padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.navlinks .lang{display:block;text-align:left;padding:14px 12px}
.navlinks .cta{margin:10px 12px 4px}
.hero{grid-template-columns:1fr;padding:120px 22px 50px;text-align:center}
.copy p{margin-left:auto;margin-right:auto}
.demo{height:58vh}
.device{width:225px;height:455px;border-radius:37px}
.browser{width:92vw;height:48vh}
.product{height:80px}
.grid{grid-template-columns:1fr}
.footer{flex-direction:column;gap:14px}
}


