/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --primary:        #6ee7c4;
  --primary-light:  #9bedd6;
  --primary-dark:   #207f6b;
  --secondary:      #b8a2f4;
  --accent:         #f59e0b;
  --green:          #10b981;

  --bg:       #121416;
  --bg-2:     #181b1e;
  --bg-3:     #212528;
  --card:     rgba(255,255,255,0.04);
  --card-h:   rgba(255,255,255,0.08);
  --border:   rgba(255,255,255,0.08);
  --border-h: rgba(110,231,196,0.45);

  --text:       #f1f3ef;
  --text-muted: #b1b9bd;
  --text-dim:   #a0aaad;

  --radius:     8px;
  --radius-sm:  8px;
  --radius-lg:  8px;

  --shadow:      0 4px 24px rgba(0,0,0,0.35);
  --glow:        0 8px 24px rgba(0,0,0,0.12);
  --glow-strong: 0 8px 32px rgba(0,0,0,0.18);

  --ease: cubic-bezier(0.4,0,0.2,1);
  --t: 0.3s;

  --font-h: 'Space Grotesk', sans-serif;
  --font-b: 'Inter', sans-serif;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* clip (not hidden) on both html+body: kills horizontal panning on mobile without creating a scroll container */
html {
  scroll-behavior: smooth; font-size: 16px;
  scroll-padding-top:100px;
  overflow-x: hidden; overflow-x: clip;
}

body {
  font-family: var(--font-b);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden; overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

a  { color: inherit; text-decoration: none; }
img { max-width:100%; display:block; }
ul  { list-style: none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.cursor, .cursor-follower {
  display:none; position:fixed; top:0; left:0;
  border-radius:50%; pointer-events:none; opacity:0;
}
.cursor {
  width:12px; height:12px; background:var(--primary); z-index:9999;
}
.cursor-follower {
  width:38px; height:38px; border:2px solid var(--primary-light);
  z-index:9998; transition:transform .12s ease-out;
}
@media (hover:hover) and (pointer:fine) {
  .cursor, .cursor-follower { display:block; }
  html.custom-cursor body { cursor:none; }
  html.custom-cursor .cursor, html.custom-cursor .cursor-follower { opacity:1; }
  a, button { cursor:pointer; }
}
@media (prefers-reduced-motion:reduce) {
  .cursor-follower { transition:none; }
}

::selection { background: rgba(124,58,237,0.35); }

:focus-visible {
  outline:2px solid var(--primary-light);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link {
  position:fixed; top:12px; left:12px; z-index:2000;
  padding:10px 16px; border-radius:100px;
  background:var(--primary); color:var(--bg);
  font-family:var(--font-h); font-weight:600; font-size:.85rem;
  transform:translateY(-200%);
  transition:transform var(--t) var(--ease);
}
.skip-link:focus-visible { transform:none; }

/* Scroll progress bar — pure CSS scroll-driven animation, no JS */
body::after {
  content:''; position:fixed; top:0; left:0; z-index:1001;
  width:100%; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  transform-origin:left; transform:scaleX(0);
  animation:growBar linear both;
  animation-timeline:scroll();
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar              { width:6px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: var(--primary); border-radius:3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--primary-light); }

/* ============================================================
   UTILITIES
   ============================================================ */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.section { padding:108px 0; }

.gradient-text {
  color:var(--primary);
}

/* Section header */
.section-header { text-align:left; margin-bottom:48px; }

.section-tag {
  display:inline-block;
  font-size:.8rem; font-weight:600;
  letter-spacing:0; text-transform:uppercase;
  color: var(--primary-light);
  margin-bottom:14px;
}

.section-title {
  font-family: var(--font-h);
  font-size:2.75rem;
  font-weight:700; line-height:1.2;
  margin-bottom:14px;
  text-wrap:balance;
}

.section-subtitle {
  color:var(--text-muted);
  font-size:1.05rem;
  max-width:540px;
  text-wrap:pretty;
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 28px;
  border-radius:6px;
  font-family:var(--font-h); font-size:.95rem; font-weight:600;
  border:none; cursor:pointer;
  text-decoration:none;
  position:relative; overflow:hidden;
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              background var(--t);
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.1);
  opacity:0; transition:opacity .3s;
}
.btn:hover::after { opacity:1; }

.btn-primary {
  background:var(--primary);
  color:var(--bg);
}
.btn-primary:hover {
  transform:translateY(-2px);
  background:var(--primary-light);
}
.btn-glass {
  background: rgba(255,255,255,.06);
  color: var(--text);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
}
.btn-glass:hover {
  background:rgba(255,255,255,.1);
  border-color:var(--primary);
  transform:translateY(-2px);
}
.btn-full { width:100%; justify-content:center; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; padding:22px 0;
  transition: padding var(--t) var(--ease),
              background var(--t),
              border-color var(--t);
}
.navbar.scrolled {
  background:rgba(18,20,22,.95);
  backdrop-filter:blur(24px);
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap; gap:12px;
}
.nav-actions {
  display:flex; align-items:center; gap:12px;
}
.nav-logo {
  font-family:var(--font-h);
  font-size:1.75rem; font-weight:700;
  letter-spacing:0;
}
.nav-logo .dot { color:var(--primary); }

.nav-menu { display:flex; gap:24px; align-items:center; }

.nav-link {
  font-family:var(--font-h);
  font-size:.92rem; font-weight:500;
  color:var(--text-muted);
  transition:color var(--t);
  position:relative;
}
.nav-link::after {
  content:''; position:absolute;
  bottom:-4px; left:0;
  width:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  transition:width var(--t) var(--ease);
}
.nav-link:hover, .nav-link.active { color:var(--text); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

.pdf-btn {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-h); font-size:.78rem; font-weight:700;
  letter-spacing:.05em;
  padding:6px 14px; border-radius:100px;
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.35);
  color:#fca5a5;
  cursor:pointer;
  text-decoration:none;
  transition: background var(--t), border-color var(--t),
              color var(--t), transform var(--t);
}
.pdf-btn:hover {
  background:#ef4444; border-color:#ef4444;
  color:#fff; transform:translateY(-1px);
}
.lang-btn {
  font-family:var(--font-h); font-size:.78rem; font-weight:700;
  letter-spacing:.1em;
  padding:6px 14px; border-radius:100px;
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.35);
  color:var(--primary-light);
  cursor:pointer;
  transition: background var(--t), border-color var(--t),
              color var(--t), transform var(--t);
}
.lang-btn:hover {
  background:var(--primary); border-color:var(--primary);
  color:#fff; transform:translateY(-1px);
}

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:5px;
  position:relative; z-index:100; /* keep above the slide-in panel */
}
.hamburger span {
  display:block; width:24px; height:2px;
  background:var(--text);
  transition:var(--t) var(--ease);
  transform-origin:center;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position:relative;
  min-height:88vh; min-height:min(780px,88svh);
  padding:120px 0 64px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--bg);
}

#particles-canvas {
  position:absolute; inset:0; z-index:0;
}

.hero-bg-gradient {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 18% 52%, rgba(124,58,237,.13) 0%, transparent 58%),
    radial-gradient(ellipse at 82% 18%, rgba(6,182,212,.09)  0%, transparent 55%);
  z-index:1; pointer-events:none;
}

.orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); pointer-events:none; z-index:1;
  animation: drift 18s ease-in-out infinite alternate;
}
.orb-1 {
  width:500px; height:500px;
  background:rgba(124,58,237,.07);
  top:-120px; left:-100px;
  animation-duration:20s;
}
.orb-2 {
  width:350px; height:350px;
  background:rgba(6,182,212,.07);
  bottom:-80px; right:-60px;
  animation-duration:16s; animation-delay:-8s;
}
.orb-3 {
  width:250px; height:250px;
  background:rgba(245,158,11,.05);
  top:40%; left:55%;
  animation-duration:24s; animation-delay:-4s;
}

.hero-content {
  position:relative; z-index:2;
  text-align:center; padding:0 24px;
  width:100%; max-width:920px; min-width:0;
  animation:fadeSlideUp .6s ease both;
}

.hero-greeting {
  font-size:.9rem; font-weight:600;
  letter-spacing:0; text-transform:uppercase;
  color:var(--primary-light);
  margin-bottom:14px;
}

.hero-name {
  font-family:var(--font-h);
  font-size:6rem;
  font-weight:700; line-height:1.0;
  margin-bottom:22px;
}

.hero-title {
  font-family:var(--font-h);
  font-size:1rem;
  color:var(--text-muted);
  margin-bottom:20px;
}

.hero-description {
  font-size:1.08rem; color:var(--text-muted);
  max-width:580px; margin:0 auto 40px;
  line-height:1.85; text-wrap:pretty;
}

.hero-cta {
  display:flex; gap:16px; justify-content:center;
  flex-wrap:wrap; margin-bottom:28px;
}

.hero-socials {
  display:flex; gap:14px; justify-content:center;
}

.social-icon {
  width:46px; height:46px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:1.1rem;
  transition: background var(--t), border-color var(--t),
              color var(--t), transform var(--t), box-shadow var(--t);
}
.social-icon:hover {
  background:var(--primary); border-color:var(--primary);
  color:#fff; transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(124,58,237,.45);
}

/* Scroll indicator */
.scroll-indicator {
  position:absolute; bottom:36px; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:2; pointer-events:none;
  opacity:0; animation:fadeSlideUp .8s ease 1.35s forwards;
}
.mouse {
  width:24px; height:40px;
  border:2px solid rgba(255,255,255,.2);
  border-radius:14px;
  display:flex; justify-content:center; padding:6px 0;
}
.wheel {
  width:4px; height:8px;
  background:var(--primary-light); border-radius:2px;
  animation:wheelScroll 2.2s ease-in-out infinite;
}
.scroll-indicator p {
  font-size:.72rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--text-dim);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { background:var(--bg-2); }

.about-grid {
  display:grid; grid-template-columns:1fr 1.45fr;
  gap:80px; align-items:center;
}

.about-image-wrapper {
  position:relative; display:flex; justify-content:center;
}
.about-image-bg {
  position:absolute; top:-24px; left:-24px; right:-24px; bottom:-24px;
  background:linear-gradient(135deg, rgba(124,58,237,.13), rgba(6,182,212,.08));
  border-radius:var(--radius-lg); z-index:0;
}
.about-photo {
  position:relative; z-index:1;
  width:100%; max-width:380px; height:auto;
  border-radius:var(--radius-lg);
  object-fit:cover; object-position:top center;
  aspect-ratio:1/1;
  border:2px solid var(--border);
  filter:grayscale(15%) contrast(1.05);
  transition:filter var(--t);
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.about-photo:hover { filter:grayscale(0%) contrast(1); }

.about-badge {
  position:absolute; bottom:-24px; right:-24px; z-index:2;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff; border-radius:var(--radius);
  padding:16px 22px; text-align:center;
  box-shadow:0 8px 32px rgba(124,58,237,.45);
}
.badge-number { display:block; font-family:var(--font-h); font-size:2.2rem; font-weight:700; line-height:1; }
.badge-text   { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; opacity:.92; }

/* grid/flex children default to min-width:auto and can blow out the layout */
.about-content, .skill-info, .edu-info, .timeline-card, .project-card { min-width:0; }

.about-content h3 {
  font-family:var(--font-h);
  font-size:1.8rem; font-weight:600;
  margin-bottom:20px; line-height:1.3;
}
.about-bio { color:var(--text-muted); margin-bottom:16px; line-height:1.85; }

.about-stats {
  display:flex; gap:0;
  margin:32px 0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.stat {
  flex:1; text-align:center;
  padding:20px 12px;
  border-right:1px solid var(--border);
}
.stat:last-child { border-right:none; }

.stat-number {
  display:inline;
  font-family:var(--font-h); font-size:2.2rem; font-weight:700;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label {
  display:block; font-size:.75rem; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.08em;
  margin-top:4px;
}

.about-details { display:flex; flex-direction:column; gap:12px; margin-bottom:32px; }
.detail-item {
  display:flex; align-items:center; gap:12px;
  color:var(--text-muted); font-size:.94rem;
}
.detail-item i { color:var(--primary-light); width:18px; text-align:center; }

/* ============================================================
   SKILLS
   ============================================================ */
.skills { background:var(--bg); }

.capability { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr); gap:32px; align-items:start; padding:32px 0; border-top:1px solid var(--border); }
.capability:last-child { border-bottom:1px solid var(--border); }
.capability-heading { display:flex; gap:16px; align-items:baseline; }
.capability-number { color:var(--secondary); font-family:var(--font-h); font-size:.85rem; }
.capability h3 { font-family:var(--font-h); font-size:1.25rem; line-height:1.4; }
.capability p { color:var(--text-muted); }
.capability-stack { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; font-size:.8rem; color:var(--text); }
.capability-stack li, .stack-chips li { padding:5px 12px; border-radius:100px; background:rgba(110,231,196,.08); border:1px solid rgba(110,231,196,.3); color:var(--primary-light); font-weight:500; white-space:nowrap; }
.stack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:48px; }
.stack-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; transition:border-color var(--t), transform var(--t); }
.stack-card:hover { border-color:var(--border-h); transform:translateY(-2px); }
.stack-title { display:flex; align-items:center; gap:10px; font-family:var(--font-h); font-size:1.05rem; margin-bottom:16px; }
.stack-title i { color:var(--primary); }
.stack-chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; font-size:.85rem; }
.evidence-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--primary-light); font-size:.9rem; font-weight:600; text-underline-offset:5px; }
.evidence-link:hover { color:var(--text); text-decoration:underline; }

@media (max-width:900px) {
  .capability { grid-template-columns:minmax(0,1fr); gap:16px; }
  .stack-grid { grid-template-columns:minmax(0,1fr); }
}

.skills-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:18px;
}

.skill-card {
  display:flex; align-items:center; gap:20px;
  padding:24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  position:relative; overflow:hidden;
  transition: background var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
}
.skill-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  opacity:0; transition:opacity var(--t);
}
.skill-card:hover {
  background:var(--card-h); border-color:var(--border-h);
  transform:translateY(-5px); box-shadow:var(--glow);
}
.skill-card:hover::before { opacity:1; }

.skill-icon {
  font-size:2rem; min-width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); flex-shrink:0;
}
.skill-icon svg { width:30px; height:30px; }

.html-icon { color:#e44d26; }
.css-icon  { color:#1572b6; }
.sass-icon { color:#cd669a; }
.js-icon   { color:#f7df1e; }
.react-icon{ color:#61dafb; }
.node-icon { color:#6cc24a; }
.py-icon   { color:#4584b6; }
.next-icon   { color:var(--text-muted); }
.skill-img-icon {
  width:1.9rem; height:1.9rem;
  object-fit:contain;
  filter:invert(1) brightness(0.85);
}
.vue-icon    { color:#42b883; }
.docker-icon { color:#2496ed; }

.skill-info { flex:1; }
.skill-top  { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.skill-name { font-family:var(--font-h); font-weight:600; font-size:.98rem; }
.skill-pct  { font-size:.82rem; color:var(--primary-light); font-weight:600; }

.skill-bar {
  height:6px; background:rgba(255,255,255,.06);
  border-radius:3px; overflow:hidden;
}
.skill-fill {
  height:100%;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius:3px; width:0%;
  transition:width 1.3s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.experience { background:var(--bg-2); }

.timeline {
  position:relative; max-width:860px; margin:0 auto;
}
.timeline::before {
  content:''; position:absolute;
  left:20px; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, var(--primary), var(--secondary), transparent);
  opacity:.35;
}

.timeline-item {
  position:relative; padding-left:64px; margin-bottom:36px;
}
.timeline-dot {
  position:absolute; left:12px; top:22px;
  width:18px; height:18px; border-radius:50%;
  background:var(--primary);
  border:3px solid var(--bg-2);
  box-shadow:0 0 0 3px rgba(124,58,237,.3);
  z-index:1;
  transition:box-shadow .3s;
}
.timeline-item:hover .timeline-dot {
  box-shadow:0 0 0 6px rgba(124,58,237,.2);
}

.timeline-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  position:relative; overflow:hidden;
  transition: background var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
}
.timeline-card::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, var(--primary), var(--secondary));
  opacity:0; transition:opacity var(--t);
}
.timeline-card:hover {
  background:var(--card-h); border-color:var(--border-h);
  transform:translateX(5px); box-shadow:var(--glow);
}
.timeline-card:hover::before { opacity:1; }

.timeline-header {
  display:flex; justify-content:space-between;
  align-items:flex-start; gap:16px; margin-bottom:6px;
}
.timeline-role {
  font-family:var(--font-h); font-size:1.2rem; font-weight:600;
  margin-bottom:3px;
}
.timeline-company { font-size:.94rem; color:var(--primary-light); font-weight:500; }
.company-location { color:var(--text-dim); font-weight:400; }

.timeline-badge {
  flex-shrink:0;
  font-size:.75rem; font-weight:600;
  padding:4px 12px; border-radius:100px;
  display:flex; align-items:center; gap:6px;
}
.timeline-badge.current {
  background:rgba(16,185,129,.12);
  color:#10b981;
  border:1px solid rgba(16,185,129,.3);
}
.pulse-dot {
  font-size:.45rem;
  animation:pulseDot 2s ease-in-out infinite;
}

.timeline-date {
  display:flex; align-items:center; gap:8px;
  font-size:.83rem; color:var(--text-dim);
  margin-bottom:14px;
}
.timeline-desc {
  color:var(--text-muted); line-height:1.75; margin-bottom:18px;
}
.timeline-tags { display:flex; flex-wrap:wrap; gap:8px; }

.tag {
  font-size:.77rem; font-weight:500;
  padding:4px 12px; border-radius:100px;
  background:rgba(124,58,237,.1);
  color:var(--primary-light);
  border:1px solid rgba(124,58,237,.25);
}

/* ============================================================
   EDUCATION
   ============================================================ */
.education { background:var(--bg); }

.edu-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  align-items:stretch;
}

.education-card {
  max-width:none; margin:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:48px; display:flex; align-items:center; gap:32px;
  position:relative; overflow:hidden;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.education-card:hover {
  background:var(--card-h); border-color:var(--border-h);
  box-shadow:var(--glow-strong);
}

/* ── Languages card ── */
.languages-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px 36px;
  display:flex; flex-direction:column; gap:28px;
  position:relative; overflow:hidden;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.languages-card:hover {
  background:var(--card-h); border-color:var(--border-h);
  box-shadow:var(--glow-strong);
}
.lang-card-header {
  display:flex; align-items:center; gap:20px;
}
.lang-card-header h3 {
  font-family:var(--font-h); font-size:1.3rem; font-weight:600;
  margin-bottom:4px;
}
.lang-icon {
  background:linear-gradient(135deg, var(--secondary), #10b981) !important;
  box-shadow:0 8px 24px rgba(6,182,212,.35) !important;
}
.lang-list {
  list-style:none; display:flex; flex-direction:column; gap:16px;
}
.lang-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  transition: background var(--t), border-color var(--t);
}
.lang-item:hover {
  background:rgba(124,58,237,.07);
  border-color:rgba(124,58,237,.2);
}
.lang-flag { font-size:1.4rem; line-height:1; flex-shrink:0; }
.lang-name {
  flex:1; font-weight:500; font-size:.97rem;
}
.lang-level {
  font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:100px;
}
.level-native {
  background:rgba(124,58,237,.18); color:var(--primary-light);
  border:1px solid rgba(124,58,237,.3);
}
.level-professional {
  background:rgba(6,182,212,.15); color:var(--secondary);
  border:1px solid rgba(6,182,212,.3);
}
.level-conversational {
  background:rgba(16,185,129,.12); color:#34d399;
  border:1px solid rgba(16,185,129,.25);
}
.edu-decoration {
  position:absolute; right:-50px; top:-50px;
  width:220px; height:220px; border-radius:50%;
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(6,182,212,.05));
  pointer-events:none;
}

.edu-icon {
  flex-shrink:0; width:72px; height:72px;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:#fff;
  box-shadow:0 8px 24px rgba(124,58,237,.35);
}
.edu-info h3 {
  font-family:var(--font-h); font-size:1.4rem; font-weight:600;
  margin-bottom:8px;
}
.edu-school { display:block; color:var(--text-muted); font-size:.94rem; margin-bottom:16px; }
.edu-grade  { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.eqf-badge {
  font-size:.7rem; font-weight:700; letter-spacing:.08em;
  padding:3px 10px; border-radius:100px;
  background:rgba(6,182,212,.15); color:var(--secondary);
  border:1px solid rgba(6,182,212,.3);
}
.edu-focus {
  margin-top:20px; display:flex; flex-direction:column; gap:10px;
  font-size:.9rem; color:var(--text-muted); line-height:1.5;
}
.edu-focus li { display:flex; gap:10px; align-items:flex-start; }
.edu-focus i  { color:var(--primary-light); margin-top:4px; width:16px; flex-shrink:0; }
.grade-label {
  font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--text-dim);
}
.grade-value {
  font-family:var(--font-h); font-size:1.5rem; font-weight:700;
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects { background:var(--bg); }

.projects-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:32px;
}

.featured-project { border-top:1px solid var(--border); padding:32px 0 48px; margin-bottom:48px; border-bottom:1px solid var(--border); }
.featured-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; margin-bottom:28px; }
.featured-heading > div { min-width:0; }
.featured-heading h3 { font-family:var(--font-h); font-size:2.25rem; line-height:1.2; margin-bottom:16px; }
.featured-heading .award-badge { flex-shrink:0; max-width:100%; white-space:normal; }
.project-kicker { font-family:var(--font-h); font-size:.8rem; color:var(--secondary); margin-bottom:12px; }
.featured-intro { color:var(--text-muted); max-width:620px; font-size:1.1rem; }
.project-preview { margin:0 0 28px; }
.project-preview a { display:block; }
.project-preview img { width:100%; height:auto; aspect-ratio:1010/631; object-fit:contain; border:1px solid var(--border); border-radius:6px; }
.featured-preview { max-width:900px; }
.project-preview figcaption { color:var(--text-muted); font-size:.78rem; margin-top:10px; }
.case-study { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 48px; }
.case-study dt { font-family:var(--font-h); font-size:1.05rem; font-weight:600; margin-bottom:10px; }
.case-study dt > span:first-child { color:var(--secondary); font-size:.8rem; margin-right:12px; }
.case-study dd { color:var(--text-muted); line-height:1.8; }
.project-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:28px; padding-top:20px; border-top:1px solid var(--border); }
.project-bottom .capability-stack { margin-top:0; }
.project-scope { margin:12px 0 32px; }
.project-scope li { display:flex; gap:16px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--border); color:var(--text-muted); }
.project-scope i { color:var(--secondary); width:20px; flex-shrink:0; }
#project-gymbuddy .project-description { flex-grow:0; }
#project-gymbuddy .project-bottom { margin-top:auto; }

@media (max-width:900px) {
  .featured-heading { flex-direction:column; gap:20px; }
}
@media (max-width:600px) {
  .case-study { grid-template-columns:minmax(0,1fr); gap:24px; }
  .featured-heading h3 { font-size:1.75rem; }
  .featured-project { padding-top:24px; }
}

.project-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}

.project-card:hover {
  background:var(--card-h);
  border-color:var(--border-h);
  box-shadow:var(--glow);
  transform:translateY(-4px);
}

.project-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:20px;
}

.project-icon {
  width:56px;
  height:56px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  color:#fff;
  flex-shrink:0;
}

.project-links {
  display:flex;
  gap:8px;
}

.project-link {
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:1rem;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}

.project-link:hover {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  transform:scale(1.1);
}

.project-name {
  font-family:var(--font-h);
  font-size:1.35rem;
  font-weight:700;
  margin-bottom:4px;
}

.project-subtitle {
  font-size:.85rem;
  color:var(--primary-light);
  font-weight:500;
  margin-bottom:14px;
}

.award-badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:100px;
  background:rgba(245,158,11,.12);
  color:#fbbf24;
  border:1px solid rgba(245,158,11,.3);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  text-decoration:none;
}

.award-badge:hover {
  background:rgba(245,158,11,.2);
  border-color:rgba(245,158,11,.5);
  transform:translateY(-1px);
}

.award-badge i { font-size:.7rem; }

.project-description {
  font-size:.94rem;
  color:var(--text-muted);
  line-height:1.7;
  margin-bottom:20px;
  flex-grow:1;
}

.project-features {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}

.feature {
  font-size:.75rem;
  padding:4px 12px;
  border-radius:100px;
  background:rgba(124,58,237,.1);
  color:var(--primary-light);
  border:1px solid rgba(124,58,237,.25);
  font-weight:500;
}

.project-tech {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tech-tag {
  font-size:.75rem;
  padding:4px 12px;
  border-radius:100px;
  background:rgba(6,182,212,.1);
  color:var(--secondary);
  border:1px solid rgba(6,182,212,.25);
  font-weight:500;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.project-card:hover .tech-tag {
  background:rgba(6,182,212,.2);
  border-color:rgba(6,182,212,.4);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background:var(--bg-2); }

.contact-centered {
  max-width:520px;
  margin:0 auto;
}
.contact-item { display:flex; align-items:center; gap:16px; margin-bottom:32px; }
.contact-icon {
  width:54px; height:54px; flex-shrink:0;
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.25);
  color:var(--primary-light); font-size:1.2rem;
  transition: background var(--t), border-color var(--t),
              color var(--t), transform var(--t);
}
.contact-item:hover .contact-icon {
  background:var(--primary); border-color:var(--primary);
  color:#fff; transform:scale(1.08);
}
.contact-label { display:block; font-size:.77rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); margin-bottom:4px; }
.contact-value { font-size:.95rem; color:var(--text); transition:color var(--t); }
a.contact-value:hover { color:var(--primary-light); }

.contact-socials { display:flex; gap:12px; margin-top:40px; justify-content:center; }
.contact-social-link {
  width:46px; height:46px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:1rem;
  transition: background var(--t), border-color var(--t),
              color var(--t), transform var(--t), box-shadow var(--t);
}
.contact-social-link:hover {
  background:var(--primary); border-color:var(--primary);
  color:#fff; transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(124,58,237,.4);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { margin-bottom:20px; }
.form-group label {
  display:block; font-size:.78rem; font-weight:500;
  color:var(--text-muted); margin-bottom:8px;
  text-transform:uppercase; letter-spacing:.08em;
}
.form-group input,
.form-group textarea {
  width:100%; padding:13px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text); font-family:var(--font-b); font-size:.94rem;
  outline:none; resize:vertical;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-dim); }
.form-group input:focus,
.form-group textarea:focus {
  border-color:var(--primary);
  background:rgba(124,58,237,.06);
  box-shadow:0 0 0 3px rgba(124,58,237,.14);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background:var(--bg);
  border-top:1px solid var(--border);
  padding:64px 0 40px;
}
.footer-top {
  display:flex; 
  flex-direction:column; 
  align-items:center;
  text-align:center; 
  gap:18px; 
  margin-bottom:40px;
}
.footer-logo { font-family:var(--font-h); font-size:2.1rem; font-weight:700; }
.footer-tagline { color:var(--text-muted); font-size:.95rem; }
.footer-socials { display:flex; gap:12px; }
.footer-socials a {
  width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); font-size:.95rem;
  transition: background var(--t), border-color var(--t),
              color var(--t), transform var(--t);
}
.footer-socials a:hover {
  background:var(--primary); border-color:var(--primary);
  color:#fff; transform:translateY(-3px);
}
.footer-bottom {
  text-align:center; padding-top:24px;
  border-top:1px solid var(--border);
  color:var(--text-dim); font-size:.85rem;
}
.heart { color:#f87171; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity:1; }
  50%       { opacity:0; }
}
@keyframes wheelScroll {
  0%,100% { transform:translateY(0); opacity:1; }
  60%     { transform:translateY(10px); opacity:.3; }
}
@keyframes drift {
  from { transform:translateY(0) translateX(0) scale(1); }
  to   { transform:translateY(-30px) translateX(20px) scale(1.05); }
}
@keyframes pulseDot {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(1.6); }
}
@keyframes growBar { to { transform:scaleX(1); } }
@keyframes shimmer { to { background-position:300% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
  [data-aos] { opacity:1; transform:none; }
}

/* ============================================================
   SCROLL-REVEAL (custom AOS-like)
   ============================================================ */
[data-aos] {
  opacity:0;
  transform:translateY(44px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
[data-aos].aos-animate {
  opacity:1; transform:translateY(0);
}
[data-aos="fade-right"]         { transform:translateX(-44px); }
[data-aos="fade-right"].aos-animate { transform:translateX(0); }
[data-aos="fade-left"]          { transform:translateX(44px); }
[data-aos="fade-left"].aos-animate  { transform:translateX(0); }

[data-aos-delay="60"]  { transition-delay:60ms;  }
[data-aos-delay="100"] { transition-delay:100ms; }
[data-aos-delay="120"] { transition-delay:120ms; }
[data-aos-delay="180"] { transition-delay:180ms; }
[data-aos-delay="200"] { transition-delay:200ms; }
[data-aos-delay="240"] { transition-delay:240ms; }
[data-aos-delay="300"] { transition-delay:300ms; }
[data-aos-delay="360"] { transition-delay:360ms; }
[data-aos-delay="420"] { transition-delay:420ms; }
[data-aos-delay="480"] { transition-delay:480ms; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .about-grid   { grid-template-columns:1fr; gap:56px; }
  .about-image-col { width:100%; max-width:380px; margin:0 auto; }

  /* Horizontal reveals widen the document before they animate in — go vertical once stacked */
  [data-aos="fade-right"], [data-aos="fade-left"] { transform:translateY(44px); }
  [data-aos="fade-right"].aos-animate, [data-aos="fade-left"].aos-animate { transform:none; }
}

@media (max-width:1024px) {
  .nav-menu {
    position:fixed; top:0; right:0;
    width:min(75%, 300px);
    height:100vh; height:100dvh;
    background:var(--bg-3);
    flex-direction:column; justify-content:center;
    align-items:center; gap:48px;
    border-left:1px solid var(--border);
    transform:translateX(100%); visibility:hidden;
    transition:transform var(--t) var(--ease), visibility 0s linear var(--t);
  }
  .nav-menu.open  { transform:none; visibility:visible; transition-delay:0s; }
  .hamburger      { display:flex; }

  /* Dimmed backdrop + scroll lock while the panel is open */
  body::before {
    content:''; position:fixed; inset:0; z-index:999;
    background:rgba(15,14,23,.6);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; pointer-events:none;
    transition:opacity var(--t);
  }
  html.nav-open body::before { opacity:1; pointer-events:auto; }
  html.nav-open { overflow:hidden; }

}

@media (max-width:768px) {
  .section { padding:64px 0; }
  .section-title { font-size:2rem; }
  .hero-name { font-size:4rem; }

  .hero           { padding:96px 0 48px; } /* room for the fixed nav on short screens */
  .hero-cta       { flex-direction:column; align-items:center; }
  .scroll-indicator { display:none; }

  .about-stats { flex-direction:column; gap:0; }
  .stat { border-right:none; border-bottom:1px solid var(--border); }
  .stat:last-child { border-bottom:none; }

  .projects-grid { grid-template-columns:1fr; }

  .form-row { grid-template-columns:1fr; }

  .edu-grid       { grid-template-columns:1fr; }
  .education-card { flex-direction:column; text-align:center; padding:32px 24px; }
  .edu-grade      { justify-content:center; }
  .edu-focus li   { text-align:left; }
  .lang-card-header { justify-content:center; }
  .languages-card { padding:32px 24px; }

  .timeline::before { left:16px; }
  .timeline-item    { padding-left:52px; }
  .timeline-dot     { left:8px; }

  .contact-form { padding:24px; }
}

@media (max-width:480px) {
  .container, .nav-container, .hero-content { padding-left:18px; padding-right:18px; }
  .hero-name { font-size:3rem; }
  .hero-greeting { font-size:.78rem; }
  .hero-cta .btn { width:100%; max-width:320px; justify-content:center; }
  .skills-grid { grid-template-columns:1fr; }
  .skill-card { padding:20px; }

  /* image-bg bleed + badge overhang were the two things poking past the viewport */
  .about-image-bg { inset:-12px; }
  .about-badge { bottom:-16px; right:0; padding:12px 16px; }
  .badge-number { font-size:1.8rem; }

  .timeline-card { padding:22px 18px; }
  .project-card  { padding:24px 20px; }
  .education-card, .languages-card { padding:28px 18px; }
  .edu-decoration { width:160px; height:160px; }
  .contact-item { gap:12px; margin-bottom:24px; }
  .contact-value { word-break:break-word; }
  .detail-item span, .contact-text { min-width:0; overflow-wrap:anywhere; }
  .lang-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 12px; }
  .lang-level { grid-column:2; justify-self:start; max-width:100%; overflow-wrap:anywhere; letter-spacing:0; }
}

@media (max-width:360px) {
  .hero-name { font-size:2.5rem; }
}

.pdf-btn, .lang-btn, .hamburger { min-width:44px; min-height:44px; justify-content:center; letter-spacing:0; }
.nav-actions { flex-shrink:0; }
@media (max-width:420px) {
  .pdf-btn { padding:6px 10px; gap:0; }
  .pdf-btn i { display:none; }
}
.lang-btn:hover, .social-icon:hover, .contact-social-link:hover, .footer-socials a:hover { color:var(--bg); }
.contact .section-header { text-align:center; }
.contact .section-subtitle { margin-inline:auto; }
.edu-decoration { display:none; }

@media (prefers-reduced-motion:reduce) {
  [data-aos], [data-aos="fade-left"], [data-aos="fade-right"] { opacity:1; transform:none; }
}