/* ============================================================
   Irtaza Hyder — Portfolio Stylesheet
   Design system: SkyLine (navy + gold), refined for a premium,
   recruiter-facing 2026 build. Display: Poppins. Body/UI: Inter.
   Colors: --primary #1a3c6e | --gold #c8a951 | --primary-dark #0a1628
   ============================================================ */

:root{
  --primary: #1a3c6e;
  --primary-dark: #0a1628;
  --primary-mid: #2a5298;
  --gold: #c8a951;
  --gold-light: #e8d98a;
  --gold-dark: #a8894e;
  --white: #ffffff;
  --off-white: #f8f9fc;
  --light-gray: #e8ecf0;
  --mid-gray: #8899a6;
  --text: #1c2b3a;
  --text-muted: #6b7a8d;
  --border: #dce3eb;
  --success: #34a853;
  --danger: #e05252;
  --shadow: 0 4px 24px rgba(26,60,110,0.10);
  --shadow-lg: 0 12px 48px rgba(26,60,110,0.18);
  --shadow-gold: 0 10px 30px rgba(200,169,81,0.28);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
  --font-display: 'Poppins', sans-serif;
  --font: 'Inter', sans-serif;
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --navbar-bg: rgba(10,22,40,0.82);
  --glass-border: rgba(255,255,255,0.14);
  --maxw: 1180px;
}
[data-theme="dark"]{
  --bg: #0b131f;
  --card-bg: #131f30;
  --input-bg: #17253a;
  --text: #e7eefb;
  --text-muted: #92a2bd;
  --border: #1f3050;
  --off-white: #0e1a29;
  --light-gray: #182842;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
  --navbar-bg: rgba(6,12,22,0.82);
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font); background: var(--bg); color: var(--text);
  line-height: 1.65; font-size: 15.5px;
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1,h2,h3,h4,.font-display{ font-family: var(--font-display); }
a{ color: inherit; text-decoration: none; transition: color var(--transition); }
img{ max-width:100%; height:auto; display:block; }
ul{ list-style: none; }
button{ font-family: inherit; }
::selection{ background: var(--gold); color: var(--primary-dark); }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.accent{ color: var(--gold); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Accessibility: visible focus + skip link */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px;
}
.skip-link{
  position:absolute; left:16px; top:-60px; background: var(--gold); color: var(--primary-dark);
  padding: 10px 18px; border-radius: 8px; font-weight:700; z-index: 3000; transition: top .2s ease;
}
.skip-link:focus{ top: 16px; }

/* Custom scrollbar */
::-webkit-scrollbar{ width: 11px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--primary-mid), var(--gold)); border-radius: 10px; border: 2.5px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--gold); }
* { scrollbar-width: thin; scrollbar-color: var(--gold) var(--bg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count:1 !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

/* ===========================================================
   LOADING SCREEN
=========================================================== */
.loader{
  position:fixed; inset:0; z-index: 9999; background: var(--primary-dark);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
  transition: opacity .5s ease, visibility .5s ease;
}
.loader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary-mid), var(--gold)); color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:1.2rem; animation: pulse 1.3s ease-in-out infinite;
}
.loader-bar{ width:140px; height:3px; border-radius:99px; background: rgba(255,255,255,0.12); overflow:hidden; }
.loader-bar::after{ content:''; display:block; width:40%; height:100%; background: var(--gold); animation: loaderSlide 1.1s ease-in-out infinite; }
@keyframes loaderSlide{ 0%{ transform: translateX(-100%);} 100%{ transform: translateX(350%);} }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

/* Scroll progress bar */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background: linear-gradient(90deg, var(--primary-mid), var(--gold)); z-index: 2000; transition: width .1s linear; }

/* Back-to-top */
.back-to-top-float{
  position:fixed; right: 22px; bottom: 22px; width:46px; height:46px; border-radius:50%;
  background: var(--gold); color: var(--primary-dark); border:none; display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; box-shadow: var(--shadow-gold); z-index: 900; opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all var(--transition);
}
.back-to-top-float.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top-float:hover{ background: var(--gold-dark); transform: translateY(-3px); }

/* Toast notifications */
.toast-stack{ position:fixed; top: 88px; right: 20px; z-index: 3000; display:flex; flex-direction:column; gap:10px; max-width: 340px; }
.toast{
  background: var(--card-bg); border: 1.5px solid var(--border); border-left: 4px solid var(--success);
  border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-lg); color: var(--text);
  font-size: 0.86rem; display:flex; align-items:flex-start; gap:10px;
  animation: toastIn .35s ease both;
}
.toast.error{ border-left-color: var(--danger); }
.toast i{ margin-top:2px; color: var(--success); }
.toast.error i{ color: var(--danger); }
.toast.hide{ animation: toastOut .35s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform: translateX(30px);} to{ opacity:1; transform: translateX(0);} }
@keyframes toastOut{ to{ opacity:0; transform: translateX(30px);} }

/* ===========================================================
   TOP BAR
=========================================================== */
.top-bar{ background: var(--primary-dark); color: rgba(255,255,255,0.75); font-size: 0.76rem; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.top-bar .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.top-bar i{ color: var(--gold); margin-right: 6px; }
.top-bar .top-right{ display:flex; align-items:center; gap: 6px; }
.status-dot{ width:6px; height:6px; border-radius:50%; background: var(--success); display:inline-block; margin-right:6px; box-shadow: 0 0 6px var(--success); animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.45;} }

/* ===========================================================
   NAVBAR — glassmorphism
=========================================================== */
.navbar{
  background: var(--navbar-bg); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  padding: 14px 0; border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 2px 20px rgba(0,0,0,0.25); position: sticky; top:0; z-index: 1000;
  transition: box-shadow var(--transition), padding var(--transition);
}
.navbar.scrolled{ padding: 9px 0; box-shadow: 0 4px 28px rgba(0,0,0,0.35); }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap: 20px; }
.navbar-brand{
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color:#fff; display:flex; align-items:center; gap:9px;
  letter-spacing: -0.3px; flex-shrink:0; padding-left: 4px;
}
.brand-logo{
  width: 38px; height:38px; border-radius: 11px; flex-shrink:0;
  background: linear-gradient(135deg, var(--primary-mid), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size: 1rem; font-weight: 800; color:#fff;
}
.navbar-links{ display:flex; align-items:center; gap: 4px; margin-left: auto; }
.nav-link{
  color: rgba(255,255,255,0.82); font-size: 0.875rem; font-weight:500;
  padding: 9px 15px; border-radius: var(--radius-xs); transition: all var(--transition); position:relative;
}
.nav-link:hover, .nav-link.active{ color:#fff; background: rgba(255,255,255,0.08); }
.nav-btn-gold{
  background: var(--gold); color: var(--primary-dark) !important; border-radius: 50px;
  font-weight: 700; padding: 9px 20px; margin-left: 8px; white-space: nowrap;
}
.nav-btn-gold:hover{ background: var(--gold-dark); }
.dark-toggle{
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color:#fff;
  border-radius: 50%; width: 38px; height: 38px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all var(--transition); font-size: 0.9rem; margin-left: 14px; flex-shrink:0;
}
.dark-toggle:hover{ background: rgba(255,255,255,0.2); transform: rotate(14deg); }
.dark-toggle .fa-sun{ display:none; color: var(--gold); }
[data-theme="dark"] .dark-toggle .fa-moon{ display:none; }
[data-theme="dark"] .dark-toggle .fa-sun{ display:block; }

.navbar-toggler{
  display:none; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color:#fff; border-radius: var(--radius-xs); width: 38px; height:38px; align-items:center; justify-content:center;
  cursor:pointer; font-size: 1.1rem; flex-shrink:0;
}

/* ===========================================================
   HERO
=========================================================== */
.hero-section{
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 55%, #0d2d5e 100%);
  padding: 90px 0 100px; overflow:hidden; position:relative;
}
.hero-blob{ position:absolute; border-radius:50%; filter: blur(70px); pointer-events:none; opacity:0.35; animation: blobFloat 14s ease-in-out infinite; }
.hero-blob.b1{ width:420px; height:420px; background: radial-gradient(circle, var(--gold), transparent 70%); top:-140px; right:-100px; }
.hero-blob.b2{ width:360px; height:360px; background: radial-gradient(circle, var(--primary-mid), transparent 70%); bottom:-160px; left:-100px; animation-delay: -6s; }
@keyframes blobFloat{ 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(30px,-24px) scale(1.08);} }
.hero-bg-icon{
  position:absolute; right:-60px; top:50%; transform: translateY(-55%) rotate(-8deg);
  font-size: 22rem; opacity: 0.035; pointer-events:none; color:#fff; line-height:1;
}
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:center; position:relative; z-index:1; }
.hero-badge{
  display:inline-flex; align-items:center; gap:7px; background: rgba(200,169,81,0.15);
  border: 1px solid rgba(200,169,81,0.3); color: var(--gold); padding: 7px 17px;
  border-radius: 50px; font-size: 0.78rem; font-weight:600; margin-bottom: 22px;
  animation: fadeUp 0.6s ease both;
}
.hero-badge-dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: dotPulse 2s ease-in-out infinite; }
.hero-title{
  font-family: var(--font-display); font-size: clamp(2.3rem,4.6vw,3.5rem); font-weight:900; color:#fff; line-height:1.14;
  letter-spacing: -1px; margin-bottom: 20px; animation: fadeUp 0.7s ease 0.1s both; min-height: 2.3em;
}
.hero-title .type-cursor{ display:inline-block; width:3px; height: 0.85em; background: var(--gold); margin-left:4px; vertical-align:-0.1em; animation: caretBlink 1s step-end infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }
.hero-subtitle{
  color: rgba(255,255,255,0.78); font-size: 1.02rem; line-height:1.75; margin-bottom: 30px;
  max-width: 520px; animation: fadeUp 0.7s ease 0.2s both;
}
.hero-actions{ display:flex; gap: 14px; flex-wrap:wrap; animation: fadeUp 0.7s ease 0.28s both; }
.hero-social-inline{ display:flex; gap:10px; margin-top:24px; animation: fadeUp .7s ease .32s both; }
.hero-stats{ display:flex; gap: 34px; margin-top: 38px; flex-wrap:wrap; animation: fadeUp 0.7s ease 0.36s both; }
.hero-stat{ text-align:left; }
.stat-num{ font-family: var(--font-display); font-size: 1.55rem; font-weight:800; color: var(--gold); }
.stat-lbl{ font-size: 0.72rem; color: rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.5px; }
.scroll-indicator{
  position:absolute; left:50%; bottom:26px; transform: translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px; color: rgba(255,255,255,0.55); font-size:0.7rem;
  letter-spacing:1px; text-transform:uppercase; animation: fadeUp .8s ease .5s both;
}
.scroll-indicator .mouse{ width:22px; height:34px; border:2px solid rgba(255,255,255,0.4); border-radius:14px; position:relative; }
.scroll-indicator .mouse::after{ content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background: var(--gold); border-radius:2px; transform: translateX(-50%); animation: scrollDot 1.6s ease infinite; }
@keyframes scrollDot{ 0%{ opacity:1; top:6px;} 100%{ opacity:0; top:18px;} }
@keyframes fadeUp{ from{opacity:0; transform: translateY(24px);} to{opacity:1; transform: translateY(0);} }

/* ── Hero profile card ── */
.profile-card{
  background: rgba(255,255,255,0.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 34px 30px;
  box-shadow: var(--shadow-lg); animation: fadeUp 0.8s ease 0.2s both; text-align:center;
}
.profile-photo{
  width: 112px; height:112px; border-radius:50%; overflow:hidden; margin: 0 auto 18px;
  border: 3px solid var(--gold); box-shadow: 0 0 0 6px rgba(200,169,81,0.15);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.profile-photo img{ width:100%; height:100%; object-fit:cover; }
.profile-photo-fallback{
  display:none; width:100%; height:100%; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size: 2rem; background: var(--light-gray); color: var(--primary);
}
.profile-card h3{ font-family: var(--font-display); font-size: 1.25rem; font-weight:700; color:#fff; margin-bottom: 4px; }
.profile-card .profile-role{ color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-bottom: 22px; }
.profile-quickstats{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.qstat{ background: rgba(255,255,255,0.08); border-radius: var(--radius-sm); padding: 14px 10px; }
.qstat .qnum{ font-family: var(--font-display); font-weight:800; font-size: 1.15rem; color: var(--gold); }
.qstat .qlbl{ font-size: 0.7rem; color: rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.4px; margin-top:2px; }

/* ===========================================================
   SECTIONS shared
=========================================================== */
.section-pad{ padding: 96px 0; position:relative; }
.section-alt{ background: var(--off-white); }
.section-head{ margin-bottom: 46px; }
.section-head.center{ text-align:center; }
.section-badge{
  display:inline-block; background: rgba(26,60,110,0.08); color: var(--primary);
  padding: 5px 16px; border-radius: 50px; font-size: 0.75rem; font-weight:700;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
}
[data-theme="dark"] .section-badge{ background: rgba(200,169,81,0.12); color: var(--gold); }
.section-title{ font-family: var(--font-display); font-size: clamp(1.7rem,3.2vw,2.3rem); font-weight:800; color: var(--text); line-height:1.2; margin-bottom: 8px; }
.section-subtitle{ font-size: 1rem; color: var(--text-muted); max-width: 580px; }
.section-head.center .section-subtitle{ margin: 0 auto; }
.section-divider{ width: 60px; height:4px; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); border-radius: 4px; margin: 14px 0 0; }
.section-head.center .section-divider{ margin-left:auto; margin-right:auto; }

.reveal{ opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ===========================================================
   ABOUT
=========================================================== */
.about-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items:start; }
.about-text p{ color: var(--text-muted); margin-bottom: 16px; max-width: 540px; }
.about-text strong{ color: var(--text); }
.about-highlights{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.about-highlight{ display:flex; align-items:flex-start; gap:12px; font-size:0.92rem; color: var(--text); }
.about-highlight i{ color: var(--gold); margin-top:3px; }
.about-stats{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-card{
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); transition: all var(--transition);
}
.stat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(200,169,81,0.4); }
.stat-card .stat-card-num{ font-family: var(--font-display); font-weight:800; font-size: 1.6rem; color: var(--primary); }
[data-theme="dark"] .stat-card .stat-card-num{ color: var(--gold); }
.stat-card .stat-card-lbl{ font-size: 0.82rem; color: var(--text-muted); margin-top:4px; }

/* ===========================================================
   SKILLS
=========================================================== */
.skills-categories{ display:flex; flex-direction:column; gap: 42px; }
.skill-category-title{
  font-family: var(--font-display); font-weight:700; font-size: 1rem; color: var(--primary);
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
  display:flex; align-items:center; gap:9px;
}
.skill-category-title i{ color: var(--gold); }
[data-theme="dark"] .skill-category-title{ color: var(--gold); }
.skills-columns{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.skill-bar{ margin-bottom: 20px; }
.skill-bar-head{ display:flex; justify-content:space-between; margin-bottom:8px; font-weight:500; font-size:0.92rem; }
.skill-percent{ color: var(--primary); font-weight:700; }
[data-theme="dark"] .skill-percent{ color: var(--gold); }
.skill-track{ height:8px; border-radius:999px; background: var(--light-gray); overflow:hidden; }
.skill-fill{ height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg, var(--primary), var(--gold)); transition: width 1.1s cubic-bezier(.22,1,.36,1); position:relative; }
.skills-note{ color: var(--text-muted); font-size: 0.82rem; margin-top: 30px; }
.skills-note code{ background: var(--light-gray); padding: 2px 6px; border-radius: 4px; }

.soft-skills{ display:flex; flex-wrap:wrap; gap:10px; }
.soft-skill-badge{
  display:inline-flex; align-items:center; gap:7px; background: var(--card-bg); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 8px 16px; font-size:0.84rem; font-weight:600; color: var(--text);
  transition: all var(--transition);
}
.soft-skill-badge:hover{ border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.soft-skill-badge i{ color: var(--gold); }

/* ===========================================================
   PROJECTS
=========================================================== */
.project-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.project-card{
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); transition: all var(--transition);
  opacity:0; transform: translateY(20px); display:flex; flex-direction:column;
}
.project-card.animate-in{ opacity:1; transform: translateY(0); }
.project-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(200,169,81,0.45); }
.project-img{ aspect-ratio: 16/9; background: var(--light-gray); position:relative; overflow:hidden; }
.project-img img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.project-card:hover .project-img img{ transform: scale(1.06); }
.project-img.no-img{ display:flex; align-items:center; justify-content:center; }
.project-img.no-img::after{ content:"Add a screenshot → /projects"; color: var(--text-muted); font-size:0.8rem; }
.project-img.no-img img{ display:none; }
.project-tag{
  position:absolute; top:12px; left:12px; background: rgba(10,22,40,0.82); backdrop-filter: blur(6px);
  color: var(--gold); font-size:0.7rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(200,169,81,0.35);
}
.project-body{ padding: 24px; display:flex; flex-direction:column; flex:1; }
.project-body h3{ font-family: var(--font-display); font-size: 1.12rem; font-weight:700; margin-bottom:8px; color: var(--text); }
.project-body p{ color: var(--text-muted); font-size: 0.9rem; margin-bottom: 14px; }
.project-stack{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 16px; }
.project-stack span{ font-size: 0.72rem; padding: 4px 11px; border-radius: 999px; background: rgba(26,60,110,0.08); color: var(--primary); font-weight:600; }
[data-theme="dark"] .project-stack span{ background: rgba(200,169,81,0.12); color: var(--gold); }
.project-links{ display:flex; gap: 20px; font-size: 0.85rem; margin-top:auto; padding-top:8px; }
.project-links a{ color: var(--primary); font-weight:600; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; display:inline-flex; align-items:center; gap:6px; }
[data-theme="dark"] .project-links a{ color: var(--gold); }
.project-links a:hover{ border-color: currentColor; }

/* ===========================================================
   CERTIFICATES
=========================================================== */
.cert-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cert-card{
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius);
  overflow:hidden; text-align:center; box-shadow: var(--shadow); transition: all var(--transition);
  border-top: 3px solid var(--gold);
}
.cert-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cert-img{ aspect-ratio: 4/3; background: var(--light-gray); }
.cert-img img{ width:100%; height:100%; object-fit:cover; }
.cert-img.no-img{ display:flex; align-items:center; justify-content:center; }
.cert-img.no-img::after{ content: "Add image → /certificates"; color: var(--text-muted); font-size:0.78rem; padding: 0 16px; }
.cert-img.no-img img{ display:none; }
.cert-card h4{ font-family: var(--font-display); font-size: 1rem; font-weight:700; margin: 18px 16px 4px; color: var(--text); }
.cert-issuer{ color: var(--text-muted); font-size: 0.82rem; margin-bottom: 16px; }
.cert-view{ display:inline-block; margin-bottom: 20px; font-size: 0.82rem; color: var(--primary); font-weight:600; border-bottom: 1px solid var(--primary); padding-bottom:2px; }
[data-theme="dark"] .cert-view{ color: var(--gold); border-color: var(--gold); }

.cert-all-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: 18px; margin: 64px 0 28px; }
.cert-all-head h3{ font-family: var(--font-display); font-size: 1.2rem; font-weight:700; color: var(--text); }
.cert-filters{ display:flex; flex-wrap:wrap; gap: 8px; }
.cert-filter{
  font-family: inherit; font-size: 0.8rem; font-weight:600; padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--card-bg); color: var(--text-muted);
  cursor:pointer; transition: all var(--transition);
}
.cert-filter:hover{ border-color: var(--gold); color: var(--text); }
.cert-filter.active{ background: var(--gold); border-color: var(--gold); color: var(--primary-dark); }

.cert-grid-compact{ grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert-compact h4{ font-size: 0.86rem; margin: 14px 12px 4px; }
.cert-compact .cert-issuer{ font-size: 0.75rem; margin-bottom: 12px; }
.cert-compact .cert-view{ margin-bottom: 16px; font-size: 0.76rem; }
.cert-compact.cert-hidden{ display:none; }

/* ===========================================================
   TIMELINE (internship + education)
=========================================================== */
.timeline{ border-left: 2px solid var(--border); padding-left: 30px; max-width: 700px; display:flex; flex-direction:column; gap:34px; }
.timeline-item{ position:relative; }
.timeline-dot{ position:absolute; left:-36px; top:4px; width:13px; height:13px; border-radius:50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(200,169,81,0.18); }
.timeline-content h4{ font-family: var(--font-display); font-size: 1.1rem; font-weight:700; margin-bottom:4px; color: var(--text); }
.timeline-org{ color: var(--primary); font-size: 0.88rem; margin-bottom: 10px; font-weight:600; }
[data-theme="dark"] .timeline-org{ color: var(--gold); }
.timeline-date{ color: var(--text-muted); font-weight:400; }
.timeline-content p{ color: var(--text-muted); max-width: 580px; }
.timeline-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.timeline-tags span{ font-size: 0.72rem; padding: 4px 11px; border-radius: 999px; background: rgba(26,60,110,0.08); color: var(--primary); font-weight:600; }
[data-theme="dark"] .timeline-tags span{ background: rgba(200,169,81,0.12); color: var(--gold); }

/* ===========================================================
   FAQ
=========================================================== */
.faq-list{ max-width: 780px; margin: 0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background: var(--card-bg); border:1.5px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; transition: border-color var(--transition); }
.faq-item.open{ border-color: var(--gold); }
.faq-question{
  width:100%; background:none; border:none; padding: 18px 22px; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; font-family: var(--font-display); font-weight:600; font-size: 0.96rem; color: var(--text); text-align:left; gap: 16px;
}
.faq-question i{ color: var(--gold); transition: transform var(--transition); flex-shrink:0; }
.faq-item.open .faq-question i{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-item.open .faq-answer{ max-height: 240px; }
.faq-answer p{ padding: 0 22px 20px; color: var(--text-muted); font-size: 0.9rem; }

/* ===========================================================
   CTA (resume)
=========================================================== */
.cta-section{ background: linear-gradient(135deg, var(--primary-dark), var(--primary)); padding: 80px 0; text-align:center; position:relative; overflow:hidden; }
.cta-section .section-badge{ background: rgba(200,169,81,0.15); color: var(--gold); }
.cta-section h2{ font-family: var(--font-display); font-size: clamp(1.7rem,3.2vw,2.3rem); font-weight:800; color:#fff; margin-bottom: 12px; }
.cta-section p{ color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto 30px; }

/* ===========================================================
   CONTACT
=========================================================== */
.contact-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 44px; }
.contact-form{ display:flex; flex-direction:column; gap: 6px; }
.contact-form label{ font-size: 0.8rem; font-weight:600; color: var(--text-muted); text-transform: uppercase; letter-spacing:0.4px; margin-top: 14px; }
.contact-form input, .contact-form textarea{
  background: var(--input-bg); border: 1.5px solid var(--border); border-radius: var(--radius-xs);
  padding: 12px 14px; color: var(--text); font-family: var(--font); font-size: 0.92rem;
  resize: vertical; transition: all var(--transition); margin-top: 4px;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,81,0.16); }
.contact-form input.invalid, .contact-form textarea.invalid{ border-color: var(--danger); }
.field-error{ color: var(--danger); font-size: 0.76rem; min-height: 1.1em; margin-top: 3px; }
.form-note{ font-size: 0.82rem; color: var(--primary); margin-top: 10px; min-height: 1.2em; }
[data-theme="dark"] .form-note{ color: var(--gold); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.contact-form button[type="submit"]{ display:inline-flex; align-items:center; gap:9px; }
.contact-form button[type="submit"]:disabled{ opacity:0.7; cursor:not-allowed; }
.btn-spinner{ display:none; width:15px; height:15px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
.contact-form button[type="submit"].sending .btn-spinner{ display:inline-block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.contact-side{ display:flex; flex-direction:column; gap: 14px; }
.contact-card{
  background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; display:flex; align-items:center; gap: 16px; transition: all var(--transition);
}
.contact-card:hover{ border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow); }
.contact-icon{
  width: 46px; height:46px; flex-shrink:0; background: linear-gradient(135deg, var(--primary), var(--primary-mid));
  border-radius: 13px; display:flex; align-items:center; justify-content:center; color:#fff; font-size: 1.05rem;
}
.contact-card-label{ font-size: 0.72rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.contact-card-value{ font-size: 0.92rem; font-weight:600; color: var(--text); }
.contact-availability{
  background: linear-gradient(135deg, var(--primary), var(--primary-mid)); border-radius: var(--radius);
  padding: 22px; color:#fff;
}
.contact-availability h4{ font-family: var(--font-display); font-size: 1rem; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.contact-availability p{ font-size: 0.86rem; opacity:0.85; }

/* ===========================================================
   BUTTONS
=========================================================== */
.btn-gold{
  background: var(--gold); color: var(--primary-dark); border:none; border-radius: 50px;
  font-weight:700; font-size: 0.92rem; padding: 13px 28px; cursor:pointer;
  transition: all var(--transition); font-family: var(--font); display:inline-flex; align-items:center; gap:8px;
}
.btn-gold:hover{ background: var(--gold-dark); transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn-outline-sky{
  background: transparent; border: 2px solid rgba(255,255,255,0.35); color:#fff; border-radius: 50px;
  font-weight:600; font-size: 0.92rem; padding: 12px 26px; cursor:pointer;
  transition: all var(--transition); font-family: var(--font); display:inline-flex; align-items:center; gap:8px;
}
.btn-outline-sky:hover{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.btn-outline-sky.dark{ border-color: rgba(26,60,110,0.3); color: var(--primary); }
.btn-outline-sky.dark:hover{ background: rgba(26,60,110,0.06); border-color: var(--primary); }
.btn-primary-sky{
  background: linear-gradient(135deg, var(--primary), var(--primary-mid)); color:#fff; border:none;
  border-radius: var(--radius-xs); font-weight:700; font-size: 0.92rem; padding: 13px 26px; cursor:pointer;
  transition: all var(--transition); font-family: var(--font); display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary-sky:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.social-btn{
  width: 36px; height:36px; border-radius:50%; background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,0.7);
  font-size: 0.85rem; cursor:pointer; transition: all var(--transition); border: 1px solid rgba(255,255,255,0.1);
}
.social-btn:hover{ background: var(--gold); color: var(--primary-dark); transform: translateY(-3px); }

/* ===========================================================
   FOOTER
=========================================================== */
.site-footer{ background: var(--primary-dark); color: rgba(255,255,255,0.75); padding: 64px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 46px; }
.footer-brand .brand-name{ font-family: var(--font-display); font-size: 1.3rem; font-weight:800; color:#fff; margin-bottom: 14px; display:flex; align-items:center; gap:9px; }
.footer-brand p{ font-size: 0.85rem; opacity:0.65; line-height:1.75; max-width: 300px; margin-bottom: 18px; }
.footer-heading{ color: var(--gold); font-weight:700; font-size: 0.8rem; text-transform:uppercase; letter-spacing:1px; margin-bottom: 16px; }
.footer-links li{ margin-bottom: 9px; }
.footer-links a{ color: rgba(255,255,255,0.65); font-size: 0.87rem; transition: all var(--transition); }
.footer-links a:hover{ color: var(--gold); padding-left: 3px; }
.footer-social{ display:flex; gap: 10px; }
.footer-contact li{ font-size: 0.87rem; opacity: 0.75; margin-bottom: 12px; display:flex; flex-direction:column; gap:2px; }
.footer-contact .flabel{ font-size: 0.7rem; color: var(--gold); text-transform:uppercase; letter-spacing:0.5px; opacity:1; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.06); padding: 20px 0; margin-top: 8px; font-size: 0.8rem; opacity: 0.6; }
.footer-bottom .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 10px; }
.back-to-top{
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
  border-radius: 999px; padding: 7px 16px; font-size: 0.78rem; cursor:pointer;
  transition: all var(--transition); font-family: var(--font);
}
.back-to-top:hover{ background: var(--gold); color: var(--primary-dark); border-color: var(--gold); }

/* ===========================================================
   RESPONSIVE
=========================================================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .profile-card{ max-width: 420px; }
  .about-grid{ grid-template-columns: 1fr; gap: 36px; }
  .project-grid{ grid-template-columns: 1fr; }
  .cert-grid{ grid-template-columns: 1fr 1fr; }
  .cert-grid-compact{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .skills-columns{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .footer-brand{ grid-column: 1 / -1; }
  .toast-stack{ left:16px; right:16px; max-width:none; }
}
@media (max-width: 760px){
  .navbar-toggler{ display:flex; }
  .navbar-links{
    display:none; position:absolute; top: 100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background: var(--primary-dark); padding: 14px 20px 20px; gap: 4px; border-bottom: 1px solid rgba(200,169,81,0.15);
    margin-left: 0;
  }
  .navbar.open .navbar-links{ display:flex; }
  .navbar.open{ position: relative; }
  .nav-btn-gold{ margin-left:0; margin-top: 8px; text-align:center; justify-content:center; }
  .dark-toggle{ margin-left:0; margin-top: 10px; }
  .top-bar .top-right{ display:none; }
  .about-stats{ grid-template-columns: 1fr 1fr; }
  .cert-grid{ grid-template-columns: 1fr; }
  .cert-grid-compact{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .back-to-top-float{ right:16px; bottom:16px; }
  .section-pad{ padding: 68px 0; }
  .hero-section{ padding: 60px 0 80px; }
}