/* portfolio · Apple-grade premium dark · revamped 10-wave */
:root {
  --kp:#a855f7; --kp2:#7c3aed; --kp3:#c084fc; --kp4:#e9d5ff;
  --cy:#67e8f9; --emerald:#10b981; --rose:#ef4444; --gold:#fbbf24;
  --bg0:#04050a; --bg1:#080a14; --bg2:#0e1120; --bg3:#161a2c;
  --border:rgba(255,255,255,.06); --border2:rgba(255,255,255,.10); --border3:rgba(255,255,255,.16);
  --text1:#f5f7ff; --text2:#9aa4c0; --text3:#5d6685;
  --r1:8px; --r2:14px; --r3:22px;
  --tr:480ms cubic-bezier(.16,1,.3,1);
  --tr-fast:260ms cubic-bezier(.16,1,.3,1);
  --tr-slow:780ms cubic-bezier(.16,1,.3,1);
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --font-body:'Geist','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-serif:'Instrument Serif',ui-serif,Georgia,serif;
  --grad-kp:linear-gradient(135deg,#c084fc 0%,#a855f7 45%,#7c3aed 100%);
  --grad-rim:linear-gradient(135deg,#c084fc 0%,#67e8f9 100%);
  --shadow-card:0 12px 36px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-card-hover:0 24px 60px rgba(168,85,247,.18),0 0 0 1px rgba(168,85,247,.28);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body {
  font-family:var(--font-body); background:var(--bg0); color:var(--text1);
  min-height:100dvh; overflow-x:hidden; line-height:1.55; font-weight:400; letter-spacing:-.005em;
  background:
    radial-gradient(60% 40% at 20% 8%, rgba(168,85,247,.10), transparent 70%),
    radial-gradient(50% 35% at 80% 25%, rgba(124,58,237,.07), transparent 65%),
    radial-gradient(40% 30% at 50% 70%, rgba(103,232,249,.04), transparent 70%),
    linear-gradient(180deg, #06070e 0%, #04050a 60%, #06070e 100%);
  background-attachment:fixed;
}
::selection { background:rgba(168,85,247,.4); color:#fff }

#hero-canvas {
  position:absolute; right:clamp(1rem,8vw,5rem); top:50%; transform:translateY(-50%);
  width:clamp(280px,38vw,520px); height:clamp(280px,38vw,520px);
  z-index:1; pointer-events:auto;
}
@media (max-width:880px) { #hero-canvas { position:relative; right:auto; top:auto; transform:none; margin:1rem auto 0; display:block } }

.grid-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(168,85,247,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(168,85,247,.025) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 30%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 30%,#000 25%,transparent 78%);
  opacity:.55;
}
.scroll-progress { position:fixed; top:0; left:0; height:2px; z-index:200; background:var(--grad-rim); width:0%; box-shadow:0 0 14px rgba(168,85,247,.7); transition:width .1s linear }

/* REVEAL */
.reveal { opacity:1; transform:none; transition:opacity var(--tr-slow),transform var(--tr-slow) }
.reveal:not(.visible).js-ready { opacity:0; transform:translateY(28px) }
.reveal.visible { opacity:1; transform:none }
.delay-1{transition-delay:.06s}.delay-2{transition-delay:.12s}.delay-3{transition-delay:.18s}
.delay-4{transition-delay:.24s}.delay-5{transition-delay:.30s}.delay-6{transition-delay:.36s}
.delay-7{transition-delay:.42s}.delay-8{transition-delay:.48s}

.hi { background:var(--grad-rim); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600 }

/* NAV */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 clamp(1rem,3vw,3rem); height:64px;
  background:rgba(4,5,10,.65); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--border); transition:background var(--tr),border-color var(--tr);
}
nav.scrolled { background:rgba(4,5,10,.92); border-color:var(--border2) }
.nav-logo { font-family:var(--font-display); font-size:.85rem; letter-spacing:.18em; color:var(--text1); text-decoration:none; display:flex; align-items:center; gap:11px; font-weight:600 }
.nav-mark { width:30px; height:30px; border-radius:8px; background:var(--grad-kp); display:grid; place-items:center; font-family:var(--font-display); font-size:.82rem; color:#fff; font-weight:700; box-shadow:0 0 18px rgba(168,85,247,.45),0 1px 0 rgba(255,255,255,.18) inset }
.nav-links { display:flex; align-items:center; gap:1.8rem }
.nav-links a { color:var(--text2); font-size:.85rem; text-decoration:none; transition:color var(--tr-fast); font-weight:500 }
.nav-links a:hover { color:var(--text1) }
.nav-cta { padding:8px 18px; border-radius:8px; background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.32); color:var(--kp3) !important; font-weight:600 }
.nav-cta:hover { background:rgba(168,85,247,.26) !important; box-shadow:0 0 22px rgba(168,85,247,.3) }
.nav-burger { display:none; background:none; border:none; color:var(--text1); font-size:1.5rem; cursor:pointer }

.nav-lang { display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid var(--border2) }
.nav-lang button { background:transparent; border:none; color:var(--text2); cursor:pointer; padding:5px 11px; font-size:.7rem; font-family:var(--font-mono); font-weight:700; letter-spacing:.08em; border-radius:6px; transition:all var(--tr-fast) }
.nav-lang button:hover { color:var(--text1); background:rgba(168,85,247,.10) }
.nav-lang button.active { color:#fff; background:var(--grad-kp); box-shadow:0 0 12px rgba(168,85,247,.4) }
@media (max-width:920px) {
  .nav-links { display:none; position:absolute; top:64px; right:0; left:0; flex-direction:column; gap:0; padding:1rem; background:rgba(4,5,10,.98); border-bottom:1px solid var(--border2) }
  .nav-links.open { display:flex }
  .nav-links a { padding:.9rem 0; width:100%; text-align:center; border-bottom:1px solid var(--border) }
  .nav-burger { display:block }
}

.container { max-width:1280px; margin:0 auto; padding:0 clamp(1rem,4vw,3.5rem) }

/* HERO */
.hero {
  position:relative; min-height:100dvh; padding:120px clamp(1rem,4vw,3.5rem) 80px;
  max-width:1280px; margin:0 auto; width:100%;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-content { max-width:640px; position:relative; z-index:2 }
.hero-tag { display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border-radius:99px; background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.30); font-size:.78rem; font-family:var(--font-mono); color:var(--kp3); margin-bottom:1.8rem; font-weight:600 }
.hero-tag-dot { width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 10px var(--emerald); animation:pulse 2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.85)} }

.hero-title { display:flex; flex-direction:column; gap:.3rem; font-family:var(--font-display); font-size:clamp(2.8rem,7.2vw,6rem); line-height:.95; letter-spacing:-.035em; font-weight:600; margin-bottom:1.4rem; font-variation-settings:"opsz" 96 }
.hero-name { background:linear-gradient(135deg,#f5f7ff 0%,#c084fc 60%,#a855f7 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-handle { font-family:var(--font-mono); font-size:.42em; color:var(--text3); letter-spacing:.14em; font-weight:500 }
.hero-sub { font-size:clamp(1rem,1.55vw,1.22rem); color:var(--text2); max-width:560px; margin-bottom:2.2rem; line-height:1.65 }
.hero-sub > span { display:inline; margin-right:.18em }
.hero-sub > .hi { margin:0 .12em }
.hero-sub .hi { font-weight:600 }
.hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:3rem }
.btn { display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:11px; font-family:var(--font-body); font-weight:600; font-size:.92rem; text-decoration:none; transition:transform var(--tr-fast),box-shadow var(--tr-fast),background var(--tr-fast),border-color var(--tr-fast); cursor:pointer; border:none; letter-spacing:-.005em }
.btn-primary { background:var(--grad-kp); color:#fff; box-shadow:0 10px 28px rgba(168,85,247,.36),0 1px 0 rgba(255,255,255,.16) inset }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(168,85,247,.5),0 1px 0 rgba(255,255,255,.16) inset }
.btn-ghost { background:rgba(255,255,255,.04); color:var(--text1); border:1px solid var(--border2); backdrop-filter:blur(10px) }
.btn-ghost:hover { background:rgba(255,255,255,.08); border-color:var(--border3) }

.hero-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1.4rem; max-width:560px }
.hm { display:flex; flex-direction:column; gap:.25rem }
.hm-num { font-family:var(--font-display); font-size:2rem; background:var(--grad-rim); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; font-variation-settings:"opsz" 60 }
.hm-lbl { font-size:.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-mono); font-weight:500 }

.hero-scroll { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.68rem; color:var(--text3); text-transform:uppercase; letter-spacing:.2em; font-family:var(--font-mono); z-index:2 }
.hero-scroll-line { width:1px; height:36px; background:linear-gradient(to bottom,var(--kp),transparent); animation:scrollDown 2s infinite }
@keyframes scrollDown { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 50.1%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* SECTIONS */
.section { padding:clamp(5rem,9vw,8rem) 0; position:relative }
.section-dark { background:linear-gradient(180deg,transparent,rgba(8,10,20,.6) 15%,rgba(8,10,20,.6) 85%,transparent) }
.section-title { font-family:var(--font-display); font-size:clamp(1.9rem,3.8vw,3rem); letter-spacing:-.02em; margin-bottom:.7rem; font-weight:600; line-height:1.05; font-variation-settings:"opsz" 60 }
.section-sub { font-size:1.02rem; color:var(--text2); max-width:680px; margin-bottom:3.2rem; line-height:1.6 }

/* WHY */
.why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.3rem }
.why-card { padding:2rem 1.9rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.92),rgba(12,14,26,.92)); border:1px solid var(--border2); transition:transform var(--tr-fast),border-color var(--tr-fast),box-shadow var(--tr-fast); position:relative; box-shadow:var(--shadow-card); overflow:hidden }
.why-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(168,85,247,.5),transparent); opacity:0; transition:opacity var(--tr-fast) }
.why-card:hover { transform:translateY(-3px); border-color:rgba(168,85,247,.38); box-shadow:var(--shadow-card-hover) }
.why-card:hover::before { opacity:1 }
.why-num { font-family:var(--font-mono); font-size:.74rem; color:var(--kp3); margin-bottom:1.1rem; letter-spacing:.15em; font-weight:600 }
.why-card h3 { font-family:var(--font-display); font-size:1.18rem; font-weight:600; margin-bottom:.7rem; color:var(--text1); line-height:1.3; letter-spacing:-.012em }
.why-card p { font-size:.92rem; color:var(--text2); line-height:1.6 }

/* PROJECTS */
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.4rem }
.project { padding:2.1rem 2rem 1.9rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.92),rgba(12,14,26,.92)); border:1px solid var(--border2); position:relative; transition:transform var(--tr-fast),border-color var(--tr-fast),box-shadow var(--tr-fast); display:flex; flex-direction:column; gap:.95rem; box-shadow:var(--shadow-card); overflow:hidden }
.project::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(168,85,247,.3),transparent); opacity:.5 }
.project:hover { transform:translateY(-3px); border-color:rgba(168,85,247,.4); box-shadow:var(--shadow-card-hover) }
.project.featured { grid-column:1/-1; background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(15,17,30,.95)); border-color:rgba(168,85,247,.38); box-shadow:0 16px 50px rgba(168,85,247,.16),0 1px 0 rgba(255,255,255,.04) inset }
.project.featured-2 { grid-column:1/-1; background:linear-gradient(135deg,rgba(103,232,249,.07),rgba(15,17,30,.92)); border-color:rgba(103,232,249,.22) }
.project-rank { font-family:var(--font-mono); font-size:.72rem; color:var(--kp3); letter-spacing:.15em; text-transform:uppercase; max-width:calc(100% - 140px); font-weight:600; display:inline-flex; align-items:center; gap:8px }
.project-rank::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--kp); box-shadow:0 0 8px var(--kp); animation:pulse 2s infinite }
.project-badge { position:absolute; top:1.5rem; right:1.5rem; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:7px; font-size:.7rem; font-family:var(--font-mono); font-weight:600; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis }
.project-badge.public { background:rgba(54,211,153,.12); color:#86efac; border:1px solid rgba(54,211,153,.3) }
.project-badge.private { background:rgba(251,191,36,.10); color:var(--gold); border:1px solid rgba(251,191,36,.28) }
.project-badge.merged { background:rgba(54,211,153,.12); color:#86efac; border:1px solid rgba(54,211,153,.32) }
.status-pill { display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 9px; border-radius:99px; font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; vertical-align:middle; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); white-space:nowrap; margin-left:.7rem; position:relative; top:-3px }
.status-pill.merged { background:rgba(34,197,94,.10); border:1px solid rgba(54,211,153,.42); color:#86efac; box-shadow:0 0 18px rgba(54,211,153,.15),0 1px 0 rgba(255,255,255,.04) inset }
.status-pill.senior { background:rgba(168,85,247,.10); border:1px solid rgba(244,114,182,.42); color:#f5d0fe; box-shadow:0 0 18px rgba(244,114,182,.15),0 1px 0 rgba(255,255,255,.04) inset }
.status-pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; animation:dotPulse 1.8s ease-in-out infinite }
@keyframes dotPulse { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.55; transform:scale(.7) } }
.project.is-merged, .project.is-senior { transform-style:preserve-3d; transition:transform .42s cubic-bezier(.16,.84,.44,1),box-shadow .42s ease,border-color .42s ease; border-left-width:3px }
.project.is-merged { border-left-color:rgba(54,211,153,.78); box-shadow:-1px 0 26px rgba(54,211,153,.14),0 16px 50px rgba(168,85,247,.14),0 1px 0 rgba(255,255,255,.04) inset }
.project.is-senior { border-left-color:rgba(244,114,182,.78); box-shadow:-1px 0 26px rgba(244,114,182,.14),0 16px 50px rgba(244,114,182,.12),0 1px 0 rgba(255,255,255,.04) inset }
.project.is-merged:hover, .project.is-senior:hover { transform:translateY(-5px) }
.project.is-merged:hover { box-shadow:-2px 0 36px rgba(54,211,153,.28),0 32px 72px rgba(168,85,247,.22),0 1px 0 rgba(255,255,255,.06) inset; border-left-color:rgba(54,211,153,1) }
.project.is-senior:hover { box-shadow:-2px 0 36px rgba(244,114,182,.28),0 32px 72px rgba(244,114,182,.20),0 1px 0 rgba(255,255,255,.06) inset; border-left-color:rgba(244,114,182,1) }
@media (max-width:520px) { .status-pill { display:inline-flex; margin-left:.45rem; font-size:.58rem; padding:3px 9px 3px 7px; top:-2px } .project { padding:1.6rem 1.4rem 1.4rem } .project-title { font-size:1.32rem; line-height:1.35 } .project-rank { max-width:100%; font-size:.66rem; padding-right:90px } .project.is-merged, .project.is-senior { border-left-width:2px } }
.project-title { font-family:var(--font-display); font-size:1.55rem; letter-spacing:-.015em; color:var(--text1); font-weight:600; font-variation-settings:"opsz" 48 }
.project-claim { font-family:var(--font-serif); font-style:italic; font-size:1.08rem; color:var(--kp3); line-height:1.4 }
.project-body { font-size:.92rem; color:var(--text2); line-height:1.65 }
.project-tech { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none }
.project-tech li { padding:4px 11px; border-radius:6px; background:rgba(168,85,247,.10); border:1px solid rgba(168,85,247,.22); font-size:.72rem; font-family:var(--font-mono); color:var(--kp3); font-weight:500 }
.project-links { display:flex; gap:1.2rem; margin-top:.5rem; flex-wrap:wrap }
.project-links a { color:var(--kp3); text-decoration:none; font-size:.88rem; font-weight:600; transition:color var(--tr-fast),transform var(--tr-fast); display:inline-flex; align-items:center; gap:4px }
.project-links a:hover { color:var(--kp4); transform:translateX(2px) }
.project-reason { padding:1rem 1.1rem; border-radius:10px; background:rgba(251,191,36,.06); border:1px solid rgba(251,191,36,.18); font-size:.84rem; color:var(--text2); line-height:1.55 }
.project-reason strong { color:var(--gold); font-weight:600 }

/* STACK */
.stack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.3rem }
.stack-col { padding:1.7rem 1.5rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.88),rgba(12,14,26,.88)); border:1px solid var(--border2); box-shadow:0 8px 24px rgba(0,0,0,.32); transition:transform var(--tr-fast),border-color var(--tr-fast) }
.stack-col:hover { transform:translateY(-2px); border-color:rgba(168,85,247,.28) }
.stack-col h4 { font-family:var(--font-mono); font-size:.74rem; color:var(--kp3); margin-bottom:1.1rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600 }
.stack-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem }
.stack-col li { font-size:.88rem; color:var(--text2); padding-left:1.2rem; position:relative; line-height:1.45 }
.stack-col li::before { content:''; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--text3); transition:background var(--tr-fast),box-shadow var(--tr-fast) }
.stack-col li.prod::before { background:var(--kp); box-shadow:0 0 10px var(--kp) }
.stack-col li.prod { color:var(--text1) }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:3rem; align-items:start }
.about-text p { color:var(--text2); margin-bottom:1.1rem; line-height:1.7; font-size:1.02rem }
.about-text strong { color:var(--text1); font-weight:600 }
.about-text em { color:var(--kp3); font-style:normal; font-weight:600 }
.about-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2rem; padding:1.5rem; border-radius:var(--r2); background:rgba(168,85,247,.06); border:1px solid rgba(168,85,247,.22) }
.about-facts div { display:flex; flex-direction:column; gap:.3rem }
.about-facts strong { font-family:var(--font-mono); font-size:.68rem; color:var(--kp3); text-transform:uppercase; letter-spacing:.1em; font-weight:600 }
.about-facts span { font-size:.92rem; color:var(--text1) }
.about-side { display:flex; flex-direction:column; gap:1rem }
.about-quote { padding:1.6rem 1.4rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.85),rgba(12,14,26,.85)); border-left:3px solid var(--kp); box-shadow:0 8px 24px rgba(0,0,0,.3) }
.timeline { padding:1.4rem 1.4rem 1.4rem 1.8rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.85),rgba(12,14,26,.85)); border:1px solid var(--border2); box-shadow:0 8px 24px rgba(0,0,0,.3); position:relative }
.timeline::before { content:''; position:absolute; left:.7rem; top:1.4rem; bottom:1.4rem; width:1px; background:linear-gradient(to bottom,var(--kp),transparent) }
.tl-item { display:grid; grid-template-columns:auto 1fr; gap:.8rem; padding:.55rem 0; position:relative }
.tl-item::before { content:''; position:absolute; left:-1.4rem; top:.95rem; width:9px; height:9px; border-radius:50%; background:var(--kp); box-shadow:0 0 10px var(--kp) }
.tl-year { font-family:var(--font-mono); font-size:.74rem; color:var(--kp3); font-weight:700; letter-spacing:.1em; padding-top:.1rem; min-width:46px }
.tl-c h4 { font-family:var(--font-display); font-size:.95rem; color:var(--text1); margin-bottom:.15rem; font-weight:600 }
.tl-c p { font-size:.82rem; color:var(--text2); line-height:1.45 }
.about-quote p { font-family:var(--font-serif); font-style:italic; font-size:1.15rem; color:var(--text1); margin-bottom:.6rem; line-height:1.4 }
.about-quote span { font-size:.78rem; color:var(--text3); font-family:var(--font-mono) }
@media (max-width:780px) { .about-grid { grid-template-columns:1fr; gap:2rem } }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem }
.contact-card { display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; padding:1.8rem 1.6rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.88),rgba(12,14,26,.88)); border:1px solid var(--border2); color:var(--text1); text-decoration:none; cursor:pointer; text-align:left; font-family:inherit; transition:transform var(--tr-fast),border-color var(--tr-fast),background var(--tr-fast),box-shadow var(--tr-fast); box-shadow:var(--shadow-card) }
.contact-card:hover { transform:translateY(-4px); border-color:rgba(168,85,247,.45); box-shadow:var(--shadow-card-hover) }
.contact-icon { width:46px; height:46px; border-radius:12px; background:var(--grad-kp); display:grid; place-items:center; font-size:1.45rem; box-shadow:0 8px 22px rgba(168,85,247,.4),0 1px 0 rgba(255,255,255,.18) inset; color:#fff }
.contact-card h4 { font-family:var(--font-mono); font-size:.76rem; color:var(--kp3); letter-spacing:.12em; text-transform:uppercase; font-weight:600 }
.contact-card p { font-size:.95rem; color:var(--text1); word-break:break-word; line-height:1.45 }
.muted { color:var(--text3); font-size:.85em }
.contact-cta { margin-top:3rem; text-align:center; padding:2.4rem 1.5rem; background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(15,17,30,.85)); border:1px solid rgba(168,85,247,.25); border-radius:var(--r2); position:relative; overflow:hidden }
.contact-cta::before { content:''; position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:80%; height:200%; background:radial-gradient(ellipse,rgba(168,85,247,.10),transparent 60%); pointer-events:none }
.contact-cta p { font-size:1.18rem; color:var(--text1); font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; position:relative }

/* DASHBOARD */
.dashboard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem }
.dash-counter { padding:1.6rem 1.4rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.92),rgba(12,14,26,.92)); border:1px solid var(--border2); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:.4rem; transition:transform var(--tr-fast),border-color var(--tr-fast) }
.dash-counter:hover { transform:translateY(-3px); border-color:rgba(168,85,247,.4) }
.dc-num { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:700; background:linear-gradient(135deg,#f5f7ff 0%,#c084fc 60%,#67e8f9 100%); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; font-variation-settings:"opsz" 96 }
.dc-lbl { font-family:var(--font-mono); font-size:.72rem; color:var(--text3); text-transform:uppercase; letter-spacing:.1em; font-weight:500 }

.dash-chart { grid-column:span 2; padding:1.4rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.92),rgba(12,14,26,.92)); border:1px solid var(--border2); box-shadow:var(--shadow-card); position:relative; display:flex; flex-direction:column }
.dash-chart-wide { grid-column:span 4 }
.chart-box { position:relative; flex:1; min-height:220px; width:100% }
.chart-box canvas { position:absolute; inset:0 }
.dash-chart h4,.dash-langs h4,.dash-latest h4 { font-family:var(--font-mono); font-size:.74rem; color:var(--kp3); text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; font-weight:600 }

.dash-langs { grid-column:span 2; padding:1.4rem; border-radius:var(--r2); background:linear-gradient(160deg,rgba(20,24,40,.92),rgba(12,14,26,.92)); border:1px solid var(--border2); box-shadow:var(--shadow-card) }
.dash-langs ul { list-style:none; display:flex; flex-direction:column; gap:.65rem }
.dash-langs li { display:grid; grid-template-columns:90px 1fr 40px; align-items:center; gap:.8rem; font-size:.82rem }
.ll-name { color:var(--text1); font-weight:500 }
.ll-bar { height:6px; background:rgba(255,255,255,.05); border-radius:3px; overflow:hidden }
.ll-fill { height:100%; border-radius:3px; transition:width 1.2s cubic-bezier(.16,1,.3,1) }
.ll-pct { color:var(--text3); font-family:var(--font-mono); font-size:.75rem; text-align:right }

.dash-latest { grid-column:span 2; padding:1.6rem 1.4rem; border-radius:var(--r2); background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(15,17,30,.92)); border:1px solid rgba(168,85,247,.3); box-shadow:0 12px 36px rgba(168,85,247,.12) }
.dl-date { font-family:var(--font-display); font-size:1.8rem; color:var(--text1); margin-bottom:.4rem; font-weight:600 }
.dl-desc { font-size:.88rem; color:var(--text2); line-height:1.5 }

@media (max-width:880px) { .dashboard-grid { grid-template-columns:repeat(2,1fr) } .dash-chart-wide,.dash-chart,.dash-langs,.dash-latest { grid-column:span 2 } }

/* THEME TOGGLE */
.theme-toggle { background:rgba(255,255,255,.04); border:1px solid var(--border2); color:var(--text1); width:36px; height:36px; border-radius:9px; cursor:pointer; font-size:1rem; display:grid; place-items:center; transition:all var(--tr-fast); margin-left:.4rem }
.theme-toggle:hover { background:rgba(168,85,247,.14); border-color:rgba(168,85,247,.32) }
/* LIGHT THEME */
html.light { --bg0:#fafafa; --bg1:#f5f5f7; --bg2:#ebebed; --bg3:#dfdfdf; --text1:#1c1c1e; --text2:#3a3a3c; --text3:#86868b; --border:rgba(0,0,0,.07); --border2:rgba(0,0,0,.12); --border3:rgba(0,0,0,.18); --shadow-card:0 10px 30px rgba(0,0,0,.08),0 1px 0 rgba(255,255,255,.6) inset; --shadow-card-hover:0 20px 50px rgba(168,85,247,.16),0 0 0 1px rgba(168,85,247,.32) }
html.light body { background:radial-gradient(60% 40% at 20% 8%,rgba(168,85,247,.08),transparent 70%),radial-gradient(50% 35% at 80% 25%,rgba(124,58,237,.05),transparent 65%),linear-gradient(180deg,#fcfcff 0%,#f5f5f7 60%,#fcfcff 100%) }
html.light nav { background:rgba(250,250,250,.78); border-bottom-color:rgba(0,0,0,.08) }
html.light .why-card,html.light .project,html.light .stack-col,html.light .contact-card,html.light .about-quote,html.light .timeline,html.light .dash-counter,html.light .dash-chart,html.light .dash-langs { background:rgba(255,255,255,.85); border-color:rgba(0,0,0,.08) }
html.light .marquee { background:rgba(245,245,247,.7) }
html.light .footer { background:linear-gradient(180deg,transparent,rgba(235,235,237,.7)) }

/* MARQUEE tech */
.marquee { overflow:hidden; padding:1.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(8,10,20,.6); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); position:relative; z-index:5 }
.marquee-track { display:inline-flex; gap:2rem; animation:marquee 60s linear infinite; animation-play-state:paused; white-space:nowrap; will-change:transform; font-family:var(--font-mono); font-size:.82rem; color:var(--text2); font-weight:500; letter-spacing:.04em }
.marquee.in-view .marquee-track { animation-play-state:running }
.marquee-track span { color:var(--text2) }
.marquee-track span:nth-child(even) { color:var(--kp3); font-weight:700 }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTION DIVIDERS */
.section + .section::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:60%; max-width:600px; height:1px; background:linear-gradient(90deg,transparent,rgba(168,85,247,.3),transparent) }

/* CURSOR FOLLOWER (desktop only) */
.cursor-dot,.cursor-ring { position:fixed; top:0; left:0; pointer-events:none; z-index:9999; mix-blend-mode:screen; transition:opacity .3s; opacity:0 }
.cursor-dot { width:6px; height:6px; border-radius:50%; background:var(--kp); box-shadow:0 0 12px var(--kp); transform:translate(-50%,-50%) }
.cursor-ring { width:34px; height:34px; border:1px solid rgba(168,85,247,.5); border-radius:50%; transform:translate(-50%,-50%); transition:width .25s,height .25s,opacity .3s,border-color .25s }
.cursor-ring.hover { width:54px; height:54px; border-color:rgba(192,132,252,.85); background:rgba(168,85,247,.06) }
/* FIX cursor invisibile: il custom è OPT-IN extra, il cursore di sistema resta SEMPRE visibile */
@media (hover:hover) and (pointer:fine) { .cursor-dot.active,.cursor-ring.active { opacity:.85 } }
.cursor-dot,.cursor-ring { mix-blend-mode:normal }

/* PROJECT card inner glow on hover */
.project { isolation:isolate }
.project::before { content:''; position:absolute; inset:-1px; border-radius:var(--r2); padding:1px; background:linear-gradient(135deg,rgba(168,85,247,.0),rgba(168,85,247,.0)); pointer-events:none; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity var(--tr-fast),background var(--tr-fast); z-index:0 }
.project:hover::before { opacity:1; background:linear-gradient(135deg,rgba(192,132,252,.6),rgba(103,232,249,.4)) }
.project > * { position:relative; z-index:1 }

/* FOOTER ENHANCED */
.footer { padding:3.5rem 0 2.8rem; border-top:1px solid var(--border); margin-top:5rem; background:linear-gradient(180deg,transparent,rgba(8,10,20,.7)) }
.footer-inner { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; align-items:start }
.footer-col h5 { font-family:var(--font-mono); font-size:.72rem; color:var(--kp3); text-transform:uppercase; letter-spacing:.12em; margin-bottom:.9rem; font-weight:600 }
.footer-col p,.footer-col a { font-size:.85rem; color:var(--text3); line-height:1.7; text-decoration:none; display:block }
.footer-col a:hover { color:var(--kp3) }
.footer-bot { grid-column:1/-1; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:var(--text3); font-family:var(--font-mono) }
@media (max-width:780px) { .footer-inner { grid-template-columns:1fr } }
.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.84rem; color:var(--text3) }
.footer a { color:var(--kp3); text-decoration:none }
.footer a:hover { color:var(--kp4) }

[data-tilt] { transform-style:preserve-3d; will-change:transform; contain:layout style }
/* PERF: contain layout per ridurre reflow */
.project,.why-card,.contact-card { contain:layout style }
img,video,canvas { content-visibility:auto }
/* R8 a11y: focus rings premium su tutto interattivo */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--kp); outline-offset:3px; border-radius:4px }
.btn:focus-visible,.contact-card:focus-visible,.nav-cta:focus-visible { outline:2px solid var(--kp3); outline-offset:3px; box-shadow:0 0 0 6px rgba(168,85,247,.18) }
.skip-link { position:absolute; left:-9999px; padding:.6rem 1rem; background:var(--kp); color:#fff; border-radius:6px; z-index:9999 }
.skip-link:focus { left:1rem; top:1rem }

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none !important; transition:none !important } .reveal { opacity:1 !important; transform:none !important } }