*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:#050508; --surface:#0d0d14; --surface2:#13131e;
  --cyan:#00f5ff; --cyan2:#00c8ff; --violet:#9b5de5;
  --pink:#f72585; --gold:#ffd60a; --white:#f0f0ff;
  --muted:#4a4a6a; --text:#b0b0d0;
}

html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Space Mono',monospace;
  overflow-x:hidden; cursor:none;
}

/* ── CUSTOM CURSOR ── */
#cursor {
  position:fixed; width:10px; height:10px; background:var(--cyan);
  border-radius:50%; pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;
  box-shadow:0 0 20px var(--cyan),0 0 40px var(--cyan);
}
#cursor-trail {
  position:fixed; width:40px; height:40px;
  border:1px solid rgba(0,245,255,.3); border-radius:50%;
  pointer-events:none; z-index:99998; transform:translate(-50%,-50%);
  transition:left .12s ease-out, top .12s ease-out;
}
body.hovering #cursor { width:18px; height:18px; background:var(--pink); box-shadow:0 0 30px var(--pink); }
body.hovering #cursor-trail { width:64px; height:64px; border-color:rgba(247,37,133,.3); }

/* ── SCROLL PROGRESS ── */
#progress-bar {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  z-index:1000; width:0%;
  box-shadow:0 0 10px var(--cyan);
}

/* ── THREE.JS CANVAS ── */
#bg-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }

/* ── BG SCENE INDICATOR ── */
#bg-label {
  position:fixed; bottom:60px; right:32px; z-index:500;
  font-size:9px; letter-spacing:3px; text-transform:uppercase;
  color:rgba(0,245,255,0.5); display:flex; align-items:center; gap:8px;
  background:rgba(5,5,8,.75); padding:8px 14px;
  border:1px solid rgba(0,245,255,.1); backdrop-filter:blur(8px);
}
#bg-label::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:pulse 2s infinite; flex-shrink:0;
}

/* ── BG DOTS ── */
#bg-dots {
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:500; display:flex; gap:10px; align-items:center;
  background:rgba(5,5,8,.75); padding:10px 18px;
  border:1px solid rgba(0,245,255,.08); backdrop-filter:blur(8px);
}
.bg-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15);
  cursor:pointer; transition:all .3s;
}
.bg-dot.active { background:var(--cyan); box-shadow:0 0 10px var(--cyan); border-color:var(--cyan); }
.bg-dot:hover  { background:rgba(0,245,255,.4); }

/* ── BG TRANSITION OVERLAY ── */
#bg-transition {
  position:fixed; inset:0; z-index:8; pointer-events:none;
  background:rgba(5,5,8,.95);
  opacity:0; transition:opacity .8s ease;
}
#bg-transition.fading { opacity:1; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:28px 60px; display:flex; justify-content:space-between; align-items:center;
  backdrop-filter:blur(12px); background:rgba(5,5,8,.7);
  border-bottom:1px solid rgba(0,245,255,.05);
}
.logo { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; letter-spacing:4px; color:var(--white); text-transform:uppercase; }
.logo span { color:var(--cyan); }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { text-decoration:none; color:var(--muted); font-size:11px; letter-spacing:2px; text-transform:uppercase; transition:color .2s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--cyan); transition:width .3s; }
.nav-links a:hover { color:var(--cyan); }
.nav-links a:hover::after { width:100%; }

/* ── HERO ── */
.hero { min-height:100vh; display:flex; align-items:center; padding:0 60px; position:relative; overflow:hidden; }
.hero-content { max-width:760px; position:relative; z-index:10; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(0,245,255,.05); border:1px solid rgba(0,245,255,.15); padding:8px 18px; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--cyan); margin-bottom:32px; opacity:0; animation:slideIn .7s .3s ease forwards; }
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:pulse 2s infinite; }
.hero-greeting { font-family:'Playfair Display',serif; font-style:italic; font-size:22px; color:var(--violet); margin-bottom:12px; opacity:0; animation:slideIn .7s .5s ease forwards; }
.hero-name { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(64px,9vw,130px); line-height:.9; letter-spacing:-2px; color:var(--white); opacity:0; animation:slideIn .7s .7s ease forwards; }
.hero-name .glow { background:linear-gradient(135deg,var(--cyan),var(--violet)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; filter:drop-shadow(0 0 30px rgba(0,245,255,.4)); }
.hero-title { font-family:'Space Mono',monospace; font-size:14px; letter-spacing:4px; text-transform:uppercase; color:var(--text); margin:24px 0 16px; opacity:0; animation:slideIn .7s .9s ease forwards; }
.hero-title::before { content:'> '; color:var(--cyan); }
.hero-desc { font-size:14px; line-height:2; color:var(--muted); max-width:520px; margin-bottom:40px; opacity:0; animation:slideIn .7s 1.1s ease forwards; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation:slideIn .7s 1.3s ease forwards; }

.btn-glow { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--cyan),var(--cyan2)); color:#000; padding:16px 32px; text-decoration:none; font-family:'Syne',sans-serif; font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; transition:all .3s; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); }
.btn-glow:hover { box-shadow:0 0 40px rgba(0,245,255,.5),0 0 80px rgba(0,245,255,.2); transform:translateY(-2px); }

.btn-outline { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(0,245,255,.3); color:var(--cyan); padding:16px 32px; text-decoration:none; font-family:'Syne',sans-serif; font-weight:700; font-size:12px; letter-spacing:2px; text-transform:uppercase; transition:all .3s; clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); }
.btn-outline:hover { background:rgba(0,245,255,.08); border-color:var(--cyan); box-shadow:0 0 30px rgba(0,245,255,.15); transform:translateY(-2px); }

/* ── HERO CARD ── */
.hero-3d-card { position:absolute; right:60px; top:50%; transform:translateY(-50%); width:300px; opacity:0; animation:fadeFloat 1s 1.5s ease forwards; z-index:10; }
.card-inner { background:rgba(13,13,20,.85); border:1px solid rgba(0,245,255,.15); padding:32px; backdrop-filter:blur(20px); transform-style:preserve-3d; transform:perspective(1000px) rotateY(-10deg) rotateX(5deg); transition:transform .5s; position:relative; overflow:hidden; }
.card-inner::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:conic-gradient(from 0deg,transparent 0deg,rgba(0,245,255,.05) 60deg,transparent 120deg); animation:spin 8s linear infinite; }
.card-avatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet)); display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:28px; color:#000; margin:0 auto 20px; position:relative; z-index:1; box-shadow:0 0 30px rgba(0,245,255,.4); }
.card-name { font-family:'Syne',sans-serif; font-weight:800; font-size:18px; color:var(--white); text-align:center; margin-bottom:4px; position:relative; z-index:1; }
.card-role { font-size:11px; color:var(--cyan); text-align:center; letter-spacing:2px; text-transform:uppercase; margin-bottom:24px; position:relative; z-index:1; }
.card-stats { display:grid; grid-template-columns:1fr 1fr; gap:2px; position:relative; z-index:1; }
.cs { background:rgba(0,245,255,.04); padding:14px; text-align:center; }
.cs-num { font-family:'Syne',sans-serif; font-weight:800; font-size:22px; color:var(--cyan); display:block; }
.cs-label { font-size:9px; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }

.scroll-hint { position:absolute; bottom:40px; left:60px; display:flex; align-items:center; gap:12px; font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--muted); opacity:0; animation:fadeIn 1s 2s forwards; z-index:10; }
.scroll-mouse { width:22px; height:34px; border:1px solid var(--muted); border-radius:12px; display:flex; align-items:flex-start; justify-content:center; padding-top:6px; }
.scroll-wheel { width:3px; height:8px; background:var(--cyan); border-radius:2px; animation:scrollDown 2s infinite; }

/* ── SECTION COMMONS ── */
.s-wrap { padding:120px 60px; max-width:1200px; margin:0 auto; }
.s-label { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--cyan); margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.s-label::before { content:'//'; color:var(--violet); }
.s-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(40px,5vw,68px); color:var(--white); line-height:1; margin-bottom:56px; letter-spacing:-1px; }
.s-title span { color:var(--cyan); }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-text { font-size:14px; line-height:2; color:var(--text); }
.about-text p { margin-bottom:20px; }
.about-text strong { color:var(--cyan); }
.self-taught-badge { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,rgba(155,93,229,.15),rgba(247,37,133,.1)); border:1px solid rgba(155,93,229,.3); padding:12px 20px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--violet); margin-bottom:28px; }
.self-taught-badge svg { width:16px; height:16px; fill:var(--violet); }
.about-visual { position:relative; height:400px; display:flex; align-items:center; justify-content:center; }
.orbit-ring { position:absolute; border-radius:50%; border:1px solid rgba(0,245,255,.1); animation:orbit-spin 20s linear infinite; }
.orbit-ring:nth-child(1) { width:300px; height:300px; }
.orbit-ring:nth-child(2) { width:220px; height:220px; animation-duration:15s; animation-direction:reverse; border-color:rgba(155,93,229,.15); }
.orbit-ring:nth-child(3) { width:140px; height:140px; animation-duration:10s; border-color:rgba(247,37,133,.15); }
.orbit-dot { position:absolute; width:10px; height:10px; border-radius:50%; top:0; left:50%; transform:translateX(-50%) translateY(-50%); background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.orbit-ring:nth-child(2) .orbit-dot { background:var(--violet); box-shadow:0 0 12px var(--violet); }
.orbit-ring:nth-child(3) .orbit-dot { background:var(--pink); box-shadow:0 0 12px var(--pink); }
.orbit-center { position:relative; z-index:2; width:80px; height:80px; background:linear-gradient(135deg,var(--cyan),var(--violet)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:24px; color:#000; box-shadow:0 0 40px rgba(0,245,255,.4),0 0 80px rgba(0,245,255,.2); }

/* ── SKILLS ── */
.skills-section { background:var(--surface); border-top:1px solid rgba(0,245,255,.05); border-bottom:1px solid rgba(0,245,255,.05); }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.skill-card { background:var(--bg); padding:36px; transition:all .3s; position:relative; overflow:hidden; border:1px solid transparent; }
.skill-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,245,255,.03),transparent); opacity:0; transition:opacity .3s; }
.skill-card:hover::before { opacity:1; }
.skill-card:hover { border-color:rgba(0,245,255,.1); transform:translateY(-4px); }
.skill-card:hover .sib { box-shadow:0 0 30px rgba(0,245,255,.3); }
.sib { width:56px; height:56px; background:rgba(0,245,255,.05); border:1px solid rgba(0,245,255,.1); display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:box-shadow .3s; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }
.sib svg { width:24px; height:24px; fill:none; stroke:var(--cyan); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sib.v svg { stroke:var(--violet); } .sib.p svg { stroke:var(--pink); } .sib.g svg { stroke:var(--gold); }
.sk-name { font-family:'Syne',sans-serif; font-weight:800; font-size:18px; color:var(--white); margin-bottom:8px; letter-spacing:1px; }
.sk-desc { font-size:11px; color:var(--muted); line-height:1.8; margin-bottom:20px; }
.tech-pills { display:flex; flex-wrap:wrap; gap:6px; }
.pill { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:5px 12px; border:1px solid rgba(0,245,255,.15); color:var(--cyan); background:rgba(0,245,255,.03); transition:all .2s; }
.pill:hover { background:rgba(0,245,255,.1); }
.pill.v { border-color:rgba(155,93,229,.2); color:var(--violet); background:rgba(155,93,229,.03); }
.pill.p { border-color:rgba(247,37,133,.2); color:var(--pink); background:rgba(247,37,133,.03); }
.pill.g { border-color:rgba(255,214,10,.2); color:var(--gold); background:rgba(255,214,10,.03); }

/* ── PROJECTS ── */
.projects-list { display:grid; gap:2px; }
.project-item { background:var(--surface); padding:48px; display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:start; border:1px solid transparent; transition:all .3s; position:relative; overflow:hidden; }
.project-item::after { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(to bottom,var(--cyan),var(--violet)); transform:scaleY(0); transform-origin:top; transition:transform .4s; }
.project-item:hover::after { transform:scaleY(1); }
.project-item:hover { border-color:rgba(0,245,255,.1); background:var(--surface2); }
.proj-num { font-family:'Syne',sans-serif; font-weight:800; font-size:64px; line-height:1; background:linear-gradient(135deg,rgba(0,245,255,.15),rgba(155,93,229,.1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; transition:all .3s; }
.project-item:hover .proj-num { background:linear-gradient(135deg,var(--cyan),var(--violet)); -webkit-background-clip:text; background-clip:text; }
.proj-type { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--pink); margin-bottom:8px; }
.proj-title { font-family:'Syne',sans-serif; font-weight:800; font-size:24px; color:var(--white); margin-bottom:12px; }
.proj-desc { font-size:12px; color:var(--muted); line-height:1.9; max-width:500px; margin-bottom:20px; }
.proj-link { align-self:center; display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s; padding:12px 20px; border:1px solid rgba(0,245,255,.1); white-space:nowrap; }
.proj-link:hover { color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 20px rgba(0,245,255,.1); }
.proj-link svg, .proj-soon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.proj-soon { align-self:center; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); padding:12px 20px; border:1px solid rgba(255,255,255,.05); opacity:.5; display:flex; align-items:center; gap:8px; }

/* ── STACK ── */
.stack-section { text-align:center; }
.stack-orbit { position:relative; width:500px; height:500px; margin:0 auto; }
.stack-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90px; height:90px; background:linear-gradient(135deg,var(--cyan),var(--violet)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; color:#000; font-size:11px; letter-spacing:1px; text-transform:uppercase; box-shadow:0 0 60px rgba(0,245,255,.4); z-index:3; }
.tech-node { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:6px; }
.tn-c { width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,245,255,.15); background:var(--surface2); transition:all .3s; box-shadow:0 0 20px rgba(0,0,0,.5); }
.tn-c:hover { transform:scale(1.2); box-shadow:0 0 20px rgba(0,245,255,.3); }
.tn-c svg { width:22px; height:22px; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tn-c.sm { width:42px; height:42px; }
.tn-c.sm svg { width:18px; height:18px; }
.tn-label { font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

/* ── CONTACT ── */
.contact-section { text-align:center; position:relative; overflow:hidden; }
.contact-section::before { content:'STELLEN'; position:absolute; font-family:'Syne',sans-serif; font-weight:800; font-size:200px; color:rgba(0,245,255,.02); top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; letter-spacing:10px; }
.contact-email-link { display:inline-block; font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(20px,3vw,36px); letter-spacing:3px; color:var(--white); text-decoration:none; transition:all .3s; position:relative; }
.contact-email-link::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--violet)); transform:scaleX(0); transition:transform .3s; }
.contact-email-link:hover { color:var(--cyan); }
.contact-email-link:hover::after { transform:scaleX(1); }
.contact-phone { display:block; font-family:'Space Mono',monospace; font-size:16px; color:var(--muted); margin:16px 0 48px; letter-spacing:3px; }
.social-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:48px; }
.social-btn { display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border:1px solid rgba(255,255,255,.08); text-decoration:none; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); transition:all .3s; background:var(--surface); clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); }
.social-btn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(0,245,255,.05); box-shadow:0 0 20px rgba(0,245,255,.1); }
.social-btn svg { width:16px; height:16px; fill:currentColor; flex-shrink:0; }

/* ── FOOTER ── */
footer { padding:32px 60px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(0,245,255,.05); font-size:11px; color:var(--muted); letter-spacing:1px; }
.footer-right { display:flex; align-items:center; gap:8px; }
.footer-right svg { width:14px; height:14px; fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s, transform .8s; }
.reveal.vis { opacity:1; transform:none; }
.rv2 { transition-delay:.15s; }
.rv3 { transition-delay:.3s; }

/* ── DIVIDER ── */
.glowing-divider { height:1px; background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),var(--pink),transparent); opacity:.2; margin:0 60px; }

/* ── KEYFRAMES ── */
@keyframes slideIn   { from{opacity:0;transform:translateY(30px);}  to{opacity:1;transform:none;} }
@keyframes fadeIn    { from{opacity:0;}                              to{opacity:1;} }
@keyframes fadeFloat { from{opacity:0;transform:translateY(-40px);} to{opacity:1;transform:translateY(-50%);} }
@keyframes pulse     { 0%,100%{box-shadow:0 0 0 0 rgba(0,245,255,.4);} 50%{box-shadow:0 0 0 8px rgba(0,245,255,0);} }
@keyframes spin      { from{transform:rotate(0deg);}  to{transform:rotate(360deg);} }
@keyframes orbit-spin{ from{transform:rotate(0deg);}  to{transform:rotate(360deg);} }
@keyframes scrollDown{ 0%,100%{transform:translateY(0);opacity:1;} 60%{transform:translateY(10px);opacity:0;} }
@keyframes float     { 0%,100%{transform:translateY(0px) rotateY(-10deg) rotateX(5deg);} 50%{transform:translateY(-12px) rotateY(-8deg) rotateX(3deg);} }
.floating { animation:float 6s ease-in-out infinite; }

/* ── RESPONSIVE ── */
@media(max-width:900px){
  nav { padding:20px; }
  .nav-links { display:none; }
  .hero { padding:0 24px; }
  .hero-3d-card { display:none; }
  .s-wrap { padding:80px 24px; }
  .about-grid { grid-template-columns:1fr; }
  .about-visual { height:280px; }
  .skills-grid { grid-template-columns:1fr; }
  .project-item { grid-template-columns:1fr; }
  .proj-num { display:none; }
  .stack-orbit { width:320px; height:320px; }
  footer { flex-direction:column; gap:12px; text-align:center; }
  #bg-label { display:none; }
}