/* CP Tech Services - simple, sleek responsive theme */
:root{
  --bg:#0f1221;
  --card:#151935;
  --soft:#0b0e1d;
  --text:#e7eaf6;
  --muted:#a7b0d4;
  --accent:#ff3b2f;
  --accent-2:#ff725e;
  --ring: rgba(255, 59, 47, .35);
  --max:1200px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 80% -10%, #1a2040 0%, var(--bg) 50%), var(--bg);color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.55}
a{color:var(--text);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin-inline:auto;padding:clamp(16px, 3vw, 28px)}
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,12,28,.75);backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand img{width:40px;height:40px;border-radius:50%;box-shadow:0 6px 20px rgba(255,59,47,.35)}
.brand .name{letter-spacing:.4px}
.menu{display:flex;gap:24px;align-items:center}
.menu a{color:var(--muted);font-weight:600}
.menu a.active, .menu a:hover{color:white}
.btn{
  display:inline-flex;align-items:center;justify-content:center; gap:10px;
  padding:12px 18px;border-radius:14px;font-weight:700;
  border:1px solid rgba(255,255,255,.14); transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.btn.primary{border-color:transparent;background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:white; box-shadow:0 12px 30px var(--ring)}
.btn:hover{transform:translateY(-1px)}
.hero{padding: clamp(36px, 6vw, 70px) 0}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,40px);align-items:center}
.badges{display:flex;flex-wrap:wrap; gap:10px; margin-top:18px}
.badge{padding:8px 12px;border-radius:999px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12); font-weight:600}
.badge.accent{background:rgba(255, 59, 47, .2); border-color: rgba(255, 59, 47, .35)}
.h1{font-size: clamp(28px, 4.3vw, 54px);line-height:1.1;margin:0 0 14px;font-weight:900;letter-spacing:.3px}
.lead{color:var(--muted);font-size:clamp(15px,1.3vw,18px);max-width:60ch}
.cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.grid{display:grid; gap:22px}
.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid rgba(255,255,255,.08); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow)}
.card h3{margin:6px 0 8px;font-size:20px}
.card p{color:var(--muted)}
.kicker{color:var(--accent-2); font-weight:800; letter-spacing:.2em; font-size:12px; text-transform:uppercase}
.section{padding: clamp(26px, 5vw, 70px) 0}
.section .head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}
.section .head h2{margin:0;font-size: clamp(22px, 3vw, 34px)}
.list{display:grid;gap:12px}
.list li{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:14px;border-radius:12px}
.cta-bar{display:flex;align-items:center; justify-content:space-between; gap:18px;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); padding:18px 22px;border-radius: var(--radius)}
.footer{border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}
.footer .cols{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:22px}
.small{font-size:14px; color:var(--muted)}
hr{border:0;border-top:1px solid rgba(255,255,255,.08); margin:26px 0}
/* Services list page tweaks */
.services .card{padding:22px}
.services h3{margin-top:0}
/* Contact */
.contact .info{display:grid;grid-template-columns:1fr 1fr; gap:22px}
form{display:grid; gap:12px}
input, textarea{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#fff; padding:12px 14px; border-radius:12px; font-size:16px}
textarea{min-height:140px; resize:vertical}
label{font-weight:600}
.success, .error{padding:12px 14px; border-radius:12px; display:none}
.success{background:rgba(60, 179, 113,.18); border:1px solid rgba(60, 179, 113,.45)}
.error{background:rgba(255, 59, 47,.18); border:1px solid rgba(255, 59, 47,.45)}
/* Responsive */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .footer .cols{grid-template-columns: 1fr 1fr}
  .contact .info{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .cards{grid-template-columns:1fr}
  .menu{display:none}
  .menu.open{display:flex; flex-direction:column; align-items:flex-start; padding:14px 0}
  .nav .row{flex-wrap:wrap}
}