
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=JetBrains+Mono:wght@600&display=swap');
:root{
 --navy:#081126; --navy2:#0e1e42; --blue:#2a5bd7; --electric:#ffcc00; --lime:#d4ff32;
 --paper:#f7f8fb; --ink:#0b1220; --mut:#6b7a90;
 --shadow:0 18px 60px rgba(7,17,38,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Manrope,system-ui,sans-serif;background:#fff;color:var(--ink);overflow-x:hidden}
a{text-decoration:none;color:inherit}
.container{width:min(1240px,92vw);margin:auto}
.mono{font-family:"JetBrains Mono",monospace}
.top{position:relative;background:linear-gradient(90deg,var(--navy),var(--navy2));color:#b8c2d6;font-size:12.5px;letter-spacing:.4px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.top .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nav{position:sticky;top:0;z-index:99;background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid #e9edf5;transition:.3s}
.nav.scrolled{box-shadow:var(--shadow);background:rgba(255,255,255,.96)}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:22px;letter-spacing:-.6px}
.logo-mark{width:42px;height:42px;border-radius:12px;background:conic-gradient(from 0deg,var(--blue),#0b3ab8);display:grid;place-items:center;color:#fff;box-shadow:0 8px 20px rgba(42,91,215,.35);transform:rotate(-6deg)}
.nav-links{display:flex;gap:28px;align-items:center;font-weight:600;font-size:14.5px}
.nav-links a{position:relative;padding:6px 0}
.nav-links a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue);transition:.3s}
.nav-links a:hover:after,.nav-links a.active:after{width:100%}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.2px;border:0;cursor:pointer;overflow:hidden;transition:.25s}
.btn:active{transform:scale(.98)}
.btn-ghost{border:1px solid #d6deea;background:#fff}
.btn-primary{background:var(--ink);color:#fff}
.btn-yellow{background:var(--electric);color:#000;box-shadow:0 10px 24px rgba(255,204,0,.35)}
.btn-yellow:hover{transform:translateY(-2px) rotate(-.5deg)}
.hero{position:relative;background:radial-gradient(1200px 600px at 70% -10%, rgba(42,91,215,.18), transparent), radial-gradient(900px 500px at 0% 0%, rgba(255,204,0,.22), transparent), #fff;padding:28px 0 30px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.h-title{font-size:clamp(38px,5.2vw,66px);line-height:.92;letter-spacing:-2px;font-weight:800}
.h-title .accent{position:relative;display:inline-block}
.h-title .accent span{position:relative;z-index:1;background:linear-gradient(100deg,var(--electric),#ffd84d);padding:0 10px;border-radius:10px;transform:rotate(-1deg);display:inline-block}
.h-sub{color:var(--mut);font-size:18px;margin:18px 0 22px;max-width:56ch}
.hero-card{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transform:rotate(.6deg);background:#000}
.hero-card img{width:100%;height:560px;object-fit:cover;display:block;filter:saturate(1.05)}
.hero-card .float{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-radius:18px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.6)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.kpi{border:1px solid #e6ebf5;border-radius:18px;padding:14px 16px;background:#fff}
.kpi b{font-size:28px;letter-spacing:-1px;display:block}
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7;background:#fff}
.marquee-track{display:inline-flex;animation:marq 28s linear infinite;gap:36px;padding:12px 0}
.marquee-track span{font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-size:12px;color:#8a98b2}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.section{padding:84px 0}
.section-dark{background:linear-gradient(180deg,var(--navy),#0a1430);color:#c9d3e6;border-radius:36px;margin:20px auto;width:min(1280px,96vw)}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card-pro{border:1px solid #e9eef8;border-radius:22px;background:#fff;padding:22px;transition:.35s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}
.card-pro:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 0% 0%, rgba(42,91,215,.08), transparent);opacity:0;transition:.3s}
.card-pro:hover{transform:translateY(-6px) rotate(-.2deg);box-shadow:var(--shadow)}
.card-pro:hover:before{opacity:1}
.icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#eef3ff;color:var(--blue);font-size:20px;margin-bottom:12px}
.list-check{list-style:none;display:grid;gap:10px;margin-top:10px}
.list-check li{display:flex;gap:10px;color:var(--mut);font-size:14.5px}
.list-check li:before{content:"✓";width:22px;height:22px;border-radius:999px;background:#e8f0ff;color:var(--blue);display:grid;place-items:center;font-weight:800;flex:0 0 22px;font-size:12px}
.process{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.process .step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px;color:#d6deec}
.step .num{font-family:"JetBrains Mono";color:var(--electric);font-size:13px}
.testi{display:flex;gap:16px;overflow:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.testi .t{min-width:340px;scroll-snap-align:start;border-radius:20px;background:#fff;border:1px solid #e6ebf5;padding:18px}
.accordion .acc{border-bottom:1px solid #e7ecf5}
.accordion .acc button{width:100%;text-align:left;background:none;border:0;padding:16px 0;font-weight:700;font-size:15px;display:flex;justify-content:space-between;cursor:pointer}
.accordion .acc p{color:var(--mut);padding:0 0 16px;display:none;font-size:14.5px}
.accordion .acc.open p{display:block}
.reveal{opacity:0;transform:translateY(18px);transition:.7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.footer{background:#070d1f;color:#8a95b1;padding:56px 0 18px;margin-top:30px;border-radius:32px 32px 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:22px}
@media(max-width:960px){.hero-grid,.grid-2,.grid-3,.footer-grid,.process{grid-template-columns:1fr}.hero-card img{height:420px}.nav-links{display:none}.kpis{grid-template-columns:1fr 1fr}}
