/* ============================================================
   ROOT & RESET
============================================================ */
:root {
  --bg:      #0d0d14;
  --bg2:     #11111a;
  --surface: #16161f;
  --surface2:#1c1c28;
  --border:  rgba(255,255,255,0.07);
  --accent:  #b8ff57;
  --text:    #e4e4f0;
  --muted:   #55556e;
  --dimmed:  #26263a;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.7; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--dimmed); border-radius: 4px; }
body::before {
  content: ''; position: fixed; inset: 0;
  background: radial-gradient(ellipse 120% 80% at 70% 10%, rgba(99,77,255,0.07) 0%, transparent 60%), radial-gradient(ellipse 80% 60% at 10% 80%, rgba(184,255,87,0.04) 0%, transparent 55%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: .4;
}
nav, section, footer, #intro { position: relative; z-index: 2; }

/* ============================================================
   CUSTOM CURSOR
============================================================ */
#cursor { width:10px; height:10px; background:var(--accent); border-radius:50%; position:fixed; pointer-events:none; z-index:999999; transform:translate(-50%,-50%); transition:transform .12s ease,opacity .2s ease; opacity:0; top:0; left:0; mix-blend-mode:difference; }
#cursor-ring { width:36px; height:36px; border:1.5px solid rgba(184,255,87,0.45); border-radius:50%; position:fixed; pointer-events:none; z-index:999998; transform:translate(-50%,-50%); opacity:0; top:0; left:0; transition:opacity .2s ease; }

/* ============================================================
   INTRO — EDITORIAL / TYPOGRAPHIC
============================================================ */
#intro {
  position: fixed; inset: 0; z-index: 99999;
  background: #07070f;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Subtle animated grid */
.intro-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(184,255,87,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,255,87,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: gridShift 12s linear infinite;
  opacity: 0; animation: gridFadeIn .8s .2s ease forwards, gridShift 20s 1s linear infinite;
}
@keyframes gridFadeIn { to { opacity: 1; } }
@keyframes gridShift { 0%{background-position:0 0} 100%{background-position:80px 80px} }

/* Border lines */
.intro-h-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(184,255,87,.18);
  transform: scaleX(0); transform-origin: left;
  animation: lineGrow .7s cubic-bezier(.77,0,.18,1) forwards;
}
.intro-h-line.top    { top: 60px; animation-delay: .1s; }
.intro-h-line.bottom { bottom: 60px; animation-delay: .2s; transform-origin: right; }
.intro-v-line {
  position: absolute; top: 60px; bottom: 60px; width: 1px;
  background: rgba(184,255,87,.18);
  transform: scaleY(0); transform-origin: top;
  animation: lineGrowV .7s .3s cubic-bezier(.77,0,.18,1) forwards;
}
.intro-v-line.left  { left: 60px; }
.intro-v-line.right { right: 60px; animation-delay: .35s; transform-origin: bottom; }
@keyframes lineGrow  { to { transform: scaleX(1); } }
@keyframes lineGrowV { to { transform: scaleY(1); } }

.intro-center {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; gap: 28px;
  width: min(700px, 90vw);
}

/* Top label row */
.intro-top-line {
  display: flex; justify-content: space-between; align-items: center;
  opacity: 0; animation: fadeSlideUp .5s .5s ease forwards;
}
.intro-index, .intro-category {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .2em; color: rgba(184,255,87,.4);
  text-transform: uppercase;
}

/* Name */
.intro-name-wrap { display: flex; flex-direction: column; gap: 0; }
.intro-line-clip { overflow: hidden; }
.intro-word {
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 10rem);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: .88;
  color: #fff;
  display: block;
  transform: translateY(105%);
}
.intro-w1 { animation: wordUp .75s .6s cubic-bezier(.16,1,.3,1) forwards; }
.intro-w2 {
  animation: wordUp .75s .72s cubic-bezier(.16,1,.3,1) forwards;
  color: var(--accent);
  -webkit-text-stroke: 0px;
}
@keyframes wordUp { to { transform: translateY(0); } }

/* Bottom bar */
.intro-bottom-row {
  display: flex; align-items: center; gap: 20px;
  opacity: 0; animation: fadeSlideUp .5s .9s ease forwards;
}
.intro-bar-wrap {
  flex: 1; height: 1px; background: rgba(255,255,255,.08); position: relative; overflow: hidden;
}
.intro-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(184,255,87,.5);
  transition: width .04s linear;
}
.intro-pct {
  font-family: var(--font-mono); font-size: .75rem;
  color: rgba(184,255,87,.5); min-width: 40px; text-align: right;
  letter-spacing: .08em;
}

@keyframes fadeSlideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

#intro.exit {
  animation: introSlideOut .8s cubic-bezier(.77,0,.18,1) forwards;
}
@keyframes introSlideOut {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

/* ============================================================
   MAIN SITE
============================================================ */
#mainSite { opacity:0; pointer-events:none; transition:opacity .5s ease .15s; }
#mainSite.visible { opacity:1; pointer-events:auto; }

/* ============================================================
   NAVBAR
============================================================ */
nav { position:fixed; top:0; left:0; right:0; z-index:100; height:66px; padding:0 64px; display:flex; align-items:center; justify-content:space-between; background:rgba(13,13,20,0.35); backdrop-filter:blur(32px) saturate(1.6); -webkit-backdrop-filter:blur(32px) saturate(1.6); border-bottom:1px solid rgba(255,255,255,0.06); box-shadow:0 1px 0 rgba(184,255,87,0.04),0 8px 32px rgba(0,0,0,0.2); transition:background .35s,border-color .35s,box-shadow .35s; }
nav.scrolled { background:rgba(13,13,20,0.78); border-bottom-color:rgba(255,255,255,0.1); box-shadow:0 1px 0 rgba(184,255,87,0.07),0 8px 48px rgba(0,0,0,0.3); }
.nav-logo { display:flex; align-items:center; gap:10px; cursor:default; }
.logo-mark { width:34px; height:34px; flex-shrink:0; }
.logo-mark svg { width:34px; height:34px; }
.logo-text { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:#fff; letter-spacing:.04em; }
.logo-dot { color:var(--accent); }
.nav-links { display:flex; gap:36px; align-items:center; }
.nav-links a { font-size:.75rem; font-weight:500; letter-spacing:.09em; color:var(--muted); text-transform:uppercase; transition:color .2s; }
.nav-links a:hover { color:var(--text); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:24px; height:1.5px; background:var(--text); transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(4px,-4px); }
.mobile-nav { position:fixed; top:0; right:-100%; width:260px; height:100vh; background:var(--surface); border-left:1px solid var(--border); display:flex; flex-direction:column; justify-content:center; padding:40px; gap:32px; z-index:90; transition:.4s cubic-bezier(.16,1,.3,1); }
.mobile-nav.open { right:0; }
.mobile-nav a { font-family:var(--font-display); font-size:2rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); transition:color .2s; }
.mobile-nav a:hover { color:var(--accent); }

/* ============================================================
   HERO
============================================================ */
#hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:120px 64px 80px; position:relative; overflow:hidden; }
.hero-grid-bg { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 70% 70% at 40% 50%,black 30%,transparent 100%); }
.hero-glow { position:absolute; width:700px; height:700px; background:radial-gradient(circle,rgba(99,77,255,.08) 0%,rgba(184,255,87,.04) 50%,transparent 70%); top:-200px; right:-100px; pointer-events:none; animation:glowPulse 7s ease-in-out infinite alternate; }
@keyframes glowPulse { from{opacity:.5;transform:scale(1)} to{opacity:1;transform:scale(1.08)} }
.hero-layout { max-width:760px; }
.hero-tag { font-family:var(--font-mono); font-size:.75rem; color:var(--accent); letter-spacing:.18em; margin-bottom:22px; display:flex; align-items:center; gap:14px; opacity:0; animation:fadeUp .6s .1s forwards; }
.hero-tag::before { content:''; display:inline-block; width:36px; height:1px; background:var(--accent); flex-shrink:0; }
.hero-name { font-family:var(--font-display); font-size:clamp(5rem,10vw,10rem); font-weight:900; line-height:.88; letter-spacing:.02em; text-transform:uppercase; opacity:0; animation:fadeUp .7s .25s forwards; }
.hero-name .hl { color:var(--accent); display:block; }
.hero-role { margin-top:28px; max-width:560px; font-size:.98rem; color:var(--muted); font-weight:300; line-height:1.85; opacity:0; animation:fadeUp .7s .4s forwards; }
.hero-role strong { color:var(--text); font-weight:500; }
.hero-btns { margin-top:40px; display:flex; gap:16px; align-items:center; opacity:0; animation:fadeUp .7s .55s forwards; }
.btn-primary { padding:14px 32px; background:var(--accent); color:#0d0d14; font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; border-radius:4px; transition:all .2s; display:inline-block; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(184,255,87,.22); }
.btn-outline { padding:14px 32px; border:1px solid var(--border); color:var(--text); font-size:.9rem; border-radius:4px; transition:all .2s; display:inline-block; }
.btn-outline:hover { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.04); }
.hero-scroll { position:absolute; bottom:40px; left:64px; display:flex; align-items:center; gap:12px; font-size:.72rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; opacity:0; animation:fadeUp .7s .7s forwards; }
.scroll-line { width:40px; height:1px; background:var(--dimmed); position:relative; overflow:hidden; }
.scroll-line::after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--accent); animation:scrollAnim 2s 1.2s ease-in-out infinite; }
@keyframes scrollAnim { 0%{left:-100%}50%,100%{left:100%} }

/* ============================================================
   SECTION COMMONS
============================================================ */
section { padding:120px 64px; }
.section-label { font-family:var(--font-mono); font-size:.7rem; color:var(--accent); letter-spacing:.2em; text-transform:uppercase; margin-bottom:14px; display:block; }
.section-title { font-family:var(--font-display); font-size:clamp(2.8rem,5vw,4.5rem); font-weight:900; letter-spacing:.02em; text-transform:uppercase; line-height:1; margin-bottom:64px; white-space:nowrap; }
.title-accent { color:var(--accent); }
.reveal { opacity:0; transform:translateY(28px); transition:all .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:none; }

/* ============================================================
   SKILLS
============================================================ */
#skills { background:var(--bg); }
.skills-wrapper { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.skill-card { background:var(--surface); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:32px 28px; position:relative; overflow:hidden; transition:all .3s; }
.skill-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(99,77,255,.03) 0%,transparent 60%); pointer-events:none; }
.skill-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,rgba(184,255,87,.4),transparent); transform:scaleX(0); transition:transform .4s ease; }
.skill-card:hover { border-color:rgba(184,255,87,.28); box-shadow:0 0 40px rgba(184,255,87,.05); transform:translateY(-4px); }
.skill-card:hover::after { transform:scaleX(1); }
.skill-card-title { font-family:var(--font-display); font-size:1.2rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--text); margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:12px; }
.skill-card-num { font-family:var(--font-mono); font-size:.65rem; color:var(--accent); opacity:.6; letter-spacing:.1em; background:rgba(184,255,87,.07); border:1px solid rgba(184,255,87,.15); padding:3px 8px; border-radius:4px; }
.skill-card-items { display:flex; flex-wrap:wrap; gap:10px; }
.ski { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,.06); border-radius:50px; padding:7px 16px 7px 7px; font-size:.82rem; color:var(--text); transition:all .25s; cursor:default; }
.ski:hover { border-color:rgba(184,255,87,.35); color:var(--accent); background:rgba(184,255,87,.04); transform:translateY(-2px); }
.ski-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; background:rgba(255,255,255,0.05); }
.ski-icon img { width:20px; height:20px; object-fit:contain; display:block; }

/* ============================================================
   PROJECTS — GRID
============================================================ */
#projects { background:var(--bg2); overflow:hidden; }
.proj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.proj-card { background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:16px; position:relative; overflow:hidden; transition:all .35s cubic-bezier(.16,1,.3,1); cursor:default; }
.proj-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(184,255,87,.025) 0%,transparent 55%); pointer-events:none; }
.proj-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); transform:scaleX(0); transition:transform .4s ease; }
.proj-card:hover { border-color:rgba(184,255,87,.28); transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(184,255,87,.06); }
.proj-card:hover::after { transform:scaleX(1); }
.proj-card--featured { border-color:rgba(184,255,87,.16); background:linear-gradient(145deg,rgba(184,255,87,.035) 0%,var(--surface) 55%); }

.proj-card-top { display:flex; justify-content:space-between; align-items:center; }
.proj-num { font-family:var(--font-mono); font-size:.68rem; color:rgba(184,255,87,.35); letter-spacing:.12em; }
.proj-badge { display:inline-flex; align-items:center; padding:5px 14px; border:1px solid rgba(184,255,87,.2); border-radius:100px; font-family:var(--font-mono); font-size:.66rem; color:var(--accent); letter-spacing:.08em; }

/* SVG Visual */
.proj-card-visual {
  width: 72px; height: 72px;
  color: rgba(255,255,255,.2);
  transition: color .3s ease, transform .3s ease;
  flex-shrink: 0;
}
.proj-card-visual svg { width: 100%; height: 100%; }
.proj-card:hover .proj-card-visual { color: rgba(255,255,255,.4); transform: scale(1.06) rotate(-3deg); }

.proj-card-title { font-family:var(--font-display); font-size:1.55rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; color:var(--text); line-height:1.05; }
.proj-card-desc { font-size:.88rem; color:var(--muted); line-height:1.75; font-weight:300; flex:1; }
.proj-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.project-tag { font-family:var(--font-mono); font-size:.62rem; color:var(--muted); border:1px solid var(--dimmed); padding:4px 11px; border-radius:4px; transition:all .2s; }
.project-tag:hover { border-color:rgba(184,255,87,.28); color:var(--accent); }
.proj-card-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border:1px solid rgba(184,255,87,.22); border-radius:8px; font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.07em; width:fit-content; margin-top:4px; transition:all .25s; }
.proj-card-btn:hover { background:rgba(184,255,87,.07); border-color:var(--accent); transform:translateX(4px); }
.btn-arrow { transition:transform .25s; display:inline-block; }
.proj-card-btn:hover .btn-arrow { transform:translateX(5px); }

/* ============================================================
   CERTIFICATIONS
============================================================ */
#certifications { background:var(--bg); padding:100px 0; overflow:hidden; }
#certifications .section-label, #certifications .section-title { padding-left:64px; }
.marquee-outer { width:100%; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent); }
.marquee-track { overflow:hidden; }
.marquee-inner { display:flex; gap:20px; width:max-content; animation:marqueeScroll 30s linear infinite; }
.marquee-inner:hover { animation-play-state:paused; }
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.cert-card { display:flex; align-items:center; gap:16px; background:var(--surface); border:1px solid rgba(255,255,255,.07); border-radius:14px; padding:20px 28px; flex-shrink:0; min-width:290px; transition:all .3s; cursor:default; }
.cert-card:hover { border-color:rgba(184,255,87,.32); transform:translateY(-4px); box-shadow:0 8px 32px rgba(184,255,87,.07); }
.cert-card--special { border-color:rgba(255,200,50,.18); }
.cert-card--special:hover { border-color:rgba(255,200,50,.5); box-shadow:0 8px 32px rgba(255,200,50,.1); }
.cert-icon { width:44px; height:44px; background:rgba(184,255,87,.07); border:1px solid rgba(184,255,87,.16); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent); }
.cert-icon--gold { background:rgba(255,200,50,.08); border-color:rgba(255,200,50,.22); color:#ffc832; }
.cert-icon svg { width:20px; height:20px; }
.cert-name { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.04em; line-height:1.2; margin-bottom:4px; }
.cert-issuer { font-family:var(--font-mono); font-size:.68rem; color:var(--accent); opacity:.6; letter-spacing:.06em; }
.cert-card--special .cert-issuer { color:#ffc832; }

/* ============================================================
   EXPERIENCE
============================================================ */
#experience { background:var(--bg2); text-align:center; }
#experience .section-label { text-align:center; }
#experience .section-title { text-align:center; margin-bottom:12px; }
.exp-subtitle { font-size:.98rem; color:var(--muted); margin-bottom:80px; font-weight:300; max-width:500px; margin-left:auto; margin-right:auto; }
.timeline { position:relative; max-width:1000px; margin:0 auto; padding:20px 0 60px; }
.timeline-line { position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--dimmed); transform:translateX(-50%); }
.timeline-line-fill { width:100%; background:linear-gradient(180deg,var(--accent) 0%,rgba(184,255,87,.15) 100%); height:0; transition:height 1.2s ease; }
.tl-item { display:flex; align-items:flex-start; position:relative; margin-bottom:80px; width:100%; }
.tl-item.right { flex-direction:row; justify-content:flex-end; padding-left:50%; }
.tl-item.right .tl-card { margin-left:60px; text-align:left; }
.tl-item.left  { flex-direction:row; justify-content:flex-start; padding-right:50%; }
.tl-item.left .tl-card  { margin-right:60px; text-align:left; }
.tl-icon { position:absolute; left:50%; top:24px; transform:translate(-50%,0); width:52px; height:52px; background:var(--bg); border:2px solid var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:3; box-shadow:0 0 20px rgba(184,255,87,.15); transition:all .3s; color:var(--accent); }
.tl-icon svg { width:20px; height:20px; stroke:var(--accent); stroke-width:2; }
.tl-item:hover .tl-icon { background:rgba(184,255,87,.1); box-shadow:0 0 32px rgba(184,255,87,.28); transform:translate(-50%,0) scale(1.1); }
.tl-card { background:var(--surface); border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:32px 28px; max-width:420px; position:relative; transition:all .3s; }
.tl-item:hover .tl-card { border-color:rgba(184,255,87,.28); box-shadow:0 0 40px rgba(184,255,87,.05); transform:translateY(-4px); }
.tl-item.right .tl-card::after { content:''; position:absolute; top:28px; left:-10px; border:10px solid transparent; border-right-color:rgba(255,255,255,.07); }
.tl-item.left .tl-card::after  { content:''; position:absolute; top:28px; right:-10px; border:10px solid transparent; border-left-color:rgba(255,255,255,.07); }
.tl-period  { font-family:var(--font-mono); font-size:.72rem; color:var(--accent); letter-spacing:.08em; margin-bottom:10px; }
.tl-role    { font-family:var(--font-display); font-size:1.5rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; color:var(--text); margin-bottom:6px; line-height:1.1; }
.tl-company { font-size:.88rem; color:var(--accent); margin-bottom:14px; font-weight:400; opacity:.72; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tl-badge { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; background:rgba(184,255,87,.06); border:1px solid rgba(184,255,87,.14); border-radius:100px; color:rgba(184,255,87,.55); }
.tl-desc    { font-size:.88rem; color:var(--muted); line-height:1.75; margin-bottom:18px; }
.tl-tags    { display:flex; flex-wrap:wrap; gap:6px; }

/* ============================================================
   CONTACT
============================================================ */
#contact { text-align:center; background:var(--bg); }
.contact-big { font-family:var(--font-display); font-size:clamp(3.5rem,8vw,7rem); font-weight:900; letter-spacing:.02em; text-transform:uppercase; line-height:.92; margin-bottom:16px; }
.contact-big .hl { color:var(--accent); }
.contact-sub { font-size:.95rem; color:var(--muted); margin-bottom:48px; font-weight:300; }
.social-icons { display:flex; gap:20px; justify-content:center; margin-bottom:56px; flex-wrap:wrap; }
.soc-icon { width:52px; height:52px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all .25s; background:var(--surface); }
.soc-icon svg { width:20px; height:20px; }
.soc-icon:hover { border-color:var(--accent); color:var(--accent); background:rgba(184,255,87,.07); transform:translateY(-4px); box-shadow:0 8px 24px rgba(184,255,87,.12); }
.contact-form-wrap { max-width:780px; margin:0 auto; }
.contact-form-card { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:40px; display:flex; flex-direction:column; gap:16px; }
.cform-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cform-group { display:flex; flex-direction:column; }
.cform-input { background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:12px; padding:16px 20px; color:var(--text); font-family:var(--font-body); font-size:.95rem; outline:none; transition:all .25s; resize:none; width:100%; }
.cform-input::placeholder { color:var(--muted); }
.cform-input:focus { border-color:rgba(184,255,87,.38); background:rgba(184,255,87,.02); box-shadow:0 0 0 3px rgba(184,255,87,.05); }
.cform-textarea { min-height:140px; line-height:1.6; }
.cform-btn { width:100%; padding:18px 32px; background:var(--accent); border:none; border-radius:12px; color:#0d0d14; font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:all .3s; margin-top:4px; }
.cform-btn:hover { transform:translateY(-2px); box-shadow:0 16px 48px rgba(184,255,87,.25); }
.cform-btn:active { transform:scale(.98); }
.cform-success { display:none; color:var(--accent); font-family:var(--font-mono); font-size:.82rem; text-align:center; padding:10px; }
.cform-success.show { display:block; animation:fadeUp .4s forwards; }

/* ============================================================
   FOOTER
============================================================ */
footer { padding:28px 64px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--muted); }

/* ============================================================
   KEYFRAMES
============================================================ */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 900px) {
  nav { padding-left:24px; padding-right:24px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  #hero, section { padding-left:24px; padding-right:24px; }
  #certifications .section-label, #certifications .section-title { padding-left:24px; }
  .skills-wrapper { grid-template-columns:1fr; }
  .section-title { white-space:normal; }
  .proj-grid { grid-template-columns:1fr; }
  .timeline-line { left:24px; }
  .tl-item.right,.tl-item.left { padding-left:70px; padding-right:0; justify-content:flex-start; }
  .tl-item.right .tl-card,.tl-item.left .tl-card { margin-left:0; margin-right:0; max-width:100%; }
  .tl-icon { left:24px; }
  .tl-item.right .tl-card::after,.tl-item.left .tl-card::after { display:none; }
  .cform-row { grid-template-columns:1fr; }
  .contact-form-card { padding:28px 20px; }
  footer { flex-direction:column; gap:10px; text-align:center; padding:24px; }
}
@media (max-width: 600px) {
  .hero-name { font-size:4rem; }
  .hero-btns { flex-direction:column; align-items:flex-start; }
  .hero-scroll { left:24px; }
  .intro-word { font-size:clamp(4rem,16vw,6rem); }
}