:root{
  --bg:#060B18; --bg2:#080E1F; --panel:#0C1326; --panel2:#111A31;
  --line:rgba(140,170,255,.12); --line2:rgba(140,170,255,.22);
  --accent:#3B82F6; --accent2:#2563EB; --light:#A5E6FF; --glow:#1E5BE6;
  --ink:#EAF1FF; --muted:#8A99BD; --faint:#54638A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.disp{font-family:'Wix Madefor Display','Manrope',sans-serif;letter-spacing:-.04em;line-height:1.03}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* ambient */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.b1{width:720px;height:720px;top:-280px;left:50%;transform:translateX(-30%);background:radial-gradient(circle,var(--glow),transparent 62%)}
.b2{width:560px;height:560px;top:620px;left:-180px;background:radial-gradient(circle,#13306e,transparent 65%);opacity:.6}
.b3{width:500px;height:500px;top:1500px;right:-160px;background:radial-gradient(circle,#1a2f66,transparent 65%);opacity:.5}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.content{position:relative;z-index:2}

/* nav */
header{position:sticky;top:0;z-index:40;padding:18px 0;
  background:linear-gradient(to bottom,rgba(6,11,24,.85),rgba(6,11,24,.4) 70%,transparent);backdrop-filter:blur(10px)}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font-family:'Wix Madefor Display';font-weight:700;font-size:1.15rem;letter-spacing:-.03em}
.mark{width:28px;height:28px;border-radius:8px;position:relative;background:linear-gradient(145deg,#4f8bff,#1e4fd1);box-shadow:0 0 18px rgba(59,130,246,.5);flex:none}
.mark::after{content:"";position:absolute;inset:0;background:url("assets/favicon.svg") center/150% no-repeat}
.navlinks{display:flex;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);padding:5px;border-radius:999px}
.navlinks a{font-size:.86rem;color:var(--muted);padding:8px 15px;border-radius:999px;transition:.2s;white-space:nowrap}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{background:rgba(255,255,255,.08);color:var(--ink)}
.navcta{display:flex;align-items:center;gap:10px}
.lang{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{background:none;border:none;color:var(--muted);font:600 .8rem 'Manrope';padding:8px 12px;cursor:pointer;transition:.2s}
.lang button.on{background:rgba(255,255,255,.1);color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:42px;height:42px;cursor:pointer;color:var(--ink)}

/* arrow button (fixed) */
.btn{position:relative;display:inline-flex;align-items:center;background:#fff;color:#0a1330;
  font-weight:700;font-size:.9rem;border:none;cursor:pointer;border-radius:11px;height:46px;
  padding-right:50px;overflow:hidden;text-decoration:none}
.btn .t{padding-left:20px;position:relative;z-index:2;transition:transform .35s ease,color .35s ease;white-space:nowrap}
.btn .sq{position:absolute;right:4px;top:4px;height:38px;width:38px;border-radius:8px;
  background:var(--accent);z-index:1;transition:width .42s cubic-bezier(.65,0,.35,1)}
.btn .sq svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);stroke:#fff}
.btn:hover .sq{width:calc(100% - 8px)}
.btn:hover .t{color:#fff;transform:translateX(-3px)}
.btn.sm{height:40px;padding-right:44px}
.btn.sm .sq{height:32px;width:32px}
.btn.sm .sq svg{right:9px}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--ink);padding:0 20px}
.btn.ghost .t{padding-left:0;color:var(--ink)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}

/* hero */
.hero{position:relative;padding:70px 0 40px;min-height:86vh}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--light);
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);padding:6px 14px;border-radius:999px;margin-bottom:26px}
.badge b{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
h1{font-size:clamp(2.6rem,6.2vw,5.1rem);font-weight:800;max-width:14ch}
h1 .mut,.h2 .mut,.ph .mut{color:var(--muted)}
.lead{margin-top:26px;color:var(--muted);font-size:1.06rem;max-width:46ch;line-height:1.65}
.heroactions{margin-top:36px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.globe{position:absolute;right:-60px;top:40px;width:620px;height:620px;pointer-events:none}
.globe canvas{width:100%;height:100%;filter:drop-shadow(0 0 60px rgba(37,99,235,.35))}
.heroglow{position:absolute;right:120px;top:210px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 60%);filter:blur(30px);z-index:-1}
.marq{margin-top:54px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);padding:18px 26px;display:flex;align-items:center;gap:30px;max-width:580px;flex-wrap:wrap}
.marq span{color:var(--faint);font-size:.74rem;letter-spacing:.04em;text-transform:uppercase}
.marq .co{color:var(--muted);font-weight:700;font-size:.95rem;font-family:'Wix Madefor Display';opacity:.85}

/* sections */
section{position:relative;padding:60px 0}
.htag{color:var(--light);font-size:.82rem;font-weight:600;margin-bottom:14px;letter-spacing:.02em}
.h2{font-size:clamp(2rem,3.8vw,3.1rem);font-weight:800}
.sub{color:var(--muted);margin-top:16px;max-width:52ch;font-size:1.02rem;line-height:1.6}

/* stats bento */
.stats{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-top:40px}
.stat{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:30px 28px;position:relative;overflow:hidden}
.stat.hero-cell{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(120% 90% at 0% 0%,rgba(59,130,246,.18),transparent 55%),linear-gradient(160deg,var(--panel2),var(--bg2));border:1px solid transparent;background-clip:padding-box}
.stat.hero-cell::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(150deg,rgba(100,160,255,.6),transparent 40%,rgba(37,99,235,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.stat .big{font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800;letter-spacing:-.05em;line-height:1;
  background:linear-gradient(180deg,#fff,var(--light));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(59,130,246,.35))}
.stat .mid{font-size:clamp(2rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.05em;color:#fff}
.stat .cap{color:var(--muted);font-size:.9rem;margin-top:12px}
.stat .cap b{color:var(--ink);font-weight:600}
.spark{display:flex;align-items:flex-end;gap:4px;height:48px;margin-top:20px}
.spark i{flex:1;background:linear-gradient(180deg,var(--accent),rgba(37,99,235,.25));border-radius:3px 3px 0 0;opacity:.85}

/* features bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:200px;gap:16px;margin-top:40px}
.cell{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:26px;position:relative;overflow:hidden;transition:.3s}
.cell:hover{border-color:var(--line2);transform:translateY(-3px)}
.cell.w2{grid-column:span 2}.cell.h2c{grid-row:span 2}
.cell .ic{width:42px;height:42px;border-radius:11px;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.25);display:grid;place-items:center;margin-bottom:18px}
.cell h3{font-size:1.22rem;font-weight:700;margin-bottom:8px}
.cell p{color:var(--muted);font-size:.92rem;line-height:1.55}
.cell.feat{background:radial-gradient(110% 80% at 100% 0%,rgba(37,99,235,.2),transparent 50%),linear-gradient(160deg,var(--panel2),var(--bg2))}
.cell .glowdot{position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%);filter:blur(20px)}
.grid-render{position:absolute;inset:auto 20px 20px auto;width:130px;height:90px;opacity:.5}

/* build / process */
.build{background:radial-gradient(90% 120% at 50% -10%,rgba(37,99,235,.22),transparent 55%);border-radius:30px;margin:8px;border:1px solid var(--line);padding:70px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.step .no{font-family:'Manrope';font-weight:800;font-size:1rem;color:var(--accent);width:34px;height:34px;border-radius:9px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);display:grid;place-items:center;margin-bottom:18px}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.92rem;line-height:1.55}

/* cta */
.ctaband{text-align:center;padding:90px 0 70px}
.ctaband h2{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:800}
.ctaband .sub{margin:18px auto 34px}
.ctaband .heroactions{justify-content:center}

/* ---- subpage primitives ---- */
.page-hero{padding:64px 0 30px;position:relative}
.crumbs{color:var(--faint);font-size:.82rem;margin-bottom:20px}
.crumbs a:hover{color:var(--muted)}
.ph{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;max-width:16ch}
.prose{max-width:62ch;margin-top:8px}
.prose p{color:var(--muted);font-size:1.02rem;line-height:1.7;margin:18px 0}
.prose h3{font-size:1.4rem;margin:40px 0 10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.panel{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:28px}
.panel h3{font-size:1.15rem;margin-bottom:10px}
.panel p{color:var(--muted);font-size:.94rem;line-height:1.6}
.rows{margin-top:24px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.row{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:22px 26px;border-top:1px solid var(--line)}
.row:first-child{border-top:none}
.row .k{color:var(--ink);font-weight:600}
.row .v{color:var(--muted);font-size:.95rem;line-height:1.6}
.code{background:#0a1124;border:1px solid var(--line);border-radius:14px;padding:20px 22px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.86rem;color:#b9c7ec;overflow-x:auto;margin-top:20px;line-height:1.7}
.code .c{color:var(--faint)}.code .b{color:#7fb0ff}.code .s{color:#8ad6a0}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.plan{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:20px;padding:30px 26px}
.plan.feat{border-color:rgba(59,130,246,.4);background:radial-gradient(120% 80% at 50% 0,rgba(37,99,235,.16),transparent 55%),linear-gradient(160deg,var(--panel2),var(--bg2))}
.plan h3{font-size:1.3rem}
.plan .price{font-weight:800;font-size:2.2rem;letter-spacing:-.04em;margin:14px 0 4px}
.plan .price span{font-size:.9rem;color:var(--faint);font-weight:400}
.plan ul{list-style:none;margin:20px 0 26px}
.plan li{color:var(--muted);font-size:.92rem;padding:7px 0;border-top:1px solid var(--line);display:flex;gap:10px}
.plan li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;border-radius:5px;background:rgba(59,130,246,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ec1ff' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
.teamgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.member{background:linear-gradient(160deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:18px;padding:24px;text-align:center}
.member .av{width:62px;height:62px;border-radius:50%;margin:0 auto 14px;background:linear-gradient(145deg,#2a4b94,#13306e);border:1px solid var(--line2)}
.member h4{font-size:1rem}.member p{color:var(--faint);font-size:.82rem;margin-top:3px}

/* 404 */
.nf{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.nf .code404{font-family:'Manrope';font-weight:800;font-size:clamp(5rem,16vw,11rem);letter-spacing:-.06em;line-height:1;
  background:linear-gradient(180deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 40px rgba(59,130,246,.4))}
.nf h1{font-size:1.9rem;margin:10px 0 12px;max-width:none}
.nf p{color:var(--muted);max-width:40ch;margin-bottom:30px}

/* footer */
footer{border-top:1px solid var(--line);padding:50px 0 40px;margin-top:30px}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.fcol{min-width:120px}
.fcol.about{max-width:260px}
.fcol h4{font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
.fcol a{display:block;color:var(--muted);font-size:.92rem;padding:5px 0;transition:.2s}
.fcol a:hover{color:var(--ink)}
.fbot{display:flex;justify-content:space-between;color:var(--faint);font-size:.84rem;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap;gap:12px}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.show{opacity:1;transform:none}

@media(max-width:920px){
  .globe{display:none}
  .stats,.bento,.steps,.pricing,.split,.teamgrid{grid-template-columns:1fr}
  .stat.hero-cell{grid-row:auto}.cell.w2,.cell.h2c{grid-column:auto;grid-row:auto}
  .bento{grid-auto-rows:auto}
  .navlinks,.navcta .btn{display:none}
  .burger{display:grid;place-items:center}
  .row{grid-template-columns:1fr;gap:6px}
  nav.open .navlinks{display:flex;position:absolute;top:70px;left:16px;right:16px;flex-direction:column;background:var(--panel2);padding:10px;border-radius:16px;border:1px solid var(--line2)}
}
