/* Howling Vanguard minimal theme */
:root { --bg:#0b0c10; --panel:#121317; --text:#e5e7eb; --muted:#a1a1aa; --brand:#7c3aed; --brand-2:#22d3ee; --border:#23242a; }
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block} a{color:var(--text);text-decoration:none}
.section{padding:72px 0} .section.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.container{width:min(1120px,90%);margin:0 auto} .row{display:flex;gap:16px} .row.center{align-items:center} .row.between{justify-content:space-between} .row.gap-sm{gap:8px}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 10px 30px rgba(0,0,0,.25)}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid var(--border);transition:transform .08s ease,background .2s ease;font-weight:600}
.btn:hover{transform:translateY(-1px)} .btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#0b0c10;border:none}
.btn.secondary{background:transparent;border-color:var(--brand);color:var(--text)} .btn.ghost{background:transparent} .btn.block{width:100%;text-align:center}
.tiny{color:var(--muted);font-size:.85rem} .lead{color:#d1d5db;font-size:1.15rem;line-height:1.6}
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,12,16,.7);border-bottom:1px solid var(--border);backdrop-filter:blur(10px)}
.brand{gap:10px} .logo{width:28px;height:28px} .brand-text{font-weight:700;letter-spacing:.2px}
.site-nav{display:flex;gap:14px;align-items:center}
.hero.has-bg{position:relative;overflow:hidden;min-height:96vh;padding:160px 0 120px;display:flex;align-items:center}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block;filter:saturate(1.05) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(9,9,11,.68),rgba(9,9,11,.68))}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:1.12;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.cta{gap:12px;margin:18px 0} .cards .card h3{margin-top:0}
.checklist{list-style:none;padding-left:0;margin:0} .checklist li::before{content:"✓";margin-right:10px;color:var(--brand-2)}
.bullets{line-height:1.8}
.steps{counter-reset:step;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.steps li{counter-increment:step;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
.steps li::before{content:counter(step) ".";margin-right:8px;color:var(--brand-2);font-weight:700}
.site-footer{border-top:1px solid var(--border);padding:22px 0;background:rgba(255,255,255,.02)}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.site-nav{display:none}.site-nav.open{display:flex;flex-direction:column;align-items:flex-start;gap:10px}}

.popular-wins { max-width: 320px; padding: 20px; }
.popular-wins ul { padding-left: 18px; }
.popular-wins li { margin-bottom: 6px; line-height: 1.4; }

/* Adjust hero sidebar card positioning without changing layout */
.popular-wins{max-width:340px;padding:20px;justify-self:end}
@media (max-width:900px){
  .popular-wins{justify-self:stretch}
}


/* interactive service cards */
.cards .card{transition:transform .2s ease, box-shadow .2s ease;}
.cards .card:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 14px 34px rgba(0,0,0,.18);}
.cards .card .example{opacity:.85; font-size:.95rem}


/* translucent Popular Wins panel */
.hero{position:relative;}
.wins-overlay{
  position:absolute; right:2rem; top:2rem; max-width:420px;
  background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.15);
  border-radius:16px; padding:16px 18px; color:#fff;
  backdrop-filter: blur(2px);
}
.wins-overlay h3{margin:0 0 .5rem 0; font-size:1.1rem;}
.wins-overlay ul{margin:0; padding-left:1.2rem}
.wins-overlay li{margin:.35rem 0; }
@media(max-width:900px){ .wins-overlay{position:static; margin-top:1rem;} }


/* ===== Fixes: Services hover pop, hero overlay, and spacing ===== */

/* POP on hover — target both article and .card to be safe */
.cards article,
.cards .card {
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.cards article:hover,
.cards .card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}

/* Hero overlay tweaks */
.hero { position: relative; }
.wins-overlay{
  position: absolute;
  right: 2rem;
  top: 2rem;
  max-width: 460px;
  z-index: 3;
  background: rgba(0,0,0,.40);           /* a bit darker for legibility */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 16px 18px;
  color: #eaf2ff;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.wins-overlay h3{ margin: 0 0 .5rem 0; font-size: 1.1rem; }
.wins-overlay ul{ margin: 0; padding-left: 1.25rem; }
.wins-overlay li{ margin: .38rem 0;  }

/* Ensure overlay doesn't clash on mobile */
@media (max-width: 900px) {
  .wins-overlay { position: static; margin-top: 1rem; }
}