/* Modern compact CSS for a professional digital marketing & web solutions site */
/* Font stack */
:root{
  --bg:#0b1220; --card:#071021; --muted:#9aa4b2; --accent:#06b6d4; --glass: rgba(255,255,255,0.04);
  --radius:14px; --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #071021 0%, #06121a 100%); color:#e6eef6; -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
.container{max-width:var(--maxw); margin:36px auto; padding:28px;}

/* Header */
.header{display:flex;align-items:center;gap:18px; padding:18px; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow: 0 6px 28px rgba(2,6,23,0.6); backdrop-filter: blur(6px);}
.brand{display:flex;align-items:center;gap:14px}
.brand svg{width:150px;height:auto}
.nav{margin-left:auto; display:flex; gap:14px; align-items:center}
a.navlink{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; transition: all 220ms ease;}
a.navlink:hover{color:#fff; background:var(--glass); transform:translateY(-2px)}

/* Hero */
.hero{display:flex; gap:28px; align-items:center; padding:28px; margin-top:18px}
.hero-left{flex:1}
.h1{font-size:34px; font-weight:700; margin:0 0 12px; color:#ffffff}
.lead{color:var(--muted); margin-bottom:18px}
.cta{display:inline-block; background:linear-gradient(90deg,var(--accent), #3b82f6); color:#061021; padding:12px 18px; border-radius:12px; font-weight:700; text-decoration:none; transition: transform .18s ease;}
.cta:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(6,182,212,0.12)}

/* Cards */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; min-height:120px; box-shadow: 0 8px 22px rgba(3,7,18,0.6);}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}

/* Info band */
.info-band{display:flex; gap:18px; align-items:center; justify-content:space-between; padding:14px; margin-top:20px; border-radius:10px; background:rgba(255,255,255,0.02)}

/* Footer */
.footer{margin-top:30px; padding:22px; text-align:center; color:var(--muted); font-size:14px}

/* Contact form */
.form{background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; box-shadow: 0 8px 22px rgba(3,7,18,0.6);}
.input, textarea{width:100%; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit; margin-bottom:10px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent); color:#061021; font-weight:700; text-decoration:none}

/* Privacy box and legal */
.legal{font-size:13px; color:var(--muted); line-height:1.6; background:rgba(255,255,255,0.02); padding:14px; border-radius:10px}

/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(1,1fr)}
  .hero{flex-direction:column}
  .nav{display:none}
  .brand svg{width:120px}
}

/* subtle animations */
.fade-in{animation:fadeIn .8s ease both}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* little utility */
.kv{display:flex; gap:10px; align-items:center}
.badge{padding:6px 8px; border-radius:8px; background:rgba(255,255,255,0.02); color:var(--muted); font-weight:600}