/* =====================================
   Byte Tek – Non‑Profit Services Styles
   Scope: page‑level only (no nav/footer)
   Palette: deep blue + orange
   ===================================== */
:root{
  --primary:#000777;
  --primary-dark:#000555;
  --accent:#ff7a00;
  --text:#1e293b;
  --muted:#64748b;
  --bg:#ffffff;
  --bg-light:#f8fafc;
  --border:#e2e8f0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  line-height:1.6;
  background:var(--bg);
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:5rem 0}

/* ================= HERO ================= */
.hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 25%,rgba(255,122,0,.12)0%,transparent 45%),radial-gradient(circle at 85% 75%,rgba(255,255,255,.08)0%,transparent 55%);pointer-events:none}
.hero .container{padding:6rem 0}
.hero-content{position:relative;z-index:1;max-width:900px}

.breadcrumb {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--accent, #ff7a00);
    text-decoration: none;
}

.subtitle{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;margin-bottom:.6rem}
.hero h1{font-size:3rem;line-height:1.1;font-weight:800;margin:0 0 .75rem}
.hero p{font-size:1.125rem;color:rgba(255,255,255,.95);margin:0 0 1.25rem;max-width:720px}

.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.25rem}
.btn-primary,.btn-secondary,.btn-white,.btn-outline{padding:1rem 1.5rem;border-radius:12px;font-weight:800;text-decoration:none;display:inline-block;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn-primary{background:var(--accent);color:#fff;border:2px solid var(--accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,122,0,.28)}
.btn-secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45)}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Hero stat cards */
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2rem;max-width:900px}
.hero-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);border-radius:14px;padding:1.1rem;text-align:center}
.stat-number{font-size:2rem;font-weight:800;color:var(--accent);display:block}
.stat-label{font-size:.95rem;color:rgba(255,255,255,.9)}
.hero-footnote{color:rgba(255,255,255,.85);margin-top:.6rem}

/* ============ SECTION HEADER ============ */
.section-header{text-align:center;max-width:800px;margin:0 auto 2.25rem}
.section-header .subtitle{color:var(--accent)}
.section-header h2{font-size:2.4rem;color:var(--primary);margin:.25rem 0 1rem}
.section-header p{color:var(--muted);font-size:1.05rem}

/* ============== WHO WE HELP ============== */
.value{background:var(--bg)}
.pill-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pill{background:#fff;border:1px solid var(--border);border-radius:999px;padding:.5rem .9rem;color:#475569;font-weight:600}

/* ============= SERVICES GRID ============= */
.service-categories{background:#fff}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem}
.service-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.5rem;box-shadow:0 10px 26px rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(0,0,0,.10);border-color:rgba(0,7,119,.3)}
.service-icon{width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#e66d00);display:grid;place-items:center;color:#fff;font-size:1.4rem;margin-bottom:.9rem}
.service-card h3{color:var(--primary);margin:.25rem 0 .5rem}
.service-card p{color:var(--muted)}
.service-features{list-style:none;margin:.8rem 0 0;padding:0}
.service-features li{color:#475569;margin:.45rem 0;padding-left:1.35rem;position:relative}
.service-features li::before{content:'✓';position:absolute;left:.2rem;top:0;color:var(--accent);font-weight:900}

/* ================ IMPACT ================ */
.impact{background:var(--bg-light)}
.impact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem}
.impact-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.5rem;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease}
.impact-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.08)}
.impact-metric{font-size:2rem;font-weight:900;color:var(--primary)}
.impact-label{color:var(--muted)}

/* ============== ECOSYSTEM ============== */
.ecosystem{background:#fff}
.logo-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.logo-pill{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.7rem 1rem;font-weight:700;color:#334155}

/* =============== CASES =============== */
.cases{background:var(--bg-light)}
.cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.25rem}
.case-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.06);transition:transform .25s ease,box-shadow .25s ease}
.case-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.1)}
.case-head{display:flex;gap:.8rem;align-items:center;padding:1.25rem;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(0,7,119,.04),rgba(0,7,119,.02))}
.case-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#e66d00);display:grid;place-items:center;color:#fff;font-size:1.2rem;flex-shrink:0}
.case-type{font-weight:800;color:var(--primary)}
.case-size{color:#64748b;font-size:.9rem}
.case-body{padding:1.25rem}
.case-label{font-weight:800;color:#0f172a;margin:.25rem 0}
.case-result{display:flex;align-items:baseline;gap:.5rem;margin-top:.25rem}
.result-value{font-size:1.5rem;font-weight:900;color:var(--primary)}
.result-text{color:var(--muted)}

/* ================= CTA ================= */
.cta-section{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;text-align:center}
.cta-section h2{font-size:2.2rem;margin:0 0 .6rem}
.cta-section p{max-width:680px;margin:.5rem auto 1.5rem;color:rgba(255,255,255,.92)}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-white{background:#fff;color:var(--primary);padding:1rem 1.5rem;border-radius:12px;text-decoration:none;font-weight:800;border:2px solid #fff}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,255,255,.25)}
.btn-outline{background:transparent;color:#fff;border:2px solid #fff;padding:1rem 1.5rem;border-radius:12px;text-decoration:none;font-weight:800}
.btn-outline:hover{background:#fff;color:var(--primary)}

/* ============== RESPONSIVE ============== */
@media (max-width: 992px){
  .hero h1{font-size:2.6rem}
}
@media (max-width: 768px){
  .hero .container{padding:4.5rem 0}
  .hero h1{font-size:2.2rem}
  .hero-buttons{flex-direction:column;align-items:flex-start}
  .cases-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .section-header h2{font-size:1.9rem}
}

@media (prefers-reduced-motion: reduce){
  .service-card,.impact-card,.case-card,.btn-primary,.btn-secondary,.btn-white,.btn-outline{transition:none !important}
}