/* ===========================
   Tanvir Analytics — Global Styles
   =========================== */

:root {
  --bg:#f2f4f7; --ink:#111827; --muted:#6b7280; --card:#ffffff;
  --brand-1:#2563eb; --brand-2:#3b82f6; --brand-3:#1e40af;
  --brand-ink:#ffffff; --accent:#0ea5e9;
  --shadow:0 12px 35px rgba(0,0,0,.08);
  --ring:rgba(37,99,235,.28);
  --radius:16px; --max:1100px;
  --headerH:72px;
}

@media (max-width:780px){
  :root{ --headerH:64px; }
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f1a; --ink:#e6eaf2; --muted:#a3adbf; --card:#0f1526;
    --brand-1:#60a5fa; --brand-2:#93c5fd; --brand-3:#3b82f6;
    --brand-ink:#0b0f1a; --shadow:0 8px 24px rgba(0,0,0,.6);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif
}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin:0 auto; padding:24px}
:focus-visible{outline:none; box-shadow:0 0 0 6px var(--ring)}
html{scroll-behavior:smooth}
section{scroll-margin-top: calc(var(--headerH) + 12px); padding:28px 0}

/* Header */
header{
  position:fixed; top:0; left:0; right:0; z-index:200; color:var(--brand-ink);
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1) 55%,var(--brand-3));
  border-bottom:1px solid rgba(255,255,255,.12);
  padding-top: calc(8px + env(safe-area-inset-top));
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; min-height:var(--headerH)
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:800;
  font-size:20px; color:inherit; text-decoration:none
}
.brand img{
  height:58px;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.55))
          drop-shadow(0 0 1px rgba(255,255,255,.85))
}
@media (max-width:780px){.brand img{height:44px}}
body{padding-top:var(--headerH)}

/* Nav buttons */
.navlinks{display:flex; gap:10px}
.navlinks a.btn{
  padding:10px 16px; border-radius:12px; border:0;
  background:linear-gradient(180deg,#f8fbff,#e6efff);
  color:#1e3a8a; box-shadow:0 6px 18px rgba(15,23,42,.12);
  text-decoration:none; transition:all .2s ease;
}
.navlinks a.btn:hover{
  background:linear-gradient(180deg,#e6efff,#d1e4ff);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,99,235,.25)
}
.navlinks a.cta{
  background:linear-gradient(135deg,#111827,#1f2937); color:#fff
}
.navlinks a.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,99,235,.35)
}
.burger{
  display:none; background:linear-gradient(180deg,#ffffff,#eef2ff);
  border:0; border-radius:12px; padding:10px 12px; font-size:20px; color:#1e3a8a
}
@media (max-width:780px){ .navlinks{display:none} .burger{display:inline-flex} }
.mobilemenu{
  position:fixed; right:16px; width:210px; display:none; z-index:300;
  background:linear-gradient(180deg,#ffffff,#f5f7ff);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
  top: var(--headerH);
}
.mobilemenu a{
  display:block; padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.18);
  color:#1e3a8a; text-decoration:none
}
.mobilemenu.show{display:block}

/* Old hero (kept for reference, fully commented out)
.hero{
  position:relative;
  background: linear-gradient(180deg,#1e3a8a 0%, #0f172a 100%);
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;   tiny grid “data” feel
  opacity:.15; pointer-events:none;
}
*/

/* New hero — light background, dark readable text */
.hero {
  position: relative;
  background: none; /* no gradient or image */
  color: var(--ink); /* dark text for light background */
  padding: 60px 0; /* breathing room */
}
.hero::before { content: none; }

/* Global Buttons (used in cards, forms, etc.) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:var(--card); color:var(--ink);
  box-shadow:0 10px 30px rgba(2,6,23,.10);
  text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(.98); box-shadow:0 12px 28px rgba(2,6,23,.14) }

/* Primary action (PDF buttons, Send Message, etc.) */
.btn.primary{
  background:linear-gradient(180deg,var(--brand-2),var(--brand-1));
  color:var(--brand-ink);
  border-color:transparent; box-shadow:0 16px 36px rgba(37,99,235,.35);
}
.btn.primary:hover{
  transform:translateY(-2px); box-shadow:0 18px 38px rgba(37,99,235,.42)
}

/* Actions row (kept so spacing on hero buttons stays nice) */
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* Stats */
.stats{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:16px; margin:32px 0 8px; padding:20px;
  border-radius:12px; color:#fff;
  background:linear-gradient(135deg,var(--brand-3),var(--accent));
}
.stat{grid-column:span 12; text-align:center}
@media (min-width:720px){ .stat{grid-column:span 4} }
.stat h3{margin:0; font-size:clamp(28px,4vw,36px)}
.stat p{margin:4px 0 0}

/* Grid & Cards */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.card{
  grid-column:span 12; background:var(--card);
  border:1px solid rgba(148,163,184,.25);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; transition:transform .15s ease, box-shadow .15s ease
}
@media (min-width:720px){ .card{grid-column:span 6} }
.card:nth-child(even){background:#f9fbff}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 25px rgba(0,0,0,.12)}
.card__body{padding:16px}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0 0 12px; color:var(--muted); font-size:14px}
.thumb iframe{display:block; width:100%; height:420px; border:0}
.placeholder{display:flex; align-items:center; justify-content:center; height:420px; color:#6b7280; font-size:14px; background:#f3f6ff}

/* Tags & Filters */
.tagrow{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px}
.tag{
  font-size:12px; padding:6px 10px; border-radius:999px;
  background:rgba(148,163,184,.15); border:1px solid rgba(148,163,184,.25)
}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0}
.chip{
  padding:8px 12px; border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background:linear-gradient(180deg,#ffffff,#f5f7ff);
  cursor:pointer
}
.chip[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--brand-2),var(--brand-1));
  color:#fff; border-color:transparent
}

/* Certifications */
.cert-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.cert{
  background:var(--card); border:1px solid rgba(148,163,184,.25);
  border-radius:16px; box-shadow:var(--shadow); overflow:hidden
}
.cert__imgwrap{aspect-ratio:4/3; background:#eff3ff; display:flex; align-items:center; justify-content:center}
.cert__imgwrap img{width:100%; height:100%; object-fit:cover}
.cert__body{padding:14px 16px}
.cert__body small a{text-decoration:none}

/* Contact */
.contact{display:grid; gap:16px}
@media (min-width:860px){ .contact{grid-template-columns:1.2fr .8fr} }
form{
  background:var(--card); border:1px solid rgba(148,163,184,.25);
  border-radius:16px; padding:16px; box-shadow:var(--shadow)
}
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0}
label{font-size:13px}
input,textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid rgba(148,163,184,.35);
  background:transparent; color:var(--ink)
}
input:focus,textarea:focus{
  outline:none; box-shadow:0 0 0 6px var(--ring); border-color:transparent
}
textarea{min-height:140px; resize:vertical}
.panel{
  background:var(--card); border:1px solid rgba(148,163,184,.25);
  border-radius:16px; padding:16px; box-shadow:var(--shadow)
}

/* Footer */
footer{
  padding:24px; color:#cbd5e1;
  text-align:center;
  background:linear-gradient(180deg,#0f172a,#0b1220)
}

/* Overflow guard */
html,body{max-width:100%; overflow-x:hidden}
.container{width:min(100%,var(--max)); padding-inline:16px}