/* Offline fonts (Inter + DM Mono, SIL Open Font License) — no external requests */
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-400.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-500.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/inter-600.woff) format('woff')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/inter-700.woff) format('woff')}
@font-face{font-family:'Inter Display';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/inter-display-600.woff) format('woff')}
@font-face{font-family:'Inter Display';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/inter-display-700.woff) format('woff')}
@font-face{font-family:'DM Mono';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/dm-mono-400.woff) format('woff')}
/* ==========================================================
   Elevenmonk — shared styles
   Light, bright, glassy. Brand: cyan + blue (from the logo).
   ========================================================== */
:root{
  --bg:#f3f9fd; --ink:#07111f; --muted:#546378; --line:rgba(7,17,31,.08);
  --c1:#00cfff; --c2:#0a7cff; --c3:#6d5dfc; --c4:#1fd6a6;
  --glass:rgba(255,255,255,.7); --glass-b:rgba(255,255,255,.95);
  --shadow:0 24px 60px -24px rgba(10,90,200,.32);
  --r:28px;
  --display:'Inter Display','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font:inherit}
::selection{background:var(--c2);color:#fff}
:focus-visible{outline:2px solid var(--c2);outline-offset:3px;border-radius:8px}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.grad{background:linear-gradient(100deg,var(--c1),var(--c2) 55%,var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:200% 0}}

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));z-index:200}

/* ---------- logo (SVG) ---------- */
.logo-svg{overflow:visible}
.logo-svg .p,.logo-svg .pi,.logo-svg .ltr{transform-box:fill-box;transform-origin:center}
.logo-svg .ltr{transform-origin:50% 100%}

/* loader: petals fly in, letters rise */
#loader{position:fixed;inset:0;z-index:500;display:none;place-items:center;background:radial-gradient(circle at 50% 45%,#fff,var(--bg) 70%);transition:opacity .5s,visibility .5s,transform .6s var(--ease);cursor:pointer}
html.show-loader #loader{display:grid}
html.loader-done #loader{opacity:0;visibility:hidden;transform:scale(1.18)}
.ld-inner{display:grid;gap:38px;justify-items:center;width:min(580px,84vw)}
.ld-logo{width:100%;height:auto;filter:drop-shadow(0 10px 28px rgba(0,207,255,.5))}
.ld-logo .p{animation:petalIn .7s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(var(--i)*.08s)}
@keyframes petalIn{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.15)}to{opacity:1;transform:none}}
.ld-logo .ltr{animation:ltrIn .5s var(--ease) both;animation-delay:calc(.45s + var(--i)*.04s)}
@keyframes ltrIn{from{opacity:0;transform:translateY(45%) scaleY(.1)}to{opacity:1;transform:none}}
.ld-bar{width:min(260px,60%);height:3px;border-radius:3px;background:rgba(10,124,255,.14);overflow:hidden}
.ld-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--c1),var(--c2));animation:bar 1.3s var(--ease) .1s forwards}
@keyframes bar{to{transform:scaleX(1)}}

/* page transition: four quadrant panels */
#pt{position:fixed;inset:0;z-index:450;pointer-events:none;display:grid;grid-template:1fr 1fr/1fr 1fr;visibility:hidden;transition:visibility 0s .6s}
#pt i{background:linear-gradient(135deg,var(--c1),var(--c2));transition:transform .45s cubic-bezier(.77,0,.18,1)}
#pt i:nth-child(1){transform:translate(-101%,-101%)}
#pt i:nth-child(2){transform:translate(101%,-101%);transition-delay:.03s;background:linear-gradient(135deg,var(--c2),var(--c1))}
#pt i:nth-child(3){transform:translate(-101%,101%);transition-delay:.1s;background:linear-gradient(135deg,var(--c2),var(--c3))}
#pt i:nth-child(4){transform:translate(101%,101%);transition-delay:.15s}
.pt-mark{position:absolute;left:50%;top:50%;width:clamp(90px,14vw,150px);transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .35s,transform .6s var(--ease)}
.pt-mark .logo-svg path{fill:#fff!important}
html.pt-cover #pt{visibility:visible;pointer-events:all;transition-delay:0s}
html.pt-cover #pt i{transform:none}
html.pt-cover .pt-mark{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.18s}

/* ---------- cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:250;border-radius:50%;opacity:0}
.cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--c2);transition:width .25s,height .25s,margin .25s,background .25s,opacity .3s}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--c2);transition:opacity .3s}
.cursor.hover{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(0,207,255,.12)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---------- ambient background ---------- */
.blobs{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.6;animation:float 20s ease-in-out infinite}
.b1{width:540px;height:540px;background:#b9f0ff;top:-140px;left:-120px}
.b2{width:480px;height:480px;background:#cfd8ff;top:32%;right:-160px;animation-delay:-7s}
.b3{width:540px;height:540px;background:#c8f7ea;bottom:-180px;left:18%;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.1)}66%{transform:translate(-40px,50px) scale(.95)}}
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 15%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 15%,#000 15%,transparent 72%)}

/* ---------- navigation ---------- */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1140px,93vw);z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 22px;border-radius:999px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--glass-b);box-shadow:var(--shadow);transition:transform .45s var(--ease)}
.nav.hide{transform:translate(-50%,-150%)}
.brand{display:block;flex:none}
.brand .logo-svg{height:36px;width:auto;filter:drop-shadow(0 3px 10px rgba(0,207,255,.35))}
.brand .p{transition:transform .6s cubic-bezier(.3,1.7,.5,1)}
.brand .pi{animation:breathe 6s ease-in-out infinite;animation-delay:calc(var(--i)*-1.3s)}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}}
.brand:hover .p1{transform:translate(-22px,-22px) rotate(-14deg)}
.brand:hover .p2{transform:translate(22px,-22px) rotate(14deg)}
.brand:hover .p3{transform:translate(-22px,22px) rotate(12deg)}
.brand:hover .p4{transform:translate(22px,22px) rotate(-12deg)}
.brand:hover .ltr{animation:hop .6s var(--ease) both;animation-delay:calc(var(--i)*.045s)}
@keyframes hop{0%,100%{transform:none}40%{transform:translateY(-16%)}}
.nav-links{display:flex;gap:6px;font-weight:500;font-size:.95rem;color:var(--muted)}
.nav-links a{position:relative;padding:8px 16px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:rgba(10,124,255,.07)}
.nav-links a.active{color:var(--c2);background:rgba(10,124,255,.1)}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px auto;transition:.3s}
.nav.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;border:0;font:600 .98rem var(--body);cursor:pointer;position:relative;will-change:transform;transition:box-shadow .3s,background .3s}
.btn-primary{background:linear-gradient(135deg,#0b5fff,#0a8bff);color:#fff;box-shadow:0 14px 30px -10px rgba(10,100,255,.65)}
.btn-primary:hover{box-shadow:0 20px 44px -10px rgba(0,207,255,.75)}
.btn-ghost{background:var(--glass);border:1px solid var(--glass-b);color:var(--ink);box-shadow:0 8px 24px -14px rgba(10,90,200,.35)}
.btn-ghost:hover{background:#fff}
.btn-sm{padding:10px 20px;font-size:.9rem}
.btn svg{width:18px;height:18px;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);font:500 .78rem var(--mono);letter-spacing:.05em;color:var(--c2)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--c4);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,214,166,.6)}70%,100%{box-shadow:0 0 0 10px rgba(31,214,166,0)}}
.tag{font:500 .8rem var(--mono);color:var(--c2);letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--display)}
h2{font-weight:700;font-size:clamp(2.1rem,5vw,4rem);line-height:1.05;letter-spacing:-.035em;margin:14px 0 18px;max-width:17ch}
.sub{color:var(--muted);font-size:1.12rem;max-width:580px}
.sec-head{margin-bottom:60px}
.center{text-align:center}.center h2,.center .sub{margin-inline:auto}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(46px) scale(.97);transition:opacity .9s ease,transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s!important}.d2{transition-delay:.2s!important}.d3{transition-delay:.3s!important}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js [data-split] .w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transition:transform .9s var(--ease);transition-delay:calc(var(--wi)*.05s)}
.js [data-split].in .w>span{transform:none}

/* ---------- home hero ---------- */
main,footer{overflow-x:clip}
section{position:relative;padding:120px 0}
.hero{position:relative;min-height:100vh;display:grid;align-items:center;padding:130px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center;position:relative;z-index:2}
h1{font-weight:700;font-size:clamp(2.8rem,7.4vw,6.4rem);line-height:.98;letter-spacing:-.04em;margin:26px 0 24px}
h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
h1 .line>span{display:inline-block}
.js h1 .line>span{transform:translateY(112%) rotate(3deg);transition:transform 1.1s var(--ease)}
.js.ready h1 .line>span{transform:none}
.js.ready h1 .line:nth-child(2)>span{transition-delay:.12s}
.js.ready h1 .line:nth-child(3)>span{transition-delay:.24s}
.hero .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:520px;margin-bottom:34px}
.js .hero-fade{opacity:0;transform:translateY(24px);transition:opacity .8s .12s,transform .8s .12s var(--ease)}
.js.ready .hero-fade{opacity:1;transform:none}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{margin-top:34px;font:500 .78rem var(--mono);color:var(--muted);letter-spacing:.06em;display:flex;align-items:center;gap:10px}
.hero-meta svg{width:18px;height:18px;stroke:var(--c2)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;font:500 .7rem var(--mono);color:var(--muted);letter-spacing:.16em}
.scroll-hint i{width:22px;height:36px;border:1.5px solid var(--muted);border-radius:12px;position:relative}
.scroll-hint i::after{content:"";position:absolute;top:6px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--c2);animation:wheel 1.8s infinite}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}

/* 3D logo (stacked layers) */
.logo3d{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;margin-inline:auto;display:grid;place-items:center;perspective:1500px;cursor:grab;touch-action:pan-y;user-select:none;--u:1.7px}
.logo3d:active{cursor:grabbing}
.halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(0,207,255,.5),rgba(10,124,255,.2) 45%,transparent 70%);filter:blur(34px);animation:halo 5s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(.92);opacity:.8}50%{transform:scale(1.08);opacity:1}}
.floor{position:absolute;left:18%;right:18%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(rgba(10,90,200,.35),transparent 70%);filter:blur(10px);animation:floor 5s ease-in-out infinite}
@keyframes floor{50%{transform:scale(.8);opacity:.6}}
.rig{position:relative;width:calc(220*var(--u));height:calc(192*var(--u));transform-style:preserve-3d;will-change:transform}
.logo-flat{position:absolute;left:10%;right:10%;top:50%;transform:translateY(-50%)}
.logo-flat .logo-svg{width:100%;height:auto}
.logo3d.ready3d .logo-flat{display:none}
.pw{position:absolute;width:calc(100*var(--u));height:calc(100*var(--u));transform-style:preserve-3d}
.pw.q-tl{left:0;top:0}
.pw.q-tr{left:calc(220*var(--u));top:0;transform-origin:0 0;transform:scaleX(-1)}
.pw.q-bl{left:0;top:calc(192*var(--u));transform-origin:0 0;transform:scaleY(-.8)}
.pw.q-br{left:calc(220*var(--u));top:calc(192*var(--u));transform-origin:0 0;transform:scale(-1,-.8)}
.pf{position:absolute;inset:0;transform-style:preserve-3d}
.ly{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit{position:absolute;left:50%;top:50%;border-radius:50%;border:1.5px solid rgba(10,124,255,.28);transform-style:preserve-3d;pointer-events:none}
.orbit.o1{width:calc(330*var(--u));height:calc(330*var(--u));margin:calc(-165*var(--u)) 0 0 calc(-165*var(--u));transform:rotateX(72deg);animation:spinz 16s linear infinite}
.orbit.o2{width:calc(380*var(--u));height:calc(380*var(--u));margin:calc(-190*var(--u)) 0 0 calc(-190*var(--u));transform:rotateX(72deg) rotateY(38deg);border-color:rgba(0,207,255,.35);animation:spinz 24s linear infinite reverse}
.orbit i{position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--c1);box-shadow:0 0 16px 4px rgba(0,207,255,.7)}
@keyframes spinz{to{transform:rotateX(72deg) rotateZ(360deg)}}
.orbit.o2{animation-name:spinz2}
@keyframes spinz2{from{transform:rotateX(72deg) rotateY(38deg) rotateZ(0)}to{transform:rotateX(72deg) rotateY(38deg) rotateZ(-360deg)}}
.chip3d{position:absolute;z-index:3;padding:10px 16px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(12px);box-shadow:var(--shadow);font:500 .8rem var(--mono);display:flex;align-items:center;gap:9px;animation:bob 6s ease-in-out infinite}
.chip3d b{width:9px;height:9px;border-radius:50%}
.chip3d.k1{left:2%;top:14%}.chip3d.k2{right:0;top:22%;animation-delay:-2s}.chip3d.k3{left:0;bottom:20%;animation-delay:-4s}.chip3d.k4{right:4%;bottom:12%;animation-delay:-1s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1.5deg)}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;padding:24px 0;border-block:1px solid var(--line);background:rgba(255,255,255,.6);transform:rotate(-1.2deg);margin:20px -2vw}
.marquee-track{display:flex;width:max-content;animation:scroll 34s linear infinite;font:600 clamp(1.4rem,3vw,2.2rem) var(--display);letter-spacing:-.02em;white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:flex;align-items:center;padding-right:56px;gap:56px}
.marquee-track span::after{content:"✦";color:var(--c1);font-size:1.1rem}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- 3D cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;perspective:1400px}
.card{position:relative;display:block;padding:40px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.72));border:1px solid var(--glass-b);box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .4s;min-height:330px;will-change:transform}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(0,207,255,.16),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::before{opacity:1}
.card:hover{box-shadow:0 44px 80px -26px rgba(10,100,255,.45)}
.card .ico{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;margin-bottom:26px;transform:translateZ(60px);box-shadow:0 18px 30px -10px var(--c)}
.card .ico svg{width:32px;height:32px;stroke:#fff}
.card h3{font:700 1.75rem var(--display);letter-spacing:-.02em;margin-bottom:12px;transform:translateZ(42px)}
.card p{color:var(--muted);margin-bottom:22px;transform:translateZ(24px)}
.card ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;transform:translateZ(32px)}
.card li{padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font:500 .78rem var(--mono)}
.card .num{position:absolute;right:30px;top:18px;font:700 6rem var(--display);color:rgba(7,17,31,.045);transform:translateZ(8px)}
.card .more{display:inline-flex;gap:8px;align-items:center;margin-top:20px;font-weight:600;color:var(--c2);transform:translateZ(36px)}
.card .more svg{width:16px;height:16px;transition:transform .3s}
.card:hover .more svg{transform:translateX(5px)}
.c1{--c:rgba(0,170,255,.55)}.c1 .ico{background:linear-gradient(135deg,#4de0ff,#00a8ff)}
.c2{--c:rgba(109,93,252,.5)}.c2 .ico{background:linear-gradient(135deg,#9a8dff,#6d5dfc)}
.c3{--c:rgba(10,124,255,.55)}.c3 .ico{background:linear-gradient(135deg,#5aa4ff,#0a6cff)}
.c4{--c:rgba(31,214,166,.5)}.c4 .ico{background:linear-gradient(135deg,#6af0cc,#1fd6a6)}

/* scroll-driven rise wrapper */
.rise{will-change:transform;transform-origin:50% 100%}

/* ---------- cube ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.stage{height:470px;display:grid;place-items:center;perspective:1300px;cursor:grab;position:relative}
.cube{width:220px;height:220px;position:relative;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(30deg);will-change:transform}
.cube.auto{animation:cubeSpin 22s linear infinite}
@keyframes cubeSpin{to{transform:rotateX(-22deg) rotateY(390deg)}}
.face{position:absolute;inset:0;border-radius:26px;border:1.5px solid rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font:700 1.35rem var(--display);color:#fff;box-shadow:inset 0 0 40px rgba(255,255,255,.28)}
.face small{font:500 .68rem var(--mono);opacity:.9;letter-spacing:.1em}
.face svg{width:70px;height:auto;opacity:.95}
.face svg path{fill:#fff}
.sr:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;padding:10px 18px;border-radius:999px;background:#fff;color:var(--c2);font-weight:600;z-index:600;box-shadow:var(--shadow)}
.f1{transform:translateZ(110px);background:linear-gradient(135deg,#4de0ff,#0a8bff)}
.f2{transform:rotateY(90deg) translateZ(110px);background:linear-gradient(135deg,#8f83ff,#5a4cf0)}
.f3{transform:rotateY(180deg) translateZ(110px);background:linear-gradient(135deg,#5aa4ff,#0a5cff)}
.f4{transform:rotateY(-90deg) translateZ(110px);background:linear-gradient(135deg,#5eeccb,#12c496)}
.f5{transform:rotateX(90deg) translateZ(110px);background:linear-gradient(135deg,#9be9ff,#37c3ff)}
.f6{transform:rotateX(-90deg) translateZ(110px);background:linear-gradient(135deg,#2a5fd8,#0a2f8f)}
.shadow-floor{position:absolute;bottom:42px;width:250px;height:40px;border-radius:50%;background:radial-gradient(rgba(10,90,200,.32),transparent 70%);filter:blur(8px);animation:floor 6s ease-in-out infinite}
.feature-list{display:grid;gap:16px;margin-top:32px}
.feature{display:flex;gap:18px;padding:20px 22px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(14px);transition:transform .35s,box-shadow .35s}
.feature:hover{transform:translateX(10px);box-shadow:var(--shadow)}
.feature b{font:700 1.1rem var(--display);display:block}
.feature span{color:var(--muted);font-size:.95rem}
.feature .dot{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:700 .95rem var(--display);color:#fff}

/* ---------- steps (home) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:1200px;position:relative}
.steps::before{content:"";position:absolute;top:34px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--c2) 0 8px,transparent 8px 16px);opacity:.35}
.step{position:relative;padding:30px 26px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.72));border:1px solid var(--glass-b);box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .4s}
.step .n{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#0b5fff,#00b4ff);color:#fff;display:grid;place-items:center;font:600 1rem var(--mono);margin-bottom:22px;transform:translateZ(40px);box-shadow:0 14px 26px -8px rgba(10,100,255,.6)}
.step h4{font:700 1.3rem var(--display);margin-bottom:8px;transform:translateZ(24px)}
.step p{color:var(--muted);font-size:.95rem;transform:translateZ(14px)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1200px}
.why .card{min-height:0;padding:34px}
.why .card h3{font-size:1.4rem}
.link-arrow{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--c2);margin-top:34px}
.link-arrow svg{width:18px;height:18px;transition:transform .3s}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- CTA ---------- */
.cta{padding:50px 0 120px}
.cta-box{position:relative;border-radius:44px;padding:clamp(36px,6vw,84px);background:linear-gradient(135deg,#0b5fff,#0a8bff 50%,#00cfff);color:#fff;overflow:hidden;box-shadow:0 50px 100px -30px rgba(10,100,255,.6);transition:transform .2s ease-out}
.cta-box::before,.cta-box::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.13);animation:float 14s ease-in-out infinite}
.cta-box::before{width:380px;height:380px;right:-90px;top:-130px}
.cta-box::after{width:260px;height:260px;left:-60px;bottom:-100px;animation-delay:-6s}
.cta-box>*{position:relative;z-index:2}
.cta-box .cta-mark{position:absolute;right:6%;bottom:-6%;width:min(340px,34vw);opacity:.16;z-index:1}
.cta-box .cta-mark path{fill:#fff!important}
.cta-box h2{color:#fff;max-width:13ch}
.cta-box .sub{color:rgba(255,255,255,.9)}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn-white{background:#fff;color:#0a4fd8;box-shadow:0 14px 30px -12px rgba(0,30,120,.5)}
.btn-line{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-line:hover{background:rgba(255,255,255,.25)}

/* ---------- footer ---------- */
footer{padding:70px 0 34px;border-top:1px solid var(--line);position:relative;overflow:hidden}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot .brand .logo-svg{height:44px}
.foot p{color:var(--muted);max-width:320px;margin-top:16px;font-size:.95rem}
.foot h5{font:500 .76rem var(--mono);color:var(--c2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.foot-col{display:grid;gap:10px;align-content:start;font-size:.95rem}
.foot-col a{color:var(--muted);transition:color .2s,transform .2s;width:max-content}
.foot-col a:hover{color:var(--ink);transform:translateX(4px)}
.socials{display:flex;gap:10px;margin-top:22px;perspective:600px}
.soc{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-b);box-shadow:0 10px 22px -12px rgba(10,90,200,.45);transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;color:var(--ink)}
.soc svg{width:19px;height:19px;fill:currentColor}
.soc svg.stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.soc:hover{transform:translateY(-6px) rotateX(18deg) scale(1.08);background:linear-gradient(135deg,#0b5fff,#00b4ff);color:#fff;box-shadow:0 18px 30px -10px rgba(10,124,255,.6)}
.foot-word{width:100%;height:auto;margin-top:46px;opacity:.9;pointer-events:none}
.copy{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font:400 .8rem var(--mono);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- inner page hero ---------- */
.phero{position:relative;padding:170px 0 90px;min-height:600px;overflow:hidden}
.phero .wrap{position:relative;z-index:2}
.crumbs{font:500 .78rem var(--mono);color:var(--muted);letter-spacing:.06em;margin-bottom:6px}
.crumbs a{color:var(--c2)}
.phero h1{font-size:clamp(2.5rem,6.4vw,5.2rem);max-width:13ch;margin:16px 0 20px}
.phero .sub{max-width:520px}
.phero-art{position:absolute;right:max(3%,calc((100vw - 1200px)/2));top:110px;width:min(440px,40vw);aspect-ratio:1;perspective:1100px;z-index:1}
.pa{position:absolute;will-change:transform}
.pa .pm{position:absolute;left:8%;top:22%;width:84%;transform:rotateX(14deg) rotateY(-22deg);filter:drop-shadow(0 30px 30px rgba(10,90,200,.3));animation:pmfloat 7s ease-in-out infinite}
@keyframes pmfloat{0%,100%{transform:rotateX(14deg) rotateY(-22deg) translateY(0)}50%{transform:rotateX(10deg) rotateY(-12deg) translateY(-16px)}}
.pa.ring{left:0;top:6%;width:96%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(10,124,255,.35);animation:ringspin 30s linear infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}
.pa.orb{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#fff,#7fe7ff 40%,#0a8bff 90%);box-shadow:0 24px 40px -14px rgba(10,124,255,.6);animation:bob 6s ease-in-out infinite}
.pa.orb.a{right:2%;top:8%}.pa.orb.b{left:2%;bottom:6%;width:46px;height:46px;animation-delay:-3s}
.pa.sq{width:90px;height:90px;border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(190,235,255,.6));border:1px solid #fff;box-shadow:var(--shadow);transform:rotate(18deg);animation:bob 7s ease-in-out infinite;animation-delay:-2s;left:6%;top:3%;width:70px;height:70px}

/* ---------- services page ---------- */
.svc{padding:90px 0}
.svc .split{gap:70px}
.svc.alt .split>:first-child{order:2}
.svc h2{max-width:14ch}
.checks{list-style:none;display:grid;gap:12px;margin:26px 0 30px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:linear-gradient(135deg,#0b5fff,#00cfff);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.scene{position:relative;height:460px;display:grid;place-items:center;perspective:1200px;border-radius:36px;background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(220,242,255,.55));border:1px solid var(--glass-b);box-shadow:var(--shadow)}
.scene::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 110%,rgba(0,207,255,.25),transparent 60%);pointer-events:none}
.rig3{position:relative;transform-style:preserve-3d;transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));transition:transform .25s ease-out}
.scene-tip{position:absolute;left:20px;bottom:16px;font:500 .7rem var(--mono);color:var(--muted);letter-spacing:.08em;z-index:3}
/* saas stack */
.stk{position:relative;width:230px;height:230px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-38deg)}
.slab{position:absolute;inset:0;border-radius:22px;border:1.5px solid rgba(255,255,255,.95);background:linear-gradient(135deg,rgba(77,224,255,.78),rgba(10,124,255,.7));box-shadow:0 30px 40px -18px rgba(10,60,160,.4);transform:translateZ(calc(var(--z)*1px));transition:transform .7s var(--ease);padding:16px;color:#fff;font:600 .8rem var(--mono);display:flex;align-items:flex-end}
.slab:nth-child(2){background:linear-gradient(135deg,rgba(143,131,255,.78),rgba(90,76,240,.72))}
.slab:nth-child(3){background:linear-gradient(135deg,rgba(94,236,203,.8),rgba(18,196,150,.72))}
.slab:nth-child(4){background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(190,235,255,.8));color:#0a4fd8}
.scene:hover .slab{transform:translateZ(calc(var(--z)*1.8px))}
/* network */
.scene canvas{width:100%;height:100%;display:block;position:absolute;inset:0;border-radius:inherit}
.nchip{position:absolute;z-index:2;padding:8px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font:500 .75rem var(--mono);animation:bob 6s ease-in-out infinite}
/* phone */
.phone{position:relative;width:196px;height:390px;transform-style:preserve-3d}
.phone .edge{position:absolute;inset:0;border-radius:36px;background:#cfe3f6}
.phone .edge:nth-child(1){transform:translateZ(-10px)}.phone .edge:nth-child(2){transform:translateZ(-6px)}.phone .edge:nth-child(3){transform:translateZ(-2px)}
.phone .front{position:absolute;inset:0;border-radius:36px;background:#fff;border:7px solid #e4effa;box-shadow:inset 0 0 0 1px rgba(10,90,200,.15);transform:translateZ(4px);overflow:hidden;padding:30px 14px 14px}
.phone .notch{position:absolute;top:8px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:10px;background:#d4e4f5}
.pl{height:68px;border-radius:16px;margin-bottom:12px;position:relative;overflow:hidden;background:linear-gradient(135deg,#4de0ff,#0a8bff)}
.pl.b{background:linear-gradient(135deg,#a89eff,#6d5dfc);height:54px}
.pl.c{background:linear-gradient(135deg,#7df0d3,#1fd6a6);height:54px}
.pl::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 3.2s infinite}
.pl.b::after{animation-delay:.5s}.pl.c::after{animation-delay:1s}
@keyframes sheen{60%,100%{transform:translateX(100%)}}
.pbar{display:flex;gap:6px;margin:14px 0 14px}
.pbar i{flex:1;height:7px;border-radius:4px;background:#e6f1fb}
.pbar i:first-child{background:#0a8bff}
.pnav{position:absolute;left:14px;right:14px;bottom:14px;height:44px;border-radius:16px;background:#f0f7fe;display:flex;justify-content:space-around;align-items:center}
.pnav i{width:18px;height:18px;border-radius:6px;background:#bcd9f2}.pnav i:nth-child(2){background:linear-gradient(135deg,#00cfff,#0a7cff)}
.pchip{position:absolute;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font:500 .74rem var(--mono);white-space:nowrap;display:flex;gap:8px;align-items:center;animation:bobT 6s ease-in-out infinite}
@keyframes bobT{0%,100%{translate:0 0}50%{translate:0 -14px}}
.pchip b{width:8px;height:8px;border-radius:50%}
.pc1{left:-120px;top:50px;transform:translateZ(90px)}.pc2{right:-110px;top:170px;transform:translateZ(120px);animation-delay:-2s}.pc3{left:-90px;bottom:50px;transform:translateZ(70px);animation-delay:-4s}
/* browser exploded */
.bz{position:relative;width:340px;height:230px;transform-style:preserve-3d;transform:rotateX(50deg) rotateZ(-30deg)}
.bz>div{position:absolute;border-radius:16px;transform:translateZ(calc(var(--z)*1px));transition:transform .7s var(--ease);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 26px 34px -16px rgba(10,60,160,.4)}
.bz .win{inset:0;background:linear-gradient(160deg,#ffffff,#dbefff);--z:0}
.bz .win::before{content:"";position:absolute;left:14px;top:12px;width:9px;height:9px;border-radius:50%;background:#ff7a8a;box-shadow:16px 0 #ffc65a,32px 0 #43d9a0}
.bz .hd{left:16px;right:16px;top:36px;height:20px;background:linear-gradient(90deg,#0b5fff,#00b4ff);--z:16}
.bz .hr{left:16px;width:58%;top:66px;height:84px;background:linear-gradient(135deg,#9a8dff,#6d5dfc);--z:32}
.bz .im{right:16px;width:34%;top:66px;height:84px;background:linear-gradient(135deg,#6af0cc,#1fd6a6);--z:44}
.bz .cd{left:16px;right:16px;top:162px;height:50px;background:#fff;--z:58}
.bz .bt{right:30px;top:176px;width:84px;height:22px;border-radius:12px;background:linear-gradient(135deg,#0b5fff,#00cfff);--z:74}
.scene:hover .bz>div{transform:translateZ(calc(var(--z)*2.2px))}

/* ---------- process page ---------- */
.tl{position:relative;max-width:980px;margin:0 auto;padding:10px 0;--p:0}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:rgba(10,124,255,.14);border-radius:3px}
.tl::after{content:"";position:absolute;left:50%;top:0;width:3px;margin-left:-1.5px;border-radius:3px;height:calc(var(--p)*100%);background:linear-gradient(var(--c1),var(--c2),var(--c3));box-shadow:0 0 14px rgba(0,207,255,.7)}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:116px;padding:34px 0;perspective:1200px}
.tl-item .tl-card{grid-column:1;text-align:left}
.tl-item:nth-child(even) .tl-card{grid-column:2}
.tl-dot{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:linear-gradient(135deg,#0b5fff,#00b4ff);color:#fff;display:grid;place-items:center;font:600 1rem var(--mono);box-shadow:0 0 0 8px var(--bg),0 16px 30px -8px rgba(10,100,255,.65);z-index:2}
.tl-card{padding:32px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.74));border:1px solid var(--glass-b);box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.tl-card h3{font:700 1.7rem var(--display);letter-spacing:-.02em;margin-bottom:10px;transform:translateZ(36px)}
.tl-card p{color:var(--muted);transform:translateZ(20px)}
.tl-card .get{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;transform:translateZ(28px)}
.tl-card .get span{padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font:500 .76rem var(--mono)}
.tl-card .lab{font:500 .72rem var(--mono);color:var(--c2);letter-spacing:.1em;margin-top:18px;transform:translateZ(20px)}
.ring-stage{height:360px;perspective:1700px;display:grid;place-items:center;cursor:grab;user-select:none;touch-action:pan-y;margin-bottom:40px}
.ring-stage:active{cursor:grabbing}
.ring-wrap{transform:scale(var(--rs,1))}
.ring{position:relative;width:156px;height:156px;transform-style:preserve-3d}
.ring-item{position:absolute;inset:0;border-radius:22px;background:linear-gradient(160deg,#fff,#e4f4ff);border:1px solid #fff;box-shadow:0 20px 40px -18px rgba(10,90,200,.45);display:grid;place-content:center;text-align:center;gap:4px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ring-item b{font:700 1.15rem var(--display)}
.ring-item small{font:500 .68rem var(--mono);color:var(--muted);letter-spacing:.06em}
.ring-item::before{content:"";position:absolute;top:14px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.stack-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;perspective:1200px}
.stack-col{padding:24px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.72));border:1px solid var(--glass-b);box-shadow:var(--shadow);transition:transform .18s ease-out;transform-style:preserve-3d}
.stack-col h4{font:500 .74rem var(--mono);color:var(--c2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;transform:translateZ(20px)}
.stack-col ul{list-style:none;display:grid;gap:6px;color:var(--muted);font-size:.95rem;transform:translateZ(14px)}
.faq{max-width:860px;margin:0 auto;display:grid;gap:14px}
.faq-i{border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.74));border:1px solid var(--glass-b);box-shadow:0 14px 34px -22px rgba(10,90,200,.4);transition:box-shadow .3s}
.faq-i.open{box-shadow:var(--shadow)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;background:none;border:0;text-align:left;font:600 1.1rem var(--display);color:var(--ink);cursor:pointer}
.faq-q i{flex:none;width:32px;height:32px;border-radius:50%;background:rgba(10,124,255,.1);position:relative;transition:transform .4s var(--ease),background .3s}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--c2);border-radius:2px}
.faq-q i::after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.faq-i.open .faq-q i{transform:rotate(180deg);background:var(--c2)}
.faq-i.open .faq-q i::before,.faq-i.open .faq-q i::after{background:#fff}
.faq-i.open .faq-q i::after{transform:rotate(0)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-i.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 26px 24px;color:var(--muted)}

/* ---------- about page ---------- */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.story p{color:var(--muted);font-size:1.1rem;margin-bottom:18px}
.story p strong{color:var(--ink)}
.flips{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;perspective:1400px}
.flip{height:290px;cursor:pointer}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.flip:hover .flip-in,.flip.on .flip-in{transform:rotateY(180deg)}
.fc{position:absolute;inset:0;border-radius:var(--r);padding:30px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow)}
.fc.front{background:linear-gradient(160deg,#fff,#e4f4ff);border:1px solid #fff}
.fc.back{transform:rotateY(180deg);color:#fff;background:linear-gradient(135deg,#0b5fff,#00b4ff)}
.fc .big{font:700 3.6rem var(--display);line-height:1;color:rgba(10,124,255,.16)}
.fc h3{font:700 1.6rem var(--display);letter-spacing:-.02em}
.fc.front .hint{font:500 .72rem var(--mono);color:var(--muted);letter-spacing:.08em}
.fc.back p{font-size:1rem;line-height:1.55}
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1200px}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:start}
.ccards{display:grid;gap:22px;perspective:1200px}
.ccard{position:relative;padding:28px 30px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.74));border:1px solid var(--glass-b);box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.ccard .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;transform:translateZ(46px);box-shadow:0 14px 24px -10px var(--c)}
.ccard .ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ccard h3{font:500 .76rem var(--mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;transform:translateZ(24px)}
.ccard .val{font:700 clamp(1.15rem,2.2vw,1.5rem) var(--display);letter-spacing:-.01em;margin:4px 0 14px;word-break:break-word;transform:translateZ(30px)}
.ccard .row{display:flex;gap:10px;flex-wrap:wrap;transform:translateZ(26px)}
.mini{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font:600 .85rem var(--body);cursor:pointer;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.mini:hover{background:var(--c2);color:#fff;border-color:var(--c2)}
.mini.done{background:var(--c4);color:#fff;border-color:var(--c4)}
.ccard .socials{margin-top:4px;transform:translateZ(26px)}
.form-card{padding:clamp(26px,4vw,44px);border-radius:36px;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.78));border:1px solid var(--glass-b);box-shadow:var(--shadow)}
.form-card h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin:0 0 6px;max-width:none}
form{display:grid;gap:18px;margin-top:22px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label.f{display:grid;gap:7px;font:500 .78rem var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;padding:15px 18px;border-radius:16px;border:1.5px solid rgba(10,124,255,.16);background:#fff;font:400 1rem var(--body);color:var(--ink);outline:none;transition:box-shadow .25s,border-color .25s;text-transform:none;letter-spacing:0}
input:focus,textarea:focus,select:focus{border-color:var(--c2);box-shadow:0 0 0 4px rgba(10,124,255,.14)}
textarea{min-height:130px;resize:vertical}
fieldset{border:0;display:grid;gap:10px}
legend{font:500 .78rem var(--mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(10,124,255,.18);background:#fff;font:500 .9rem var(--body);transition:transform .3s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.chip:hover span{transform:translateY(-2px)}
.chip input:checked+span{background:linear-gradient(135deg,#0b5fff,#0a8bff);color:#fff;border-color:transparent;box-shadow:0 12px 22px -10px rgba(10,100,255,.7);transform:translateY(-2px)}
.chip input:focus-visible+span{outline:2px solid var(--c2);outline-offset:3px}
.form-note{font-size:.85rem;color:var(--muted)}
.form-note a{color:var(--c2);font-weight:600}
.btn-block{width:100%}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .hero{padding-top:120px}
  .logo3d{max-width:460px;order:-1}
  .cards,.why,.who{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}.steps::before{display:none}
  .split,.story,.contact-grid{grid-template-columns:1fr}
  .svc.alt .split>:first-child{order:0}
  .flips{grid-template-columns:repeat(2,1fr)}
  .stack-grid{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .phero-art{opacity:.35;right:-6%;width:min(380px,60vw)}
  .nav-links{position:fixed;top:84px;left:4vw;right:4vw;flex-direction:column;gap:0;padding:12px;border-radius:24px;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s}
  .nav-links a{padding:14px 16px;font-size:1.05rem}
  .nav.open .nav-links{opacity:1;visibility:visible;transform:none}
  .burger{display:block}.nav-cta{display:none}
  section{padding:84px 0}
  .tl::before,.tl::after{left:32px}
  .tl-item{grid-template-columns:1fr;gap:0;padding:20px 0 20px 76px}
  .tl-item .tl-card,.tl-item:nth-child(even) .tl-card{grid-column:1}
  .tl-dot{left:32px;top:50px;margin-top:-32px}
  .chip3d{display:none}
}
@media (max-width:620px){
  .steps,.flips,.fgrid,.stack-grid{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .card{padding:30px}
  .stage{height:380px}.cube{width:170px;height:170px}
  .f1{transform:translateZ(85px)}.f2{transform:rotateY(90deg) translateZ(85px)}.f3{transform:rotateY(180deg) translateZ(85px)}.f4{transform:rotateY(-90deg) translateZ(85px)}.f5{transform:rotateX(90deg) translateZ(85px)}.f6{transform:rotateX(-90deg) translateZ(85px)}
  .scene{height:400px}
  .pc1{left:-70px}.pc2{right:-70px}.pc3{left:-50px}
  .nchip{display:none}
  .ring-wrap{--rs:.62}.ring-stage{height:290px}
  .bz{transform:rotateX(52deg) rotateZ(-32deg) scale(.78)}
  .stk{transform:rotateX(58deg) rotateZ(-38deg) scale(.82)}
  .phero{padding-top:140px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal,.js [data-split] .w>span,.js h1 .line>span,.js .hero-fade{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- button feedback, ripple, form states ---------- */
.btn,.mini{overflow:hidden;position:relative;-webkit-tap-highlight-color:transparent}
.btn:active{scale:.96}.mini:active{scale:.94}.soc:active{scale:.9}.chip:active span{scale:.94}.burger:active{scale:.88}
.faq-q:hover{background:rgba(10,124,255,.04)}.faq-q:active{background:rgba(10,124,255,.08)}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .6s ease-out forwards}
.mini .ripple{background:rgba(10,124,255,.22)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.btn[disabled]{opacity:.8;cursor:progress}
.btn.loading::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spinb .7s linear infinite}
@keyframes spinb{to{transform:rotate(360deg)}}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{padding:13px 16px;border-radius:14px;font-size:.92rem;line-height:1.5}
.form-status a{font-weight:600;text-decoration:underline}
.form-status.err{background:#fff1f2;color:#a3162d;border:1px solid #ffd0d6}
.form-status.info{background:#eef6ff;color:#0a4fd8;border:1px solid #cfe3ff}
.form-done{display:none;text-align:center;padding:34px 8px}
.form-card.sent form,.form-card.sent .form-head{display:none}
.form-card.sent .form-done{display:grid;gap:14px;justify-items:center}
.form-done h2{margin:6px 0 0;max-width:none;font-size:clamp(1.8rem,3.2vw,2.4rem)}
.form-done p{color:var(--muted);max-width:420px}
.tick{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#0b5fff,#00cfff);display:grid;place-items:center;box-shadow:0 22px 44px -12px rgba(10,100,255,.6);animation:popin .6s cubic-bezier(.2,1.6,.4,1)}
.tick svg{width:44px;height:44px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .3s forwards}
@keyframes popin{from{transform:scale(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ripple{display:none}.tick svg{stroke-dashoffset:0}}

/* ---- contact cards (no form) ---- */
.ccards.wide{grid-template-columns:repeat(2,1fr);gap:26px}
.ccard .val.sec{margin-top:18px}
.ccard .val small{display:block;font:500 .7rem var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.ccard .row .mini{text-decoration:none}
.toast{position:fixed;left:50%;bottom:28px;translate:-50% 30px;opacity:0;z-index:99999;max-width:min(92vw,460px);padding:14px 20px;border-radius:14px;background:#0b1220;color:#fff;font:500 .9rem/1.45 var(--body);box-shadow:0 20px 50px -12px rgba(0,0,0,.5);transition:opacity .3s,translate .3s;pointer-events:none}
.toast.on{opacity:1;translate:-50% 0}
@media (max-width:760px){.ccards.wide{grid-template-columns:1fr}}