:root{
 --bg:#ffffff;
 --bg2:#F8FAFF;
 --card:rgba(2,6,23,.04);
 --card2:rgba(2,6,23,.06);
 --border:rgba(2,6,23,.10);
 --text:#0B1220;
 --muted:rgba(11,18,32,.70);
 --brand1:#7C3AED;
 --brand2:#2563EB;
 --brand3:#22C55E;
 --brand4:#06B6D4;
 --shadow:0 20px 70px rgba(2,6,23,.10);
}
*{box-sizing:border-box}
html,body{
 margin:0;
 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
 color:var(--text);
 background:
   radial-gradient(1200px 800px at 70% 10%, rgba(124,58,237,.12), transparent 55%),
   radial-gradient(900px 600px at 20% 20%, rgba(37,99,235,.10), transparent 55%),
   radial-gradient(900px 700px at 60% 90%, rgba(6,182,212,.08), transparent 60%),
   linear-gradient(180deg,var(--bg),var(--bg2) 70%);
 overflow-x:hidden;
}
body{
 margin:0;
 font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
 color:var(--text);
 background:
   radial-gradient(1200px 800px at 70% 10%, rgba(124,58,237,.12), transparent 55%),
   radial-gradient(900px 600px at 20% 20%, rgba(37,99,235,.10), transparent 55%),
   radial-gradient(900px 700px at 60% 90%, rgba(6,182,212,.08), transparent 60%),
   linear-gradient(180deg,var(--bg),var(--bg2) 70%);
 overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.95}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.nav{
 position:sticky;top:0;z-index:99;
 background:rgba(255,255,255,.75);
 border-bottom:1px solid rgba(2,6,23,.08);
 backdrop-filter: blur(14px);
}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.03em}
.logo{
 width:34px;height:34px;border-radius:12px;
 background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
             linear-gradient(135deg,var(--brand1),var(--brand2));
 box-shadow: 0 10px 30px rgba(124,58,237,.22);
}
.navlinks{display:flex;gap:18px;font-size:14px;color:rgba(11,18,32,.76)}
.navlinks a{padding:10px 10px;border-radius:12px}
.navlinks a:hover{background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:14px;padding:11px 16px;font-weight:700;font-size:14px}
.btn-primary{
 background: linear-gradient(135deg,var(--brand1),var(--brand2));
 color:#fff;border:1px solid rgba(2,6,23,.10);
 box-shadow: 0 16px 45px rgba(37,99,235,.18);
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{
 background:rgba(2,6,23,.04);
 border:1px solid rgba(2,6,23,.12);
}
.btn-secondary:hover{background:rgba(2,6,23,.06)}
.hero{padding:92px 0 72px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.badge{
 display:inline-flex;align-items:center;gap:10px;
 padding:8px 12px;border-radius:999px;
 border:1px solid rgba(2,6,23,.10);
 background:rgba(2,6,23,.04);
 font-size:12px;color:rgba(234,240,255,.88);
}
.badge-dot{width:8px;height:8px;border-radius:99px;background:linear-gradient(135deg,var(--brand3),var(--brand4))}
.h1{margin:18px 0 0;font-size:60px;line-height:1.02;letter-spacing:-.05em}
.sub{margin:18px 0 0;font-size:18px;line-height:1.75;color:var(--muted);max-width:62ch}
.hero-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.trust{margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;color:rgba(11,18,32,.58);font-size:12px}
.kpis{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpi{
 border-radius:20px;padding:14px 14px;
 border:1px solid rgba(2,6,23,.10);
 background:rgba(2,6,23,.03);
}
.kpi strong{font-size:20px}
.kpi span{display:block;margin-top:6px;color:rgba(11,18,32,.62);font-size:12px}
.showcase{
 border-radius:26px;
 border:1px solid rgba(2,6,23,.12);
 background:
   radial-gradient(700px 400px at 20% 0%, rgba(124,58,237,.28), transparent 45%),
   radial-gradient(700px 500px at 80% 40%, rgba(37,99,235,.24), transparent 50%),
   rgba(255,255,255,.04);
 box-shadow: var(--shadow);
 padding:18px;
 position:relative;
 overflow:hidden;
}
.glowline{
 position:absolute;inset:-2px;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
 transform:skewY(-8deg);
 opacity:.35;
}
.panel{
 border-radius:20px;border:1px solid rgba(2,6,23,.10);
 background:rgba(255,255,255,.75);
 padding:16px;
}
.panel-title{font-size:12px;color:rgba(11,18,32,.65)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.mini{
 border-radius:18px;border:1px solid rgba(255,255,255,.10);
 background:rgba(2,6,23,.03);
 padding:14px;
}
.mini .t{font-size:12px;color:rgba(11,18,32,.62)}
.mini .v{margin-top:6px;font-size:18px;font-weight:800}
.progress{
 margin-top:10px;height:8px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden
}
.progress > div{height:100%;width:72%;border-radius:99px;background:linear-gradient(90deg,var(--brand4),var(--brand2))}
.section{padding:86px 0}
.h2{font-size:42px;letter-spacing:-.04em;margin:0}
.p{margin-top:14px;max-width:78ch;line-height:1.8;color:rgba(11,18,32,.66)}
.grid3{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.h1{font-size:44px}.grid3{grid-template-columns:1fr}.kpis{grid-template-columns:1fr}}
.card{
 border-radius:22px;
 border:1px solid rgba(2,6,23,.10);
 background:rgba(2,6,23,.03);
 padding:18px;
 transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);background:rgba(2,6,23,.05)}
.icon{
 width:42px;height:42px;border-radius:16px;
 background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 60%),
             linear-gradient(135deg,var(--brand1),var(--brand2));
 display:flex;align-items:center;justify-content:center;font-weight:900;
}
.card h3{margin:14px 0 0;font-size:18px;letter-spacing:-.02em}
.card p{margin:10px 0 0;color:rgba(11,18,32,.66);line-height:1.7;font-size:14px}
.list{margin:14px 0 0;padding:0;list-style:none}
.list li{display:flex;gap:10px;margin:8px 0;color:rgba(11,18,32,.66);font-size:14px}
.check{color:#34D399}
.pills{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.pill{
 border-radius:999px;padding:6px 10px;
 background:rgba(2,6,23,.04);
 border:1px solid rgba(2,6,23,.10);
 font-size:12px;color:rgba(11,18,32,.65)
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
@media(max-width:980px){.split{grid-template-columns:1fr}}
.timeline{margin-top:22px;display:grid;gap:12px}
.step{
 border-radius:22px;border:1px solid rgba(2,6,23,.10);
 background:rgba(2,6,23,.03);padding:18px;
 display:flex;gap:14px;align-items:flex-start
}
.step b{display:block}
.num{
 width:34px;height:34px;border-radius:14px;
 background:linear-gradient(135deg,var(--brand4),var(--brand2));
 display:flex;align-items:center;justify-content:center;
 font-weight:900;
}
.cta{padding:76px 0}
.cta-box{
 border-radius:28px;
 border:1px solid rgba(2,6,23,.12);
 background:
  radial-gradient(800px 500px at 10% 10%, rgba(124,58,237,.28), transparent 55%),
  radial-gradient(800px 500px at 90% 30%, rgba(37,99,235,.22), transparent 60%),
  rgba(255,255,255,.04);
 box-shadow: var(--shadow);
 padding:34px;
}
.cta-box h3{margin:0;font-size:34px;letter-spacing:-.03em}
.cta-box p{margin:12px 0 0;color:rgba(11,18,32,.66);line-height:1.8;max-width:76ch}
.footer{border-top:1px solid rgba(255,255,255,.10);padding:44px 0;color:rgba(11,18,32,.62)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:22px}
.footer a{color:rgba(11,18,32,.65)}
.footer a:hover{color:#fff}
.small{font-size:12px;color:rgba(11,18,32,.56);line-height:1.8}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.10);margin:26px 0}


/* subtle motion like Vercel */
.hero-blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;filter:blur(40px);opacity:.85;mix-blend-mode:multiply;border-radius:999px;transform:translate3d(0,0,0)}
.blob.one{width:520px;height:520px;left:-120px;top:-140px;background:radial-gradient(circle at 30% 30%, rgba(124,58,237,.45), rgba(124,58,237,0));animation:float1 10s ease-in-out infinite}
.blob.two{width:520px;height:520px;right:-160px;top:-120px;background:radial-gradient(circle at 30% 30%, rgba(37,99,235,.40), rgba(37,99,235,0));animation:float2 12s ease-in-out infinite}
.blob.three{width:560px;height:560px;left:20%;bottom:-220px;background:radial-gradient(circle at 30% 30%, rgba(6,182,212,.35), rgba(6,182,212,0));animation:float3 14s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.05)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,25px) scale(1.06)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(0,-40px) scale(1.04)}}
.hero{overflow:hidden}