/* ===== Design tokens ===== */
:root{
  --bg:        #07090F;
  --bg-alt:    #0B0E17;
  --surface:   #12161F;
  --surface-2: #1A2030;
  --line:      #242C40;
  --ink:       #ECEFF6;
  --muted:     #8A93AB;
  --cyan:      #4FD6C4;
  --cyan-dim:  #2C6E66;
  --amber:     #F2A65A;
  --violet:    #9B8CF2;
  --pink:      #F26B9B;
  --radius:    14px;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:auto;
}

::selection{ background:var(--cyan); color:#04120F; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:8px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--cyan-dim); }
*{ scrollbar-width:thin; scrollbar-color:var(--surface-2) var(--bg); }

/* ===== Scroll progress bar ===== */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--cyan), var(--violet), var(--amber));
  z-index:999; transition:width .1s linear;
}

/* ===== Cursor glow ===== */
.cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(79,214,196,0.10), transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s ease;
  will-change:transform;
}
@media (max-width:900px){ .cursor-glow{ display:none; } }

/* ===== Animated mesh background ===== */
.mesh-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; }
.blob-a{ width:520px; height:520px; background:radial-gradient(circle, var(--cyan), transparent 70%); top:-10%; left:-8%; animation:driftA 24s ease-in-out infinite; }
.blob-b{ width:480px; height:480px; background:radial-gradient(circle, var(--violet), transparent 70%); top:35%; right:-12%; animation:driftB 28s ease-in-out infinite; }
.blob-c{ width:420px; height:420px; background:radial-gradient(circle, var(--amber), transparent 70%); bottom:-10%; left:30%; animation:driftC 32s ease-in-out infinite; }
@keyframes driftA{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(60px,80px) scale(1.15);} }
@keyframes driftB{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-70px,50px) scale(0.9);} }
@keyframes driftC{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(50px,-60px) scale(1.1);} }
.grid-overlay{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 20%, black 40%, transparent 80%);
}

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none !important; }
}

/* ===== Nav ===== */
nav{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem;
  background:rgba(7,9,15,0.7);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.logo{ font-family:var(--font-mono); font-weight:500; font-size:1rem; letter-spacing:0.02em; }
.logo-mark{ color:var(--cyan); margin-right:.4rem; }
.cursor-dot{ color:var(--amber); }

#navLinks{ display:flex; gap:2rem; }
.nav-link{ font-family:var(--font-mono); font-size:0.85rem; color:var(--muted); position:relative; padding-bottom:4px; transition:color .25s ease; }
.nav-link::before{ content:"· "; color:var(--cyan); opacity:0; transition:opacity .2s ease; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width .3s ease; }
.nav-link:hover, .nav-link.active{ color:var(--ink); }
.nav-link:hover::before, .nav-link.active::before{ opacity:1; }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

.nav-toggle{ display:none; background:none; border:0; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; }

/* ===== Hero ===== */
.hero{ min-height:100vh; display:flex; align-items:center; padding:7rem 2rem 4rem; position:relative; z-index:1; }
.hero-grid{ max-width:1180px; margin:0 auto; width:100%; display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center; }

.floaty{ display:inline-block; animation:floatY 3.2s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

.hero-name{
  font-family:var(--font-display); font-weight:700; font-size:clamp(3rem, 7.5vw, 5.5rem); line-height:0.98; margin:.3rem 0 1rem;
  background:linear-gradient(120deg, var(--ink) 30%, var(--cyan) 60%, var(--violet) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% auto; animation:shine 6s linear infinite;
}
@keyframes shine{ to{ background-position:200% center; } }

.hero-role{ font-family:var(--font-mono); font-size:1.15rem; color:var(--muted); margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.role-static{ white-space:nowrap; }
.role-rotator{
  display:inline-flex; align-items:center; overflow:hidden; position:relative;
  height:2.4em; padding:0 1.1rem; border-radius:10px;
  background:linear-gradient(120deg, rgba(79,214,196,0.12), rgba(155,140,242,0.12));
  border:1px solid var(--line);
}
.role-word{
  display:inline-block; color:var(--amber); font-weight:600; white-space:nowrap; font-size:1.02rem;
}

.hero-sub{ color:#C7CDDE; font-size:1.05rem; max-width:460px; margin:0 0 2rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.8rem; }

.btn{ position:relative; font-family:var(--font-mono); font-size:.85rem; padding:.8rem 1.4rem; border-radius:8px; border:1px solid var(--line); transition:transform .2s ease, background .25s ease, border-color .25s ease; }
.btn span{ position:relative; z-index:1; }
.btn-primary{ background:linear-gradient(120deg, var(--cyan), #6EE8D8); color:#04120F; border-color:transparent; font-weight:600; }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 30px -10px rgba(79,214,196,0.5); }
.btn-ghost{ color:var(--muted); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--cyan); transform:translateY(-3px); }

.social-icons{ display:flex; gap:1.1rem; }
.social-icons a{ color:var(--muted); font-size:1.15rem; transition:color .25s ease, transform .25s ease; }
.social-icons a:hover{ color:var(--cyan); transform:translateY(-4px) scale(1.1); }

/* Hero visual: orbiting badges + terminal */
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }
.orbit-wrap{ position:relative; width:100%; max-width:420px; }
.orbit-ring{ position:absolute; border:1px dashed rgba(139,147,171,0.18); border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
.ring-1{ width:340px; height:340px; animation:spin 30s linear infinite; }
.ring-2{ width:420px; height:420px; animation:spin 42s linear infinite reverse; }
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.orbit-badge{
  position:absolute; width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--cyan); box-shadow:0 8px 24px -10px rgba(0,0,0,0.6);
  animation:orbitFloat 5s ease-in-out infinite; animation-delay:var(--d);
}
.badge-1{ top:-6%; left:46%; }
.badge-2{ top:22%; right:-8%; color:var(--violet); }
.badge-3{ bottom:6%; right:6%; color:var(--amber); }
.badge-4{ bottom:-4%; left:30%; color:var(--pink); }
.badge-5{ top:40%; left:-10%; color:var(--cyan); }
@keyframes orbitFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

.core-glow{
  position:absolute; top:50%; left:50%; width:230px; height:230px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(79,214,196,0.4), rgba(155,140,242,0.16) 45%, transparent 72%);
  filter:blur(24px); border-radius:50%; z-index:1; animation:corePulse 4.5s ease-in-out infinite;
}
@keyframes corePulse{
  0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.18); }
}

.neural-canvas{
  position:relative; z-index:2; display:block; width:100%; max-width:340px; aspect-ratio:1/1; margin:0 auto;
  animation:riseIn .9s ease both;
}
@keyframes riseIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }

.core-label{
  position:absolute; bottom:-2.6rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
}
.core-num{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--cyan); }
.core-unit{ font-family:var(--font-mono); font-size:.66rem; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }

.scroll-cue{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:1; }
.scroll-cue span{ display:block; width:1px; height:34px; background:linear-gradient(var(--muted), transparent); animation:cueMove 1.8s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{ opacity:.2; } 50%{ opacity:1; } }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-actions, .social-icons{ justify-content:center; }
  .hero-visual{ margin-top:2rem; min-height:340px; }
}

/* ===== Stat strip ===== */
.stat-strip{
  position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:3rem 1.5rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stat{ text-align:center; }
.stat-num{ display:block; font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; color:var(--cyan); }
.stat-label{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); }
@media (max-width:700px){ .stat-strip{ grid-template-columns:repeat(2,1fr); } }

/* ===== Sections ===== */
.section{ max-width:1080px; margin:0 auto; padding:7rem 1.5rem; position:relative; z-index:1; }
.bg-numeral{
  position:absolute; top:-1rem; right:1rem; font-family:var(--font-display); font-weight:700;
  font-size:9rem; color:transparent; -webkit-text-stroke:1px var(--line); line-height:1; z-index:-1;
  user-select:none; pointer-events:none;
}
.bg-numeral.small{ font-size:6rem; }
.eyebrow{ font-family:var(--font-mono); font-size:.78rem; color:var(--cyan); letter-spacing:.04em; margin:0 0 .6rem; }
.section h2{ font-family:var(--font-display); font-size:clamp(1.6rem, 3vw, 2.3rem); font-weight:600; margin:0 0 2.5rem; max-width:750px; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in{ transition:none; transform:none; opacity:1; }
}

.hl-cyan{ color:var(--cyan); font-weight:600; }
.hl-amber{ color:var(--amber); font-weight:600; }

/* About */
.about-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; align-items:start; }
.about-copy p{ color:#C7CDDE; font-size:1.02rem; }
.about-facts{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; transition:border-color .3s ease, transform .3s ease; }
.about-facts:hover{ border-color:var(--cyan-dim); transform:translateY(-4px); }
.fact{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.fact:last-child{ border-bottom:none; }
.fact-k{ font-family:var(--font-mono); color:var(--muted); }
.fact-v{ text-align:right; color:var(--ink); }
.fact-v a:hover{ color:var(--cyan); }
.fact.status{ justify-content:flex-start; gap:.6rem; }
.dot-live{ width:8px; height:8px; border-radius:50%; background:var(--cyan); animation:pulseDot 2s infinite; }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(79,214,196,.5);} 70%{ box-shadow:0 0 0 8px rgba(79,214,196,0);} 100%{ box-shadow:0 0 0 0 rgba(79,214,196,0);} }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }

/* Zigzag timeline */
.timeline{ position:relative; padding:1rem 0; }
.timeline-line{ position:absolute; left:50%; top:0; bottom:0; width:4px; height:100%; transform:translateX(-50%); overflow:visible; }
.timeline-line line{ stroke:var(--line); stroke-width:2; }
.timeline-line line.drawn{ stroke:var(--cyan); }
.tl-item{ position:relative; width:calc(50% - 2.5rem); margin-bottom:2.5rem; opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.tl-item.in{ opacity:1; transform:none; }
.tl-item.left{ margin-right:auto; text-align:right; }
.tl-item.right{ margin-left:auto; }
.tl-marker{
  position:absolute; top:0; width:2.3rem; height:2.3rem; border-radius:50%;
  background:var(--surface); border:1px solid var(--cyan-dim); color:var(--cyan);
  font-family:var(--font-mono); font-size:.75rem; display:flex; align-items:center; justify-content:center; z-index:1;
}
.tl-item.left .tl-marker{ right:-3.6rem; }
.tl-item.right .tl-marker{ left:-3.6rem; }
.tl-content{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem 1.5rem; transition:transform .3s ease, border-color .3s ease; }
.tl-content:hover{ transform:translateY(-4px); border-color:var(--cyan-dim); }
.tl-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .8rem; margin-bottom:.6rem; }
.tl-item.left .tl-head{ justify-content:flex-end; }
.tl-head h3{ font-family:var(--font-display); font-size:1.1rem; margin:0; }
.tl-org{ color:var(--amber); font-size:.86rem; }
.tl-date{ font-family:var(--font-mono); font-size:.75rem; color:var(--muted); }
.tl-item.right .tl-date{ margin-left:auto; }
.tl-list{ display:flex; flex-direction:column; gap:.4rem; }
.tl-list li{ color:#C7CDDE; font-size:.92rem; padding-left:1rem; position:relative; }
.tl-item.left .tl-list li{ padding-left:0; padding-right:1rem; }
.tl-list li::before{ content:"›"; position:absolute; left:0; color:var(--cyan); }
.tl-item.left .tl-list li::before{ left:auto; right:0; }
.tl-meta{ margin:0; font-family:var(--font-mono); font-size:.85rem; color:var(--muted); }

@media (max-width:760px){
  .timeline-line{ left:1.1rem; }
  .tl-item, .tl-item.left, .tl-item.right{ width:100%; margin-left:2.8rem !important; text-align:left; }
  .tl-item.left .tl-marker, .tl-item.right .tl-marker{ left:-2.8rem; right:auto; }
  .tl-item.left .tl-head{ justify-content:flex-start; }
  .tl-item.left .tl-list li{ padding-left:1rem; padding-right:0; }
  .tl-item.left .tl-list li::before{ left:0; right:auto; }
}

/* Bento project grid */
.bento-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.4rem;
}

.proj-card.big{
    grid-column:span 2;
}
@media (max-width:900px){ .bento-grid{ grid-template-columns:repeat(2,1fr); }  }
@media (max-width:640px){ .bento-grid{ grid-template-columns:1fr; } .proj-card.big{ grid-column:span 1; } }

.proj-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transform-style:preserve-3d;
  transition:transform .15s ease, box-shadow .3s ease, border-color .3s ease;
}
.proj-card::before{
  content:""; position:absolute; inset:-1px; border-radius:var(--radius); padding:1px; opacity:0;
  background:linear-gradient(135deg, var(--cyan), var(--violet), var(--amber));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .3s ease; pointer-events:none;
}
.proj-card:hover::before{ opacity:.6; }
.proj-card:hover{ box-shadow:0 24px 55px -25px rgba(0,0,0,0.6); }
.proj-card[data-glow="violet"]:hover{ border-color:var(--violet); }
.proj-card[data-glow="amber"]:hover{ border-color:var(--amber); }
.proj-card[data-glow="cyan"]:hover{ border-color:var(--cyan); }

.proj-tab{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); padding:.6rem 1rem; background:var(--surface-2); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.5rem; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-py{ background:var(--cyan); } .dot-cpp{ background:var(--violet); } .dot-js{ background:var(--amber); }

.proj-body{ padding:1.3rem 1.4rem 0.4rem; flex:1; }
.proj-body h3{ font-family:var(--font-display); font-size:1.08rem; margin:0 0 .6rem; }
.proj-desc{ color:var(--muted); font-size:.92rem; margin:0 0 1rem; }
.proj-metrics{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.metric{ font-family:var(--font-mono); font-size:.75rem; color:var(--amber); background:rgba(242,166,90,0.08); border:1px solid rgba(242,166,90,0.25); padding:.28rem .6rem; border-radius:999px; }
.metric strong{ color:var(--amber); }
.proj-stack{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.proj-stack span{ font-family:var(--font-mono); font-size:.72rem; color:var(--cyan); background:rgba(79,214,196,0.07); border:1px solid rgba(79,214,196,0.2); padding:.22rem .55rem; border-radius:6px; }

.proj-link{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:.82rem; color:var(--ink); padding:.9rem 1.4rem; border-top:1px solid var(--line); transition:color .25s ease; }
.proj-link i{ transition:transform .25s ease; }
.proj-link:hover{ color:var(--cyan); }
.proj-link:hover i{ transform:translateX(4px); }

/* Skills marquee */
.marquee-wrap{ display:flex; flex-direction:column; gap:1rem; margin-bottom:3rem; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent); display:flex; }
.marquee-track{ display:flex; gap:1rem; flex-shrink:0; animation:scrollLeft 26s linear infinite; padding-right:1rem; }
.marquee-track.reverse{ animation:scrollRight 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scrollLeft{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }
@keyframes scrollRight{ from{ transform:translateX(-100%);} to{ transform:translateX(0);} }
.marquee-track span{ font-family:var(--font-mono); font-size:.9rem; padding:.6rem 1.2rem; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:#C7CDDE; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* Skill rings */
.rings-wrap{ display:flex; flex-wrap:wrap; gap:2.5rem; justify-content:center; }
.ring-item{ display:flex; flex-direction:column; align-items:center; gap:.6rem; position:relative; }
.ring-svg{ width:110px; height:110px; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:var(--surface-2); stroke-width:8; }
.ring-fill{ fill:none; stroke:var(--cyan); stroke-width:8; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1); }
.ring-item:nth-child(2) .ring-fill{ stroke:var(--violet); }
.ring-item:nth-child(3) .ring-fill{ stroke:var(--amber); }
.ring-item:nth-child(4) .ring-fill{ stroke:var(--pink); }
.ring-val{ position:absolute; top:38%; font-family:var(--font-display); font-weight:700; font-size:1.1rem; }
.ring-label{ font-family:var(--font-mono); font-size:.78rem; color:var(--muted); }

/* Record grid */
.record-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem; }
@media (max-width:800px){ .record-grid{ grid-template-columns:1fr; } }
.record-col{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; transition:transform .3s ease, border-color .3s ease; }
.record-col:hover{ transform:translateY(-6px) rotate(-0.3deg); border-color:var(--cyan-dim); }
.record-col h4{ font-family:var(--font-display); font-size:1rem; display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; }
.record-col h4 i{ color:var(--cyan); }
.record-list{ display:flex; flex-direction:column; gap:.7rem; }
.record-list li{ font-size:.88rem; color:#C7CDDE; padding-left:1rem; position:relative; }
.record-list li::before{ content:"–"; position:absolute; left:0; color:var(--amber); }

/* Contact */
.contact-panel{
  position:relative; border-radius:24px; padding:4rem 2.5rem; overflow:hidden;
  background:linear-gradient(160deg, var(--surface), var(--bg-alt));
  border:1px solid var(--line);
}
.contact-panel::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 20% 20%, rgba(79,214,196,.12), transparent 45%), radial-gradient(circle at 85% 80%, rgba(155,140,242,.12), transparent 45%);
}
.contact-h2{ font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:700; line-height:1.05; position:relative; }
.contact-lede{ color:var(--muted); margin:1rem 0 2.5rem; max-width:520px; position:relative; }
.contact-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; position:relative; }
@media (max-width:800px){ .contact-grid{ grid-template-columns:repeat(2, 1fr); } }
.contact-card{ background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.2rem; text-align:center; transition:transform .3s ease, border-color .3s ease; }
.contact-card:hover{ transform:translateY(-6px); border-color:var(--cyan-dim); }
.contact-card i{ font-size:1.5rem; color:var(--cyan); margin-bottom:.7rem; }
.contact-card h3{ font-family:var(--font-display); font-size:1rem; margin:0 0 .35rem; }
.contact-card p{ color:var(--muted); font-size:.85rem; margin:0; word-break:break-word; }
.socials-footer{ display:flex; gap:1.2rem; justify-content:center; margin-top:2.5rem; position:relative; }
.socials-footer a{ color:var(--muted); font-size:1.2rem; transition:color .25s ease, transform .25s ease; }
.socials-footer a:hover{ color:var(--cyan); transform:translateY(-3px); }

footer{ text-align:center; padding:2.5rem 1.5rem 3rem; color:var(--muted); font-family:var(--font-mono); font-size:.78rem; border-top:1px solid var(--line); position:relative; z-index:1; }

/* Back to top */
.back-to-top{
  position:fixed; bottom:1.8rem; right:1.8rem; width:46px; height:46px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--cyan); cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, border-color .3s ease; z-index:150;
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.back-to-top:hover{ border-color:var(--cyan); transform:translateY(-3px); }

.about-highlights{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.highlight{
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:18px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    transition:.3s;
}

.highlight:hover{
    transform:translateY(-6px);
    border-color:var(--cyan);
}

.highlight i{
    font-size:22px;
    color:var(--cyan);
    margin-top:4px;
}

.highlight h4{
    margin:0;
    font-size:16px;
}


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

.skill-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:1.5rem;
    transition:.35s;
}

.skill-card:hover{
    transform:translateY(-6px);
    border-color:var(--cyan);
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.skill-card.wide{
    grid-column:span 2;
}

.skill-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.skill-header h3{
    font-size:1.05rem;
    font-family:var(--font-display);
    margin:0;
}

.skill-header span{
    color:var(--cyan);
    font-weight:600;
}

.skill-progress{
    height:10px;
    border-radius:999px;
    background:var(--surface-2);
    overflow:hidden;
    margin-bottom:20px;
}

.skill-fill{
    width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--cyan),var(--violet));
    transition:width 1.8s cubic-bezier(.2,.8,.2,1);
}

.skill-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
}

.skill-tags span{
    padding:.45rem .8rem;
    border-radius:999px;
    background:rgba(79,214,196,.08);
    color:var(--cyan);
    border:1px solid rgba(79,214,196,.2);
    font-size:.78rem;
    font-family:var(--font-mono);
    transition:.25s;
}


.exp-card{

    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    padding:2rem;
    transition:.35s;

}

.exp-card:hover{

    border-color:var(--cyan);
    transform:translateY(-6px);

}

.exp-top{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:1rem;
    margin-bottom:2rem;

}

.exp-top h3{

    font-size:1.5rem;
    margin-bottom:.35rem;

}

.company{

    color:var(--cyan);
    font-weight:600;

}

.exp-date{

    padding:.45rem 1rem;
    border-radius:999px;
    border:1px solid rgba(79,214,196,.25);
    color:var(--cyan);
    font-family:var(--font-mono);

}

.exp-project{

    border-left:3px solid var(--cyan);
    padding-left:1.25rem;
    margin-bottom:2rem;
    position:relative;

}

.exp-project:last-child{

    margin-bottom:0;

}

.exp-project::before{

    content:"";
    width:12px;
    height:12px;
    background:var(--cyan);
    border-radius:50%;
    position:absolute;
    left:-7px;
    top:8px;

}

.exp-project h4{

    margin-bottom:.45rem;
    font-size:1.05rem;

}

.exp-project p{

    color:var(--muted);
    line-height:1.8;

}
.skill-tags span:hover{
    background:var(--cyan);
    color:#071019;
    transform:translateY(-2px);
}

@media(max-width:850px){

.skill-card.wide{
grid-column:span 1;
}

}
.highlight p{
    margin-top:6px;
    color:var(--muted);
    font-size:14px;
}

/* Focus visibility */
a:focus-visible, button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* Mobile nav */
@media (max-width:760px){
  .nav-toggle{ display:flex; }
  #navLinks{ position:fixed; top:64px; right:0; height:calc(100vh - 64px); width:min(70vw, 280px); background:var(--bg-alt); border-left:1px solid var(--line); flex-direction:column; gap:0; padding:1.5rem; transform:translateX(100%); transition:transform .35s ease; z-index:190; }
  #navLinks.open{ transform:translateX(0); }
  #navLinks li{ width:100%; }
  .nav-link{ display:block; padding:.9rem 0; border-bottom:1px solid var(--line); }
  .contact-panel{ padding:2.5rem 1.4rem; }
}
.bento-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:stretch}.proj-card{min-height:380px;height:100%}.proj-body{display:flex;flex-direction:column;flex:1}.proj-stack{margin-top:auto}