/* ============================================================
   DESIGN TOKENS — LIGHT MODE (default)
   ============================================================ */
:root {
  --bg:           #f6f8fa;   /* soft grey — easier on eyes than pure white */
  --bg-alt:       #eef0f4;   /* slightly deeper grey for alternating sections */
  --bg-card:      #ffffff;   /* cards stay white, creating visible depth */
  --text:         #0f172a;
  --text-muted:   #64748b;
  --text-light:   #94a3b8;
  --accent:       #2563eb;
  --accent-dark:  #1d4ed8;
  --accent-light: #eff6ff;
  --accent-mid:   #dbeafe;
  --border:       #e2e8f0;
  --border-soft:  #f1f5f9;
  --nav-bg:       rgba(255,255,255,.88);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 20px rgba(0,0,0,.07);
  --shadow-hover: 0 12px 40px rgba(37,99,235,.14), 0 2px 8px rgba(0,0,0,.06);
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 9999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t:    .25s var(--ease);
  --max-w: 1200px;
}

/* ============================================================
   DARK MODE TOKENS
   ============================================================ */
[data-theme="dark"] {
  --bg:           #0d1117;
  --bg-alt:       #161b22;
  --bg-card:      #1c2128;
  --text:         #e6edf3;
  --text-muted:   #8b949e;
  --text-light:   #6e7681;
  --accent:       #58a6ff;
  --accent-dark:  #388bfd;
  --accent-light: #0d2045;
  --accent-mid:   #102a56;
  --border:       #30363d;
  --border-soft:  #21262d;
  --nav-bg:       rgba(13,17,23,.88);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow-md:    0 4px 20px rgba(0,0,0,.4);
  --shadow-hover: 0 12px 40px rgba(88,166,255,.18), 0 2px 8px rgba(0,0,0,.4);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .35s var(--ease), color .35s var(--ease);
}
a { color:inherit; text-decoration:none; }
img, svg, canvas { display:block; }
button { font-family:var(--font); }

/* ============================================================
   LAYOUT UTILS
   ============================================================ */
.container { max-width:var(--max-w); margin:0 auto; padding:0 2rem; }
.section     { padding:3rem 0; }
.section-alt { background:var(--bg-alt); }
#experience { padding: 5rem 0; }   /* keep experience generous for timeline */

.section-header { text-align:center; margin-bottom:2rem; }
.section-label {
  display:inline-block; font-size:.8125rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.6rem;
}
.section-title {
  font-size:clamp(1.875rem,4vw,2.75rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.15;
  color:var(--text);
}
.section-title em { font-style:normal; color:var(--accent); }
.section-desc {
  margin-top:.875rem; color:var(--text-muted);
  max-width:540px; margin-left:auto; margin-right:auto;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem; border-radius:var(--r-full);
  font-size:.9375rem; font-weight:600; cursor:pointer;
  border:2px solid transparent; transition:all var(--t);
  white-space:nowrap; line-height:1;
}
.btn-accent {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.btn-accent:hover {
  background:var(--accent-dark); border-color:var(--accent-dark);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(37,99,235,.35);
}
.btn-outline {
  background:transparent; color:var(--accent); border-color:var(--accent);
}
.btn-outline:hover {
  background:var(--accent-light); transform:translateY(-2px);
}
.btn-full { width:100%; justify-content:center; }

/* ============================================================
   SKILL ICON COLOUR HELPERS
   ============================================================ */
.si-blue   { background:var(--accent-light); color:var(--accent); }
.si-green  { background:#f0fdf4; color:#16a34a; }
.si-purple { background:#faf5ff; color:#7c3aed; }
.si-orange { background:#fff7ed; color:#ea580c; }
.si-sky    { background:#f0f9ff; color:#0284c7; }
.si-pink   { background:#fdf2f8; color:#c026d3; }

[data-theme="dark"] .si-green  { background:#052e16; color:#4ade80; }
[data-theme="dark"] .si-purple { background:#2e1065; color:#c084fc; }
[data-theme="dark"] .si-orange { background:#431407; color:#fb923c; }
[data-theme="dark"] .si-sky    { background:#082f49; color:#38bdf8; }
[data-theme="dark"] .si-pink   { background:#4a044e; color:#f0abfc; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ============================================================
   NAV
   ============================================================ */
#nav {
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:0 2rem;
  background:var(--nav-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
#nav.scrolled {
  border-bottom-color:var(--border);
  box-shadow:0 2px 24px rgba(0,0,0,.08);
}
[data-theme="dark"] #nav.scrolled {
  box-shadow:0 2px 24px rgba(0,0,0,.4);
}
.nav-inner {
  max-width:var(--max-w); margin:0 auto;
  display:flex; align-items:center; height:4.5rem; gap:1rem;
}
.nav-logo { font-size:1.1rem; flex-shrink:0; color:var(--text); }
.nav-logo b { color:var(--accent); }

.nav-links { display:flex; gap:.15rem; margin-left:auto; }
.nav-link {
  padding:.4rem .85rem; border-radius:var(--r-full);
  font-size:.9rem; color:var(--text-muted); font-weight:500;
  transition:all var(--t);
}
.nav-link:hover, .nav-link.active {
  color:var(--accent); background:var(--accent-light);
}

.nav-actions { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.nav-cta { padding:.6rem 1.2rem; font-size:.875rem; }

/* Theme toggle */
.theme-toggle {
  width:38px; height:38px; border-radius:var(--r-full);
  border:1.5px solid var(--border); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:all var(--t); flex-shrink:0;
}
.theme-toggle:hover {
  color:var(--accent); border-color:var(--accent);
  background:var(--accent-light);
}
.theme-toggle svg { width:17px; height:17px; }
.icon-sun  { display:none; }
.icon-moon { display:block; }
[data-theme="dark"] .icon-sun  { display:block; }
[data-theme="dark"] .icon-moon { display:none; }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none;
  padding:4px; flex-shrink:0;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:2px; transition:all var(--t);
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem 2rem 4rem;
  position:relative; overflow:hidden;
}

/* Dot-grid background */
#hero::before {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle, var(--border) 1.2px, transparent 1.2px);
  background-size:28px 28px;
  pointer-events:none; z-index:0;
  opacity:.55;
}

/* Gradient blobs */
.hero-blob {
  position:absolute; border-radius:50%;
  filter:blur(90px); pointer-events:none; z-index:0;
  animation:blobFloat 8s ease-in-out infinite alternate;
}
.blob-1 {
  width:480px; height:480px;
  background:radial-gradient(circle, rgba(37,99,235,.12), transparent 70%);
  top:-80px; right:5%;
}
.blob-2 {
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(124,58,237,.09), transparent 70%);
  bottom:5%; right:35%;
  animation-delay:3s;
}
[data-theme="dark"] .blob-1 {
  background:radial-gradient(circle, rgba(88,166,255,.1), transparent 70%);
}
[data-theme="dark"] .blob-2 {
  background:radial-gradient(circle, rgba(192,132,252,.08), transparent 70%);
}
@keyframes blobFloat {
  from { transform:translate(0,0) scale(1); }
  to   { transform:translate(20px,-20px) scale(1.05); }
}

.hero-content {
  max-width:var(--max-w); margin:0 auto; width:100%;
  display:grid; grid-template-columns:55% 45%;
  gap:3rem; align-items:center; position:relative; z-index:1;
}

/* Badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem 1rem; border-radius:var(--r-full);
  background:var(--accent-light); color:var(--accent);
  border:1px solid var(--accent-mid);
  font-size:.8125rem; font-weight:600; margin-bottom:1.25rem;
  width:fit-content;
  animation:fadeInDown .7s var(--ease) both;
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}

.hero-name {
  font-size:clamp(2.75rem,5.5vw,5rem);
  font-weight:800; letter-spacing:-.035em; line-height:1.05;
  margin-bottom:.875rem; color:var(--text);
  animation:fadeInUp .7s .15s var(--ease) both;
}
.name-gradient {
  background:linear-gradient(135deg, var(--accent), #7c3aed);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-role {
  font-size:1.2rem; color:var(--text-muted);
  margin-bottom:1.5rem; min-height:2rem;
  animation:fadeInUp .7s .25s var(--ease) both;
}
.typewriter { color:var(--accent); font-weight:600; }
.cursor { color:var(--accent); animation:blink 1s step-end infinite; }
@keyframes blink { 50%{opacity:0;} }

.hero-tagline {
  color:var(--text-muted); line-height:1.8;
  margin-bottom:2rem; font-size:1rem;
  animation:fadeInUp .7s .35s var(--ease) both;
}

.hero-actions {
  display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem;
  animation:fadeInUp .7s .45s var(--ease) both;
}
.hero-socials {
  display:flex; gap:.65rem;
  animation:fadeInUp .7s .55s var(--ease) both;
}
.social-link {
  width:42px; height:42px; border-radius:var(--r-full);
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); transition:all var(--t);
}
.social-link:hover {
  color:var(--accent); border-color:var(--accent);
  background:var(--accent-light); transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(37,99,235,.2);
}
.social-link svg { width:18px; height:18px; }

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Hero visual / canvas */
.hero-visual { position:relative; display:flex; justify-content:center; }

.canvas-frame {
  position:relative; width:100%; max-width:480px;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 24px 80px rgba(37,99,235,.15), 0 4px 20px rgba(0,0,0,.08);
  border:1px solid var(--border);
  background:var(--bg-alt);
  animation:fadeInRight .8s .2s var(--ease) both;
}
[data-theme="dark"] .canvas-frame {
  box-shadow:0 24px 80px rgba(88,166,255,.12), 0 4px 20px rgba(0,0,0,.5);
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}
#heroCanvas {
  width:100%; height:460px; display:block;
}
.canvas-loading {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt);
}
.canvas-loading.hidden { display:none; }
.loading-spinner {
  width:40px; height:40px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Floating stat chips */
.hero-chip {
  position:absolute;
  display:flex; align-items:center; gap:.65rem;
  padding:.65rem 1rem;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-md);
  font-size:.8125rem; white-space:nowrap;
  animation:chipFloat 4s ease-in-out infinite alternate;
}
.hero-chip strong { display:block; font-size:.875rem; color:var(--text); }
.hero-chip small  { color:var(--text-muted); }
.chip-icon { font-size:1.35rem; }
.chip-1 { top:8%;  left:-10%; animation-delay:0s;   }
.chip-2 { bottom:15%; left:-12%; animation-delay:1.5s; }
.chip-3 { top:40%; right:-10%; animation-delay:.75s; }
@keyframes chipFloat {
  from { transform:translateY(0);   }
  to   { transform:translateY(-6px); }
}

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 2rem;
  left: 0; right: 0;             /* stretch full width so margin:auto works */
  width: max-content;            /* shrink-wrap to text width */
  margin: 0 auto;                /* centre horizontally */
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--text-light); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
  animation: fadeInUp 1s 1.6s both; z-index: 1;
  pointer-events: none;
}
.scroll-arrows {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.scroll-arrow {
  width: 16px; height: 16px;
  border-right: 2px solid var(--text-light);
  border-bottom: 2px solid var(--text-light);
  transform: rotate(45deg);
}
.sa-1 { animation: arrowBounce 1.6s ease-in-out infinite; }
.sa-2 { animation: arrowBounce 1.6s ease-in-out infinite .25s; opacity: .55; }
@keyframes arrowBounce {
  0%,100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:start;
}
.about-text p { color:var(--text-muted); line-height:1.8; margin-bottom:1rem; }
.about-text strong { color:var(--text); }
.about-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.tag {
  padding:.35rem .9rem;
  background:var(--accent-light); color:var(--accent);
  border:1px solid var(--accent-mid);
  border-radius:var(--r-full); font-size:.875rem; font-weight:500;
  transition:all var(--t);
}
.tag:hover { background:var(--accent); color:#fff; transform:translateY(-1px); }

.about-stats { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:1.75rem 1.5rem; text-align:center;
  box-shadow:var(--shadow-sm); transition:all var(--t);
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--accent-light), transparent);
  opacity:0; transition:opacity var(--t);
}
.stat-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.stat-card:hover::before { opacity:1; }
.stat-number {
  display:block; font-size:2.25rem; font-weight:800;
  color:var(--accent); letter-spacing:-.025em; line-height:1;
}
.stat-label {
  font-size:.8125rem; color:var(--text-muted); font-weight:500;
  margin-top:.4rem; display:block;
}

/* ============================================================
   SKILLS
   ============================================================ */
.skills-tabs {
  display:flex; gap:.5rem; flex-wrap:wrap;
  justify-content:center; margin-bottom:2.5rem;
}
.tab-btn {
  padding:.6rem 1.25rem; border-radius:var(--r-full);
  border:1.5px solid var(--border); background:var(--bg-card);
  color:var(--text-muted); font-size:.9rem; font-weight:500;
  cursor:pointer; transition:all var(--t);
}
.tab-btn:hover { border-color:var(--accent); color:var(--accent); }
.tab-btn.active {
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.3);
}
.tab-panel { display:none; }
.tab-panel.active { display:block; }

.skills-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.25rem;
}
.skill-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:1.5rem;
  box-shadow:var(--shadow-sm); transition:all var(--t);
}
.skill-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-3px); }
.skill-icon {
  width:50px; height:50px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; flex-shrink:0;
}
.skill-icon svg { width:24px; height:24px; }
.skill-card h3 { font-size:1rem; font-weight:700; margin-bottom:.35rem; color:var(--text); }
.skill-card p  { font-size:.8125rem; color:var(--text-muted); line-height:1.55; margin-bottom:1rem; }
.skill-bar {
  height:5px; background:var(--border);
  border-radius:var(--r-full); overflow:hidden;
}
.skill-fill {
  height:100%; width:0;
  background:linear-gradient(90deg, var(--accent), #7c3aed);
  border-radius:var(--r-full);
  transition:width 1.1s var(--ease) .1s;
}
.skill-fill.animate { width:var(--pct); }

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.service-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md); padding:2rem 1.5rem;
  box-shadow:var(--shadow-sm); transition:all var(--t);
  position:relative; overflow:hidden;
}
/* Per-card coloured top bar */
.service-card::after {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--card-accent, var(--accent));
  transform:scaleX(0); transform-origin:left; transition:transform var(--t);
}
.service-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-5px); }
.service-card:hover::after { transform:scaleX(1); }
.service-icon {
  width:54px; height:54px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem;
}
.service-icon svg { width:26px; height:26px; }
.service-card h3 { font-size:1.0625rem; font-weight:700; margin-bottom:.5rem; color:var(--text); }
.service-card p  { font-size:.875rem; color:var(--text-muted); line-height:1.7; }

/* ============================================================
   PROJECTS
   ============================================================ */
.project-filters {
  display:flex; gap:.5rem; flex-wrap:wrap;
  justify-content:center; margin-bottom:2.5rem;
}
.filter-btn {
  padding:.5rem 1.1rem; border-radius:var(--r-full);
  border:1.5px solid var(--border); background:var(--bg-card);
  color:var(--text-muted); font-size:.875rem; font-weight:500;
  cursor:pointer; transition:all var(--t);
}
.filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.filter-btn.active {
  background:var(--accent); border-color:var(--accent); color:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.3);
}

.projects-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
.project-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:all var(--t);
}
.project-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-5px); }
.project-card.hidden { display:none; }
.project-img {
  height:140px; display:flex; align-items:center; justify-content:center;
}
.project-img-icon { font-size:3rem; }
.project-body { padding:1.25rem; }
.project-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.75rem; }
.project-tag {
  padding:.22rem .65rem; border-radius:var(--r-full);
  font-size:.75rem; font-weight:600;
}
.tag-powerbi { background:#dbeafe; color:#1e40af; }
.tag-sql     { background:#f3e8ff; color:#6d28d9; }
.tag-dax     { background:#e0f2fe; color:#0369a1; }
.tag-python  { background:#dcfce7; color:#15803d; }
.tag-azure   { background:#eff6ff; color:#1d4ed8; }
.tag-django  { background:#d1fae5; color:#065f46; }
.tag-ml      { background:#fef9c3; color:#854d0e; }

[data-theme="dark"] .tag-powerbi { background:#0c1a3b; color:#93c5fd; }
[data-theme="dark"] .tag-sql     { background:#1e0a40; color:#c084fc; }
[data-theme="dark"] .tag-dax     { background:#082f49; color:#7dd3fc; }
[data-theme="dark"] .tag-python  { background:#052e16; color:#4ade80; }
[data-theme="dark"] .tag-azure   { background:#0d2045; color:#60a5fa; }
[data-theme="dark"] .tag-django  { background:#022c22; color:#34d399; }
[data-theme="dark"] .tag-ml      { background:#1c1200; color:#fbbf24; }

.project-body h3 { font-size:1rem; font-weight:700; margin-bottom:.35rem; color:var(--text); }
.project-body p  { font-size:.8125rem; color:var(--text-muted); line-height:1.6; margin-bottom:.875rem; }
.project-link { font-size:.875rem; font-weight:600; color:var(--accent); transition:gap var(--t); }
.project-link:hover { text-decoration:underline; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display:grid; grid-template-columns:1fr;
  gap:1.5rem; align-items:start;
  max-width: 760px; margin: 0 auto;
}
.form-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:2rem;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--t);
}
.form-card:hover { box-shadow:var(--shadow-md); }
.form-card-header {
  display:flex; align-items:flex-start; gap:1rem;
  margin-bottom:1.75rem; padding-bottom:1.5rem;
  border-bottom:1px solid var(--border);
}
.form-icon { font-size:1.75rem; flex-shrink:0; }
.form-card-header h3 { font-size:1.125rem; font-weight:700; margin-bottom:.15rem; color:var(--text); }
.form-card-header p  { font-size:.8125rem; color:var(--text-muted); }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.875rem; }
.form-group label { font-size:.8125rem; font-weight:500; color:var(--text); }

.form-group input,
.form-group select,
.form-group textarea {
  padding:.7rem .9rem;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  font-family:var(--font); font-size:.9rem;
  color:var(--text); background:var(--bg);
  transition:border-color var(--t), box-shadow var(--t);
  outline:none; width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-light); }
.form-group select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
  padding-right:2.5rem; cursor:pointer;
}
.form-group textarea { resize:vertical; min-height:96px; }

.form-success, .form-error {
  margin-top:1rem; padding:.75rem 1rem;
  border-radius:var(--r-sm); font-size:.875rem; font-weight:500;
}
.form-success { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }
.form-error   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
[data-theme="dark"] .form-success { background:#052e16; color:#4ade80; border-color:#065f46; }
[data-theme="dark"] .form-error   { background:#450a0a; color:#f87171; border-color:#7f1d1d; }

/* ============================================================
   FOOTER
   ============================================================ */
#footer {
  background:var(--text); color:rgba(255,255,255,.7);
  padding:4rem 0 2rem;
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg, var(--accent), #7c3aed) 1;
}
[data-theme="dark"] #footer { background:#060a0f; }

.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:3rem; margin-bottom:3rem;
}
.footer-brand h3 { font-size:1.25rem; color:#fff; font-weight:700; margin-bottom:.4rem; }
.footer-brand h3 b { color:#93c5fd; }
.footer-brand p { font-size:.875rem; line-height:1.7; margin-bottom:1.25rem; }

.footer-socials { display:flex; gap:.6rem; }
.footer-socials a {
  width:38px; height:38px; border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); transition:all var(--t);
}
.footer-socials a:hover {
  color:#fff; border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.08); transform:translateY(-2px);
}
.footer-socials a svg { width:16px; height:16px; }

.footer-nav h4,
.footer-contact-info h4 {
  font-size:.8125rem; font-weight:700; color:#fff;
  text-transform:uppercase; letter-spacing:.09em; margin-bottom:1rem;
}
.footer-nav ul,
.footer-contact-info ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer-nav a,
.footer-contact-info a { font-size:.875rem; color:rgba(255,255,255,.5); transition:color var(--t); }
.footer-nav a:hover,
.footer-contact-info a:hover { color:#fff; }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:1.5rem; display:flex;
  justify-content:space-between; align-items:center;
}
.footer-bottom p { font-size:.8125rem; color:rgba(255,255,255,.3); }
.back-to-top {
  width:36px; height:36px; border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); transition:all var(--t);
}
.back-to-top:hover { color:#fff; border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.back-to-top svg  { width:18px; height:18px; }

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width:1024px) {
  .hero-content    { grid-template-columns:1fr 1fr; gap:2rem; }
  .services-grid   { grid-template-columns:repeat(2,1fr); }
  .projects-grid   { grid-template-columns:repeat(2,1fr); }
  .footer-grid     { grid-template-columns:1fr 1fr; }
  .footer-brand    { grid-column:1/-1; }

  .chip-1 { left:-5%; }
  .chip-2 { left:-8%; }
  .chip-3 { right:-6%; }
}

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width:768px) {
  .section { padding:2rem 0; }

  /* Nav — collapse to hamburger */
  .nav-inner { justify-content: space-between; }   /* logo left, actions right */
  .nav-links {
    display:none;
    position:fixed; top:4.5rem; left:0; right:0;
    background:var(--bg-card);
    border-bottom:1px solid var(--border);
    padding:1rem 1.5rem; flex-direction:column;
    box-shadow:0 8px 30px rgba(0,0,0,.1); gap:.25rem;
  }
  .nav-links.open { display:flex; }
  .nav-link       { padding:.7rem 1rem; border-radius:var(--r-sm); }
  .nav-cta        { display:none; }
  .nav-hamburger  { display:flex; }
  .nav-actions    { gap:.5rem; align-items:center; }

  /* Hero — stack vertically */
  .hero-content {
    grid-template-columns:1fr; gap:2.5rem;
    text-align:center;
  }
  .hero-visual { order:-1; }
  #heroCanvas  { height:320px; }
  .hero-badge  { margin-left:auto; margin-right:auto; }
  .hero-name   { font-size:clamp(2.25rem,8vw,3.5rem); }
  .hero-tagline br { display:none; }
  .hero-actions { justify-content:center; }
  .hero-socials { justify-content:center; }
  .canvas-frame { max-width:340px; margin:0 auto; }

  /* Hide floating chips on small screens — too cramped */
  .hero-chip { display:none; }

  /* Scroll hint — flow below content, not floating over it */
  .scroll-hint {
    position:static;
    transform:none;
    margin:2rem auto 0;
    padding-bottom:.5rem;
    text-align:center;
  }

  /* About */
  .about-grid  { grid-template-columns:1fr; gap:2.5rem; }
  .about-stats { grid-template-columns:repeat(2,1fr); }

  /* Contact */
  .contact-grid { grid-template-columns:1fr; }
  .form-row     { grid-template-columns:1fr; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
}

/* ============================================================
   RESPONSIVE — 480px
   ============================================================ */
@media (max-width:480px) {
  .container        { padding:0 1.25rem; }
  .section          { padding:3.5rem 0; }
  .hero-actions     { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { text-align:center; justify-content:center; }
  .tab-btn          { font-size:.8rem; padding:.5rem .85rem; }
  .services-grid    { grid-template-columns:1fr; }
  .projects-grid    { grid-template-columns:1fr; }
  .about-stats      { grid-template-columns:1fr 1fr; }
  .skills-tabs      { gap:.35rem; }
  #heroCanvas       { height:260px; }
  .section-title    { font-size:1.75rem; }
}

/* ============================================================
   CONTACT — SINGLE FORM
   ============================================================ */
.contact-single { max-width: 760px; margin: 0 auto; }
.contact-form-card { border: 1px solid var(--border); }
@media (max-width: 768px) { .contact-single { max-width: 100%; } }

/* ============================================================
   SHOWCASE / ANIMATIONS SECTION
   ============================================================ */
.showcase-section { background: var(--bg-alt); }
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.showcase-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
  overflow: hidden;
}
.showcase-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

.sc-header { margin-bottom: 1.5rem; }
.sc-badge {
  display: inline-flex; align-items: center;
  padding: .25rem .75rem; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .6rem;
}
.sc-header h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; }
.sc-header p  { font-size: .8rem; color: var(--text-muted); }

/* --- Pipeline flow --- */
.pipeline-flow {
  display: flex; align-items: center;
  gap: 0; overflow-x: auto;
  padding: .5rem 0;
  scrollbar-width: none;
}
.pipeline-flow::-webkit-scrollbar { display: none; }
.pf-node {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; min-width: 64px;
}
.pf-icon  { font-size: 1.5rem; margin-bottom: .3rem; }
.pf-name  { font-size: .7rem; font-weight: 700; color: var(--text); text-align: center; }
.pf-sub   { font-size: .65rem; color: var(--text-muted); text-align: center; white-space: nowrap; }
.pf-end .pf-icon { filter: drop-shadow(0 0 6px rgba(37,99,235,.5)); }

.pf-edge {
  flex: 1; min-width: 28px; height: 2px;
  background: var(--border);
  position: relative; overflow: visible;
  display: flex; align-items: center;
}
.pf-dot {
  position: absolute; left: -6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pfFlow 2.1s linear infinite;
  animation-delay: var(--d);
  top: 50%; transform: translateY(-50%);
}
@keyframes pfFlow {
  0%   { left: -10px; opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}

/* --- Power BI mockup --- */
.bi-mockup {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: .78rem;
}
.bi-toolbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.bi-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.bi-dot.r { background: #ff5f57; }
.bi-dot.y { background: #febc2e; }
.bi-dot.g { background: #28c840; }
.bi-win-title { flex: 1; font-size: .7rem; font-weight: 600; color: var(--text-muted); text-align: center; }
.bi-live-badge {
  font-size: .65rem; font-weight: 700;
  color: #16a34a; letter-spacing: .04em;
  animation: pulseLive 2s ease-in-out infinite;
}
@keyframes pulseLive { 0%,100%{opacity:1;} 50%{opacity:.4;} }

.bi-body { padding: .875rem; }
.bi-kpi-row { display: flex; gap: .5rem; margin-bottom: .875rem; }
.bi-kpi-card {
  flex: 1; background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .6rem .5rem; text-align: center;
}
.bi-kpi-val { font-size: .95rem; font-weight: 800; color: var(--accent); }
.bi-kpi-lbl { font-size: .6rem; color: var(--text-muted); margin-top: .1rem; }
.bi-kpi-delta { font-size: .6rem; font-weight: 700; margin-top: .15rem; }
.bi-kpi-delta.up { color: #16a34a; }
.bi-kpi-delta.dn { color: #dc2626; }

.bi-chart-row { display: flex; gap: .75rem; }
.bi-chart-area { flex: 1.8; }
.bi-spark-area  { flex: 1; }
.bi-chart-lbl { font-size: .65rem; color: var(--text-muted); margin-bottom: .4rem; }

.bi-bars { display: flex; align-items: flex-end; height: 70px; gap: .3rem; }
.bi-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.bi-bar-wrap span { font-size: .55rem; color: var(--text-muted); }
.bi-bar {
  width: 100%; height: var(--h);
  background: var(--c);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom; transform: scaleY(0);
  opacity: .9;
}
.bi-bar.animate { animation: biBarGrow .9s var(--ease) var(--d) forwards; }
@keyframes biBarGrow { from{transform:scaleY(0);} to{transform:scaleY(1);} }

.bi-sparkline { width: 100%; height: 60px; }
.spark-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.5s var(--ease);
}
.spark-line.animate { stroke-dashoffset: 0; }

/* --- ADF Pipeline --- */
.adf-canvas {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: .78rem;
}
.adf-run-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .875rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.adf-run-icon { font-size: .7rem; color: var(--text-muted); }
.adf-run-name { flex: 1; font-weight: 600; color: var(--text); font-size: .72rem; }
.adf-run-status {
  font-size: .65rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: var(--r-full);
}
.adf-run-status.running  { background: var(--accent-light); color: var(--accent); }
.adf-run-status.success  { background: #f0fdf4; color: #16a34a; }
[data-theme="dark"] .adf-run-status.success { background: #052e16; color: #4ade80; }

.adf-row {
  display: flex; align-items: center;
  padding: 1rem .875rem; gap: .4rem;
}
.adf-act {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: .3rem;
  padding: .6rem .4rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  transition: all .4s var(--ease);
  min-width: 0;
}
.adf-act[data-state="success"] { border-color: #16a34a; background: #f0fdf4; }
.adf-act[data-state="running"]  { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.adf-act[data-state="pending"]  { opacity: .5; }
[data-theme="dark"] .adf-act[data-state="success"] { background: #052e16; }

.adf-act-icon { font-size: 1.1rem; }
.adf-act-name { font-size: .62rem; font-weight: 600; color: var(--text); text-align: center; }
.adf-act-badge {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700;
}
.adf-act[data-state="success"] .adf-act-badge { background: #16a34a; color: #fff; }
.adf-act[data-state="pending"] .adf-act-badge { background: var(--border); color: var(--text-muted); }
.adf-act[data-state="running"]  .adf-act-badge { background: transparent; }
.adf-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.25);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

.adf-arrow { color: var(--border); font-size: .9rem; flex-shrink: 0; }

.adf-stats-bar {
  display: flex; gap: 1rem; padding: .5rem .875rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.adf-stat { font-size: .65rem; font-weight: 600; color: var(--text-muted); }
.adf-stat.running { color: var(--accent); }
.adf-stat.pending { color: var(--text-light); }
#adf-stat-ok { color: #16a34a; }

/* License strip */
.license-strip {
  background: rgba(0,0,0,.08);
  padding: .875rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
[data-theme="dark"] .license-strip { background: rgba(0,0,0,.2); }
.license-strip p {
  font-size: .75rem; color: rgba(255,255,255,.3);
  text-align: center; line-height: 1.6;
}

/* Showcase responsive */
@media (max-width: 1024px) {
  .showcase-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .showcase-grid { gap: 1rem; }
  .pipeline-flow { gap: 0; }
  .adf-row { flex-wrap: wrap; justify-content: center; }
  .adf-arrow { display: none; }
}

/* ============================================================
   SHOWCASE — REFINED OVERRIDES
   (Better animation approaches consolidated here)
   ============================================================ */

/* Cards have no outer padding — each inner section manages its own */
.showcase-card { padding: 0; }
.sc-header     { padding: 1.5rem 1.5rem 1rem; }
.sc-header h3  { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.sc-header p   { font-size: .825rem; color: var(--text-muted); }

/* Pipeline: tighter pf-slide keyframe (cleaner than pfFlow) */
@keyframes pf-slide {
  0%   { left: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.pf-dot {
  animation-name: pf-slide !important;
  animation-duration: 1.4s !important;
}

/* BI bars — height-based animation (avoids transform overflow issues) */
.bi-mockup { margin: 0 1.25rem 1.5rem; background: var(--bg); }
.bi-kpi-val { font-size: 1.05rem; font-weight: 800; color: var(--accent); }
.bi-bar {
  transform: none !important;
  transform-origin: unset !important;
  height: 0;
}
.bi-bar.animate {
  animation: bi-grow .85s var(--d, 0s) var(--ease) forwards !important;
}
@keyframes bi-grow { from { height: 0; } to { height: var(--h, 50%); } }

/* Sparkline stroke draw-on animation */
.spark-line {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
}
.spark-line.animate {
  animation: spark-draw 1.6s .4s var(--ease) forwards;
}
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

/* ADF badges as absolute overlays on activity cards */
.adf-act { position: relative; }
.adf-act-badge {
  position: absolute;
  top: -.45rem; right: -.45rem;
  width: 18px; height: 18px;
}
.adf-act[data-state="success"] .adf-act-badge { background: #22c55e; color:#fff; }
.adf-act[data-state="running"]  .adf-act-badge { background: var(--accent); }
.adf-act[data-state="pending"]  .adf-act-badge { background: var(--border); color: var(--text-muted); }

/* License strip: legal notice + copyright stacked */
.license-strip {
  background: rgba(0,0,0,.12);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1rem 0 .5rem;
}
.license-notice {
  font-size: .72rem; color: rgba(255,255,255,.32);
  text-align: center; line-height: 1.6;
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.license-strip .footer-bottom {
  border-top: none;
  padding-top: .5rem;
  justify-content: center;
  position: relative;
}
.license-strip .footer-bottom p {
  text-align: center;
  background: linear-gradient(90deg, #58a6ff, #c084fc, #58a6ff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
  font-weight: 500;
}
@keyframes gradientShift {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}
.license-strip .back-to-top {
  position: absolute;
  right: 0; top: 50%; transform: translateY(-50%);
}

/* ============================================================
   PROFILE PLACEHOLDER (hero right side)
   ============================================================ */
.profile-placeholder {
  width: 100%; max-width: 420px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  box-shadow: 0 24px 80px rgba(37,99,235,.1), 0 4px 20px rgba(0,0,0,.05);
  position: relative; overflow: hidden;
  animation: fadeInRight .8s .2s var(--ease) both;
}
.profile-placeholder::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
}
.pp-glow {
  position: absolute; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(37,99,235,.07), transparent 70%);
  top: -60px; right: -60px; border-radius: 50%; pointer-events: none;
}
.pp-avatar-wrap {
  position: relative; width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
}
.pp-ring {
  position: absolute; border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.pp-ring-1 {
  width: 110px; height: 110px; opacity: .22;
  animation: ringPulse 3s ease-in-out infinite;
}
.pp-ring-2 {
  width: 140px; height: 140px; opacity: .1;
  animation: ringPulse 3s ease-in-out infinite .8s;
}
@keyframes ringPulse {
  0%,100% { transform: scale(1);    opacity: .2; }
  50%      { transform: scale(1.06); opacity: .38; }
}
.pp-avatar {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #7c3aed);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 8px 32px rgba(37,99,235,.3);
}
.pp-initials {
  font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -.02em;
}
.pp-certs {
  width: 100%; display: flex; flex-direction: column; gap: .6rem;
}
.pp-cert {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .7rem 1rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: box-shadow var(--t);
}
.pp-cert:hover { box-shadow: var(--shadow-md); }
.pp-cert-primary {
  border-color: var(--accent-mid);
  background: var(--accent-light);
}
.pp-cert-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: .15rem; }
.pp-cert strong { display: block; font-size: .875rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.pp-cert small  { font-size: .72rem; color: var(--text-muted); }
.pp-tags {
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
}
.pp-tag {
  padding: .25rem .7rem;
  background: var(--accent-light); color: var(--accent);
  border: 1px solid var(--accent-mid);
  border-radius: var(--r-full); font-size: .72rem; font-weight: 600;
}

/* ============================================================
   ABOUT — CERTIFICATION BADGES
   ============================================================ */
.cert-row { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.cert-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .875rem 1rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-md); transition: box-shadow var(--t);
}
.cert-item:hover { box-shadow: var(--shadow-md); }
.cert-item-primary { border-color: var(--accent-mid); background: var(--accent-light); }
.cert-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .05rem; }
.cert-item strong { display: block; font-size: .9rem; font-weight: 700; color: var(--text); }
.cert-item span   { display: block; font-size: .8125rem; color: var(--text-muted); margin: .1rem 0; }
.cert-item small  { font-size: .73rem; color: var(--text-light); }

/* ============================================================
   SHOWCASE — BI SVG CHART
   ============================================================ */
.bi-svg-section { padding: 0 .75rem .75rem; }
.bi-chart-lbl   { font-size: .65rem; color: var(--text-muted); font-weight: 600; margin-bottom: .4rem; }
.bi-svg-chart   { width: 100%; height: auto; overflow: visible; color: var(--text); }
.bsvg-bar       { } /* animated via JS — no CSS transition needed */
.bi-trend-line  {
  stroke-dasharray: 220; stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.4s var(--ease) .85s;
}
.bi-trend-line.animate { stroke-dashoffset: 0; }
.trend-dot { transition: opacity .25s var(--ease); }

/* ============================================================
   SHOWCASE — POWER APPS MOCKUP
   ============================================================ */
.pa-frame {
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; margin: 0 1.25rem 1.5rem;
  background: var(--bg);
}
.pa-titlebar {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .85rem;
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 600;
}
.pa-hamburger { font-size: .85rem; }
.pa-app-name  { flex: 1; }
.pa-avatar-icon { font-size: .9rem; }
.pa-searchbar {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; font-size: .72rem; color: var(--text-muted);
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
}
.pa-list { display: flex; flex-direction: column; }
.pa-record {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .85rem; border-bottom: 1px solid var(--border-soft);
  transition: background .35s var(--ease); cursor: pointer;
}
.pa-record.pa-active { background: var(--accent-light); border-left: 3px solid var(--accent); }
.pa-rec-left  { display: flex; align-items: center; gap: .6rem; }
.pa-rec-icon  { font-size: 1.1rem; }
.pa-rec-name  { font-size: .75rem; font-weight: 600; color: var(--text); }
.pa-rec-sub   { font-size: .65rem; color: var(--text-muted); }
.pa-badge {
  font-size: .6rem; font-weight: 700; padding: .2rem .5rem;
  border-radius: var(--r-full); white-space: nowrap;
}
.pa-urgent  { background: #fee2e2; color: #dc2626; }
.pa-pending { background: #fef9c3; color: #854d0e; }
.pa-done    { background: #f0fdf4; color: #16a34a; }
[data-theme="dark"] .pa-urgent  { background: #450a0a; color: #f87171; }
[data-theme="dark"] .pa-pending { background: #1c1200; color: #fbbf24; }
[data-theme="dark"] .pa-done    { background: #052e16; color: #4ade80; }
.pa-nav {
  display: flex; align-items: center; justify-content: space-around;
  padding: .5rem; background: var(--bg-alt); border-top: 1px solid var(--border);
}
.pa-nav-btn {
  font-size: .65rem; font-weight: 600; color: var(--text-muted);
  padding: .3rem .65rem; border-radius: var(--r-full); cursor: pointer;
  transition: all var(--t);
}
.pa-nav-btn.active { color: var(--accent); background: var(--accent-light); }

/* ============================================================
   SHOWCASE — POWER AUTOMATE FLOW (orange accent)
   ============================================================ */
.paf-badge { background: #fff4e5 !important; color: #d97706 !important; }
[data-theme="dark"] .paf-badge { background: #431407 !important; color: #fb923c !important; }
.paf-trigger-icon { animation: pf-pulse 2s ease-in-out infinite; }
@keyframes pf-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }
/* Orange dots override for Power Automate */
.paf-flow .pf-dot {
  background: #d97706;
  box-shadow: 0 0 8px rgba(217,119,6,.55);
}

/* ============================================================
   DATA PIPELINE — LIVE TERMINAL LOG
   ============================================================ */
.ep-term-wrap {
  margin: 0 1.1rem 1.25rem;
  border-radius: var(--r-sm); overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.ep-term-hdr {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .75rem; background: #21262d;
}
.ep-term-dots { display: flex; gap: .3rem; }
.etd { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.etd.r { background: #ff5f57; }
.etd.y { background: #febc2e; }
.etd.g { background: #28c840; }
.ep-term-title {
  flex: 1; font-family: monospace; font-size: .62rem;
  color: rgba(255,255,255,.3); text-align: center;
}
.ep-term-live {
  font-size: .6rem; font-weight: 700; color: #28c840;
  animation: pulseLive 1.6s ease-in-out infinite;
}

.ep-log {
  background: #0d1117; padding: .65rem .85rem;
  font-family: 'Courier New', Courier, monospace; font-size: .67rem;
  height: 136px; overflow-y: scroll; scrollbar-width: none;
  display: flex; flex-direction: column; gap: .25rem;
}
.ep-log::-webkit-scrollbar { display: none; }

.ep-log-line {
  display: flex; gap: .45rem; align-items: baseline; flex-shrink: 0;
  opacity: 0; animation: logAppear .2s ease forwards;
}
@keyframes logAppear {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.ell-time { color: #6e7681; flex-shrink: 0; letter-spacing: -.01em; }
.ell-icon         { flex-shrink: 0; font-style: normal; }
.ell-icon.ok      { color: #3fb950; }
.ell-icon.run     { color: #58a6ff; }
.ell-icon.inf     { color: #e3b341; }
.ell-icon.warn    { color: #d29922; }
.ell-text         { color: #c9d1d9; flex: 1; }
.ell-text .hl     { color: #79c0ff; }       /* highlighted values (row counts) */
.ell-text .hl-ok  { color: #3fb950; }       /* success values */

.ep-term-ftr {
  display: flex; justify-content: space-between; align-items: center;
  background: #161b22; padding: .35rem .85rem;
  font-family: monospace; font-size: .62rem; color: rgba(255,255,255,.35);
  border-top: 1px solid rgba(255,255,255,.05);
}

/* ============================================================
   POWER AUTOMATE — VERTICAL CARD FLOW
   ============================================================ */
.paf-canvas {
  padding: 0 1.1rem 1.25rem;
  display: flex; flex-direction: column; gap: 0;
}
.paf-run-bar {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .75rem; font-size: .72rem; font-weight: 600;
  color: var(--text-muted);
}
.paf-run-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d97706;
  animation: pulseLive 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.paf-step {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease);
}
.paf-step[data-paf="success"] { border-color: #16a34a; opacity: .75; }
.paf-step[data-paf="running"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
  opacity: 1;
}
.paf-step[data-paf="pending"] { opacity: .4; }
[data-theme="dark"] .paf-step[data-paf="running"] {
  box-shadow: 0 0 0 3px rgba(88,166,255,.15);
}

.paf-step-inner {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .875rem;
}
.paf-step-ico {
  width: 30px; height: 30px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ico-bg, var(--accent)); color: #fff;
  font-size: .95rem;
}
.paf-step-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .08rem;
}
.paf-step-conn   { font-size: .63rem; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
.paf-step-action {
  font-size: .72rem; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paf-step-badge {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
}
.paf-step[data-paf="success"] .paf-step-badge { background: #16a34a; color: #fff; }
.paf-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.2);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.paf-arrow-down {
  text-align: center; font-size: .55rem; color: var(--border);
  line-height: 1; padding: 2px 0; pointer-events: none; flex-shrink: 0;
}

/* ============================================================
   SHOWCASE — TWO-ROW GRID LAYOUT
   ============================================================ */
.showcase-top { /* inherits 3 columns from .showcase-grid */ }
.showcase-bottom {
  grid-template-columns: repeat(2, 1fr) !important;
  max-width: 820px; margin: 1.5rem auto 0;
}
@media (max-width: 768px) {
  .showcase-bottom { grid-template-columns: 1fr !important; max-width: 100%; margin-top: 1rem; }
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
#scrollBar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  z-index: 200; pointer-events: none;
  transition: width .08s linear;
}

/* ============================================================
   EXPERIENCE — TIMELINE
   ============================================================ */
.timeline {
  position: relative;
  display: flex; flex-direction: column;
}
/* Continuous vertical rule behind all items */
.timeline::before {
  content: '';
  position: absolute; left: 15px; top: 10px; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--accent) 0%, var(--border) 100%);
  z-index: 0;
}

.tl-item {
  display: flex; gap: 1.5rem;
  padding-bottom: 2rem; position: relative;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child .tl-line { display: none; }

/* Marker column */
.tl-marker {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; padding-top: .3rem; z-index: 1;
}
.tl-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-alt); border: 2.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tl-dot-sm {
  width: 24px; height: 24px;
  border-color: var(--border);
}
.tl-current .tl-dot {
  background: var(--accent);
  animation: ringPulse 2.8s ease-in-out infinite;
}
/* White/light inner dot */
.tl-dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.tl-dot-sm::after { width: 6px; height: 6px; background: var(--text-muted); }
.tl-current .tl-dot::after { background: #fff; }

.tl-line {
  width: 2px; flex: 1; background: transparent;
  min-height: 16px;
}

/* Card */
.tl-card {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm); transition: box-shadow var(--t), transform var(--t);
}
.tl-card:hover { box-shadow: var(--shadow-hover); transform: translateX(3px); }
.tl-current .tl-card { border-color: var(--accent-mid); }

.tl-card-sm { padding: 1rem 1.25rem; }

.tl-card-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
  margin-bottom: .6rem;
}
.tl-company {
  font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .2rem;
}
.tl-role { font-size: .9rem; font-weight: 600; color: var(--accent); margin-bottom: .3rem; }
.tl-period {
  display: flex; align-items: center; gap: .35rem;
  font-size: .75rem; color: var(--text-muted);
}
.tl-period svg { flex-shrink: 0; opacity: .6; }

.tl-badge {
  flex-shrink: 0; font-size: .65rem; font-weight: 700;
  padding: .25rem .65rem; border-radius: var(--r-full);
  background: var(--accent); color: #fff;
  animation: pulseLive 2.5s ease-in-out infinite;
}

.tl-domain {
  font-size: .78rem; color: var(--text-muted); font-style: italic;
  margin-bottom: .75rem; padding-left: .75rem;
  border-left: 2px solid var(--accent-mid);
}
.tl-points {
  list-style: none; display: flex; flex-direction: column;
  gap: .35rem; margin-bottom: .875rem;
}
.tl-points li {
  font-size: .8125rem; color: var(--text-muted);
  padding-left: 1.1rem; position: relative; line-height: 1.55;
}
.tl-points li::before {
  content: '›'; position: absolute; left: 0;
  color: var(--accent); font-weight: 700;
}
.tl-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tl-tag {
  font-size: .7rem; font-weight: 600; padding: .2rem .6rem;
  border-radius: var(--r-full);
  background: var(--bg-alt); color: var(--text-muted);
  border: 1px solid var(--border);
  transition: all var(--t);
}
.tl-tag:hover { color: var(--accent); border-color: var(--accent-mid); }

/* ============================================================
   EDUCATION GRID
   ============================================================ */
.edu-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.edu-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  transition: all var(--t);
}
.edu-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.edu-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-sm);
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.edu-icon svg { width: 22px; height: 22px; }
.edu-body { display: flex; flex-direction: column; gap: .2rem; }
.edu-body h3 { font-size: .9375rem; font-weight: 700; color: var(--text); }
.edu-school { font-size: .8rem; color: var(--text-muted); }
.edu-year {
  display: inline-block; font-size: .72rem; font-weight: 700;
  color: var(--accent); margin-top: .2rem;
}

/* ============================================================
   UX POLISH
   ============================================================ */

/* Smoother body transition on theme change */
body { transition: background .3s var(--ease), color .3s var(--ease); }

/* Better focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Nav: active link gets a bottom accent line instead of just bg */
.nav-link.active {
  color: var(--accent);
  background: var(--accent-light);
  font-weight: 600;
}

/* Section label: refined uppercase tracking */
.section-label { letter-spacing: .14em; }

/* Card lift on hover — consistent across all card types */
.stat-card:hover,
.skill-card:hover,
.service-card:hover,
.project-card:hover { will-change: transform; }

/* Subtle grid overlay on section-alt backgrounds (dark mode only) */
[data-theme="dark"] .section-alt {
  background-image: radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Responsive timeline */
@media (max-width: 768px) {
  .timeline::before { left: 11px; }
  .tl-item { gap: 1rem; }
  .tl-dot   { width: 24px; height: 24px; }
  .tl-dot-sm { width: 20px; height: 20px; }
  .tl-dot::after { width: 6px; height: 6px; }
  .tl-card { padding: 1rem; }
  .tl-card:hover { transform: none; }
  .edu-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOWCASE CAROUSEL
   ============================================================ */
.sc-carousel {
  display: flex; align-items: center; gap: 1rem;
}
.sc-viewport {
  flex: 1; overflow: hidden;
  border-radius: var(--r-lg);
}
.sc-track {
  display: flex; gap: 1.5rem;
  transition: transform .45s var(--ease);
  will-change: transform;
}
/* Desktop: 2 cards visible at once */
.sc-slide {
  min-width: calc(50% - .75rem);   /* 50% minus half the 1.5rem gap */
  flex-shrink: 0;
}
/* Mobile: 1 card at a time */
@media (max-width: 768px) {
  .sc-track { gap: 0; }
  .sc-slide { min-width: 100%; }
}

/* Prev / next arrow buttons */
.sc-btn {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t); user-select: none;
}
.sc-btn:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 4px 14px rgba(37,99,235,.2);
}
.sc-btn:active { transform: scale(.94); }

/* Dot indicators */
.sc-dots {
  display: flex; justify-content: center; align-items: center;
  gap: .5rem; margin-top: 1.25rem;
}
.sc-dot {
  width: 8px; height: 8px; border-radius: var(--r-full);
  border: none; background: var(--border);
  cursor: pointer; transition: all .3s var(--ease); padding: 0;
}
.sc-dot.active {
  width: 26px; background: var(--accent);
}

/* Slide label (1 / 5) */
.sc-label {
  text-align: center; margin-top: .75rem;
  font-size: .75rem; color: var(--text-muted); font-weight: 500;
}

/* Mobile: hide arrows, rely on swipe + dots */
@media (max-width: 600px) {
  .sc-btn { display: none; }
  .sc-carousel { gap: 0; }
}

/* Compact card height — tighter header + body padding */
.sc-header { padding: .875rem 1.1rem .6rem; }
.sc-header h3 { font-size: .95rem; }

/* ============================================================
   CI/CD — GITHUB ACTIONS STYLE
   ============================================================ */
.cicd-canvas { padding: 0 1.1rem 1rem; }

.cicd-run-hdr {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; margin-bottom: .5rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: .7rem;
}
.cicd-run-pill {
  font-size: .63rem; font-weight: 700;
  padding: .1rem .5rem; border-radius: var(--r-full);
  background: #1a7f37; color: #fff;
}
.cicd-run-file { flex: 1; font-family: monospace; font-size: .67rem; color: var(--text-muted); }
.cicd-run-clock { font-family: monospace; font-size: .65rem; color: var(--text-muted); }

.cicd-jobs { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .65rem; }
.cicd-job {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .75rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-sm); transition: all .35s var(--ease);
}
.cicd-job[data-cstatus="success"] { border-color: #1a7f37; opacity: .82; }
.cicd-job[data-cstatus="running"]  {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37,99,235,.1);
}
.cicd-job[data-cstatus="pending"]  { opacity: .42; }

.cicd-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
}
.cicd-job[data-cstatus="success"] .cicd-icon { background: #1a7f37; color: #fff; }
.cicd-job[data-cstatus="pending"] .cicd-icon { font-size: .9rem; color: var(--text-muted); }
.cicd-spin-sm {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

.cicd-job-body { flex: 1; display: flex; flex-direction: column; gap: .04rem; }
.cicd-job-name { font-size: .72rem; font-weight: 700; color: var(--text); font-family: monospace; }
.cicd-job-desc { font-size: .63rem; color: var(--text-muted); }
.cicd-job-dur  { font-family: monospace; font-size: .63rem; color: var(--text-muted); flex-shrink: 0; }
.cicd-job[data-cstatus="success"] .cicd-job-dur { color: #1a7f37; }

.cicd-bar-row  { display: flex; align-items: center; gap: .5rem; }
.cicd-bar-track {
  flex: 1; height: 4px; background: var(--border);
  border-radius: var(--r-full); overflow: hidden;
}
.cicd-bar-fill {
  height: 100%; width: 25%;
  background: linear-gradient(90deg, #1a7f37, #2563eb);
  border-radius: var(--r-full); transition: width .8s var(--ease);
}
.cicd-bar-pct { font-size: .65rem; font-weight: 700; color: #1a7f37; min-width: 28px; text-align: right; }

/* ============================================================
   NAV MOBILE — STRONGER FIX (logo fills space → actions go right)
   ============================================================ */
@media (max-width: 768px) {
  .nav-logo { flex: 1; }    /* absorb remaining space → pushes .nav-actions to the far right */
}

/* ============================================================
   TIMELINE — animated draw-on line
   ============================================================ */
.timeline::before {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 1.6s cubic-bezier(.4,0,.2,1) .2s;
}
.timeline.tl-live::before {
  transform: scaleY(1);
}

/* ============================================================
   ADF CARD — bottom progress + recent runs
   ============================================================ */
.adf-bottom-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem .875rem .75rem;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.adf-prog-wrap { flex: 1; }
.adf-prog-label {
  font-size: .58rem; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem;
}
.adf-prog-track {
  height: 5px; background: var(--border);
  border-radius: var(--r-full); overflow: hidden;
}
.adf-prog-fill {
  height: 100%; width: 25%;
  background: linear-gradient(90deg, var(--accent), #7c3aed);
  border-radius: var(--r-full);
  transition: width .85s cubic-bezier(.4,0,.2,1);
}
.adf-recent {
  display: flex; align-items: center; gap: .3rem; flex-shrink: 0;
}
.adf-recent-lbl {
  font-size: .6rem; color: var(--text-muted); font-weight: 600;
  margin-right: .15rem;
}
.adf-hist {
  width: 9px; height: 9px; border-radius: 2px;
  transition: opacity .3s;
}
.adf-hist.ok   { background: #16a34a; }
.adf-hist.fail { background: #dc2626; }

/* ============================================================
   ADF — MULTI-SOURCE LAYOUT
   ============================================================ */
.adf-layout-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem .875rem .5rem;
}

.adf-sources-col {
  display: flex; flex-direction: column; gap: .35rem; flex-shrink: 0;
}
.adf-source {
  display: flex; align-items: center; gap: .35rem;
  padding: .28rem .55rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: .61rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; transition: border-color .35s var(--ease);
}
.adf-source:hover { border-color: var(--accent); color: var(--accent); }
.adf-src-ico   { font-size: .85rem; flex-shrink: 0; }
.adf-src-name  { font-size: .61rem; }

.adf-fork-svg {
  width: 32px; height: 70px; flex-shrink: 0;
  color: var(--border);
}

.adf-activities {
  display: flex; align-items: center; gap: .35rem; flex: 1;
  overflow: hidden;
}
/* Ensure activity cards don't overflow in the tighter layout */
.adf-activities .adf-act {
  flex: 1; min-width: 0; max-width: none;
}
.adf-activities .adf-act-name {
  font-size: .58rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* CI/CD Azure DevOps badge dark mode */
[data-theme="dark"] .cicd-run-pill[style*="0052cc"] {
  background: #003a8f !important;
}

/* ============================================================
   ADF — GANTT CHART TIMELINE
   ============================================================ */
.adf-gantt-wrap { padding: 0 1.1rem 1rem; }

.adf-gantt-hdr {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .75rem; margin-bottom: .5rem;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.adf-gantt-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #d97706; flex-shrink: 0;
  animation: pulseLive 1.6s ease-in-out infinite;
}
.adf-gantt-name  { flex: 1; font-size: .7rem; font-weight: 600; color: var(--text); }
.adf-gantt-clock { font-family: monospace; font-size: .65rem; color: var(--text-muted); }
.adf-gantt-body  { display: flex; flex-direction: column; gap: .28rem; margin-bottom: .5rem; }
.adf-gantt-ruler {
  display: flex; justify-content: space-between;
  padding-left: 66px; font-size: .55rem; color: var(--text-muted); opacity: .5; margin-bottom: .1rem;
}
.adf-gantt-row { display: flex; align-items: center; gap: .4rem; }
.adf-glabel {
  width: 62px; text-align: right; flex-shrink: 0;
  font-size: .59rem; font-family: monospace; color: var(--text-muted);
}
.adf-gtrack {
  flex: 1; height: 14px; border-radius: 3px;
  background: var(--bg-alt); position: relative; overflow: hidden;
}
.adf-gbar {
  position: absolute; top: 2px; bottom: 2px;
  left: var(--s); width: var(--w); background: var(--c); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center; opacity: 0;
}
.adf-gantt-wrap.animate .adf-gbar {
  animation: adfBarGrow .65s cubic-bezier(.4,0,.2,1) var(--d) both;
}
@keyframes adfBarGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: .88; }
}
.adf-gantt-wrap.animate .adf-gbar.adf-gbar-run {
  animation: adfBarGrow .65s cubic-bezier(.4,0,.2,1) var(--d) both,
             adfGlow 2s ease-in-out calc(var(--d) + .65s) infinite;
}
@keyframes adfGlow { 0%,100%{opacity:.7;} 50%{opacity:1;} }
.adf-gbar.adf-gbar-wait { transform: scaleX(1); opacity: .14; }
.adf-gantt-wrap.animate .adf-gbar.adf-gbar-wait { animation: none; }
.adf-cursor {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent 0%, var(--accent) 40%, var(--accent) 60%, transparent 100%);
  opacity: 0; pointer-events: none;
}
.adf-gantt-wrap.animate .adf-cursor {
  animation: cursorSweep 5s linear 1.5s infinite;
}
@keyframes cursorSweep {
  0%   { left: 33%; opacity: 0; }
  5%   { opacity: .9; }
  90%  { opacity: .9; }
  100% { left: 69%; opacity: 0; }
}
.adf-gstatus {
  width: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
}
.adf-gok   { color: #16a34a; }
.adf-grun  { color: var(--accent); }
.adf-gwait { color: var(--text-muted); font-size: .75rem; }
.adf-g-spin {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.adf-gantt-foot {
  display: flex; justify-content: space-between;
  padding-top: .35rem; border-top: 1px solid var(--border);
  font-size: .6rem; color: var(--text-muted);
}

/* ADF — animated flow lines between activities */
.adf-flow-line {
  flex-shrink: 0; width: 26px;
  position: relative; display: flex; align-items: center;
}
.adf-flow-line::before {
  content: ''; width: 100%; height: 2px;
  background: var(--border); border-radius: 1px;
  display: block;
}
.adf-flow-dot {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px var(--accent);
  animation: adfDotFlow 1.4s linear infinite;
  animation-delay: var(--d);
}
@keyframes adfDotFlow {
  0%   { left: -7px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}