:root{
  --bg:#05060f; --bg2:#0b0d1c; --ink:#eef0ff; --mute:#9aa0c3;
  --a:#7c5cff; --b:#00d4ff; --c:#ff4ecd;
  --grad:linear-gradient(120deg,var(--a),var(--b) 55%,var(--c));
  --glass:rgba(255,255,255,.05); --line:rgba(255,255,255,.1);
  --r:22px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
::selection{background:var(--a);color:#fff}
.wrap{width:min(1180px,92%);margin:0 auto;position:relative;z-index:2}
.section{padding:130px 0;position:relative;overflow:hidden}
.center{text-align:center}
.muted{color:var(--mute)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gshift 6s linear infinite}
@keyframes gshift{to{background-position:200% 0}}
h1,h2,h3,h4,.btn,.eyebrow{font-family:"Space Grotesk",Inter,sans-serif}
.h2{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:22px}
.eyebrow{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--b);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--b)}
.eyebrow.center{justify-content:center}
.lead{font-size:1.1rem;color:#cfd3f0;margin-bottom:26px}
.section-head{max-width:700px;margin:0 auto 70px}

/* noise + progress + cursor */
.noise{display:none;position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad);z-index:200;box-shadow:0 0 12px var(--b)}
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:300;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.55);margin:-19px 0 0 -19px;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s}
.cursor-dot{width:6px;height:6px;background:var(--b);margin:-3px 0 0 -3px}
.cursor.big{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(124,92,255,.18);border-color:var(--a)}
body.has-cursor .cursor,body.has-cursor .cursor-dot{opacity:1}
@media (hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}}

/* loader */
#loader{position:fixed;inset:0;background:var(--bg);z-index:500;display:grid;place-items:center;transition:transform 1s var(--ease)}
#loader.done{transform:translateY(-100%)}
.loader-inner{text-align:center;width:min(300px,70%)}
.loader-logo{width:190px;margin:0 auto 28px;animation:pulse 1.6s ease-in-out infinite}
.loader-bar{height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.loader-bar span{display:block;height:100%;width:0;background:var(--grad)}
.loader-count{margin-top:14px;font-family:"Space Grotesk";color:var(--mute);font-size:.9rem}
@keyframes pulse{50%{opacity:.5;transform:scale(.97)}}

/* header */
#header{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;padding:18px max(4%,calc((100% - 1180px)/2));transition:.4s var(--ease)}
#header.scrolled{background:rgba(5,6,15,.72);backdrop-filter:blur(16px);padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#header.hide{transform:translateY(-100%)}
.logo img{height:60px;width:auto;transition:height .4s var(--ease);filter:drop-shadow(0 0 18px rgba(255,200,60,.18))}
#header.scrolled .logo img{height:48px}
#nav{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:100px;background:var(--glass)}
#nav a{padding:8px 18px;border-radius:100px;font-size:.92rem;color:var(--mute);transition:.3s}
#nav a:hover{color:#fff}
#nav a.active{background:rgba(255,255,255,.1);color:#fff}
#burger{display:none;background:none;border:0;width:40px;height:40px;position:relative}
#burger i{position:absolute;left:8px;right:8px;height:2px;background:#fff;transition:.3s}
#burger i:first-child{top:15px}#burger i:last-child{top:23px}
#burger.open i:first-child{transform:translateY(4px) rotate(45deg)}
#burger.open i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 30px;border-radius:100px;font-weight:600;font-size:.95rem;border:0;color:#fff;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease),box-shadow .3s}
.btn span,.btn i{position:relative;z-index:2}
.btn .arr{font-style:normal;transition:transform .3s}
.btn:hover .arr{transform:translateX(6px)}
.btn-glow{background:var(--grad);background-size:200% 100%;box-shadow:0 8px 30px rgba(124,92,255,.45)}
.btn-glow:hover{background-position:100% 0;box-shadow:0 10px 44px rgba(0,212,255,.55)}
.btn-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s;z-index:1}
.btn-glow:hover::after{transform:translateX(120%)}
.btn-ghost{background:var(--glass);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--b);background:rgba(0,212,255,.08)}

/* hero */
#hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:140px 0 90px}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.orb{position:absolute;border-radius:50%;opacity:.55;z-index:0;animation:drift 14s ease-in-out infinite alternate;will-change:transform;pointer-events:none}
.orb1{width:520px;height:520px;background:radial-gradient(circle,var(--a) 0,transparent 68%);top:-120px;left:-120px}
.orb2{width:460px;height:460px;background:radial-gradient(circle,var(--b) 0,transparent 68%);bottom:-100px;right:-80px;animation-delay:-5s;opacity:.4}
.orb3{width:340px;height:340px;background:radial-gradient(circle,var(--c) 0,transparent 68%);top:35%;left:48%;animation-delay:-9s;opacity:.28}
.orb4{width:600px;height:600px;background:radial-gradient(circle,var(--a) 0,transparent 68%);top:50%;left:50%;margin:-300px;opacity:.25}
.orb5{width:480px;height:480px;background:radial-gradient(circle,var(--b) 0,transparent 68%);bottom:-160px;left:-140px;opacity:.22}
@keyframes drift{to{transform:translate(90px,60px) scale(1.18)}}
.grid-floor{position:absolute;left:-50%;right:-50%;bottom:0;height:55%;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:70px 70px;transform:perspective(500px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(to top,#000,transparent 85%);-webkit-mask-image:linear-gradient(to top,#000,transparent 85%);animation:gridmove 4s linear infinite}
@keyframes gridmove{to{background-position:0 70px}}
.hero-inner{position:relative;z-index:3;width:min(1180px,92%);min-width:0;margin:0 auto}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border:1px solid var(--line);border-radius:100px;background:var(--glass);font-size:.85rem;color:#cfd3f0;margin-bottom:30px}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#2dff9b;box-shadow:0 0 0 0 #2dff9b;animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-title{font-size:clamp(2.2rem,8vw,6.4rem);line-height:1.02;letter-spacing:-.04em;font-weight:700;margin-bottom:28px;max-width:950px}
.line{display:block;overflow:hidden;padding-bottom:.12em}
.split{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.split .w{display:inline-block;transform:translateY(0)}
.ready .split{transform:none}
.line:nth-child(2) .split{transition-delay:.15s}
.line:nth-child(3) .split{transition-delay:.3s}
.rotator{font-style:normal;display:inline-block;white-space:nowrap}
.rot-word{display:inline-block;background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gshift 5s linear infinite;transition:transform .6s var(--ease),opacity .6s}
.rot-word.out{transform:translateY(-100%);opacity:0}
.rot-word.in{transform:translateY(100%);opacity:0;transition:none}
.hero-sub{font-size:1.2rem;color:#b7bce0;max-width:600px;margin-bottom:38px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}

/* reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
#hero .reveal{transition-delay:calc(.5s + var(--d,0s))}
.hero-sub{--d:.1s}.hero-actions{--d:.2s}

/* floaters */
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
.float-card{position:absolute;display:flex;gap:12px;align-items:center;padding:14px 20px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.4);animation:bob 6s ease-in-out infinite;transition:transform .2s linear}
.float-card b{display:block;font-family:"Space Grotesk";font-size:.95rem}
.float-card small{color:var(--mute);font-size:.78rem}
.fi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--grad);font-weight:700}
.f1{top:20%;right:13%}.f2{top:40%;right:3%;animation-delay:-2s}.f3{top:60%;right:12%;animation-delay:-4s}.f4{top:78%;right:2%;animation-delay:-1s}
@keyframes bob{50%{margin-top:-18px}}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.scroll-hint span{width:1px;height:46px;background:linear-gradient(var(--b),transparent);animation:scrolldrop 2s infinite;transform-origin:top}
@keyframes scrolldrop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* marquee */
.marquee-wrap{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:26px 0;transform:rotate(-1.2deg);margin:-20px -2% 0;position:relative;z-index:5}
.marquee-track{display:flex;gap:40px;width:max-content;animation:marq 32s linear infinite;font-family:"Space Grotesk";font-size:clamp(1.4rem,3vw,2.4rem);font-weight:600;white-space:nowrap}
.marquee-track span{-webkit-text-stroke:1px rgba(255,255,255,.5);color:transparent;transition:.3s}
.marquee-track span:nth-child(4n+1){color:#fff;-webkit-text-stroke:0}
.marquee-track i{font-style:normal;color:var(--a)}
@keyframes marq{to{transform:translateX(-50%)}}

/* about */
.about-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:70px;align-items:center}
.ticks{display:grid;gap:14px;margin-bottom:26px}
.ticks li{display:flex;gap:14px;align-items:flex-start;color:#d5d8f3}
.ticks i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(0,212,255,.14);color:var(--b);font-style:normal;font-size:.8rem;margin-top:2px}
.orbit{position:relative;width:min(420px,100%);aspect-ratio:1;margin:auto}
.core{position:absolute;inset:34%;border-radius:50%;background:var(--glass);border:1px solid var(--line);display:grid;place-items:center;box-shadow:0 0 80px rgba(124,92,255,.6),inset 0 0 30px rgba(124,92,255,.3);animation:pulse 3s infinite}
.core img{width:52%}
.ring{position:absolute;border:1px dashed rgba(255,255,255,.2);border-radius:50%;animation:spin linear infinite}
.r1{inset:18%;animation-duration:14s}.r2{inset:6%;animation-duration:22s;animation-direction:reverse}.r3{inset:-6%;animation-duration:32s}
.sat{position:absolute;top:-17px;left:50%;margin-left:-30px;width:60px;padding:6px 0;text-align:center;border-radius:100px;font-size:.75rem;font-weight:600;background:var(--bg2);border:1px solid var(--a);box-shadow:0 0 20px rgba(124,92,255,.6);animation:spin linear infinite reverse}
.r1 .sat{animation-duration:14s}.r2 .sat{animation-duration:22s;animation-direction:normal;border-color:var(--b)}.r3 .sat{animation-duration:32s;border-color:var(--c)}
@keyframes spin{to{transform:rotate(360deg)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:100px}
.stat{padding:34px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);text-align:center;transition:.4s var(--ease)}
.stat:hover{transform:translateY(-8px);border-color:var(--a)}
.stat b{display:block;font-family:"Space Grotesk";font-size:clamp(2.4rem,4vw,3.4rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--mute);font-size:.9rem}

/* quote */
.quote{background:radial-gradient(ellipse at center,rgba(124,92,255,.12),transparent 70%)}
.big-quote{font-family:"Space Grotesk";font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.3;text-align:center;max-width:980px;margin:0 auto;letter-spacing:-.01em}
.big-quote .qw{color:rgba(255,255,255,.14);transition:color .4s}
.big-quote .qw.lit{color:#fff}

/* cards */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;perspective:1200px}
.card{grid-column:span 3}
.card.wide{grid-column:span 6}
.card.wide p{max-width:420px}
.card{position:relative;padding:38px 32px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);overflow:hidden;transform-style:preserve-3d;--mx:50%;--my:50%}
.card.reveal.in{transition:transform .15s linear,border-color .3s,opacity .9s,filter .9s}
.card-glow{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(124,92,255,.32),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(300px circle at var(--mx) var(--my),var(--b),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s;pointer-events:none}
.card:hover .card-glow,.card:hover::before{opacity:1}
.card-num{position:absolute;top:22px;right:28px;font-family:"Space Grotesk";font-size:3.4rem;font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);line-height:1}
.icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--grad);margin-bottom:26px;box-shadow:0 10px 30px rgba(124,92,255,.4);transform:translateZ(40px);transition:transform .5s var(--ease)}
.card:hover .icon{transform:translateZ(60px) rotate(-8deg) scale(1.08)}
.icon svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.3rem;margin-bottom:12px;transform:translateZ(30px)}
.card p{color:var(--mute);font-size:.95rem;margin-bottom:22px}
.more{font-size:.88rem;font-weight:600;color:var(--b);display:inline-flex;gap:8px}
.more i{font-style:normal;transition:transform .3s}
.card:hover .more i{transform:translateX(6px)}

/* timeline */
.timeline{position:relative;max-width:820px;margin:0 auto;display:grid;gap:60px}
.tl-line{position:absolute;left:29px;top:10px;bottom:10px;width:2px;background:var(--line)}
.tl-line span{display:block;width:100%;height:100%;transform:scaleY(0);transform-origin:top;background:var(--grad);box-shadow:0 0 14px var(--b)}
.step{display:flex;gap:34px;align-items:flex-start;position:relative}
.step-dot{flex:none;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700;font-size:1.3rem;background:var(--bg);border:2px solid var(--line);transition:.5s var(--ease);position:relative;z-index:2}
.step.in .step-dot{border-color:var(--b);box-shadow:0 0 30px rgba(0,212,255,.5);background:rgba(0,212,255,.08)}
.step-body{padding:22px 28px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);flex:1;transition:.4s}
.step-body:hover{transform:translateX(10px);border-color:var(--a)}
.step-body h3{font-size:1.4rem;margin-bottom:6px}
.step-body p{color:var(--mute)}

/* testimonials */
.slider{max-width:860px;margin:0 auto;position:relative}
.slides{position:relative;min-height:340px}
.slide{position:absolute;inset:0;padding:48px 52px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));opacity:0;transform:translateX(60px) scale(.96);pointer-events:none;transition:.8s var(--ease)}
.slide.active{opacity:1;transform:none;pointer-events:auto}
.slide.prev{transform:translateX(-60px) scale(.96)}
.qmark{position:absolute;top:6px;left:36px;font-family:"Space Grotesk";font-size:7rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.5}
.slide p{font-size:1.1rem;color:#d5d8f3;margin:26px 0 30px;position:relative}
.who{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.who small{display:block;color:var(--mute)}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--grad);font-weight:700;font-family:"Space Grotesk"}
.stars{margin-left:auto;color:#ffc94d;letter-spacing:3px}
.dots{display:flex;gap:10px;justify-content:center;margin-top:28px}
.dots button{width:10px;height:10px;border-radius:10px;border:0;background:var(--line);transition:.4s;padding:0}
.dots button.on{width:36px;background:var(--grad)}

/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px}
.info{display:grid;gap:18px;align-content:start}
.info-item{display:flex;gap:18px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);transition:.4s var(--ease)}
.info-item:hover{transform:translateX(10px);border-color:var(--b)}
.info-item>i{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--grad);font-style:normal;font-size:1.3rem}
.info-item h4{font-size:1rem}.info-item p{color:var(--mute);font-size:.95rem}
.info-item a:hover{color:var(--b)}
.form{padding:38px;border:1px solid var(--line);border-radius:30px;background:var(--glass);display:grid;gap:22px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{position:relative;display:block}
.field input,.field textarea{width:100%;padding:22px 18px 10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;color:#fff;font:inherit;outline:0;resize:vertical;transition:.3s}
.field span{position:absolute;left:18px;top:16px;color:var(--mute);pointer-events:none;transition:.25s var(--ease);font-size:.95rem}
.field input:focus,.field textarea:focus{border-color:var(--b);box-shadow:0 0 0 4px rgba(0,212,255,.12)}
.field input:focus+span,.field input:not(:placeholder-shown)+span,.field textarea:focus+span,.field textarea:not(:placeholder-shown)+span{top:6px;font-size:.72rem;color:var(--b)}
.form .btn{justify-self:start}
.form-msg{font-size:.92rem;min-height:1.2em}
.form-msg.ok{color:#2dff9b}.form-msg.err{color:#ff6b8a}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0;background:var(--bg2)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--mute);font-size:.9rem}
.foot-logo{height:34px;width:auto}
.to-top{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--glass);font-size:1.2rem;transition:.3s}
.to-top:hover{background:var(--grad);border-color:transparent;transform:translateY(-4px)}

/* nav badge */
.nav-product em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.06em;padding:2px 7px;margin-left:4px;border-radius:20px;background:linear-gradient(120deg,#ff9f1c,#ffd23f);color:#1a1200;vertical-align:2px}

/* headings: word by word */
.words .wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.words .wi{display:inline-block;transform:translateY(105%) rotate(4deg);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease)}
.words.in .wi{transform:none;opacity:1}
.center .wm,.h2.center{text-align:center}

/* featured product */
.grad-warm{background:linear-gradient(120deg,#ff9f1c,#ffd23f 50%,#ff6b3d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-warm{background:linear-gradient(120deg,#ff9f1c,#ffcf3f);background-size:200% 100%;color:#1d1300;box-shadow:0 8px 30px rgba(255,159,28,.45)}
.btn-warm:hover{background-position:100% 0;box-shadow:0 10px 44px rgba(255,200,60,.6)}
.product{background:linear-gradient(180deg,transparent,rgba(255,159,28,.05) 40%,transparent)}
.product-bg{position:absolute;width:700px;height:700px;right:-200px;top:10%;border-radius:50%;background:radial-gradient(circle,rgba(255,159,28,.28),transparent 65%);animation:drift 12s ease-in-out infinite alternate}
.product-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.product-logo{width:min(320px,80%);margin:4px 0 22px;filter:drop-shadow(0 12px 30px rgba(255,159,28,.35));animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-1.5deg)}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.chips span{padding:8px 16px;border-radius:100px;border:1px solid rgba(255,200,60,.3);background:rgba(255,159,28,.08);font-size:.88rem;color:#ffe2a8}
.soon-tag{align-self:center;font-size:.85rem;color:var(--mute)}
.product-visual{position:relative;min-height:440px;perspective:1200px}
.shot{display:block;position:absolute;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.03);background:#111}
.shot>img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.shot:hover>img{transform:scale(1.05)}
.shot-main{width:88%;aspect-ratio:16/9;top:0;left:0;z-index:2;translate:0 var(--py,0)}
.shot-side{width:58%;aspect-ratio:16/9;right:-4%;bottom:0;z-index:3;translate:0 var(--py,0);rotate:3deg}
.parcel{position:absolute;z-index:4;left:-26px;bottom:60px;font-size:3.4rem;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));animation:bob 4s ease-in-out infinite}

/* footer */
footer{padding:80px 0 0;position:relative;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:50px}
.foot-brand p{color:var(--mute);font-size:.92rem;margin-top:18px;max-width:300px}
.foot-brand .foot-logo{height:56px}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:.92rem}
.foot-col h5{font-family:"Space Grotesk";font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.foot-col a,.foot-col span{color:var(--mute);transition:color .3s,transform .3s;width:fit-content}
.foot-col a:hover{color:var(--b);transform:translateX(4px)}
.foot-word{font-family:"Space Grotesk";font-weight:700;font-size:clamp(4rem,17vw,15rem);line-height:.8;text-align:center;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(124,92,255,.22),transparent 80%);-webkit-background-clip:text;background-clip:text;user-select:none;margin-bottom:-.12em}
footer .foot{border-top:1px solid var(--line);padding:24px 0 30px}

/* sub-page hero + legal */
.page-hero{position:relative;padding:190px 0 70px;overflow:hidden;text-align:center}
.page-hero .h2{font-size:clamp(2.4rem,6vw,4.6rem)}
.page-hero p{color:var(--mute)}
.legal-wrap{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:start;padding-bottom:120px}
.toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:2px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);font-size:.86rem}
.toc b{font-family:"Space Grotesk";font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--b);margin-bottom:10px}
.toc a{color:var(--mute);padding:6px 10px;border-radius:8px;border-left:2px solid transparent;transition:.25s}
.toc a:hover{color:#fff}
.toc a.on{color:#fff;background:rgba(255,255,255,.06);border-left-color:var(--b)}
.legal{max-width:780px;color:#cfd3ee;font-size:1rem}
.legal h2{font-family:"Space Grotesk";font-size:1.5rem;color:#fff;margin:48px 0 14px;scroll-margin-top:110px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.08rem;color:#fff;margin:24px 0 8px}
.legal p,.legal ul{margin-bottom:14px}
.legal ul{padding-left:4px}
.legal li{position:relative;padding-left:22px;margin-bottom:8px}
.legal li::before{content:"";position:absolute;left:4px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--grad)}
.legal a{color:var(--b);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:#fff}
.legal .note{padding:18px 22px;border-radius:16px;border:1px solid rgba(0,212,255,.25);background:rgba(0,212,255,.06);margin:18px 0}
.legal table{width:100%;border-collapse:collapse;margin:10px 0 20px;font-size:.92rem}
.legal th,.legal td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{color:#fff;font-family:"Space Grotesk";font-weight:600;background:rgba(255,255,255,.04)}
.legal .caps{text-transform:uppercase;font-size:.9rem}
.meta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.meta-row span{padding:6px 14px;border-radius:100px;border:1px solid var(--line);background:var(--glass);font-size:.82rem;color:var(--mute)}

/* responsive */
@media(max-width:1200px){.floaters{display:none}}
@media(max-width:1100px){.foot-grid{grid-template-columns:1fr 1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:1000px){
  .product-grid,.product-grid.flip,.legal-wrap{grid-template-columns:1fr}
  .product-visual{min-height:360px}
  .toc{position:static}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .card,.card.wide{grid-column:auto}
  .stats{grid-template-columns:1fr 1fr}
  .floaters{display:none}
}
@media(max-width:1080px){
  #burger{display:block}
  .header-cta{display:none}
  .logo img{height:46px}
  #header.scrolled .logo img{height:40px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .legal th,.legal td{padding:10px 8px}
  #nav{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:0;border:0;background:rgba(5,6,15,.96);transform:translateX(100%);transition:transform .6s var(--ease);padding:0}
  #nav.open{transform:none}
  #nav a{font-size:1.8rem;font-family:"Space Grotesk"}
  #burger{z-index:3}
  .section{padding:90px 0}
}
@media(max-width:620px){
  .cards,.row2{grid-template-columns:1fr}
  .slide{padding:40px 26px}.slides{min-height:460px}
  .stars{margin-left:0}
  .form{padding:24px}
  .step{gap:18px}.step-dot{width:48px;height:48px}.tl-line{left:23px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none;filter:none}
  .split{transform:none}
  .words .wi{transform:none;opacity:1}
}

/* second product: Tools N Go (teal) */
.product-tng{background:linear-gradient(180deg,transparent,rgba(30,200,184,.05) 40%,transparent)}
.product-tng .product-bg{right:auto;left:-200px;background:radial-gradient(circle,rgba(30,200,184,.26),transparent 65%)}
.product-tng .product-logo{filter:drop-shadow(0 12px 30px rgba(30,200,184,.3));margin-left:-14px}
.product-tng .chips span{border-color:rgba(30,200,184,.32);background:rgba(30,200,184,.08);color:#bff3ec}
.product-grid.flip{grid-template-columns:1.1fr 1fr}
.brand-lock{display:inline-flex;align-items:center;gap:14px;font-family:"Space Grotesk",sans-serif;color:#f6f1e8}
.brand-lock img{width:64px;height:64px;filter:drop-shadow(0 10px 24px rgba(30,200,184,.4))}
.brand-lock b{font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.brand-lock em{font-style:normal;color:#1ec8b8;margin-left:.28em}
.product-tng .grad{background:linear-gradient(120deg,#1ec8b8,#e4c9a0 60%,#4ecf96);background-size:200% 100%;-webkit-background-clip:text;background-clip:text}
.product-tng .btn-glow{color:#06231f;background:linear-gradient(120deg,#1ec8b8,#4ee0cf);box-shadow:0 8px 30px rgba(30,200,184,.4)}
.product-tng .btn-ghost:hover{border-color:#1ec8b8;background:rgba(30,200,184,.08)}

/* mobile: product screenshots stack normally instead of floating */
@media(max-width:1000px){
  .product-grid,.product-grid.flip{grid-template-columns:minmax(0,1fr);gap:40px}
  .product-grid>*{min-width:0}
  .product-visual{min-height:0;display:grid;gap:18px;perspective:none}
  .product-visual .shot{position:relative;inset:auto;width:100%;right:auto;bottom:auto;translate:none;rotate:none}
  .product-visual .shot-side{width:78%;justify-self:end;rotate:2deg}
  .product-visual .parcel{display:none}
  .product-tng .shot{aspect-ratio:auto}
  .product-tng .shot>img{height:auto}
  .product-tng .product-logo{margin-left:0}
  .product-tng .product-copy{order:-1}
  .brand-lock img{width:52px;height:52px}
  .brand-lock b{font-size:1.9rem}
}