/* ====== Base ====== */
*{box-sizing:border-box}
:root{
  --ink:#0b1220;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --panel:#ffffff;
  --blue:#1b66ff;
  --cyan:#00d0ff;
  --accent: linear-gradient(135deg, #04367a, #0a4ca3);


}
html,body{margin:0;padding:0}
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.container.narrow{max-width:900px}
h1,h2,h3{font-family:'Space Grotesk', system-ui, Arial; font-weight:700}
h2{font-size:2.2rem;margin:0 0 16px}
h3{font-size:1.1rem;margin:0 0 8px}
.center{text-align:center}
.big{font-size:1.12rem;color:#2c3340}
a{color:#0a4ca3;text-decoration:none}

/* ====== Nav ====== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border-bottom:1px solid rgba(11,18,32,.06)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-family:'Space Grotesk';font-weight:700;color:#04367a}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(27,102,255,.25)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.65);border:1px solid rgba(11,18,32,.08);color:var(--ink)}
.btn.link{padding:0 2px;background:none}

/* ====== Hero ====== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:120px 0 80px;margin-top:52px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.eyebrow{letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--muted);margin:0 0 8px}
.hero h1{font-size:3.1rem;line-height:1.08;margin:0 0 16px}
.hero .lead{font-size:1.18rem;color:#2c3340;margin-bottom:18px}
.actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-art{position:relative;isolation:isolate}
.network{width:100%;height:auto;filter:drop-shadow(0 12px 40px rgba(0,0,0,.12));animation:float 10s ease-in-out infinite}
.ring{position:absolute;border-radius:50%;border:1.6px solid rgba(255,255,255,.75);inset:auto;mix-blend-mode:overlay;animation:float 16s ease-in-out infinite}
.r1{width:320px;height:320px;left:-30px;top:-10px}
.r2{width:260px;height:260px;right:10px;top:-30px;animation-delay:4s}
.r3{width:220px;height:220px;right:40px;bottom:-30px;animation-delay:2s}
.bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(1200px 800px at 10% -10%, #ddecff 0%, transparent 60%), radial-gradient(1200px 800px at 90% 10%, #d7fbff 0%, transparent 60%), linear-gradient(180deg, #f7f9ff 0%, #eef5ff 100%)}
.blob{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(70px);opacity:.6}
.b1{background:radial-gradient(circle at 30% 30%, #7fb0ff, transparent 60%);top:-130px;left:-130px}
.b2{background:radial-gradient(circle at 70% 40%, #79f6ff, transparent 60%);top:-100px;right:-110px}
.b3{background:radial-gradient(circle at 40% 80%, #b7e5ff, transparent 60%);bottom:-130px;left:20%}
.gridlines{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);background-size:40px 40px;mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent)}
.divider.bottom{position:absolute;left:0;right:0;bottom:-1px;height:80px;background:linear-gradient(to bottom, rgba(0,0,0,0), #f6f8fb 90%)}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* ====== Sections ====== */
.section{padding:96px 0}
.section.muted{background:#fff}
.grid{display:grid;gap:24px}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:20px}
.card{background:var(--panel);border-radius:16px;padding:22px;border:1px solid rgba(11,18,32,.06);box-shadow:0 8px 28px rgba(11,18,32,.06);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(11,18,32,.10);border-color:rgba(27,102,255,.3)}
.card .icon{width:44px;height:44px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.card .icon img{width:24px;height:24px;filter:brightness(0) invert(1)}
.card h3{color:#0a4ca3}
.benefits{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.benefit{padding:22px;border-radius:14px;border:1px solid rgba(11,18,32,.08);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(11,18,32,.06)}

/* ====== Contact ====== */
.contact{background:linear-gradient(180deg,#ffffff 0%, #eef4ff 100%)}
.contact-form{background:#fff;border:1px solid rgba(11,18,32,.08);box-shadow:0 12px 32px rgba(11,18,32,.08);border-radius:16px;padding:24px;margin-top:12px}
.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input, textarea{width:100%;padding:12px 14px;border:1px solid #d8deea;border-radius:10px;font-size:16px; margin-top: 20px;}
textarea{resize:vertical}
.btn.full{width:100%}

/* ====== Footer ====== */
.footer{padding:28px 0;border-top:1px solid rgba(11,18,32,.08);background:#fff;color:#596273;text-align:center}

/* ====== Reveal ====== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1;transform:none}

/* ====== Responsive ====== */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .contact .row{grid-template-columns:1fr}
}