:root{--bg:#F7F8FB;--surface:#FFFFFF;--surface2:#F2F3F5;--line:#E5E5E5;--text:#000000;--meta:#1A2A56;--minor:#737373;--accent:#5E4A9E;--on-accent:#FFFFFF;--soft:#EEEBF7;--elev:0 1px 2px rgba(26,42,86,.08),0 3px 10px rgba(26,42,86,.08),0 0 0 1px rgba(26,42,86,.06);--elev-btn:0 2px 4px rgba(26,42,86,.22),0 6px 14px rgba(26,42,86,.28);--ink:#04070E;--ink2:#0B111E;--ink-line:#243049;--cream:#F6F2EA;--cream-dim:#B7C6E8;--r:20px;--wrap:1200px;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#04070E;--surface:#0B111E;--surface2:#121A2A;--line:#243049;--text:#F6F2EA;--meta:#B7C6E8;--minor:#8C99AE;--accent:#9251AE;--on-accent:#FFFFFF;--soft:#271F42;--elev:0 0 0 1px #243049;--elev-btn:none}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/22px Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:hidden}
a{color:inherit;text-underline-offset:3px}
img{max-width:100%}
h1,h2,h3{letter-spacing:-.02em;margin:0}
.preview{background:var(--soft);font-size:13px;line-height:18px;font-weight:500;text-align:center;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;line-height:24px;text-decoration:none}
.logo{width:32px;height:32px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:600;flex:none}
.logo-img{display:block;height:32px;width:auto}
.logo-icon{display:block;width:32px;height:32px;border-radius:10px;object-fit:cover}
.logo-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:10px;background:#FFFFFF}.logo-pill .logo-img{height:24px}
.brand-icon{display:block;margin:0 auto 12px;width:56px;height:56px;border-radius:16px;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.7),0 6px 18px rgba(4,7,14,.25)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:999px;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .2s ease,opacity .2s ease}
.btn:active{transform:scale(.98)}
.btn.sm{height:36px;padding:0 14px}
.btn.primary,.btn.accent{background:var(--accent);color:var(--on-accent);box-shadow:var(--elev-btn)}
.hero .btn.primary,.cta .btn.primary,.nav.over .btn.primary{background:#9251AE;color:#FFFFFF;box-shadow:none}
.btn.ghost{color:var(--cream);background:rgba(246,242,234,.08);box-shadow:inset 0 0 0 1px rgba(246,242,234,.22)}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(16px,calc((100% - var(--wrap))/2 + 16px));background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav.over{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--cream);padding-top:22px}
.preview+.nav.over{top:38px}
.links{display:none;gap:28px;font-size:14px}.links a{text-decoration:none;opacity:.86}.links a:hover{opacity:1}
main{display:block}
.hero{position:relative;margin:8px;min-height:min(92svh,860px);border-radius:28px;overflow:hidden;background:radial-gradient(120% 90% at 70% 20%,#1A2A56 0%,#0B111E 55%,#04070E 100%);color:var(--cream);display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:drift 24s ease-in-out infinite alternate}
.hero-video{animation:none}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,14,.55) 0%,rgba(4,7,14,.1) 35%,rgba(4,7,14,.55) 65%,rgba(4,7,14,.92) 100%)}
.hero-in{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:120px 24px 48px;animation:rise .9s ease both}
.pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:4px 14px 4px 4px;border-radius:999px;background:rgba(246,242,234,.1);box-shadow:inset 0 0 0 1px rgba(246,242,234,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13px;line-height:18px}
.new{padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:12px}
.hero h1{font-size:40px;line-height:44px;font-weight:600;max-width:15ch;margin-bottom:16px}
.lead{max-width:52ch;font-size:16px;line-height:24px;color:rgba(246,242,234,.82);margin:0 0 24px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
section{scroll-margin-top:80px}
.steps,.models,.screens,.gallery,.bento,.workspace,.about{max-width:var(--wrap);margin:0 auto;padding:72px 16px 0}
.head{margin-bottom:28px}.head p{color:var(--minor);margin:8px 0 0;font-size:16px;line-height:24px}
.head.split{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
h2{font-size:30px;line-height:36px;font-weight:600}
h2 span,.dim{color:var(--minor)}
.grid3{display:grid;gap:12px;grid-template-columns:1fr}
.step{background:var(--surface);border-radius:var(--r);padding:14px 14px 22px;box-shadow:var(--elev)}
.step h3{font-size:20px;line-height:26px;font-weight:600;margin:6px 6px 14px;display:flex;gap:8px;align-items:baseline}
.step>p{margin:16px 0 0;padding:0 6px;color:var(--minor)}
.step .num{color:var(--minor);font-weight:500;font-variant-numeric:tabular-nums}
.mock{height:180px;border-radius:14px;background:var(--surface2);padding:16px;display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:hidden}
.compose{background:var(--surface);border-radius:14px;padding:12px 14px;box-shadow:var(--elev);font-size:14px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.typed{display:inline-block;overflow:hidden;max-width:0;animation:type 3.2s steps(31,end) .4s forwards}
.caret{width:2px;height:18px;background:var(--accent);margin-left:2px;animation:blink 1s step-end infinite}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;line-height:16px;padding:5px 10px;border-radius:999px;background:var(--surface);box-shadow:var(--elev)}
.chip.on{background:var(--accent);color:var(--on-accent);box-shadow:none}
.status{margin:0;font-size:13px;color:var(--meta)}
.bar{height:6px;border-radius:999px;background:var(--surface);overflow:hidden}.bar span{display:block;height:100%;width:30%;background:var(--accent);border-radius:999px;animation:load 3s ease-in-out infinite}
.rows{display:grid;gap:8px}.rows span{height:10px;border-radius:6px;background:var(--surface);animation:pulse 1.8s ease-in-out infinite}.rows span:nth-child(2){width:80%;animation-delay:.2s}.rows span:nth-child(3){width:60%;animation-delay:.4s}
.file{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:12px;padding:10px 12px;box-shadow:var(--elev);font-size:13px}
.doc{width:24px;height:30px;border-radius:5px;background:var(--accent);opacity:.85}
.label{margin:0;font-size:12px;color:var(--minor)}
.models h2{font-size:30px;line-height:38px}
.rotate{display:inline-grid;height:38px;overflow:hidden;vertical-align:bottom;color:var(--accent)}
.rotate span{grid-area:1/1;color:var(--accent);animation:words calc(var(--n)*2.4s) infinite;opacity:0}
.rotate span:nth-child(1){animation-delay:0.0s}.rotate span:nth-child(2){animation-delay:2.4s}.rotate span:nth-child(3){animation-delay:4.8s}.rotate span:nth-child(4){animation-delay:7.2s}.rotate span:nth-child(5){animation-delay:9.6s}
.marquee{margin-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{display:flex;gap:12px;width:max-content;animation:marquee 40s linear infinite}
.cap{padding:10px 18px;border-radius:999px;background:var(--surface);box-shadow:var(--elev);font-weight:500;white-space:nowrap}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.shot{position:relative;margin:0;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;background:var(--surface2)}
.shot-img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.shot:hover .shot-img{transform:scale(1.04)}
.shot .tag{position:absolute;top:14px;left:14px;padding:4px 10px;border-radius:999px;background:rgba(4,7,14,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--cream);font-size:12px;line-height:16px}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 16px;background:linear-gradient(180deg,transparent,rgba(4,7,14,.85));color:var(--cream);font-size:15px;line-height:21px}
.shot figcaption span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:4px}
.tiles{display:grid;gap:12px;grid-template-columns:1fr}
.tile{position:relative;min-height:220px;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--elev);display:flex;align-items:flex-end}
.tile.pic{color:var(--cream);background:var(--ink2)}
.tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.tile:hover .tile-img{transform:scale(1.04)}
.tile.pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,14,0) 25%,rgba(4,7,14,.88))}
.tile.pic .tile-in{text-shadow:0 1px 14px rgba(4,7,14,.55)}
.tile-in{position:relative;z-index:1;padding:20px}
.tile h3{font-size:24px;line-height:30px;font-weight:600;margin-bottom:6px}
.tile p{margin:0;max-width:40ch;opacity:.86}
.brand-tile{background:var(--accent);color:var(--on-accent);align-items:center;justify-content:center;text-align:center}
.brand-tile .logo{margin:0 auto 12px;width:48px;height:48px;border-radius:14px;background:var(--on-accent);color:var(--accent);font-size:22px}
.brand-tile .logo-img{margin:0 auto 12px;height:48px}
.stage{position:relative;border-radius:28px;overflow:hidden;padding:40px 16px 0;background:radial-gradient(120% 120% at 50% 0%,#1A2A56,#04070E);min-height:360px}
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(1.1)}
.window{position:relative;max-width:880px;margin:0 auto;border-radius:16px 16px 0 0;background:#0B111E;box-shadow:0 0 0 1px #243049,0 30px 80px rgba(4,7,14,.6);color:var(--cream);overflow:hidden}
.bar3{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #243049}.bar3 i{width:10px;height:10px;border-radius:50%;background:#243049}
.app{display:flex;min-height:300px}
.bar3 .addr{margin:0 auto;padding:3px 14px;border-radius:999px;background:#121A2A;color:#B7C6E8;font-size:12px;line-height:16px;transform:translateX(-18px)}
.window.real{background:#FFFFFF;box-shadow:0 0 0 1px rgba(26,42,86,.12),0 30px 80px rgba(4,7,14,.6)}
.window.real .bar3{background:#F2F3F5;border-bottom:1px solid #E5E5E5}.window.real .bar3 i{background:#C9CED8}.window.real .addr{background:#FFFFFF;color:#1A2A56;box-shadow:0 0 0 1px #E5E5E5}.desk-img{display:block;width:100%;height:auto}
.phones{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.phone{margin:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:16px}
.phone-img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(4,7,14,.28))}
.phone h3{font-size:17px;line-height:24px;font-weight:600;margin-bottom:4px}.phone p{margin:0;color:var(--minor)}
.app aside{display:none;flex-direction:column;gap:4px;width:180px;padding:14px;border-right:1px solid #243049;font-size:13px}
.app aside .logo,.app aside picture{margin-bottom:10px}
.app aside span{padding:8px 10px;border-radius:12px;color:#B7C6E8}.app aside span.on{background:#121A2A;color:#F6F2EA}
.pane{flex:1;padding:22px;display:flex;flex-direction:column;gap:12px}
.hello{margin:0;font-size:20px;font-weight:600}
.bubble{align-self:flex-end;background:#121A2A;border-radius:16px;padding:10px 14px;font-size:14px}
.reply{display:grid;gap:8px}.reply span{height:10px;border-radius:6px;background:#121A2A}.reply span.short{width:55%}
.agree{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#B7C6E8}.agree .dot{width:8px;height:8px;border-radius:50%;background:#9251AE}
.composer{margin-top:auto;border-radius:20px;box-shadow:inset 0 0 0 1px #243049;padding:12px 16px;font-size:14px;color:#8C99AE}
.points{margin-top:28px}.points h3{font-size:17px;line-height:24px;font-weight:600;margin-bottom:6px}.points p{margin:0;color:var(--minor)}
.about h2{margin-bottom:16px}
.about-in{max-width:760px}.about-in p{font-size:17px;line-height:27px;margin:0 0 14px}
.about .by{color:var(--minor);font-size:15px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.badge{height:44px;padding:0 16px;border-radius:12px;background:#000;color:#fff;font-size:13px;display:inline-flex;align-items:center;text-decoration:none}
.note{margin:18px 0 0;font-size:13px!important;line-height:18px!important;padding:14px 16px;border-radius:16px;background:var(--surface2)}
.cta{position:relative;margin:72px 8px 0;border-radius:28px;overflow:hidden;background:radial-gradient(120% 120% at 30% 0%,#1A2A56,#04070E);color:var(--cream);text-align:center}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta:after{content:"";position:absolute;inset:0;background:rgba(4,7,14,.55)}
.cta-in{position:relative;z-index:1;padding:96px 24px}
.cta h2{font-size:32px;line-height:38px;margin-bottom:10px}.cta p{margin:0 0 24px;color:rgba(246,242,234,.82)}
.hold{min-height:calc(100svh - 16px)}
.foot2{max-width:var(--wrap);margin:0 auto;padding:56px 16px 28px;font-size:14px}
.foot-in{display:grid;gap:28px;grid-template-columns:1fr 1fr;padding-bottom:28px;border-bottom:1px solid var(--line)}
.foot-brand{grid-column:1/-1}.foot-brand p{color:var(--minor);margin:10px 0 0;max-width:36ch}
.col{display:flex;flex-direction:column;gap:10px}.col h4{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--meta)}.col a{text-decoration:none;color:var(--minor)}.col a:hover{color:var(--text)}
.company{margin:20px 0 0;font-size:13px;line-height:20px;color:var(--text)}.company a{color:inherit;text-underline-offset:2px}.company+.legalline{margin-top:10px}
.legalline{margin:20px 0 0;font-size:12px;line-height:16px;color:var(--minor)}
.inner main{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.legal{max-width:760px;padding:40px 0 8px}
.crumb{font-size:12px;line-height:16px;color:var(--meta);margin:0 0 6px;text-transform:uppercase;letter-spacing:.06em}
.legal h1{font-size:32px;line-height:38px;font-weight:600;margin:0 0 6px}
.updated{font-size:13px;line-height:18px;color:var(--minor);margin:0 0 24px}
.legal h2{font-size:19px;line-height:26px;font-weight:600;margin:28px 0 8px}
.legal p,.legal li{line-height:25px;margin:0 0 8px}
.legal ul,.legal ol{padding-left:20px;margin:0 0 8px}
.card{background:var(--surface);border-radius:16px;padding:16px;box-shadow:var(--elev)}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;margin:0 0 12px}
.kv dt{color:var(--meta);font-size:13px;line-height:22px}.kv dd{margin:0}
.form p{font-size:13px;line-height:18px}
.num{font-variant-numeric:tabular-nums}
.empty{padding:96px 0;text-align:center}.empty h1{font-size:32px;line-height:38px;font-weight:600;margin:0 0 8px}.empty p{margin:0 0 24px;color:var(--minor)}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes type{to{max-width:100%}}
@keyframes blink{50%{opacity:0}}
@keyframes load{0%{width:8%}60%{width:86%}100%{width:100%}}
@keyframes pulse{50%{opacity:.5}}
@keyframes marquee{to{transform:translateX(calc(-50% - 6px))}}
@keyframes words{0%{opacity:0;transform:translateY(60%)}4%,16%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-60%)}}
@media (min-width:640px){.rail{grid-auto-columns:44%}.phones{grid-auto-columns:40%}.foot-in{grid-template-columns:2fr 1fr 1fr 1fr}.foot-brand{grid-column:auto}}
@media (min-width:900px){.links{display:flex}.hero-in{padding:160px 40px 72px}.hero h1{font-size:72px;line-height:74px}.lead{font-size:18px;line-height:28px}h2,.models h2{font-size:48px;line-height:54px}.rotate{height:54px}.grid3{grid-template-columns:repeat(3,1fr)}.rail{grid-auto-columns:calc((100% - 24px)/3)}.tiles{grid-template-columns:repeat(3,1fr)}.tile{min-height:300px}.tile.span-2{grid-column:span 2}.tile.span-3{grid-column:span 3}.app aside{display:flex}.stage{padding:64px 48px 0}.cta h2{font-size:56px;line-height:62px}.cta-in{padding:140px 24px}.steps,.models,.screens,.gallery,.bento,.workspace,.about{padding-top:120px}.phones{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}.window.real{max-width:1040px}.cta{margin-top:120px}}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}*,*:before,*:after{animation:none!important;transition:none!important}.typed{max-width:none}.rotate span{opacity:0}.rotate span:first-child{opacity:1}}
