:root{
  --bg:#0f172a;
  --card:#0b1220;
  --accent:#0ea5e9; /* brand blue */
  --muted:#94a3b8;
  --white:#ffffff;
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--white);min-height:100vh;display:flex;flex-direction:column;}
.header{
  position:sticky;top:0;background:rgba(6,10,20,0.6);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,0.04);
  z-index:1000;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:44px;display:block}
.nav{display:flex;gap:14px}
.nav a{color:var(--white);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600}
.nav a:hover{background:rgba(255,255,255,0.04);color:var(--accent)}

/* Hero */
.hero{background:var(--accent);color:#022; padding:64px 20px;text-align:center}
.hero h1{margin:0;font-size:32px}
.hero p{margin:12px auto 0;max-width:900px;color:#063849}

/* Main card area */
.container{max-width:1100px;margin:28px auto;padding:0 20px;flex:1}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);border-radius:var(--radius);padding:22px;margin-bottom:24px}

/* Why grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feature{background:rgba(255,255,255,0.03);padding:18px;border-radius:10px;min-height:140px;display:flex;flex-direction:column;gap:8px}
.feature .icon{font-size:28px;color:var(--accent)}

/* Contact form */
.contact-form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
input,textarea{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(0,0,0,0.25);color:var(--white)}
button{background:linear-gradient(90deg,var(--accent),#7c3aed);border:none;padding:12px;border-radius:8px;color:#022;font-weight:700;cursor:pointer}

/* Footer */
.site-footer{background:#071022;color:var(--white);padding:28px 20px;margin-top:40px}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.footer-logo img{height:84px}
.footer-contact{width:100%;max-width:760px;display:flex;gap:20px;align-items:flex-start}
.footer-contact .left{flex:1;text-align:left}
.footer-contact p{margin:4px 0;font-size:14px;color:var(--white)}
.footer-contact a{color:var(--white);text-decoration:none}
.footer-social{text-align:center}
.footer-social a{color:var(--white);margin:0 8px;font-size:20px;display:inline-block;transition:color .25s}
.footer-social a:hover{color:var(--accent)}

/* icons in contact */
.ci{color:var(--accent);margin-right:8px}

/* Responsive tweaks */
@media(max-width:740px){
  .footer-contact{flex-direction:column;align-items:center}
  .footer-contact .left{text-align:center}
  .brand img{height:36px}
  .hero{padding:40px 14px}
  .hero h1{font-size:22px}
}