/* ===== VARIABLES ===== */
:root {
  --bg: #0e0e0e;
  --bg2: #161616;
  --bg3: #1c1c1c;
  --card-bg: #f5f3ee;
  --accent: #E8500A;
  --accent2: #ff6a1a;
  --text-bright: #f0ede8;
  --text-dim: #252525;
  --text-muted: #666;
  --text-body: #888;
  --border: #242424;
  --border2: #2e2e2e;
  --sidebar-w: 380px;
  --sidebar-gap: 72px;
  --font-display: 'Cabinet Grotesk', system-ui, sans-serif;
  --font-body: 'Cabinet Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 30px;
}

/* ── Light mode ── */
body.light {
  --bg: #f0ede8; --bg2: #e8e5e0; --bg3: #dedad4;
  --card-bg: #1a1815;
  --text-bright: #111; --text-dim: #ccc; --text-muted: #666; --text-body: #555;
  --border: #d0ccc6; --border2: #bbb;
}
body.light .navbar { background: rgba(240,237,232,0.9); backdrop-filter: blur(16px); box-shadow: 0 2px 20px rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.08); }
body.light .nav-link { color: #777; }
body.light .nav-link.active,.nav-link:hover { color: #111; }
body.light .toggle-track { background: #ddd; }
body.light .sidebar-name { color: #f0ede8; }
body.light .sidebar-bio  { color: #aaa; }
body.light .sidebar-socials a { border-color: #555; }
body.light .section-title .line-dim { color: #c0c0c0; }
body.light .hero-title .line-dim    { color: #c0c0c0; }
body.light .section-title-center .tc-dim { color: #c0c0c0; }
body.light .tc-dim { color: #c0c0c0; }
body.light .techstack-section { background: radial-gradient(ellipse at center,#ddd6ff 0%,#e8e5e0 70%); }
body.light .tech-item { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
body.light .tech-name { color: #555; }
body.light .tech-cat-label { color: #444; }
body.light .project-item { background: #e8e5e0; border-color: #d0ccc6; }
body.light .project-item:hover { background: #e0ddd8; }
body.light .project-desc { color: #444; }
body.light .project-tag { background: #d0ccc6; color: #555; border-color: #bbb; }
body.light .project-live-btn { background: linear-gradient(135deg, rgba(232,80,10,0.14), rgba(232,80,10,0.06)); border-color: rgba(232,80,10,0.4); }
body.light .project-live-btn:hover { background: rgba(232,80,10,0.2); box-shadow: 0 0 18px rgba(232,80,10,0.2); }
body.light .edu-item,.cert-item,.training-item,.contact-card { background: #e8e5e0; border-color: #d0ccc6; }
body.light .edu-line { background: #c0bcb6; }
body.light .section-tag { color: var(--accent); }
body.light .whoami-line { color: #333; }
body.light .whoami-chip { background: #dedad4; color: #333; border-color: #c0bcb6; }
body.light .ws-card { background: #dedad4; border-color: #c0bcb6; }
body.light .ws-num { color: #111; }
body.light .ws-label { color: #666; }
body.light .footer-text { color: #777; }
body.light .scroll-hint { color: #777; }
body.light .section-tag.tc { color: var(--accent); }
body.light .tc-white { color: #111; }

/* ===== RESET ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text-bright);
  font-family: var(--font-body);
  display: flex; min-height: 100vh; overflow-x: hidden;
  transition: background 0.5s, color 0.5s;
}

/* ===== CURSOR GLOW ===== */
.cursor-glow {
  position: fixed; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,80,10,0.05) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
  transform: translate(-50%,-50%);
  transition: left 0.15s ease, top 0.15s ease;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed; top: 20px; left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 1000;
  background: rgba(18,16,14,0.85);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 50px; padding: 6px 18px;
  display: flex; align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: opacity 0.4s, transform 0.4s, background 0.5s;
}
.navbar.hidden { opacity:0; transform:translateX(-50%) translateY(-24px); pointer-events:none; }
.nav-links { display:flex; gap:2px; align-items:center; }
.nav-link {
  color: #888; font-size: 14px; text-decoration: none;
  padding: 7px 11px; border-radius: 50px; position: relative;
  transition: color 0.3s, background 0.3s;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.nav-link::after {
  content: attr(data-label);
  font-family: var(--font-mono); font-size: 6.5px; letter-spacing: 0.8px;
  color: inherit; opacity: 0.5; text-transform: uppercase;
}
.nav-link:hover { color: #ccc; background: rgba(255,255,255,0.04); }
.nav-link.active { color: var(--accent); }
.nav-link.active::before {
  content:''; position:absolute; bottom:3px; left:50%;
  transform:translateX(-50%);
  width:4px; height:4px; background:var(--accent); border-radius:50%;
  box-shadow: 0 0 8px var(--accent);
}
.theme-toggle {
  margin-left:14px; padding-left:14px;
  border-left:1px solid rgba(255,255,255,0.07);
  background:none; border-top:none; border-right:none; border-bottom:none; cursor:pointer; flex-shrink:0;
}
.toggle-track {
  width:46px; height:25px; background:#2a2a2a; border-radius:50px;
  position:relative; transition:background 0.4s; display:flex; align-items:center; padding:3px;
}
body.light .toggle-track { background: var(--accent); }
.toggle-thumb {
  width:19px; height:19px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 2px 6px rgba(0,0,0,0.3); position:absolute; left:3px;
}
body.light .toggle-thumb { transform: translateX(21px); }

/* ===== LAYOUT ===== */
.layout-wrapper {
  display: flex; width: 100%;
  padding-left: var(--sidebar-gap);
  padding-top: 28px; padding-bottom: 28px;
  align-items: flex-start; position: relative; z-index: 1;
}

/* ===== SIDEBAR CARD ===== */
.sidebar-card {
  position: sticky; top: 28px;
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  /* fills viewport height with gap on both sides */
  height: calc(100vh - 56px);
  background: var(--card-bg);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px,3vw,48px) 28px clamp(24px,2.5vw,36px);
  z-index: 100; overflow: hidden; flex-shrink: 0;
  transition: background 0.5s;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  /* on large screens keep centred in its sticky box */
  justify-content: center;
  gap: 0;
}
.card-noise {
  position:absolute; inset:0; border-radius:var(--radius);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; opacity:0.4;
}
.dashed-arc {
  position:absolute; top:-50px; left:-50px; width:260px; height:260px;
  border:2.5px dashed rgba(232,80,10,0.45); border-radius:50%;
  pointer-events:none; animation:spinSlow 22s linear infinite;
}

/* photo — CIRCLE */
.profile-photo-wrap { position:relative; margin-bottom: clamp(12px,1.5vh,20px); }
.profile-photo { position:relative; width: clamp(190px,18vw,260px); height: clamp(190px,18vw,260px); }
.avatar-circle {
  width:100%; height:100%;
  border-radius:50%;
  background: linear-gradient(145deg, var(--accent) 0%, #7a2500 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  box-shadow: 0 0 0 4px rgba(232,80,10,0.3), 0 0 0 8px rgba(232,80,10,0.1), 0 12px 40px rgba(232,80,10,0.25);
}
.profile-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; border-radius:50%;
}
.avatar-initials { position:absolute; z-index:0; pointer-events:none;
}/* dummy-split */.avatar-initials-x {
  font-family:var(--font-display); font-size:clamp(56px,6vw,80px); font-weight:900;
  color:rgba(255,255,255,0.2); letter-spacing:3px; position:relative; z-index:1;
}
.orange-dot {
  position:absolute; bottom:4px; right:4px;
  width:34px; height:34px; background:var(--accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; z-index:2;
  box-shadow:0 4px 14px rgba(232,80,10,0.6); animation:pulse 2s infinite;
  border:3px solid var(--card-bg);
}

/* name */
.sidebar-name {
  font-family:var(--font-display); font-size:clamp(38px,3.8vw,52px); font-weight:900;
  color:#111; text-align:center; line-height:1.3;
  margin-bottom: clamp(8px,1vh,14px); letter-spacing:-1px;
  transition:color 0.5s;
}
body.light .sidebar-name { color:#f0ede8; }

.available-badge {
  display:flex; align-items:center; gap:7px;
  background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.3);
  border-radius:50px; padding:5px 13px; margin-bottom: clamp(6px,0.8vh,10px);
}
.green-dot {
  width:8px; height:8px; background:#22c55e; border-radius:50%; flex-shrink:0;
  animation:greenPulse 1.8s infinite; box-shadow:0 0 10px rgba(34,197,94,0.8);
}
.available-text { font-size:11.5px; color:#22c55e; font-weight:600; }

.sidebar-bio {
  font-size:12.5px; color:#555; text-align:center;
  line-height:1.6; padding:0 4px; margin-bottom: clamp(10px,1.2vh,18px);
  transition:color 0.5s;
}
body.light .sidebar-bio { color:#aaa; }

.download-cv {
  display:flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff;
  border-radius:50px; padding:9px 22px;
  text-decoration:none; font-family:var(--font-display);
  font-size:14px; font-weight:800; letter-spacing:0.3px;
  text-transform:lowercase; transition:all 0.3s; margin-bottom: clamp(30px,3vh,40px);
}
.download-cv:hover { background:var(--accent2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,80,10,0.5); }

.sidebar-socials { display:flex; gap:10px; }
.sidebar-socials a {
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(0,0,0,0.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:14px; text-decoration:none; transition:all 0.3s;
}
body.light .sidebar-socials a { border-color:rgba(255,255,255,0.2); }
.sidebar-socials a:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-3px); box-shadow:0 6px 18px rgba(232,80,10,0.45); }

/* ===== MAIN ===== */
.main-content { flex:1; padding:80px 64px 60px 64px; min-height:100vh; position:relative; z-index:1; }

/* ===== SECTIONS ===== */
.section { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:80px 0; }

.section-tag { font-family:var(--font-mono); font-size:11.5px; color:var(--accent); letter-spacing:2px; margin-bottom:14px; opacity:0.85; }
.section-tag.tc { text-align:center; }

/* ===== TITLES ===== */
.section-title { display:flex; flex-direction:column; line-height:0.95; margin-bottom:52px; }
.section-title .line-bright,.section-title .line-dim {
  font-family:var(--font-display); font-size:clamp(56px,7.5vw,104px);
  font-weight:900; display:block; text-transform:uppercase; letter-spacing:-2px; transition:color 0.5s;
}
.section-title .line-bright { color:var(--text-bright); }
.section-title .line-dim   { color:var(--text-dim); }
.plus-sign { color:var(--accent); }

.section-title-center {
  font-family:var(--font-display); font-size:clamp(52px,7vw,96px); font-weight:900;
  text-align:center; margin-bottom:52px; text-transform:uppercase; letter-spacing:-2px; line-height:0.95;
}
.tc-white { color:var(--text-bright); display:block; transition:color 0.5s; }
.tc-dim   { color:#282828; display:block; transition:color 0.5s; }
body.light .tc-dim { color:#bbb; }

/* ===== HERO ===== */
.hero-eyebrow {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted);
  letter-spacing:2px; margin-bottom:18px; text-transform:uppercase;
}
.eyebrow-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite; }
.hero-title { display:flex; flex-direction:column; line-height:0.92; margin-bottom:26px; }
.hero-title .line-bright {
  font-family:var(--font-display); font-size:clamp(68px,9.5vw,126px);
  font-weight:900; color:var(--text-bright); letter-spacing:-3px; text-transform:uppercase;
}
.hero-title .line-dim {
  font-family:var(--font-display); font-size:clamp(68px,9.5vw,126px);
  font-weight:900; color:var(--text-dim); letter-spacing:-3px; text-transform:uppercase; transition:color 0.5s;
}
.hero-desc { font-size:15.5px; color:var(--text-body); max-width:500px; line-height:1.75; margin-bottom:48px; font-weight:500; }
.highlight { color:var(--accent); font-weight:800; }
.hero-stats { display:flex; gap:48px; margin-bottom:36px; }
.stat-num {
  display:block; font-family:var(--font-display);
  font-size:clamp(40px,5vw,68px); font-weight:900; color:var(--text-bright); letter-spacing:-2px; transition:color 0.5s;
}
.stat-label { display:block; font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); letter-spacing:2px; margin-top:3px; line-height:1.6; text-transform:uppercase; }
.scroll-hint {
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  letter-spacing:2px; display:flex; align-items:center; gap:8px;
  animation:bounce 2s infinite; transition:opacity 0.4s;
}

/* ===== WHO AM I ===== */
.whoami-content { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start; }
.whoami-text-block { max-width:580px; }
.whoami-line {
  font-size:15.5px; color:var(--text-body); line-height:1.8; margin-bottom:18px; font-weight:500; transition:color 0.5s;
}
.whoami-line.big-line { font-size:19px; font-weight:700; color:var(--text-bright); line-height:1.6; transition:color 0.5s; }
.tag-chip {
  display:inline-block; background:rgba(232,80,10,0.12); border:1px solid rgba(232,80,10,0.3);
  color:var(--accent); border-radius:6px; padding:1px 8px; font-size:13px; font-weight:700;
}
.whoami-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.whoami-chip {
  font-family:var(--font-mono); font-size:11px; padding:6px 14px;
  background:var(--bg2); border:1px solid var(--border2); border-radius:50px;
  color:var(--text-muted); transition:all 0.3s; cursor:default;
}
.whoami-chip:hover { border-color:var(--accent); color:var(--accent); background:rgba(232,80,10,0.06); transform:translateY(-2px); }
.whoami-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ws-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  padding:20px 16px; text-align:center; min-width:100px; transition:all 0.3s;
}
.ws-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 20px rgba(232,80,10,0.15); }
.ws-num { font-family:var(--font-display); font-size:28px; font-weight:900; color:var(--text-bright); letter-spacing:-1px; transition:color 0.5s; }
.ws-label { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-top:4px; }

/* ===== PROJECTS ===== */
.projects-list { display:flex; flex-direction:column; gap:14px; }
.project-item {
  display:flex; align-items:flex-start; gap:18px;
  padding:22px; background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  cursor:pointer; position:relative; overflow:hidden;
  transition:background 0.3s, border-color 0.3s, transform 0.2s;
  transform-style:preserve-3d;
}
.project-item::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(232,80,10,0.05),transparent 60%);
  opacity:0; transition:opacity 0.3s;
}
.project-item:hover { background:var(--bg3); border-color:var(--border2); }
.project-item:hover::before { opacity:1; }
.project-item:hover .project-arrow { transform:translate(4px,-4px); color:var(--accent); }
.project-item:hover .project-name  { color:var(--accent); }
.project-left { display:flex; flex-direction:column; align-items:center; gap:7px; flex-shrink:0; }
.project-emoji { font-size:34px; line-height:1; }
.project-type-tag {
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:1px;
  color:var(--accent); border:1px solid rgba(232,80,10,0.3);
  border-radius:4px; padding:2px 6px; white-space:nowrap; background:rgba(232,80,10,0.06);
}
.project-info { flex:1; }
.project-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:7px; flex-wrap:wrap; }
.project-header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.project-live-btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; text-decoration:none;
  padding:6px 13px 6px 11px; border-radius:50px;
  color:var(--accent); border:1px solid rgba(232,80,10,0.45);
  background:linear-gradient(135deg, rgba(232,80,10,0.14), rgba(232,80,10,0.04));
  position:relative; overflow:hidden; flex-shrink:0;
  transition:transform 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.project-live-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform:translateX(-120%); transition:transform 0.5s ease;
}
.project-live-btn:hover::before { transform:translateX(120%); }
.project-live-btn:hover {
  border-color:var(--accent); background:rgba(232,80,10,0.2);
  box-shadow:0 0 22px rgba(232,80,10,0.28); transform:translateY(-1px);
}
.project-live-btn .live-dot {
  width:7px; height:7px; background:#22c55e; border-radius:50%; flex-shrink:0;
  animation:greenPulse 1.8s infinite;
}
.project-name {
  font-family:var(--font-display); font-size:21px; font-weight:800;
  color:var(--text-bright); transition:color 0.3s; text-transform:uppercase; letter-spacing:-0.5px;
}
.project-date { font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); }
.project-desc { font-size:13px; color:var(--text-body); line-height:1.7; margin-bottom:10px; font-weight:500; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; }
.project-tag {
  font-family:var(--font-mono); font-size:9.5px; padding:3px 10px;
  background:var(--bg3); border:1px solid var(--border2); border-radius:20px; color:var(--text-muted); transition:background 0.3s;
}
.project-arrow {
  font-size:17px; color:#444; margin-left:auto; transition:all 0.3s;
  flex-shrink:0; align-self:flex-start; text-decoration:none;
}
.project-item:hover .project-live-btn { border-color:var(--accent2); }

/* ===== TECH STACK ===== */
.techstack-section {
  background:radial-gradient(ellipse at center, #160d30 0%, #090909 65%);
  margin:0 -64px; padding-left:64px; padding-right:64px; border-radius:40px;
  transition:background 0.5s;
}
.tech-categories { display:flex; flex-direction:column; gap:32px; max-width:900px; margin:0 auto; }
.tech-category {}
.tech-cat-label {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:#666; margin-bottom:14px;
}
.tech-cat-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.tech-cat-items { display:flex; flex-wrap:wrap; gap:12px; }
.tech-item {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07);
  border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:14px 10px 10px; gap:7px; width:88px;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s;
  position:relative; overflow:hidden;
}
.tech-item::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at center,rgba(140,60,255,0.15),transparent 70%);
  opacity:0; transition:opacity 0.3s;
}
.tech-item:hover { border-color:rgba(160,80,255,0.6); transform:translateY(-6px) scale(1.05); box-shadow:0 12px 28px rgba(100,40,200,0.3); }
.tech-item:hover::after { opacity:1; }
.tech-item:hover .tech-logo { filter:brightness(1.2) drop-shadow(0 0 8px rgba(180,100,255,0.6)); }
.tech-logo { width:32px; height:32px; object-fit:contain; transition:filter 0.3s; position:relative; z-index:1; }
.tech-name { font-size:9px; color:#999; font-family:var(--font-mono); text-align:center; position:relative; z-index:1; }

/* Pyramid layout */
.tech-pyramid { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:900px; margin:0 auto; }
.tech-row { display:flex; justify-content:center; gap:14px; }

/* Legend */
.tech-legend {
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin-top:32px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.07);
}
.tech-legend-item {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:9.5px; color:#666; letter-spacing:1px; text-transform:uppercase;
}
.tech-legend-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ===== EDUCATION ===== */
.edu-list { display:flex; flex-direction:column; gap:0; }
.edu-item {
  display:flex; gap:22px; padding:26px; background:var(--bg2);
  border:1px solid var(--border); border-radius:18px; margin-bottom:14px;
  position:relative; transition:background 0.3s, border-color 0.3s, transform 0.3s;
}
.edu-item:hover { background:var(--bg3); border-color:var(--border2); transform:translateX(6px); }
.edu-current { border-color:rgba(232,80,10,0.3); }
.edu-current::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); border-radius:18px 0 0 18px; box-shadow:0 0 12px rgba(232,80,10,0.5);
}
.edu-icon-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.edu-icon {
  width:50px; height:50px; border-radius:14px; border:1px solid;
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.edu-line { width:1px; flex:1; background:var(--border); margin:7px 0; min-height:20px; }
.edu-body { flex:1; }
.edu-meta { display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.edu-period { font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); }
.edu-badge {
  font-family:var(--font-mono); font-size:9.5px; color:var(--accent);
  background:rgba(232,80,10,0.1); border:1px solid rgba(232,80,10,0.3); border-radius:20px; padding:2px 10px;
}
.edu-degree {
  font-family:var(--font-display); font-size:18px; font-weight:800;
  color:var(--text-bright); margin-bottom:3px; text-transform:uppercase; letter-spacing:-0.3px; transition:color 0.5s;
}
.edu-school { font-size:12.5px; color:var(--text-body); margin-bottom:11px; font-weight:500; }
.edu-highlights { display:flex; flex-wrap:wrap; gap:6px; }
.edu-chip {
  font-family:var(--font-mono); font-size:9.5px; padding:3px 10px;
  background:var(--bg3); border:1px solid var(--border2); border-radius:20px; color:var(--text-muted);
}

/* ===== TRAINING ===== */
.training-list { display:flex; flex-direction:column; gap:16px; }
.training-item {
  display:flex; gap:20px; padding:24px 24px 24px 20px;
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  position:relative; overflow:hidden; transition:background 0.3s, border-color 0.3s, transform 0.3s;
}
.training-item:hover { background:var(--bg3); border-color:var(--border2); transform:translateX(6px); }
.training-accent-bar { position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:18px 0 0 18px; }
.training-icon {
  width:48px; height:48px; min-width:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.training-body { flex:1; }
.training-meta { display:flex; align-items:center; gap:10px; margin-bottom:7px; flex-wrap:wrap; }
.training-period { font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); }
.training-badge {
  font-family:var(--font-mono); font-size:9.5px; border:1px solid; border-radius:20px; padding:2px 10px;
}
.training-title {
  font-family:var(--font-display); font-size:18px; font-weight:800;
  color:var(--text-bright); margin-bottom:3px; text-transform:uppercase; letter-spacing:-0.3px; transition:color 0.5s;
}
.training-org { font-size:12.5px; color:var(--text-muted); margin-bottom:12px; font-weight:500; }
.training-points { list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.training-points li {
  font-size:13px; color:var(--text-body); line-height:1.6;
  padding-left:16px; position:relative; font-weight:500;
}
.training-points li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-size:11px; }
.training-prev-btn { display:inline-flex; margin-top:4px; }

/* ===== CERTIFICATES ===== */
.cert-list { display:flex; flex-direction:column; gap:12px; }
.cert-item {
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  position:relative; overflow:hidden; transition:background 0.3s, border-color 0.3s, transform 0.3s;
}
.cert-item:hover { background:var(--bg3); border-color:var(--border2); transform:translateX(6px); }
.cert-glow-bar { position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:18px 0 0 18px; }
.cert-emoji { font-size:28px; flex-shrink:0; }
.cert-info { flex:1; }
.cert-name { font-family:var(--font-display); font-size:16.5px; font-weight:800; color:var(--text-bright); margin-bottom:2px; text-transform:uppercase; letter-spacing:-0.3px; transition:color 0.5s; }
.cert-issuer { font-size:11.5px; color:var(--text-muted); margin-bottom:7px; }
.cert-skills { display:flex; flex-wrap:wrap; gap:5px; }
.cert-skill-chip {
  font-family:var(--font-mono); font-size:9px; padding:2px 8px;
  border:1px solid var(--border2); border-radius:20px; color:var(--text-muted); background:var(--bg3);
}
.cert-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.cert-year { font-family:var(--font-mono); font-size:10.5px; color:var(--accent); }
.cert-preview-btn {
  display:flex; align-items:center; gap:5px; font-family:var(--font-mono);
  font-size:9.5px; color:var(--text-muted); cursor:pointer; padding:5px 11px;
  border:1px solid var(--border2); border-radius:20px; white-space:nowrap;
  transition:all 0.3s; background:var(--bg3);
}
.cert-preview-btn:hover { color:var(--accent); border-color:var(--accent); background:rgba(232,80,10,0.08); }

/* cert modal */
.cert-modal {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(14px);
  opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.cert-modal.open { opacity:1; pointer-events:all; }
.cert-modal-inner {
  position:relative; max-width:480px; width:90%;
  transform:scale(0.88); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.cert-modal.open .cert-modal-inner { transform:scale(1); }
.cert-modal-close {
  position:absolute; top:-14px; right:-14px; z-index:10;
  width:32px; height:32px; background:var(--bg2); border:1px solid var(--border);
  border-radius:50%; color:var(--text-bright); font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all 0.3s;
}
.cert-modal-close:hover { background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.cert-card-preview { border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.5); }
.cert-card-header { display:flex; align-items:center; gap:14px; padding:22px; color:#fff; }
.cert-card-emoji { font-size:34px; }
.cert-card-title { font-family:var(--font-display); font-size:16px; font-weight:800; text-transform:uppercase; }
.cert-card-issuer { font-size:11.5px; opacity:0.8; margin-top:2px; }
.cert-card-body { padding:24px; }
.cert-card-label { font-family:var(--font-mono); font-size:9.5px; letter-spacing:2px; color:#999; text-transform:uppercase; margin-bottom:10px; }
.cert-card-recipient { font-family:var(--font-display); font-size:28px; font-weight:900; color:#111; margin-bottom:5px; letter-spacing:-1px; }
.cert-card-desc { font-size:11.5px; color:#777; margin-bottom:10px; }
.cert-card-course { font-size:14px; font-weight:700; color:#222; margin-bottom:18px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.5px; }
.cert-card-footer { display:flex; justify-content:space-between; font-size:11.5px; color:#666; border-top:1px solid #ddd; padding-top:14px; margin-bottom:14px; }
.cert-skills-preview { display:flex; flex-wrap:wrap; gap:5px; }
.cert-real-img { width:100%; border-radius:10px; border:1px solid #ddd; }
.cert-add-hint { font-family:var(--font-mono); font-size:9.5px; color:#aaa; margin-top:14px; line-height:1.6; }
.cert-add-hint code { background:#eee; padding:1px 4px; border-radius:3px; font-size:9px; }

/* ===== CONTACT ===== */
.contact-subtitle { font-size:15px; color:var(--text-body); margin-bottom:32px; line-height:1.75; font-weight:500; max-width:480px; }
.contact-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:600px; }
.contact-card {
  display:flex; align-items:center; gap:14px; padding:20px 22px;
  background:var(--bg2); border:1px solid var(--border); border-radius:18px;
  text-decoration:none; transition:all 0.3s; position:relative; overflow:hidden;
}
.contact-card:hover { background:var(--bg3); border-color:var(--border2); transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,0.3); }
.contact-card:hover .cc-arrow { transform:translate(3px,-3px); opacity:1; }
.cc-icon { font-size:20px; flex-shrink:0; }
.cc-info { flex:1; }
.cc-label { display:block; font-family:var(--font-mono); font-size:9.5px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:3px; }
.cc-value { display:block; font-size:12.5px; color:var(--text-bright); font-weight:600; word-break:break-all; transition:color 0.5s; }
.cc-arrow { font-size:15px; color:#444; opacity:0.5; transition:all 0.3s; flex-shrink:0; align-self:flex-start; }

/* ===== FOOTER ===== */
.footer { text-align:center; padding:32px 0 8px; font-size:13px; }
.footer-text { color:#666; transition:color 0.5s; }
body.light .footer-text { color:#888; }
.footer a { color:var(--accent); text-decoration:none; font-weight:700; }
.footer a:hover { text-decoration:underline; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:4px; }

/* ===== KEYFRAMES ===== */
@keyframes pulse { 0%,100%{box-shadow:0 4px 12px rgba(232,80,10,0.5)} 50%{box-shadow:0 4px 28px rgba(232,80,10,0.95)} }
@keyframes spinSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes greenPulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.7),0 0 10px rgba(34,197,94,0.5)} 50%{box-shadow:0 0 0 8px rgba(34,197,94,0),0 0 18px rgba(34,197,94,0.9)} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes popIn { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }

/* ===== RESPONSIVE ===== */
@media (max-width:1000px) {
  .layout-wrapper { flex-direction:column; padding-left:0; padding-top:0; padding-bottom:0; }
  .sidebar-card { position:relative; top:0; width:100%; height:auto; border-radius:0 0 var(--radius) var(--radius); padding:100px 24px 36px; justify-content:flex-start; }
  .main-content { padding:40px 24px; }
  .contact-cards { grid-template-columns:1fr; }
  .hero-stats { gap:28px; flex-wrap:wrap; }
  .techstack-section { margin:0 -24px; padding:80px 24px; }
  .whoami-content { grid-template-columns:1fr; }
  .whoami-stats-grid { grid-template-columns:repeat(4,1fr); }
}

/* ===== HIDE INITIALS WHEN PHOTO LOADS ===== */
.avatar-circle:has(.profile-img[src]:not([src=""])) .avatar-initials { position:absolute; z-index:0; pointer-events:none;
}/* dummy-split */.avatar-initials-x { display: none; }
/* fallback for browsers without :has */
.profile-img { z-index: 2; }
.avatar-initials { position:absolute; z-index:0; pointer-events:none;
}/* dummy-split */.avatar-initials-x { z-index: 1; }

/* ===== TECH PYRAMID ===== */
.tech-pyramid { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:900px; margin:0 auto; }
.tech-row { display:flex; justify-content:center; gap:14px; }

/* ===== TECH LEGEND ===== */
.tech-legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.tech-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: #666; letter-spacing: 1px; text-transform: uppercase;
}
.tech-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ===== TECH STACK TITLE — WHITE + DIM ===== */
.tc-white { color: var(--text-bright) !important; }
.tc-dim   { color: #282828; }
body.light .tc-dim { color: #b0b0b0; }