:root{
  --bg:#040915;
  --panel: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --text:#e8f2ff;
  --muted:#98b6d8;
  --accent:#00aaff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}
#bg-canvas{ position:fixed; inset:0; z-index:-1;
  background: radial-gradient(1200px 900px at 80% -10%, #003a66 0%, rgba(0,0,0,0) 60%),
              radial-gradient(900px 900px at -10% 110%, #001a33 0%, rgba(0,0,0,0) 60%),
              #030814; }

.container{ width:min(1220px,92vw); margin:0 auto; padding:20px 0 80px; }
nav{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 0 10px; position:sticky; top:0; z-index:20;
  background: linear-gradient(180deg, rgba(5,10,23,0.9), rgba(5,10,23,0));
  backdrop-filter: blur(8px);
}
.brand{ font-weight:800; letter-spacing:.3px; font-family: Orbitron, Inter, sans-serif; }
.links a{ color:var(--text); opacity:.9; text-decoration:none; padding:8px 12px; border-radius:10px; }
.links a:hover{ background:var(--panel); box-shadow:0 0 0 1px var(--border) inset; opacity:1; }

.hero{ padding:42px 0 10px; }
h1{ font-size: clamp(32px, 4.6vw, 60px); margin:6px 0 10px; line-height:1.05; }
h2{ font-size: clamp(24px, 3.2vw, 40px); margin:12px 0 10px; }
.lead{ color:var(--muted); font-size:clamp(16px,2vw,20px); max-width:880px }

.grid{ display:grid; gap:16px; grid-template-columns: repeat(12, minmax(0,1fr)); margin-top:22px; }
.card{ grid-column: span 12; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 120px rgba(0,170,255,.1); backdrop-filter: blur(6px); }

.btn{ display:inline-block; padding:12px 16px; border-radius:12px; color:var(--text); text-decoration:none;
  border:1px solid #124765;
  background: linear-gradient(180deg, rgba(0,170,255,.2), rgba(0,170,255,.08));
  box-shadow: inset 0 0 16px rgba(0,170,255,.25), 0 6px 16px rgba(0,170,255,.15);
  transition: transform .2s ease;
}
.btn:hover{ transform: translateY(-1px); }

.logo{ display:block; max-width:260px; width:52vw; background: rgba(255,255,255,.04); border:1px solid var(--border); padding:14px; border-radius:14px; }

@media (min-width: 860px){
  .span-6{ grid-column: span 6; }
  .span-4{ grid-column: span 4; }
  .span-8{ grid-column: span 8; }
}

.section{ padding: 42px 0; }
.section .split{ display:grid; gap:26px; grid-template-columns: 1fr; align-items:center; }
@media(min-width:980px){ .section .split{ grid-template-columns: 1.15fr 1fr; } }

.figure{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.figure img{ width:100%; height:auto; display:block; }
.caption{ color:#b7d1f0; font-size:14px; margin-top:6px; }

/* Scroll reveal base (GSAP handles opacity/translate) */
.reveal{ will-change: transform, opacity; }
.parallax{ will-change: transform; }
footer{ margin-top: 36px; padding:18px 0; color:#86a8c8; font-size:14px; }

.feature-row{ display:grid; gap:26px; grid-template-columns: 1fr; align-items:center; margin: 28px 0; }
@media(min-width:1000px){ .feature-row{ grid-template-columns: 1.1fr 1fr; } }
.feature-card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; }

.callout{ padding:18px; border:1px dashed #1f5574; border-radius:14px; color:#bfe5ff; background: rgba(0,170,255,.05); }
input, textarea{ background:#061225; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; width:100%; }
form .row{ display:grid; gap:12px; grid-template-columns: 1fr; }
@media(min-width:720px){ form .row{ grid-template-columns: 1fr 1fr; } }
form button{ margin-top:8px; }

.scene::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(60% 100% at 70% -10%, rgba(0,160,255,.10), rgba(0,0,0,0)),
              radial-gradient(70% 100% at -10% 110%, rgba(0,90,170,.18), rgba(0,0,0,0));
  pointer-events:none; z-index:-1;
}
/* Loader overlay */
#loader{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: #050a17; z-index:9999;
}
#loader::before{
  content:""; position:absolute; inset:0; background-image:url('assets/loader_bg.png');
  background-size:cover; background-position:center; opacity:.25;
}
#loader h1{
  position:relative; font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(28px, 5vw, 64px); margin:0; letter-spacing:.6px;
  color:#7fd3ff; text-shadow: 0 0 24px rgba(0,170,255,.6), 0 0 60px rgba(0,120,255,.3);
  animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow{
  from { text-shadow: 0 0 12px rgba(0,170,255,.5), 0 0 24px rgba(0,120,255,.2); }
  to   { text-shadow: 0 0 26px rgba(0,170,255,.9), 0 0 80px rgba(0,120,255,.5); }
}
.hidden{ opacity:0; pointer-events:none; transition: opacity .6s ease; }