:root{
  --bg:#0b0b0b; --charcoal:#121212; --panel:#1e1e1e; --panel2:#2c2c2c;
  --text:#e0e0e0; --white:#ffffff; --blue:#00c2ff; --muted:#9aa0a6;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
a{color:var(--blue); text-decoration:none}
a.button{
  display:inline-block; background:var(--blue); color:#000;
  padding:.85rem 1.25rem; border-radius:999px; font-weight:700;
}
a.button:hover{filter:brightness(1.1)}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Header / Nav */
header{position:sticky; top:0; z-index:10;
  background:rgba(11,11,11,.85); backdrop-filter: blur(6px);
  border-bottom:1px solid #1f1f1f;
}
nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
nav .brand{display:flex; align-items:center; gap:12px}
nav img{height:40px}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0}
nav ul a{color:var(--text); opacity:.9}
nav ul a:hover{opacity:1}
.tagline{font-size:12px}

/* Hero */
.hero{
  padding:80px 0;
  background:
    radial-gradient(60% 40% at 40% 10%, rgba(0,194,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.95));
}
h1{font-size:40px; margin:.2em 0; color:var(--white)}
h2{color:var(--white)}
.tag{color:#bdbdbd; margin-bottom:26px}
.badge{
  display:inline-block; background:#0d2a31; color:#7de3ff;
  border:1px solid #123843; border-radius:8px; padding:4px 10px; font-size:12px
}

/* Sections */
section{padding:64px 0}
.section-alt{background:var(--panel2)}

/* Cards */
.grid{display:grid; gap:16px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{
  background:var(--panel); border:1px solid #232323; border-radius:16px;
  padding:18px; min-height:180px
}
.card h3{color:var(--white); margin-top:0}

/* Partners */
.partners{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.chip{
  background:#0f0f10; border:1px solid #2a2a2a; border-radius:999px;
  padding:8px 14px; color:var(--text)
}
/* If you switch to real logos, this helps sizing */
/* .partners img{height:40px; opacity:.95}
.partners img+img{margin-left:18px} */

/* Contact */
.contact-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
input,textarea{
  width:100%; background:#0f0f10; border:1px solid #2a2a2a;
  border-radius:10px; padding:12px; color:var(--text)
}
label{font-weight:600; color:#cfd3d7}
form button{
  background:var(--blue); border:0; color:#000; font-weight:800;
  padding:12px 18px; border-radius:12px; cursor:pointer
}
form button:hover{filter:brightness(1.1)}
.map-wrap{min-height:320px; border-radius:14px; overflow:hidden; border:1px solid #2a2a2a}

/* Footer */
.footer{background:#000; border-top:1px solid #1f1f1f; padding:32px 0; color:var(--muted)}
.foot-flex{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
small, .muted{color:var(--muted)}

/* Responsive */
@media (max-width:800px){
  .hero{padding:48px 0}
  h1{font-size:32px}
  .contact-wrap{grid-template-columns:1fr}
}