/* Fonts: Inter, Orbitron. Neon dark theme with glassmorphism */
:root{
  --bg:#070b12;
  --bg-2:#0a101b;
  --text:#e6f6ff;
  --muted:#9ec7d6;
  --primary:#00e5ff;
  --primary-2:#3b82f6;
  --accent:#7c3aed;
  --glass:rgba(255,255,255,0.06);
  --stroke:rgba(255,255,255,0.12);
  --shadow:0 8px 40px rgba(0,229,255,0.15), 0 2px 8px rgba(124,58,237,0.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background: radial-gradient(1200px 800px at 10% -10%, #0b1530 0%, var(--bg) 60%), linear-gradient(180deg, var(--bg-2), var(--bg));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6; overflow-x:hidden;
}

#nebula{position:fixed; inset:0; z-index:-1; filter:contrast(120%) saturate(110%)}

.site-header{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; border-bottom:1px solid var(--stroke); backdrop-filter:saturate(140%) blur(12px); background:linear-gradient(180deg, rgba(10,16,27,.75), rgba(10,16,27,.45));
}
.brand{display:flex; align-items:center; gap:10px; letter-spacing:2px; color:var(--text); text-decoration:none; font-family: Orbitron, Inter, sans-serif; font-weight:700}
.brand .logo{filter:drop-shadow(0 0 14px rgba(0,229,255,.55))}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:500}
.nav a:hover{color:var(--text)}
.icon-btn{background:transparent; border:1px solid var(--stroke); color:var(--text); border-radius:10px; padding:8px 10px; cursor:pointer}
.icon-btn:hover{border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,229,255,.15)}

.hero{display:grid; grid-template-columns:1.1fr .9fr; align-items:center; min-height:78vh; padding:8vh 8vw; gap:28px}
.hero__content{max-width:780px}
.fx-gradient{font-family: Orbitron, Inter, sans-serif; font-size:clamp(36px, 5.6vw, 72px); line-height:1.05; margin:0 0 14px;
  background: linear-gradient(90deg, var(--primary), #7df9ff, var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 24px rgba(0,229,255,.25);
}
.lede{color:var(--muted); font-size:clamp(16px, 1.3vw, 20px); margin:0 0 22px}
.cta{display:flex; gap:14px; margin:12px 0 28px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; letter-spacing:.2px}
.btn-primary{background:linear-gradient(90deg, var(--primary), var(--accent)); color:#001318; box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{border:1px solid var(--stroke); color:var(--text); background:rgba(255,255,255,0.03)}
.btn-secondary:hover{border-color:var(--primary)}
.btn-outline{border:1px solid var(--primary); color:var(--text)}

.stats{display:flex; gap:18px; flex-wrap:wrap}
.stat{border:1px solid var(--stroke); border-radius:14px; padding:12px 16px; background:var(--glass)}
.stat span{font-weight:800; font-size:20px; display:block}
.stat small{color:var(--muted)}

.hero__visual{display:grid; place-items:center}
.device{position:relative; width:min(56vw, 520px); aspect-ratio:1; filter:drop-shadow(0 24px 80px rgba(0,229,255,.18))}
.ring{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(0,229,255,.25); animation:spin 12s linear infinite}
.ring--outer{box-shadow:inset 0 0 40px rgba(124,58,237,.25)}
.ring--inner{inset:10%; border-color:rgba(124,58,237,.35); animation-duration:18s; animation-direction:reverse}
.core{position:absolute; inset:40%; border-radius:50%; background:radial-gradient(circle at 50% 35%, #7df9ff, var(--primary) 40%, transparent 65%) }
.glow::after{content:""; position:absolute; inset:-18%; border-radius:inherit; background:radial-gradient(circle, rgba(0,229,255,.25), transparent 65%); filter:blur(18px)}
@keyframes spin{to{transform:rotate(360deg)}}

.section{padding:8vh 8vw}
.section--grid .cards, .section--grid .metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.section__header{margin:0 0 18px}
.section__header h2{font-family: Orbitron, Inter, sans-serif; letter-spacing:.5px; margin:0 0 6px}
.section__header p{color:var(--muted); margin:0}

.card, .product, .kpi{border:1px solid var(--stroke); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); padding:18px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.card:hover, .product:hover, .kpi:hover{transform:translateY(-4px); border-color:rgba(0,229,255,.45); box-shadow:var(--shadow)}
.cards .card h3{margin:0 0 8px}
.cards .card p{margin:0; color:var(--muted)}

.products{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.product h3{margin:0 0 8px}
.product p{margin:0 0 10px; color:var(--muted)}
.bullets{margin:0 0 14px; padding-left:18px}

.metrics{grid-template-columns:repeat(4,1fr)}
.kpi{display:flex; flex-direction:column; align-items:flex-start}
.kpi__num{font-size:28px; font-weight:800}
.kpi__label{color:var(--muted)}

.section--cta{display:grid; gap:18px; place-items:center; text-align:center}
.contact{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:860px; width:100%}
.contact label{display:flex; flex-direction:column; gap:6px; text-align:left}
.contact label.wide{grid-column:1/-1}
.contact input, .contact textarea{background:rgba(255,255,255,.02); border:1px solid var(--stroke); border-radius:12px; color:var(--text); padding:12px 14px}
.contact input:focus, .contact textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,229,255,.15)}

.site-footer{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:18px 8vw; border-top:1px solid var(--stroke); background:linear-gradient(180deg, rgba(10,16,27,.45), rgba(10,16,27,.75)); backdrop-filter:saturate(140%) blur(12px)}
.footer__brand{display:flex; align-items:center; gap:10px}
.site-footer nav{display:flex; gap:16px}
.site-footer a{color:var(--muted); text-decoration:none}
.site-footer a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 1024px){
  .hero{grid-template-columns:1fr; text-align:center}
  .hero__content{justify-self:center}
}
@media (max-width: 900px){
  .section--grid .cards, .products, .metrics{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .nav{display:none}
  .contact{grid-template-columns:1fr}
  .section{padding:6vh 6vw}
}