/* ===========================================
   VARIABLES & RESET
   =========================================== */
:root {
  --bg:           #FFFFFF;
  --bg-2:         #F7F9FC;
  --surface:      #F1F5F9;
  --surface-2:    #E8EEF6;
  --surface-3:    #DDEAF6;
  --accent:       #1D4ED8;
  --accent-dim:   rgba(29,78,216,0.07);
  --accent-glow:  rgba(29,78,216,0.18);
  --accent-2:     #0EA5E9;
  --success:      #059669;
  --warn:         #D97706;
  --text:         #0F172A;
  --text-muted:   #64748B;
  --text-faint:   #CBD5E1;
  --border:       #E2E8F0;
  --border-md:    #CBD5E1;
  --border-hover: #1D4ED8;
  --ff-display:   'Raleway', sans-serif;
  --ff-body:      'Nunito', sans-serif;
  --ff-mono:      'Roboto Mono', monospace;
  --radius:       8px;
  --radius-lg:    16px;
  --tr:           0.22s cubic-bezier(0.4,0,0.2,1);
  --shadow:       0 2px 16px rgba(15,23,42,0.08);
  --shadow-md:    0 4px 32px rgba(15,23,42,0.12);
  --glow:         0 0 0 3px rgba(29,78,216,0.12);
}

/* ===========================================
   DARK MODE VARIABLES
   =========================================== */
[data-theme="dark"] {
  --bg:           #070D1A;
  --bg-2:         #0C1628;
  --surface:      #111F35;
  --surface-2:    #172A45;
  --surface-3:    #1E3555;
  --accent:       #4B8EF8;
  --accent-dim:   rgba(75,142,248,0.12);
  --accent-glow:  rgba(75,142,248,0.22);
  --accent-2:     #38BDF8;
  --success:      #10B981;
  --warn:         #F59E0B;
  --text:         #D4E6FA;
  --text-muted:   #5E82A8;
  --text-faint:   #1A3050;
  --border:       rgba(75,142,248,0.09);
  --border-md:    rgba(75,142,248,0.18);
  --border-hover: #4B8EF8;
  --shadow:       0 2px 16px rgba(0,0,0,0.5);
  --shadow-md:    0 4px 32px rgba(0,0,0,0.6);
  --glow:         0 0 0 3px rgba(75,142,248,0.15);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-weight:400;
  line-height:1.75;
  overflow-x:hidden;
  transition:background-color 0.3s ease, color 0.3s ease;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ===========================================
   LANGUAGE TOGGLE SYSTEM
   =========================================== */
html.lang-en .fr { display:none !important; }
html.lang-fr .en { display:none !important; }

/* ===========================================
   UTILITIES
   =========================================== */
.container {
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 2rem;
}
.section { padding:100px 0; }

.section-label {
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:var(--ff-mono);
  font-size:0.71rem;
  font-weight:500;
  color:var(--accent);
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:0.9rem;
}
.section-label::before {
  content:'';
  display:inline-block;
  width:20px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}
.section-title {
  font-family:var(--ff-display);
  font-size:clamp(1.9rem,4vw,2.7rem);
  font-weight:800;
  color:var(--text);
  line-height:1.18;
  margin-bottom:0.9rem;
}
.section-sub {
  color:var(--text-muted);
  font-size:1.02rem;
  max-width:580px;
  margin-bottom:3.5rem;
  line-height:1.8;
}
.tag {
  display:inline-flex;
  align-items:center;
  padding:0.25rem 0.7rem;
  background:var(--accent-dim);
  border:1px solid rgba(29,78,216,0.15);
  border-radius:4px;
  font-family:var(--ff-mono);
  font-size:0.71rem;
  color:var(--accent);
  white-space:nowrap;
  transition:var(--tr);
}
.tag:hover {
  background:rgba(29,78,216,0.12);
  border-color:var(--accent);
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.75rem 1.75rem;
  border-radius:var(--radius);
  font-family:var(--ff-body);
  font-weight:700;
  font-size:0.9rem;
  transition:var(--tr);
  letter-spacing:0.01em;
}
.btn-primary {
  background:var(--accent);
  color:#FFFFFF;
  border:2px solid var(--accent);
  box-shadow:0 2px 12px rgba(29,78,216,0.2);
}
.btn-primary:hover {
  background:#1A42B6;
  border-color:#1A42B6;
  box-shadow:0 4px 20px rgba(29,78,216,0.35);
  transform:translateY(-1px);
}
.btn-secondary {
  background:var(--bg);
  color:var(--text);
  border:2px solid var(--border-md);
}
.btn-secondary:hover {
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px);
}
.btn-sm { padding:0.5rem 1.15rem; font-size:0.82rem; }

/* Dropdown button */
.btn-dropdown { position:relative; }
.dropdown-menu {
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0.5rem;
  min-width:190px;
  opacity:0;
  pointer-events:none;
  transition:var(--tr);
  z-index:100;
  box-shadow:var(--shadow-md);
}
.btn-dropdown.open .dropdown-menu,
.btn-dropdown:focus-within .dropdown-menu {
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown-menu a {
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.6rem 0.9rem;
  border-radius:6px;
  font-size:0.87rem;
  color:var(--text-muted);
  transition:var(--tr);
}
.dropdown-menu a:hover {
  background:var(--accent-dim);
  color:var(--accent);
}
.dropdown-menu a i { font-size:0.78rem; }

/* ===========================================
   NAVIGATION
   =========================================== */
#nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:1.25rem 0;
  transition:var(--tr);
}
#nav.scrolled {
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0.85rem 0;
  box-shadow:0 1px 12px rgba(15,23,42,0.06);
}
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.nav-logo {
  font-family:var(--ff-display);
  font-weight:800;
  font-size:1.1rem;
  color:var(--text);
  white-space:nowrap;
}
.nav-logo span { color:var(--accent); }
.nav-links {
  display:flex;
  align-items:center;
  gap:0.15rem;
}
.nav-links a {
  padding:0.45rem 0.85rem;
  font-size:0.87rem;
  font-weight:600;
  color:var(--text-muted);
  border-radius:6px;
  transition:var(--tr);
}
.nav-links a:hover, .nav-links a.active {
  color:var(--accent);
  background:var(--accent-dim);
}
.nav-right {
  display:flex;
  align-items:center;
  gap:1rem;
  flex-shrink:0;
}
.lang-toggle {
  display:flex;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
}
.lang-btn {
  padding:0.38rem 0.75rem;
  font-family:var(--ff-mono);
  font-size:0.72rem;
  font-weight:500;
  color:var(--text-muted);
  transition:var(--tr);
  letter-spacing:0.04em;
}
.lang-btn.active {
  background:var(--accent);
  color:#FFFFFF;
}
.lang-btn:hover:not(.active) {
  color:var(--text);
  background:var(--surface-2);
}
.nav-mobile-btn {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:0.4rem;
}
.nav-mobile-btn span {
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:var(--tr);
}
.nav-mobile-btn.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-mobile-btn.open span:nth-child(2) { opacity:0; }
.nav-mobile-btn.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ===========================================
   HERO
   =========================================== */
#hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(150deg, #EFF6FF 0%, #F8FAFC 45%, #F0F9FF 100%);
}
.hero-bg {
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(29,78,216,0.07) 1px, transparent 1px);
  background-size:28px 28px;
}
.hero-bg::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 80% 30%, rgba(14,165,233,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 70%, rgba(29,78,216,0.06) 0%, transparent 60%),
    linear-gradient(to bottom, transparent 75%, #F8FAFC 100%);
}
.hero-content {
  position:relative;
  z-index:1;
  padding-top:6rem;
  max-width:760px;
}
.hero-badge {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.35rem 0.9rem;
  background:rgba(5,150,105,0.08);
  border:1px solid rgba(5,150,105,0.22);
  border-radius:100px;
  font-size:0.77rem;
  font-weight:700;
  color:var(--success);
  margin-bottom:1.5rem;
  font-family:var(--ff-mono);
  letter-spacing:0.04em;
}
.hero-badge::before {
  content:'';
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(1.4); }
}
.hero-name {
  font-family:var(--ff-display);
  font-size:clamp(2.8rem,7vw,5.2rem);
  font-weight:800;
  line-height:1.06;
  margin-bottom:0.6rem;
  color:var(--text);
  background:linear-gradient(135deg, #0F172A 10%, #1D4ED8 60%, #0EA5E9 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-title {
  font-family:var(--ff-display);
  font-size:clamp(1rem,2.2vw,1.35rem);
  font-weight:700;
  color:var(--text-muted);
  margin-bottom:1.5rem;
  letter-spacing:0.01em;
}
.hero-title .accent { color:var(--accent); }
.hero-desc {
  font-size:1.05rem;
  color:var(--text-muted);
  line-height:1.85;
  max-width:580px;
  margin-bottom:2.5rem;
}
.hero-stats {
  display:flex;
  gap:2.5rem;
  margin-bottom:2.5rem;
  flex-wrap:wrap;
}
.stat-item { display:flex; flex-direction:column; }
.stat-num {
  font-family:var(--ff-display);
  font-size:2rem;
  font-weight:800;
  color:var(--accent);
  line-height:1;
}
.stat-label {
  font-size:0.78rem;
  color:var(--text-muted);
  font-family:var(--ff-mono);
  margin-top:0.2rem;
  letter-spacing:0.05em;
}
.hero-actions {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.hero-scroll {
  position:absolute;
  bottom:2.5rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.4rem;
  font-family:var(--ff-mono);
  font-size:0.68rem;
  color:var(--text-faint);
  letter-spacing:0.12em;
  animation:bounce-scroll 2s ease-in-out infinite;
}
.hero-scroll::after {
  content:'';
  width:1px;
  height:36px;
  background:linear-gradient(to bottom, var(--accent), transparent);
}
@keyframes bounce-scroll {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}

/* ===========================================
   ABOUT
   =========================================== */
#about { background:var(--bg); border-top:1px solid var(--border); }
.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:start;
}
.about-text p {
  color:var(--text-muted);
  margin-bottom:1.2rem;
  font-size:1rem;
  line-height:1.88;
}
.about-text p strong { color:var(--text); font-weight:700; }
.about-highlights {
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  margin-top:2rem;
}
.highlight-item {
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1rem 1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--tr);
}
.highlight-item:hover {
  border-color:var(--border-hover);
  box-shadow:var(--shadow);
  transform:translateX(3px);
}
.highlight-icon {
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--accent-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:var(--accent);
  font-size:0.85rem;
}
.highlight-info strong {
  display:block;
  font-size:0.9rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:0.15rem;
}
.highlight-info span {
  font-size:0.82rem;
  color:var(--text-muted);
}
.about-certs { display:flex; flex-direction:column; gap:1rem; }
.cert-card {
  padding:1.2rem 1.4rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--tr);
  position:relative;
  overflow:hidden;
}
.cert-card::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--accent);
  border-radius:3px 0 0 3px;
}
.cert-card:hover {
  border-color:var(--border-hover);
  box-shadow:var(--shadow);
  transform:translateX(4px);
}
.cert-card .cert-year {
  font-family:var(--ff-mono);
  font-size:0.71rem;
  color:var(--accent);
  letter-spacing:0.08em;
  margin-bottom:0.25rem;
}
.cert-card .cert-name {
  font-weight:700;
  color:var(--text);
  font-size:0.95rem;
  margin-bottom:0.12rem;
}
.cert-card .cert-issuer {
  font-size:0.82rem;
  color:var(--text-muted);
}
.cert-badge {
  position:absolute;
  right:1.1rem;
  top:50%;
  transform:translateY(-50%);
  background:var(--accent-dim);
  border:1px solid rgba(29,78,216,0.15);
  border-radius:4px;
  padding:0.2rem 0.55rem;
  font-family:var(--ff-mono);
  font-size:0.66rem;
  color:var(--accent);
  letter-spacing:0.05em;
  font-weight:500;
}

/* ===========================================
   SKILLS
   =========================================== */
#skills { background:var(--bg-2); }
.skills-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.15rem;
}
.skill-category {
  padding:1.4rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:var(--tr);
}
.skill-category:hover {
  border-color:rgba(29,78,216,0.3);
  box-shadow:var(--shadow);
}
.skill-cat-header {
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-bottom:1.15rem;
  padding-bottom:0.9rem;
  border-bottom:1px solid var(--border);
}
.skill-cat-icon {
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--accent-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:0.9rem;
  flex-shrink:0;
}
.skill-cat-name {
  font-family:var(--ff-display);
  font-weight:700;
  font-size:0.92rem;
  color:var(--text);
}
.skill-tags { display:flex; flex-wrap:wrap; gap:0.45rem; }

/* ===========================================
   EXPERIENCE
   =========================================== */
#experience { background:var(--bg); }
.timeline {
  position:relative;
  padding-left:2rem;
}
.timeline::before {
  content:'';
  position:absolute;
  left:0;
  top:8px; bottom:0;
  width:2px;
  background:linear-gradient(to bottom, var(--accent), var(--border) 80%, transparent);
  border-radius:2px;
}
.timeline-item {
  position:relative;
  margin-bottom:2.75rem;
}
.timeline-item:last-child { margin-bottom:0; }
.timeline-dot {
  position:absolute;
  left:-2.5rem;
  top:6px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--bg);
  box-shadow:0 0 0 2px var(--accent);
}
.timeline-dot.past {
  background:var(--border-md);
  box-shadow:0 0 0 2px var(--border-md);
}
.timeline-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0.75rem;
  flex-wrap:wrap;
}
.timeline-company {
  font-family:var(--ff-display);
  font-size:1.12rem;
  font-weight:800;
  color:var(--text);
}
.timeline-role {
  font-size:0.88rem;
  font-weight:600;
  color:var(--accent);
  margin-top:0.18rem;
}
.timeline-period {
  font-family:var(--ff-mono);
  font-size:0.73rem;
  color:var(--text-muted);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:0.3rem 0.7rem;
  white-space:nowrap;
  flex-shrink:0;
  font-weight:500;
}
.timeline-body {
  padding:1.25rem 1.5rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.timeline-duties { margin-bottom:1rem; }
.timeline-duties li {
  position:relative;
  padding-left:1.2rem;
  margin-bottom:0.35rem;
  font-size:0.9rem;
  color:var(--text-muted);
  line-height:1.72;
}
.timeline-duties li::before {
  content:'▸';
  position:absolute;
  left:0;
  color:var(--accent);
  font-size:0.73rem;
  top:0.05em;
}
.projects-toggle {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.45rem 0.75rem;
  background:var(--accent-dim);
  border:1px solid rgba(29,78,216,0.18);
  border-radius:6px;
  font-size:0.78rem;
  font-weight:600;
  color:var(--accent);
  cursor:pointer;
  transition:var(--tr);
  font-family:var(--ff-mono);
  letter-spacing:0.03em;
}
.projects-toggle:hover { background:rgba(29,78,216,0.12); }
.projects-toggle i { transition:var(--tr); font-size:0.68rem; }
.projects-toggle.open i { transform:rotate(180deg); }
.projects-list {
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  overflow:hidden;
  max-height:0;
  transition:max-height 0.4s ease, opacity 0.3s ease;
  opacity:0;
}
.projects-list.open { max-height:3000px; opacity:1; margin-top:1rem; }
.project-item {
  padding:1rem 1.25rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  border-left:3px solid var(--accent-2);
}
.project-name {
  font-weight:700;
  font-size:0.9rem;
  color:var(--text);
  margin-bottom:0.4rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.project-name a {
  color:var(--accent);
  transition:var(--tr);
  font-size:0.78rem;
}
.project-name a:hover { color:var(--text); }
.project-tasks { list-style:none; }
.project-tasks li {
  position:relative;
  padding-left:1.05rem;
  font-size:0.84rem;
  color:var(--text-muted);
  margin-bottom:0.28rem;
  line-height:1.65;
}
.project-tasks li::before {
  content:'·';
  position:absolute;
  left:0;
  color:var(--accent);
  font-size:1.1rem;
  line-height:1.2;
}
.env-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.7rem; }
.env-tag {
  padding:0.18rem 0.52rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:3px;
  font-family:var(--ff-mono);
  font-size:0.67rem;
  color:var(--text-muted);
}

/* ===========================================
   EDUCATION
   =========================================== */
#education { background:var(--bg-2); }
.education-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.1rem;
}
.edu-card {
  padding:1.4rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--tr);
  position:relative;
  overflow:hidden;
}
.edu-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:var(--tr);
}
.edu-card:hover::after { transform:scaleX(1); }
.edu-card:hover { border-color:rgba(29,78,216,0.3); box-shadow:var(--shadow); }
.edu-year {
  font-family:var(--ff-mono);
  font-size:0.7rem;
  color:var(--accent);
  letter-spacing:0.1em;
  margin-bottom:0.45rem;
  font-weight:500;
}
.edu-degree {
  font-family:var(--ff-display);
  font-weight:700;
  font-size:0.97rem;
  color:var(--text);
  margin-bottom:0.28rem;
  line-height:1.38;
}
.edu-school { font-size:0.83rem; color:var(--text-muted); }
.edu-type {
  position:absolute;
  top:1.1rem; right:1.1rem;
  width:34px; height:34px;
  border-radius:8px;
  background:var(--accent-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-size:0.83rem;
}
.languages-row {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:3rem;
}
.lang-pill {
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.75rem 1.25rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  flex:1;
  min-width:160px;
  transition:var(--tr);
}
.lang-pill:hover { border-color:rgba(29,78,216,0.3); box-shadow:var(--shadow); }
.lang-pill .lang-flag { font-size:1.4rem; }
.lang-pill-info strong {
  display:block;
  font-size:0.9rem;
  color:var(--text);
  font-weight:700;
}
.lang-pill-info span { font-size:0.78rem; color:var(--text-muted); }

/* ===========================================
   CONTACT
   =========================================== */
#contact { background:var(--bg); border-top:1px solid var(--border); }
.contact-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:start;
}
.contact-desc {
  font-size:1rem;
  color:var(--text-muted);
  line-height:1.88;
  margin-bottom:2rem;
}
.contact-links { display:flex; flex-direction:column; gap:0.7rem; }
.contact-link {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--tr);
}
.contact-link:hover {
  border-color:var(--border-hover);
  transform:translateX(4px);
  box-shadow:var(--shadow);
}
.contact-link-icon {
  width:38px; height:38px;
  border-radius:8px;
  background:var(--accent-dim);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  font-size:0.9rem;
  flex-shrink:0;
}
.contact-link-info strong {
  display:block;
  font-size:0.84rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:0.08rem;
}
.contact-link-info span { font-size:0.82rem; color:var(--text-muted); }
.contact-cv-box {
  padding:2rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-align:center;
}
.contact-cv-box h3 {
  font-family:var(--ff-display);
  font-size:1.2rem;
  font-weight:800;
  color:var(--text);
  margin-bottom:0.5rem;
}
.contact-cv-box p { font-size:0.88rem; color:var(--text-muted); margin-bottom:1.5rem; }
.cv-dl-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ===========================================
   FOOTER
   =========================================== */
footer {
  background:var(--bg-2);
  border-top:1px solid var(--border);
  padding:2rem 0;
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-copy {
  font-size:0.81rem;
  color:var(--text-muted);
  font-family:var(--ff-mono);
}
.footer-links { display:flex; gap:1rem; }
.footer-links a {
  color:var(--text-faint);
  font-size:0.95rem;
  transition:var(--tr);
}
.footer-links a:hover { color:var(--accent); }

/* ===========================================
   SCROLL REVEAL
   =========================================== */
.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* ===========================================
   MOBILE NAV
   =========================================== */
.mobile-nav {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(12px);
  z-index:999;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.75rem;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  font-family:var(--ff-display);
  font-size:1.9rem;
  font-weight:800;
  color:var(--text-muted);
  transition:var(--tr);
}
.mobile-nav a:hover { color:var(--accent); }
.mobile-nav .lang-toggle { margin-top:1rem; }

/* ===========================================
   THEME TOGGLE BUTTON
   =========================================== */
.theme-toggle {
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--surface);
  border:1px solid var(--border-md);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:0.85rem;
  transition:var(--tr);
  cursor:pointer;
  flex-shrink:0;
}
.theme-toggle:hover {
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-dim);
}

/* ===========================================
   DARK MODE OVERRIDES (non-variable values)
   =========================================== */

/* Hero: background gradient & dot pattern */
[data-theme="dark"] #hero {
  background:linear-gradient(150deg, #070D1A 0%, #0C1628 50%, #070D1A 100%);
}
[data-theme="dark"] .hero-bg {
  background-image:radial-gradient(circle, rgba(75,142,248,0.07) 1px, transparent 1px);
}
[data-theme="dark"] .hero-bg::after {
  background:
    radial-gradient(ellipse 60% 55% at 80% 30%, rgba(56,189,248,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 10% 70%, rgba(75,142,248,0.05) 0%, transparent 60%),
    linear-gradient(to bottom, transparent 75%, #0C1628 100%);
}

/* Hero name gradient on dark */
[data-theme="dark"] .hero-name {
  background:linear-gradient(135deg, #D4E6FA 10%, #4B8EF8 55%, #38BDF8 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Nav backdrop */
[data-theme="dark"] #nav.scrolled {
  background:rgba(7,13,26,0.94);
  box-shadow:0 1px 12px rgba(0,0,0,0.4);
}

/* Mobile nav overlay */
[data-theme="dark"] .mobile-nav {
  background:rgba(7,13,26,0.98);
}

/* Btn primary text stays white on dark */
[data-theme="dark"] .btn-primary {
  box-shadow:0 2px 12px rgba(75,142,248,0.25);
}
[data-theme="dark"] .btn-primary:hover {
  box-shadow:0 4px 20px rgba(75,142,248,0.4);
}
[data-theme="dark"] .btn-secondary {
  background:var(--surface);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width:900px) {
  .about-grid   { grid-template-columns:1fr; gap:3rem; }
  .contact-inner{ grid-template-columns:1fr; gap:3rem; }
  .education-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .nav-links  { display:none; }
  .nav-right .btn { display:none; }
  .nav-mobile-btn { display:flex; }
  .section { padding:70px 0; }
  .skills-grid { grid-template-columns:1fr; }
  .hero-name { font-size:2.6rem; }
  .timeline { padding-left:1.25rem; }
  .timeline-dot { left:-1.8rem; }
}
@media (max-width:480px) {
  .container { padding:0 1.25rem; }
  .hero-name { font-size:2.1rem; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .timeline-header { flex-direction:column; gap:0.5rem; }
}