:root{
 --ink:#0b0e24;--navy:#16193A;--royal:#2B3990;--panel:#121637;--line:#262c5e;
 --teal:#2EE6C5;--teal2:#1FCFB0;--mint:#7DFFE6;--cyan:#9FE8FF;--text:#e9ecff;--muted:#a3abd6;
 --r:18px;--max:1160px;--mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.6 Sora,system-ui,sans-serif;overflow-x:hidden;
 background-image:radial-gradient(1200px 600px at 80% -10%,#2b399055,transparent),radial-gradient(800px 500px at -10% 30%,#2ee6c512,transparent)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;color:#000;padding:8px 12px}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(40px,6.4vw,76px);font-weight:800}
h2{font-size:clamp(30px,4vw,48px);font-weight:800}
h3{font-size:clamp(22px,2.4vw,30px)}
.glow{background:linear-gradient(90deg,var(--mint),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:10px;margin:0 0 16px}
.eyebrow i{width:28px;height:2px;background:var(--teal);display:inline-block}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:700;text-decoration:none;color:#04342c;
 background:linear-gradient(90deg,var(--mint),var(--teal));box-shadow:0 8px 30px #2ee6c533;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px #2ee6c555}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--teal);box-shadow:none}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-big{font-size:clamp(16px,2.4vw,22px);padding:18px 30px}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;justify-content:space-between;padding:14px max(16px,calc((100vw - var(--max))/2));
 background:#0b0e24cc;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff0d}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:800;font-size:18px}
.brand b{font-weight:400;color:var(--muted);margin-left:5px}
.nav nav{display:flex;gap:22px}
.nav nav a{color:var(--muted);text-decoration:none;font-size:14px}.nav nav a:hover{color:var(--text)}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:72px 16px 56px;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:540px;margin:22px 0 28px}
.lede b{color:var(--text)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:28px 0 0}
.chips li{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.chips b{color:var(--mint)}

/* hero visual: a site assembling itself */
.build{position:relative;aspect-ratio:1/0.82}
.browser{position:absolute;inset:0 10% 8% 0;border-radius:16px;background:#f4f6ff;overflow:hidden;box-shadow:0 30px 80px #0008,0 0 0 1px #ffffff14;transform:perspective(1400px) rotateY(-8deg) rotateX(3deg)}
.bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#e3e7f7}
.bar i{width:9px;height:9px;border-radius:50%;background:#c3c9e4}.bar i:first-child{background:#ff7a7a}.bar i:nth-child(2){background:#ffc65c}.bar i:nth-child(3){background:#5fd68a}
.url{margin-left:10px;font:12px var(--mono);color:#5a6390;background:#fff;border-radius:6px;padding:3px 10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.url em{font-style:normal;color:var(--royal);font-weight:600}
.page{padding:14px;display:grid;gap:12px}
.page span{display:block;border-radius:6px;background:#d9def3}
.b-nav{display:flex;gap:8px;align-items:center}.b-nav span{height:8px;width:12%}.b-nav .b-logo{width:18%;height:14px;background:var(--royal)}.b-nav .b-btn{margin-left:auto;width:16%;height:16px;background:var(--teal)}
.b-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;align-items:center}
.b-text{display:grid;gap:8px}.b-text span{height:14px}.w90{width:90%}.w70{width:70%}.w50{width:50%}.w80{width:80%}.w60{width:60%}.thin{height:8px!important}
.b-cta{width:40%;height:20px!important;background:var(--royal)!important;margin-top:4px}
.b-img{border-radius:10px;overflow:hidden;background:#cfd6f3;aspect-ratio:3/2}.b-img svg{width:100%;height:100%}
.b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.b-cards span{height:54px;background:#e6e9f8;border:1px solid #d5daf0}
.b-map{display:flex;align-items:center;gap:8px;font:600 11px var(--mono);color:#3a4383;background:#e6f9f4;border-radius:8px;padding:8px 10px}
.pin{width:12px;height:12px;border-radius:50% 50% 50% 0;background:#e84a5f;transform:rotate(-45deg)}
.scan{position:absolute;left:0;right:0;top:0;height:60px;background:linear-gradient(180deg,transparent,#2ee6c533,transparent);pointer-events:none}
.phone{position:absolute;right:0;bottom:0;width:30%;aspect-ratio:9/18.5;border-radius:22px;background:#0f1330;padding:7px;box-shadow:0 24px 60px #000a,0 0 0 1px #ffffff1f}
.p-screen{height:100%;border-radius:16px;background:#f4f6ff;padding:12px 9px;display:grid;align-content:start;gap:8px}
.p-screen span{display:block;height:9px;border-radius:5px;background:#d9def3}
.p-logo{width:40%;height:12px!important;background:var(--royal)!important}
.p-img{height:70px!important;background:linear-gradient(135deg,#cfd6f3,#b9c4f0)!important;border-radius:9px!important}
.p-btn{width:60%;height:18px!important;background:var(--teal)!important;border-radius:9px!important}
.badge{position:absolute;font:600 12px var(--mono);background:#121637ee;border:1px solid var(--line);color:var(--mint);padding:8px 12px;border-radius:10px;box-shadow:0 10px 30px #0006}
.b1{left:-4%;top:14%}.b2{left:6%;bottom:2%}.b3{right:2%;top:2%}

/* animation: pieces land one by one, then the badges pop */
@media (prefers-reduced-motion:no-preference){
 .page>*{opacity:0;transform:translateY(14px);animation:land .6s cubic-bezier(.2,.8,.2,1) forwards}
 .page>:nth-child(1){animation-delay:.3s}.page>:nth-child(2){animation-delay:.7s}.page>:nth-child(3){animation-delay:1.1s}.page>:nth-child(4){animation-delay:1.5s}
 .p-screen>*{opacity:0;animation:land .5s ease forwards}
 .p-screen>:nth-child(1){animation-delay:1.7s}.p-screen>:nth-child(2){animation-delay:1.85s}.p-screen>:nth-child(3){animation-delay:2s}.p-screen>:nth-child(4){animation-delay:2.15s}.p-screen>:nth-child(5){animation-delay:2.3s}
 .phone{animation:rise 1s 1.4s cubic-bezier(.2,.8,.2,1) both}
 .scan{animation:scan 3.2s 2.6s ease-in-out infinite}
 .badge{opacity:0;animation:pop .5s cubic-bezier(.3,1.6,.5,1) forwards,float 5s ease-in-out infinite}
 .b1{animation-delay:2.4s,3s}.b2{animation-delay:2.7s,3.4s}.b3{animation-delay:3s,3.8s}
 .b-nav .b-btn,.b-cta{animation:land .6s forwards,pulse 2.4s 3s ease-in-out infinite}
}
@keyframes land{to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes float{50%{translate:0 -6px}}
@keyframes scan{0%{transform:translateY(-60px)}60%,100%{transform:translateY(520px)}}
@keyframes pulse{50%{box-shadow:0 0 0 6px #2ee6c533}}

/* strip */
.strip{max-width:var(--max);margin:0 auto;padding:0 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip div{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:linear-gradient(180deg,#151a42,#0f1333);display:grid;gap:2px}
.strip .n{font:600 11px var(--mono);color:var(--teal)}
.strip small{color:var(--muted)}

/* sections */
.section{max-width:var(--max);margin:0 auto;padding:96px 16px 0}
.head{margin-bottom:36px;max-width:720px}.head p{color:var(--muted);margin:12px 0 0}
.head.small{margin:64px 0 24px}

/* case study */
.case{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;border:1px solid var(--line);border-radius:28px;padding:32px;
 background:linear-gradient(135deg,#151a42,#0d1030)}
.devices{position:relative;padding-bottom:6%}
.d-desk{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 30px 70px #0009;border:1px solid #ffffff14}
.d-desk .bar{background:#1e2233}.d-desk .url{background:#11131d;color:#9aa3c7}
.d-phone{position:absolute;right:-3%;bottom:-2%;width:23%;aspect-ratio:9/17;margin:0;border-radius:18px;overflow:hidden;border:5px solid #0f1330;box-shadow:0 20px 50px #000b;background:#111}
.d-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.tag{font:600 12px var(--mono);color:var(--teal);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.ticks{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:10px}
.ticks li{padding-left:28px;position:relative;color:var(--muted)}
.ticks li::before{content:'✓';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#2ee6c522;color:var(--mint);font-size:12px;display:grid;place-items:center}

/* example styles */
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.style{margin:0}.style figcaption{font-size:13px;color:var(--muted);margin-top:10px;text-align:center}
.mini{border-radius:14px;overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;box-shadow:0 16px 40px #0007;transition:transform .3s}
.style:hover .mini{transform:translateY(-6px) rotate(-1deg)}
.m-nav{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:11px}.m-nav b{font-size:12px}
.m-hero{flex:1;padding:16px 12px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.m-hero h4{font-size:clamp(17px,1.7vw,22px)}
.m-btn{align-self:flex-start;font-size:11px;font-weight:700;padding:7px 12px;border-radius:999px}
.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px 14px}.m-row span{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-size:20px}
.s-cafe .mini{background:#f6efe6;color:#3d2a1f}.s-cafe .m-btn{background:#7a4b2a;color:#fff}.s-cafe .m-row span{background:#ead9c5}
.s-trade .mini{background:#1c2430;color:#f2f4f7}.s-trade .m-btn{background:#f5a524;color:#1c2430}.s-trade .m-row span{background:#2a3546}
.s-salon .mini{background:#fbeff3;color:#5a2a3d}.s-salon .m-btn{background:#c25b80;color:#fff}.s-salon .m-row span{background:#f4d6e1}
.s-shop .mini{background:#e8f3f2;color:#123c3a}.s-shop .m-btn{background:#1f7a74;color:#fff}.s-shop .m-row span{background:#cfe6e3}
.note{font-size:12px;color:#6f78a8;margin-top:14px}

/* how: steps on a conveyor */
.line{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.line li{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#11153a;display:grid;gap:8px}
.line .st{font:600 12px var(--mono);color:var(--teal)}
.line .ic{font-size:30px}
.line small{color:var(--muted)}
.line li:not(:last-child)::after{content:'';position:absolute;right:-13px;top:50%;width:10px;height:10px;border-top:2px solid var(--teal);border-right:2px solid var(--teal);transform:translateY(-50%) rotate(45deg);z-index:2}
.belt{position:relative;height:46px;margin-top:22px;overflow:hidden}
.track{position:absolute;left:0;right:0;bottom:6px;height:14px;border-radius:999px;background:repeating-linear-gradient(90deg,#2a3170 0 18px,#1b2050 18px 36px)}
.pkg{position:absolute;bottom:20px;left:-40px;width:30px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:13px;color:#04342c;background:linear-gradient(180deg,var(--mint),var(--teal));box-shadow:0 3px 0 #0007}
@media (prefers-reduced-motion:no-preference){
 .track{animation:belt 1s linear infinite}
 .pkg{animation:ride 9s linear infinite}.p2{animation-delay:3s}.p3{animation-delay:6s}
}
@keyframes belt{to{background-position:36px 0}}
@keyframes ride{to{left:calc(100% + 40px)}}

/* included */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:#11153a;display:grid;gap:6px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--teal);transform:translateY(-3px)}
.ci{font-size:26px}.card small{color:var(--muted)}

/* price */
.prices{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;max-width:900px}
.price{border:1px solid var(--line);border-radius:24px;padding:30px;background:#11153a}
.price.main{background:linear-gradient(160deg,#1c2366,#11153a 60%);border-color:#2ee6c566;box-shadow:0 20px 60px #2ee6c51a}
.amount{margin:6px 0 0;display:flex;align-items:baseline;gap:10px}.amount b{font-size:54px;font-weight:800}.amount small{color:var(--muted)}

/* together */
.together{max-width:var(--max);margin:96px auto 0;padding:48px 16px;display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center}
.together p:not(.eyebrow){color:var(--muted);font-size:18px;max-width:620px}
.orbit{position:relative;width:260px;aspect-ratio:1;margin:auto}
.core{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle,var(--mint),var(--teal2));box-shadow:0 0 50px #2ee6c588}
.ring{position:absolute;border-radius:50%;border:1px dashed #2ee6c555}.r1{inset:18%}.r2{inset:0}
.dot{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--mono);
 background:#16193A;border:1px solid var(--teal);color:var(--mint)}
.d1{transform:rotate(0deg) translateX(130px) rotate(0deg)}.d2{transform:rotate(180deg) translateX(130px) rotate(-180deg)}
@media (prefers-reduced-motion:no-preference){.d1,.d2{animation:orbit 12s linear infinite}.d2{animation-delay:-6s}}
@keyframes orbit{from{transform:rotate(0deg) translateX(130px) rotate(0deg)}to{transform:rotate(360deg) translateX(130px) rotate(-360deg)}}

/* faq */
.faq{display:grid;gap:10px;max-width:820px}
details{border:1px solid var(--line);border-radius:14px;background:#11153a;padding:0 20px}
summary{cursor:pointer;padding:18px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:'+';color:var(--teal);font-size:22px;line-height:1}
details[open] summary::after{content:'–'}
details p{color:var(--muted);margin:0 0 18px}

/* contact */
.contact{max-width:900px;margin:110px auto 0;padding:56px 16px;text-align:center;border-radius:32px;
 background:radial-gradient(600px 260px at 50% 0,#2ee6c522,transparent),linear-gradient(180deg,#151a42,#0d1030);border:1px solid var(--line)}
.contact p{color:var(--muted);font-size:18px;margin:16px auto 28px;max-width:560px}
.contact small{display:block;color:#7a83b5;margin-top:16px}

/* footer */
.foot{max-width:var(--max);margin:80px auto 0;padding:32px 16px 48px;border-top:1px solid #ffffff12;display:grid;gap:8px;color:#7a83b5;font-size:14px}
.foot p{margin:0}.foot .brand{font-size:16px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* responsive */
@media (max-width:980px){
 .hero{grid-template-columns:1fr;padding-top:44px}
 .build{max-width:560px;width:100%;margin:8px auto 0}
 .strip,.grid{grid-template-columns:repeat(2,1fr)}
 .styles{grid-template-columns:repeat(2,1fr)}
 .case{grid-template-columns:1fr;padding:22px}
 .line{grid-template-columns:repeat(2,1fr)}.line li:nth-child(2)::after{display:none}
 .prices{grid-template-columns:1fr}
 .together{grid-template-columns:1fr;text-align:center}.together .eyebrow{justify-content:center}.together p:not(.eyebrow){margin:auto}
}
@media (max-width:720px){
 .nav nav{display:none}
 .section{padding-top:72px}
 .line{grid-template-columns:1fr}.line li::after{display:none}
 .badge{font-size:10px;padding:6px 9px}
 .orbit{width:200px}.d1,.d2{--o:100px}
 .d1{transform:rotate(0deg) translateX(100px) rotate(0deg)}.d2{transform:rotate(180deg) translateX(100px) rotate(-180deg)}
}
@media (max-width:720px) and (prefers-reduced-motion:no-preference){.d1,.d2{animation-name:orbit-sm}}
@keyframes orbit-sm{from{transform:rotate(0deg) translateX(100px) rotate(0deg)}to{transform:rotate(360deg) translateX(100px) rotate(-360deg)}}
@media (max-width:420px){.strip,.grid{grid-template-columns:1fr}.amount b{font-size:44px}}
.amount.soft b{font-size:clamp(28px,3.4vw,38px);white-space:nowrap}
.btn{white-space:nowrap}@media (max-width:420px){.nav .brand b{display:none}.nav{gap:12px}}
@media (max-width:720px){.b1{left:1%}.b3{right:1%}}