:root{
  --bg:#080c10;
  --bg2:#0d1117;
  --border:rgba(255,255,255,0.07);
  --accent:#4ff0b7;
  --accent2:#3bc9f0;
  --text:#e8edf2;
  --muted:#6b7a8d;
  --card:rgba(255,255,255,0.03);
  --nav-h:64px;
  --px:clamp(1.2rem, 5vw, 5rem);
  --section-py:clamp(3.5rem, 8vw, 6.5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Mono',monospace;
  line-height:1.7;
  overflow-x:hidden;
}

/* noise */
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;
}

/* ============================================================
   PROGRESS BAR
============================================================ */
#prog{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  z-index:9999;box-shadow:0 0 10px rgba(79,240,183,0.7);
  transition:width 0.08s linear;
}

/* ============================================================
   CANVAS PARTICLES
============================================================ */
#canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.5}

/* ============================================================
   NAVIGATION
============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--px);
  background:rgba(8,12,16,0);
  backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background 0.4s,backdrop-filter 0.4s,border-color 0.4s;
}
nav.solid{
  background:rgba(8,12,16,0.92);
  backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nav-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;
  color:var(--accent);text-decoration:none;letter-spacing:0.04em;
  flex-shrink:0;
}

/* Desktop links */
.nav-links{display:flex;gap:1.8rem;list-style:none}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:0.75rem;
  letter-spacing:0.1em;text-transform:uppercase;transition:color 0.2s;
  position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;
  background:var(--accent);transition:width 0.3s;
}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:6px;z-index:600;
}
.hamburger span{
  display:block;width:24px;height:2px;background:var(--accent);
  border-radius:2px;transition:all 0.3s;transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-menu{
  position:fixed;inset:0;top:var(--nav-h);
  background:rgba(8,12,16,0.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.5rem;list-style:none;
  transform:translateX(100%);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
  z-index:400;
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu a{
  font-family:'Syne',sans-serif;font-size:2rem;font-weight:700;
  color:var(--muted);text-decoration:none;letter-spacing:0.05em;
  transition:color 0.2s,transform 0.2s;
  transform:translateY(20px);opacity:0;
}
.mobile-menu.open a{transform:translateY(0);opacity:1}
.mobile-menu.open a:nth-child(1){transition:color 0.2s,transform 0.4s 0.1s,opacity 0.4s 0.1s}
.mobile-menu.open a:nth-child(2){transition:color 0.2s,transform 0.4s 0.18s,opacity 0.4s 0.18s}
.mobile-menu.open a:nth-child(3){transition:color 0.2s,transform 0.4s 0.26s,opacity 0.4s 0.26s}
.mobile-menu.open a:nth-child(4){transition:color 0.2s,transform 0.4s 0.34s,opacity 0.4s 0.34s}
.mobile-menu a:hover{color:var(--accent)}

/* ============================================================
   HERO
============================================================ */
#hero{
  min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 2rem) var(--px) 4rem;
  position:relative;overflow:hidden;
}

/* animated grid */
#hero::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(79,240,183,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,240,183,0.04) 1px,transparent 1px);
  background-size:clamp(40px,6vw,70px) clamp(40px,6vw,70px);
  mask-image:radial-gradient(ellipse 80% 90% at 50% 40%,black 20%,transparent 100%);
  pointer-events:none;
  animation:gridDrift 30s linear infinite;
}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:70px 70px}}

/* orbs */
.orb{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(60px);
}
.orb1{
  width:clamp(300px,50vw,700px);height:clamp(300px,50vw,700px);
  background:radial-gradient(circle,rgba(79,240,183,0.09),transparent 70%);
  top:-15%;right:-10%;
  animation:orbF 9s ease-in-out infinite;
}
.orb2{
  width:clamp(200px,35vw,450px);height:clamp(200px,35vw,450px);
  background:radial-gradient(circle,rgba(59,201,240,0.07),transparent 70%);
  bottom:-10%;left:5%;
  animation:orbF 12s ease-in-out infinite reverse;
}
@keyframes orbF{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(20px,-25px) scale(1.05)}
  66%{transform:translate(-15px,18px) scale(0.96)}
}

.hero-content{position:relative;z-index:1;max-width:820px;width:100%}

.hero-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-size:clamp(0.62rem,1.2vw,0.72rem);
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(79,240,183,0.3);
  padding:0.3rem 0.8rem;border-radius:2px;margin-bottom:1.8rem;
  opacity:0;animation:fadeUp 0.6s ease forwards 0.3s;
}
.hero-badge::before{
  content:'';width:6px;height:6px;background:var(--accent);
  border-radius:50%;animation:blink 1.2s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

h1.hero-h{
  font-family:'Syne',sans-serif;
  font-size:clamp(2.4rem,7.5vw,5.5rem);
  font-weight:800;line-height:1.05;letter-spacing:-0.02em;
  margin-bottom:0.5rem;
  opacity:0;animation:fadeUp 0.7s ease forwards 0.5s;
}
h1.hero-h span{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero-role{
  font-family:'Syne',sans-serif;
  font-size:clamp(1.1rem,3vw,2rem);
  font-weight:600;color:var(--muted);
  margin-bottom:1.4rem;min-height:2.4rem;
  opacity:0;animation:fadeUp 0.7s ease forwards 0.65s;
}
.tc{color:var(--accent);animation:blink 0.8s step-end infinite}

.hero-sub{
  font-size:clamp(0.82rem,1.8vw,0.95rem);
  color:var(--muted);max-width:500px;
  margin-bottom:2.2rem;line-height:1.9;
  opacity:0;animation:fadeUp 0.7s ease forwards 0.85s;
}

.hero-ctas{
  display:flex;gap:0.9rem;flex-wrap:wrap;
  opacity:0;animation:fadeUp 0.7s ease forwards 1.05s;
}

.btn-p{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.72rem 1.6rem;
  background:var(--accent);color:#000000;
  font-family:'DM Mono',monospace;
  font-size:clamp(0.72rem,1.5vw,0.82rem);
  font-weight:500;letter-spacing:0.05em;
  text-decoration:none;border-radius:2px;
  transition:all 0.25s;position:relative;overflow:hidden;
  border:none;cursor:pointer;
}
.btn-p::before{
  content:'';position:absolute;inset:0;
  background:var(--accent2);transform:translateX(-101%);
  transition:transform 0.3s;z-index:0;
}
.btn-p:hover::before{transform:translateX(0)}
.btn-p>*{position:relative;z-index:1}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(10, 15, 13, 0.3);}

.btn-g{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.72rem 1.6rem;
  border:1px solid var(--border);color:var(--text);
  font-family:'DM Mono',monospace;
  font-size:clamp(0.72rem,1.5vw,0.82rem);
  letter-spacing:0.05em;text-decoration:none;border-radius:2px;
  transition:all 0.25s;background:transparent;cursor:pointer;
}
.btn-g:hover{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-3px);box-shadow:0 8px 20px rgba(117, 118, 118, 0.1);
}

/* scroll hint */
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  color:var(--muted);font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  opacity:0;animation:fadeUp 0.7s ease forwards 1.4s;
}
.scroll-mouse{
  width:22px;height:34px;border:1.5px solid var(--muted);border-radius:11px;
  display:flex;justify-content:center;padding-top:5px;
}
.scroll-mouse::before{
  content:'';width:3px;height:7px;background:var(--accent);
  border-radius:2px;animation:scrollBall 1.8s ease-in-out infinite;
}
@keyframes scrollBall{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   SECTIONS COMMON
============================================================ */
section{
  padding:var(--section-py) var(--px);
  position:relative;z-index:1;
}
section:nth-child(even){background:var(--bg2)}
.sec-label{
  font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.6rem;
}
.sec-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:700;line-height:1.15;margin-bottom:clamp(2rem,4vw,3rem);
}
.sec-title span{color:var(--muted);font-weight:400}

/* ============================================================
   3D REVEAL ANIMATIONS
============================================================ */
/* Base — hidden state */
.r3d{
  opacity:0;
  transform:perspective(800px) rotateX(20deg) translateY(40px) scale(0.96);
  transition:
    opacity 0.85s cubic-bezier(0.16,1,0.3,1),
    transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.r3d.visible{
  opacity:1;
  transform:perspective(800px) rotateX(0deg) translateY(0) scale(1);
}

.r3d-l{
  opacity:0;
  transform:perspective(800px) rotateY(25deg) translateX(-50px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.r3d-l.visible{opacity:1;transform:perspective(800px) rotateY(0deg) translateX(0)}

.r3d-r{
  opacity:0;
  transform:perspective(800px) rotateY(-25deg) translateX(50px);
  transition:opacity 0.85s cubic-bezier(0.16,1,0.3,1),transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.r3d-r.visible{opacity:1;transform:perspective(800px) rotateY(0deg) translateX(0)}

.r3d-flip{
  opacity:0;
  transform:perspective(600px) rotateX(-35deg) scale(0.9);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.r3d-flip.visible{opacity:1;transform:perspective(600px) rotateX(0deg) scale(1)}

/* stagger helpers */
.d0{transition-delay:0s}
.d1{transition-delay:0.07s}
.d2{transition-delay:0.14s}
.d3{transition-delay:0.21s}
.d4{transition-delay:0.28s}
.d5{transition-delay:0.35s}
.d6{transition-delay:0.42s}

/* ============================================================
   ABOUT
============================================================ */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.about-text p{color:var(--muted);margin-bottom:1rem;font-size:clamp(0.82rem,1.5vw,0.9rem);line-height:1.9}

.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:1.4rem;
  transition:border-color 0.3s,transform 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s;
  transform-style:preserve-3d;
}
.stat-card:hover{
  border-color:rgba(79,240,183,0.4);
  transform:translateY(-6px) rotateX(4deg);
  box-shadow:0 20px 40px rgba(0,0,0,0.45);
}
.stat-num{
  font-family:'Syne',sans-serif;font-size:clamp(1.8rem,3vw,2.3rem);
  font-weight:800;color:var(--accent);line-height:1;margin-bottom:0.35rem;
}
.stat-label{font-size:0.7rem;color:var(--muted);letter-spacing:0.05em}

/* ============================================================
   SKILLS
============================================================ */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:1rem}

.skill-card{
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:1.3rem 1.5rem;
  display:flex;align-items:center;gap:1rem;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  position:relative;overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}
.skill-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  transform:scaleY(0);transform-origin:bottom;transition:transform 0.35s;
}
.skill-card:hover{
  border-color:rgba(79,240,183,0.3);
  transform:translateX(5px) perspective(400px) rotateY(-4deg);
  box-shadow:8px 8px 30px rgba(0,0,0,0.4);
}
.skill-card:hover::before{transform:scaleY(1)}
.sk-icon{
  font-size:1.35rem;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(79,240,183,0.08);border-radius:5px;flex-shrink:0;
  transition:transform 0.3s;
}
.skill-card:hover .sk-icon{transform:scale(1.15) rotate(-6deg)}
.sk-name{font-family:'Syne',sans-serif;font-weight:600;font-size:0.93rem;margin-bottom:0.1rem}
.sk-type{font-size:0.7rem;color:var(--muted)}
.sk-bar-wrap{margin-top:0.45rem;height:2px;background:rgba(255,255,255,0.06);border-radius:1px;overflow:hidden}
.sk-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;transition:width 1.5s cubic-bezier(0.16,1,0.3,1)}

/* ============================================================
   PROJECTS — simple hover cards
============================================================ */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:1.5rem}

.p-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:6px;
  padding:1.8rem;
  display:flex;flex-direction:column;
  transition:border-color 0.25s, box-shadow 0.25s, transform 0.25s;
  position:relative;overflow:hidden;
}
/* accent top line grows in on hover */
.p-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.3s ease;
}
.p-card:hover{
  border-color:rgba(79,240,183,0.3);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);
  transform:translateY(-4px);
}
.p-card:hover::before{transform:scaleX(1)}

.p-status{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;
  padding:0.22rem 0.55rem;border-radius:2px;margin-bottom:1rem;width:fit-content;
}
.p-done{background:rgba(79,240,183,0.1);color:var(--accent)}
.p-go{background:rgba(59,201,240,0.1);color:var(--accent2)}
.p-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.p-go .p-dot{animation:blink 1s step-end infinite}

.p-title{
  font-family:'Syne',sans-serif;font-size:clamp(1rem,2vw,1.12rem);
  font-weight:700;line-height:1.3;margin-bottom:0.7rem;
}
.p-desc{color:var(--muted);font-size:0.8rem;line-height:1.8;flex:1}
.p-tags{display:flex;gap:0.45rem;flex-wrap:wrap;margin-top:1.2rem}
.tag{
  font-size:0.65rem;letter-spacing:0.08em;padding:0.22rem 0.55rem;
  border:1px solid var(--border);border-radius:2px;
  color:var(--muted);text-transform:uppercase;
  transition:border-color 0.2s,color 0.2s;
}
.p-card:hover .tag{border-color:rgba(79,240,183,0.25);color:var(--text)}

/* ============================================================
   LANGUAGES
============================================================ */
.lang-grid{display:flex;gap:1.2rem;flex-wrap:wrap}
.lang-card{
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:clamp(1rem,2vw,1.5rem) clamp(1.5rem,3vw,2.5rem);
  text-align:center;min-width:140px;flex:1;max-width:220px;
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);
  transform-style:preserve-3d;
}
.lang-card:hover{
  border-color:rgba(79,240,183,0.3);
  transform:translateY(-8px) rotateX(6deg) rotateY(-3deg);
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.l-flag{font-size:2.2rem;display:block;margin-bottom:0.5rem;transition:transform 0.3s}
.lang-card:hover .l-flag{transform:scale(1.25) rotate(8deg)}
.l-name{font-family:'Syne',sans-serif;font-weight:700;font-size:0.95rem;margin-bottom:0.15rem}
.l-level{font-size:0.7rem;color:var(--muted)}

/* ============================================================
   CONTACT
============================================================ */
#contact{background:var(--bg)}
.contact-inner{max-width:700px;margin:0 auto;text-align:center}
.contact-inner .sec-label,.contact-inner .sec-title{text-align:center}
.contact-inner .sec-title{margin-bottom:0.8rem}
.c-sub{color:var(--muted);font-size:clamp(0.8rem,1.5vw,0.88rem);margin-bottom:2.5rem;line-height:1.8}

.c-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.9rem;margin-bottom:1.8rem}
.c-link{
  display:flex;align-items:center;gap:0.9rem;
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:1.1rem 1.3rem;text-decoration:none;color:var(--text);
  transition:all 0.35s cubic-bezier(0.16,1,0.3,1);text-align:left;
  transform-style:preserve-3d;position:relative;overflow:hidden;
}
.c-link::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transform-origin:left;transition:transform 0.35s;
}
.c-link:hover{
  border-color:rgba(79,240,183,0.35);
  transform:translateY(-5px) perspective(400px) rotateX(4deg);
  box-shadow:0 16px 36px rgba(0,0,0,0.4);
}
.c-link:hover::after{transform:scaleX(1)}
.c-icon{
  width:36px;height:36px;background:rgba(79,240,183,0.08);
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;transition:transform 0.3s,background 0.3s;
}
.c-link:hover .c-icon{transform:scale(1.12);background:rgba(79,240,183,0.16)}
.c-lbl{font-size:0.62rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase}
.c-val{font-size:0.8rem;margin-top:0.1rem;word-break:break-all}

/* ============================================================
   FOOTER
============================================================ */
footer{
  border-top:1px solid var(--border);
  padding:1.6rem var(--px);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:0.5rem;
  color:var(--muted);font-size:0.72rem;
  position:relative;z-index:1;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
============================================================ */
/* Tablet */
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(4,1fr)}
}
/* Mobile */
@media(max-width:640px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .about-stats{grid-template-columns:1fr 1fr}
  .c-grid{grid-template-columns:1fr}
  .lang-grid{justify-content:center}
  footer{justify-content:center;text-align:center}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .hero-ctas .btn-p,.hero-ctas .btn-g{width:100%;justify-content:center}
}
@media(max-width:400px){
  .about-stats{grid-template-columns:1fr 1fr}
  .skills-grid{grid-template-columns:1fr}
}