/* =========================================================
   Personal Site v4 - Mohiudden Ahmed
   Executive, clean, bright-by-default, with subtle motion.
   Bootstrap-first + minimal custom CSS.
   ========================================================= */

:root{
  /* Light theme (default) */
  --bg0: #f7fafc;
  --bg1: #eef2ff;
  --card: rgba(255,255,255,.72);
  --card2: rgba(255,255,255,.92);
  --border: rgba(15,23,42,.10);
  --text: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.62);
  --brand: #0ea5e9;
  --brand2: #2563eb;
  --accent: #7c3aed;

  --shadow: 0 18px 50px rgba(15,23,42,.10);
  --shadow2: 0 10px 26px rgba(15,23,42,.08);
  --radius: 16px;

  --fs-base: 14px;
}

/* Dark theme override */
[data-theme="dark"]{
  --bg0: #0b1220;
  --bg1: #0f172a;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --brand: #5eead4;
  --brand2: #60a5fa;
  --accent: #a78bfa;

  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow2: 0 10px 26px rgba(0,0,0,.28);
}

html{ scroll-behavior: smooth; }
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  min-height: 100vh;

  /* Bright, executive background with restrained accents */
  background:
    radial-gradient(1100px 640px at 20% 6%, rgba(14,165,233,.12), transparent 60%),
    radial-gradient(980px 620px at 86% 14%, rgba(37,99,235,.10), transparent 58%),
    radial-gradient(900px 600px at 42% 92%, rgba(124,58,237,.08), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(94,234,212,.18), transparent 60%),
    radial-gradient(1200px 700px at 85% 20%, rgba(96,165,250,.16), transparent 55%),
    radial-gradient(900px 600px at 40% 90%, rgba(167,139,250,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
.text-muted-soft{ color: var(--muted) !important; }

.brand-grad{
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge-soft{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  color: var(--text);
  border-radius: 999px;
  padding: .25rem .55rem;
  font-weight: 600;
  font-size: .80rem;
}
[data-theme="dark"] .badge-soft{ background: rgba(255,255,255,.06); }

.glass{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.glass-strong{
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* NAV */
.navbar.glass-nav{
  background: rgba(255,255,255,.76);
  border-bottom: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .2s ease, background .2s ease;
}
[data-theme="dark"] .navbar.glass-nav{
  background: rgba(10,16,30,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.navbar.scrolled{ box-shadow: var(--shadow2); }

.navbar-brand{ font-weight: 700; letter-spacing: .1px; }

.nav-link{
  font-weight: 500;
  font-size: .88rem;
  color: var(--muted) !important;
}
.nav-link:hover,
.nav-link.active{ color: var(--text) !important; }

.btn-brand{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border: 0;
  color: #fff !important;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(37,99,235,.16);
}
[data-theme="dark"] .btn-brand{ box-shadow: 0 18px 40px rgba(96,165,250,.18); }

.btn-ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text) !important;
  font-weight: 600;
  border-radius: 999px;
}
.btn-ghost:hover{ background: rgba(255,255,255,.20); }
[data-theme="dark"] .btn-ghost:hover{ background: rgba(255,255,255,.06); }

/* Forms */
.form-control{
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 14px;
  padding: .55rem .75rem;
  font-size: .95rem;
}
[data-theme="dark"] .form-control{ background: rgba(255,255,255,.06); }
.form-control::placeholder{ color: rgba(15,23,42,.40); }
[data-theme="dark"] .form-control::placeholder{ color: rgba(255,255,255,.45); }
.form-control:focus{
  box-shadow: 0 0 0 .22rem rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.34);
}

/* HERO */
.hero{
  padding-top: 86px;
  position: relative;
  overflow: hidden;
}
.hero::before,
.hero::after{
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(42px);
  opacity: .50;
  z-index: 0;
  animation: floaty 11s ease-in-out infinite;
}
.hero::before{ left: -140px; top: 34px; background: rgba(14,165,233,.16); }
.hero::after{ right: -140px; top: 84px; background: rgba(124,58,237,.12); animation-delay: -3s; }
[data-theme="dark"] .hero::before{ background: rgba(94,234,212,.20); }
[data-theme="dark"] .hero::after{ background: rgba(167,139,250,.16); }

@keyframes floaty{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(18px) } }

.hero .container{ position: relative; z-index: 1; }
.hero-title{
  font-size: clamp(1.65rem, 2.85vw, 2.45rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.hero-sub{
  font-size: .95rem;
  color: var(--muted);
  max-width: 62ch;
}

.hero-kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 767px){
  .hero-kpis{ grid-template-columns: 1fr; }
}
.kpi{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
}
[data-theme="dark"] .kpi{ background: rgba(255,255,255,.06); }
.kpi .num{ font-weight: 700; font-size: 1.06rem; }
.kpi .lbl{ color: var(--muted); font-weight: 500; font-size: .82rem; }

/* SECTIONS */
.section{ padding: 52px 0; }
.section-title{ font-weight: 700; letter-spacing: -.01em; }
.section-lead{ color: var(--muted); max-width: 82ch; }

.card-hover{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
.card-hover:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgba(15,23,42,.14);
}
[data-theme="dark"] .card-hover:hover{ border-color: rgba(255,255,255,.22); }

/* =========================================================
   Colorful cards (professional tonal gradients)
   - Adds variety across repeated cards without looking cheap.
   - Applied via JS by adding .accent-card + data-accent="1..8"
   ========================================================= */

.accent-card{
  position: relative;
  overflow: hidden;
  --a: rgba(14,165,233,.16);
  --b: rgba(37,99,235,.10);
  --icon: #0369a1;
  --bdr: rgba(15,23,42,.12);

  background:
    radial-gradient(900px 260px at 0% 0%, var(--a), transparent 62%),
    radial-gradient(900px 240px at 100% 6%, var(--b), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.62));
  border-color: var(--bdr) !important;
}
[data-theme="dark"] .accent-card{
  --bdr: rgba(255,255,255,.16);
  background:
    radial-gradient(900px 260px at 0% 0%, var(--a), transparent 62%),
    radial-gradient(900px 240px at 100% 6%, var(--b), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
}

/* Accent palette */
.accent-card[data-accent="1"]{ --a: rgba(14,165,233,.18);  --b: rgba(37,99,235,.12);  --icon:#0284c7; --bdr: rgba(2,132,199,.22); }
.accent-card[data-accent="2"]{ --a: rgba(99,102,241,.18); --b: rgba(59,130,246,.10); --icon:#4f46e5; --bdr: rgba(79,70,229,.20); }
.accent-card[data-accent="3"]{ --a: rgba(124,58,237,.16); --b: rgba(236,72,153,.10); --icon:#7c3aed; --bdr: rgba(124,58,237,.20); }
.accent-card[data-accent="4"]{ --a: rgba(20,184,166,.16); --b: rgba(94,234,212,.10); --icon:#0f766e; --bdr: rgba(15,118,110,.20); }
.accent-card[data-accent="5"]{ --a: rgba(245,158,11,.16); --b: rgba(234,88,12,.10);  --icon:#b45309; --bdr: rgba(180,83,9,.20); }
.accent-card[data-accent="6"]{ --a: rgba(244,63,94,.14);  --b: rgba(236,72,153,.10); --icon:#e11d48; --bdr: rgba(225,29,72,.18); }
.accent-card[data-accent="7"]{ --a: rgba(132,204,22,.14); --b: rgba(34,197,94,.10);  --icon:#4d7c0f; --bdr: rgba(77,124,15,.18); }
.accent-card[data-accent="8"]{ --a: rgba(100,116,139,.12);--b: rgba(148,163,184,.10); --icon:#334155; --bdr: rgba(51,65,85,.16); }

[data-theme="dark"] .accent-card[data-accent="1"]{ --bdr: rgba(2,132,199,.26); }
[data-theme="dark"] .accent-card[data-accent="2"]{ --bdr: rgba(79,70,229,.26); }
[data-theme="dark"] .accent-card[data-accent="3"]{ --bdr: rgba(124,58,237,.26); }
[data-theme="dark"] .accent-card[data-accent="4"]{ --bdr: rgba(15,118,110,.24); }
[data-theme="dark"] .accent-card[data-accent="5"]{ --bdr: rgba(180,83,9,.24); }
[data-theme="dark"] .accent-card[data-accent="6"]{ --bdr: rgba(225,29,72,.24); }
[data-theme="dark"] .accent-card[data-accent="7"]{ --bdr: rgba(77,124,15,.24); }
[data-theme="dark"] .accent-card[data-accent="8"]{ --bdr: rgba(148,163,184,.20); }

/* Icon pill becomes accent-aware inside accent cards */
.accent-card .icon-pill{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.84), rgba(255,255,255,.52)),
    radial-gradient(circle at 70% 70%, var(--a), transparent 70%);
  border-color: rgba(15,23,42,.10);
}
[data-theme="dark"] .accent-card .icon-pill{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    radial-gradient(circle at 70% 70%, var(--a), transparent 72%);
  border-color: rgba(255,255,255,.14);
}
.accent-card .icon-pill i{ color: var(--icon); }

/* KPI + Timeline compatibility */
.kpi.accent-card,
.t-item.accent-card{
  background:
    radial-gradient(850px 220px at 0% 0%, var(--a), transparent 64%),
    radial-gradient(850px 220px at 100% 10%, var(--b), transparent 64%),
    rgba(255,255,255,.58);
}
[data-theme="dark"] .kpi.accent-card,
[data-theme="dark"] .t-item.accent-card{
  background:
    radial-gradient(850px 220px at 0% 0%, var(--a), transparent 64%),
    radial-gradient(850px 220px at 100% 10%, var(--b), transparent 64%),
    rgba(255,255,255,.06);
}

.icon-pill{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,.60);
  border: 1px solid var(--border);
}
[data-theme="dark"] .icon-pill{ background: rgba(255,255,255,.08); }
.icon-pill i{ font-size: 1.15rem; }

.chips{ display:flex; flex-wrap: wrap; gap: 10px; }
.chip{
  padding: .40rem .62rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.58);
  color: var(--text);
  font-weight: 600;
  font-size: .86rem;
}
[data-theme="dark"] .chip{ background: rgba(255,255,255,.06); }

/* Timeline */
.timeline{ position: relative; padding-left: 22px; }
.timeline::before{
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: rgba(15,23,42,.10);
}
[data-theme="dark"] .timeline::before{ background: rgba(255,255,255,.12); }

.t-item{
  position: relative;
  padding: 12px 12px 12px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.60);
}
[data-theme="dark"] .t-item{ background: rgba(255,255,255,.06); }
.t-item::before{
  content: "";
  position: absolute;
  left: -22px;
  top: 22px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
[data-theme="dark"] .t-item::before{ box-shadow: 0 0 0 4px rgba(96,165,250,.14); }
.t-item .role{ font-weight: 700; }
.t-item .meta{ color: var(--muted); font-weight: 500; font-size: .86rem; }
.t-item .desc{ color: var(--muted); margin-top: .35rem; }

/* Portrait */
.portrait{ width: 152px; height: 152px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border); box-shadow: var(--shadow2); }
.portrait-wrap{
  display: flex; align-items: center; justify-content: center;
  width: 166px; height: 166px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(14,165,233,.14), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(37,99,235,.12), transparent 55%),
    rgba(255,255,255,.60);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
}
[data-theme="dark"] .portrait-wrap{
  background:
    radial-gradient(circle at 30% 30%, rgba(94,234,212,.22), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(96,165,250,.18), transparent 55%),
    rgba(255,255,255,.06);
}

.img-cover{ object-fit: cover; height: 165px; }

.copyable{ cursor: pointer; user-select: none; }
.copyable:hover{ border-color: rgba(37,99,235,.22); }
[data-theme="dark"] .copyable:hover{ border-color: rgba(255,255,255,.22); }

.toast-container{ z-index: 2000; }

/* Accordion (Expertise page) */
.accordion-button{
  padding: .70rem .20rem;
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 600;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed){
  color: var(--text) !important;
}
.accordion-body{ padding: .50rem .25rem 1rem; }
[data-theme="dark"] .accordion-button::after{ filter: invert(1) grayscale(1); }

/* Back-to-top */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
[data-theme="dark"] .back-to-top{ background: rgba(255,255,255,.08); }
.back-to-top.show{ opacity: 1; pointer-events: auto; transform: translateY(-2px); }
.back-to-top i{ font-size: 1.05rem; }

.footer{
  border-top: 1px solid rgba(15,23,42,.10);
  padding: 22px 0;
  color: var(--muted);
}
[data-theme="dark"] .footer{ border-top: 1px solid rgba(255,255,255,.10); }

/* =========================================================
   v4 Add-ons: section banding + scroll progress + spotlight
   ========================================================= */

/* Scroll progress indicator */
.scroll-progress{
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 2100;
  pointer-events: none;
}
.scroll-progress > span{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--accent));
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
  transition: width .08s linear;
}

/* Section banding to break monotony */
.band{
  position: relative;
  padding: 56px 0;
}
@media (max-width: 767px){
  .band{ padding: 46px 0; }
}
.band--plain{ padding-top: 52px; padding-bottom: 52px; }

.band--tint1{
  background:
    radial-gradient(700px 280px at 18% 12%, rgba(14,165,233,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0));
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.band--tint2{
  background:
    radial-gradient(720px 280px at 84% 16%, rgba(124,58,237,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,0));
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.band--grid{
  background:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.07) 1px, transparent 0) 0 0/18px 18px,
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0));
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
[data-theme="dark"] .band--tint1,
[data-theme="dark"] .band--tint2,
[data-theme="dark"] .band--grid{
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
[data-theme="dark"] .band--tint1{
  background:
    radial-gradient(820px 340px at 18% 12%, rgba(94,234,212,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
[data-theme="dark"] .band--tint2{
  background:
    radial-gradient(820px 340px at 84% 16%, rgba(167,139,250,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
[data-theme="dark"] .band--grid{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0) 0 0/18px 18px,
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}

/* Spotlight hover (subtle but 'alive') */
.spotlight{ position: relative; overflow: hidden; }
.spotlight::before{
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,35%), rgba(14,165,233,.18), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.spotlight:hover::before{ opacity: 1; }
[data-theme="dark"] .spotlight::before{
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,35%), rgba(94,234,212,.22), transparent 60%);
}

/* Section heading accent */
.h-accent{
  display: inline-block;
  position: relative;
}
.h-accent::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand2), var(--accent));
  opacity: .55;
}

/* Compact lists */
.ul-clean{
  padding-left: 1.1rem;
  margin-bottom: 0;
  color: var(--muted);
}
.ul-clean li{ margin-bottom: .35rem; }

/* Subtle ticker (optional, slow) */
.ticker{
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}
[data-theme="dark"] .ticker{ background: rgba(255,255,255,.06); }
.ticker .track{
  display: inline-flex;
  gap: 14px;
  padding: .35rem .75rem;
  white-space: nowrap;
  animation: ticker 22s linear infinite;
}
.ticker:hover .track{ animation-play-state: paused; }
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Smaller headings (global helpers) */
.h-sm{ font-size: 1.02rem; font-weight: 700; }
.small-muted{ font-size: .88rem; color: var(--muted); }