:root{
  --bg:#030405;
  --panel:#071818;
  --card:#15181a;
  --muted:#9fb9ba;
  --accent:#00f3ff;
  --accent-2:#00c8d1;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, Arial, sans-serif;
  background:linear-gradient(180deg,var(--bg),#020304 80%);
  color:#dfeff0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}
a{color:var(--accent);text-decoration:none}
.container{width:min(1180px,94%);margin:0 auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.35));
  border-bottom:1px solid rgba(0,243,255,0.06);
  backdrop-filter: blur(6px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:36px;width:36px;object-fit:contain;border-radius:6px}
.brand-text{font-family:"Orbitron",sans-serif;color:var(--accent);font-weight:700}
.nav{display:flex;gap:22px;align-items:center}
.nav a{color:#cfeff1;opacity:0.95;padding:8px;border-radius:6px;font-weight:600}
.nav a.active{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.btn-outline{border:2px solid var(--accent);padding:8px 14px;border-radius:10px;color:var(--accent);font-weight:700}

/* HERO */
.hero{padding:64px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.hero-left h1{font-family:"Orbitron",sans-serif;font-size:56px;line-height:0.92;color:#f7fbfb}
.hero-left h1 span{color:var(--accent)}
.lead{color:var(--muted);max-width:640px;margin-top:14px;font-size:16px}
.hero-actions{display:flex;gap:12px;margin-top:22px}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#002;padding:12px 18px;border-radius:10px;font-weight:800;display:inline-block}
.btn-ghost{border:2px solid rgba(0,243,255,0.12);padding:10px 16px;border-radius:10px;color:var(--accent);display:inline-block}

/* RIGHT: image container */
.hero-right{
  background:linear-gradient(180deg,#081010,#0b1515);
  padding:18px;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.6);border:1px solid var(--glass);
  display:flex;align-items:center;justify-content:center;height:320px;overflow:hidden;
}
.hero-image{
  max-width:100%;max-height:100%;object-fit:cover;border-radius:10px;display:block;
}

/* SECTION PANELS */
.section{padding:56px 0}
.dark-panel{background:linear-gradient(180deg,#052b2a,#022c2c);padding:56px 0}

/* Titles */
.section-title{font-family:"Orbitron",sans-serif;font-size:34px;text-align:center;margin-bottom:6px}
.section-sub{text-align:center;color:var(--muted);margin-bottom:20px}

/* Cards row */
.cards{display:flex;gap:18px;margin-top:18px}
.card{flex:1;background:var(--card);padding:20px;border-radius:12px;border:1px solid var(--glass)}
.icon{font-size:28px;color:var(--accent);margin-bottom:8px}
.card h3{font-family:"Orbitron",sans-serif;margin-bottom:8px}
.card p{color:var(--muted);font-size:14px}

/* Services grid */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.service{background:#121617;padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.sicon{font-size:22px;color:var(--accent);margin-bottom:10px}
.service h4{font-family:"Orbitron",sans-serif;margin-bottom:8px}
.service p{color:var(--muted);font-size:14px}
.service .learn{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700}

/* CTA block */
.cta-block{background:#151616;padding:26px;border-radius:12px;margin-top:32px;text-align:center;border:1px solid rgba(255,255,255,0.02)}
.cta-block h3{font-family:"Orbitron",sans-serif;margin-bottom:8px}
.cta-block p{color:var(--muted);margin-bottom:14px}

/* Metrics */
.metrics{padding:40px 0}
.metrics-grid{display:flex;gap:18px;justify-content:space-between}
.metric{flex:1;background:#0f1313;padding:20px;border-radius:10px;border:1px solid var(--glass);text-align:center}
.num{font-family:"Orbitron",sans-serif;font-size:30px;color:var(--accent)}
.label{color:var(--muted);margin-top:8px}

/* Contact layout */
.contact-section{padding:56px 0}
.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.contact-panel{background:linear-gradient(180deg,#071818,#0b1b1b);padding:26px;border-radius:12px;border:1px solid var(--glass)}
.contact-panel .lead{color:var(--muted)}
.contact-form .row{display:flex;gap:12px}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:rgba(0,0,0,0.45);color:#dff;}
.contact-form select{appearance:none}
.contact-form textarea{min-height:130px;resize:vertical;margin-top:12px}
.form-actions{display:flex;gap:12px;margin-top:12px}

/* Sidebar info cards */
.sidebar .card{background:#0f1414;padding:16px;border-radius:10px;border:1px solid var(--glass);margin-bottom:12px}
.sidebar .card h4{font-family:"Orbitron",sans-serif;margin-bottom:8px}

/* Footer */
.site-footer{background:linear-gradient(180deg,#022d2c,#0a2322);padding:34px 0;margin-top:28px;border-top:3px solid rgba(0,243,255,0.05)}
.footer-grid{display:grid;grid-template-columns:1fr 120px 120px 280px;gap:24px;align-items:start}
.fbrand .brand{font-family:"Orbitron",sans-serif;color:var(--accent);margin-bottom:8px}
.muted{color:var(--muted);font-size:14px}
.flinks a{display:block;color:#bfeeeff0;margin:8px 0}

/* newsletter small form */
.newsletter-form{display:flex;gap:8px;margin-top:10px}
.newsletter-form input{flex:1;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:#0b0c0c;color:#eaf8f8}
.site-footer .btn-primary{padding:8px 12px;border-radius:8px;font-size:14px}

/* small helpers */
.card h4, .card p, .service p{line-height:1.35}
a:hover{opacity:0.92}
section{scroll-margin-top:84px}

/* Responsive */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr 360px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .nav{display:none}
  .hero-left h1{font-size:40px}
  .hero-grid{grid-template-columns:1fr}
  .hero-right{height:260px;margin-top:18px}
  .service-grid{grid-template-columns:1fr}
  .cards{flex-direction:column}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .header-inner{padding:12px 0}
  .brand{font-size:16px}
  .hero-left h1{font-size:30px}
  .btn-primary,.btn-outline{padding:10px 12px;font-size:14px}
}