@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap');

/* ---------- Core theme (dark default) ---------- */
:root{
  --bg-0:#0c0d10;
  --bg-1:#12131a;
  --glass:#141623cc;
  --text:#e9eaf0;
  --muted:#aab0c0;
  --accent:#8b7dff;
  --accent-2:#5fd1ff;
  --border:#262a37;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --mix-1:#1a1c28;
  --mix-2:#0f1116;
}

/* Light theme overrides */
:root[data-theme="light"]{
  --bg-0:#f6f7fb;
  --bg-1:#ffffff;
  --glass:#ffffffcc;
  --text:#0f1220;
  --muted:#5d6475;
  --accent:#5d52ff;
  --accent-2:#1aa6e8;
  --border:#e6e8f0;
  --shadow:0 12px 26px rgba(0,0,0,.08);
  --mix-1:#e2e6f0;
  --mix-2:#f0f3f8;
}

*{box-sizing:border-box}
html{
  height:100%;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y;
}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth[data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--bg-1), var(--mix-1) 30%) 0%, transparent 60%),
    radial-gradient(1400px 800px at 110% 10%, color-mix(in oklab, var(--bg-1), var(--mix-2) 30%) 0%, transparent 60%),
    linear-gradient(var(--bg-0), var(--bg-0));
  font-family: 'Space Grotesk','Sora',system-ui,-apple-system,Segoe UI,Roboto,Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative; isolation:isolate;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
  touch-action:pan-y;
}

/* particle canvas */
.particle-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1}

/* subtle grain texture */
body > .grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:998; opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

body::before, body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
}

body::before{
  background:radial-gradient(50% 40% at 15% 20%, color-mix(in srgb, var(--accent), transparent 48%) 0%, transparent 70%),
             radial-gradient(40% 32% at 80% 18%, color-mix(in srgb, var(--accent-2), transparent 52%) 0%, transparent 70%),
             radial-gradient(38% 45% at 50% 75%, color-mix(in srgb, var(--accent), var(--mix-1) 45%) 0%, transparent 75%),
             radial-gradient(30% 30% at 35% 55%, color-mix(in srgb, var(--accent-2), transparent 60%) 0%, transparent 70%);
  filter:blur(90px) saturate(130%);
  opacity:.38;
  animation:aurora 35s ease-in-out infinite alternate, auroraShift 50s ease-in-out infinite alternate-reverse;
}

body::after{
  inset:0;
  background-image:linear-gradient(120deg, color-mix(in srgb, var(--accent), transparent 70%) 0%, transparent 18%, transparent 82%, color-mix(in srgb, var(--accent-2), transparent 70%) 100%),
                   linear-gradient(90deg, color-mix(in srgb, var(--border), transparent 40%) 1px, transparent 1px),
                   linear-gradient(0deg, color-mix(in srgb, var(--border), transparent 40%) 1px, transparent 1px);
  background-size:100% 100%, 240px 240px, 240px 240px;
  mix-blend-mode:soft-light;
  opacity:.18;
  animation:gridShift 60s linear infinite;
  z-index:-3;
}

a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}

/* theme toggle */
.theme-toggle{
  border:1px solid var(--border); background:var(--bg-1); color:var(--text);
  padding:0; border-radius:999px; cursor:pointer;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  min-width:38px; min-height:34px; width:38px; height:34px;
  font-size:.85rem; line-height:1;
  transition:transform .22s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .3s, background .3s;
}
.theme-toggle::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent), transparent 70%), transparent 70%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.theme-toggle:hover{transform:translateY(-1px) scale(1.06); border-color:var(--accent); box-shadow:0 0 20px color-mix(in srgb, var(--accent), transparent 70%)}
.theme-toggle:hover::after{opacity:.3}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle .icon{font-size:1.05rem; transition:transform .3s ease}
.theme-toggle:hover .icon{transform:rotate(20deg) scale(1.1)}

/* nav toggles container */
.nav-toggles{display:flex; gap:.6rem; align-items:center}

/* language toggle */
.lang-toggle{
  border:1px solid var(--border); background:var(--bg-1); color:var(--text);
  padding:0; border-radius:999px; cursor:pointer;
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  min-width:38px; min-height:34px; width:38px; height:34px;
  font-size:.85rem; font-weight:600; line-height:1; position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .3s, background .3s, color .3s;
}
.lang-toggle::after{
  content:""; position:absolute; inset:0; border-radius:999px;
  background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-2), transparent 70%), transparent 70%);
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.lang-toggle:hover{transform:translateY(-1px) scale(1.06); border-color:var(--accent-2); color:var(--accent-2); box-shadow:0 0 20px color-mix(in srgb, var(--accent-2), transparent 70%)}
.lang-toggle:hover::after{opacity:.3}
.lang-toggle:active{transform:scale(.92)}
.lang-icon{display:inline-block; transition:transform .25s ease}
.lang-toggle:hover .lang-icon{transform:scale(1.1)}

/* --- Navbar Interactivity & Animation --- */
.navbar{
  position:sticky; top:0; z-index:999;
  backdrop-filter:saturate(1.4) blur(12px);
  background:var(--glass);
  border-bottom:1px solid var(--border);
  box-shadow:0 20px 40px rgba(0,0,0,.18);
  opacity:0; transform:translateY(-18px) scale(.98);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1), background .3s;
}
.navbar.navbar-visible{
  opacity:1; transform:none;
}
.navbar.scrolled{
  background:color-mix(in srgb, var(--glass), #181a22 30%);
  box-shadow:0 8px 32px rgba(0,0,0,.22);
}
.brand{font-weight:700; letter-spacing:.3px; position:relative; transition:color .25s, transform .22s;}
.brand:hover, .brand:focus{color:var(--accent-2); transform:scale(1.07) rotate(-2deg);}
.brand::after{content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
.brand:hover::after,.brand:focus::after{transform:scaleX(1)}

/* nav links — pill indicator + glow */
.nav-list{list-style:none; display:flex; gap:.25rem; margin:0; padding:4px; border-radius:999px; background:color-mix(in srgb, var(--bg-1), transparent 60%); border:1px solid color-mix(in srgb, var(--border), transparent 50%)}
.nav-list li{opacity:0; transform:translateY(-6px); animation:navEnter .7s ease forwards; position:relative}
.nav-list li:nth-child(2){animation-delay:.05s}
.nav-list li:nth-child(3){animation-delay:.1s}
.nav-list li:nth-child(4){animation-delay:.15s}
.nav-list a{
  color:var(--text); opacity:.85;
  position:relative; display:block;
  padding:.4rem .85rem; border-radius:999px;
  font-size:.92rem; font-weight:500; letter-spacing:.02em;
  transition:color .25s, background .3s, opacity .3s, text-shadow .3s;
}
.nav-list a::after{display:none}
.nav-list a:hover,.nav-list a:focus{
  opacity:1; color:var(--accent-2);
  background:color-mix(in srgb, var(--accent-2), transparent 88%);
  text-shadow:0 0 12px color-mix(in srgb, var(--accent-2), transparent 60%);
}
.nav-list a:active{transform:scale(.95)}

.nav-toggles button{
  transition:transform .22s cubic-bezier(.4,0,.2,1), border-color .3s, color .3s, box-shadow .3s;
}
.nav-toggles button:hover, .nav-toggles button:focus{
  transform:translateY(-1px) scale(1.06);
  border-color:var(--accent-2);
  color:var(--accent-2);
}

/* scroll progress */
.scroll-progress{position:fixed; inset:0 auto auto 0; height:3px; width:0%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); z-index:1000; box-shadow:0 0 16px color-mix(in srgb, var(--accent-2), transparent 40%)}

/* navbar glass */
.nav-inner{max-width:1100px; margin:0 auto; padding:.75rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}

/* hero with morphing blob */
.hero{position:relative; display:grid; place-items:center; min-height:55vh; text-align:center; overflow:hidden}
.hero-inner{position:relative; z-index:2; padding:4rem 1rem}
.hero .typing{font-size:clamp(2.2rem,4.6vw,3.6rem); border-right:.12em solid var(--accent); white-space:nowrap; overflow:hidden; animation:typing 3s steps(30,end), caret .8s step-end infinite; text-shadow:0 6px 24px rgba(0,0,0,.3)}
.subtitle{color:var(--muted); margin-top:.5rem; opacity:0; transform:translateY(8px); animation:softRise 1.1s ease .15s forwards}
.fade-in{opacity:0; transform:translateY(8px); animation:softRise 1s ease .35s forwards}
@keyframes typing{from{width:0} to{width:100%}}
@keyframes caret{50%{border-color:transparent}}
.blob{position:absolute; inset:auto -20% -40% auto; width:600px; height:600px; z-index:1; background:radial-gradient(40% 40% at 50% 50%, color-mix(in oklab, var(--accent), #000 40%) 0%, transparent 60%), radial-gradient(35% 35% at 60% 40%, color-mix(in oklab, var(--accent-2), #000 60%) 0%, transparent 70%), radial-gradient(35% 35% at 40% 60%, color-mix(in oklab, var(--accent), #000 70%) 0%, transparent 70%); filter:blur(45px) saturate(130%); opacity:.6; border-radius:50% 60% 40% 60% / 55% 45% 55% 45%; animation:blob 30s ease-in-out infinite; mix-blend-mode:screen;}
@keyframes blob{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)} 33%{transform:translate3d(15px,-25px,0) scale(1.02) rotate(3deg)} 66%{transform:translate3d(-10px,-35px,0) scale(1.04) rotate(-2deg)}}


/* scroll cue (minimal) */
.scroll-cue{
  margin-top:2.2rem;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  padding:.15rem .2rem;
  border-radius:999px;
  border:0;
  background:transparent;
  color:var(--muted);
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  position:relative;
  z-index:2;
  opacity:.8;
  transition:opacity .2s ease, color .2s ease;
  line-height:1;
}
.scroll-cue::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:56px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-2), transparent);
  transform:translateX(-50%);
  opacity:.6;
}
.scroll-cue:hover{opacity:1; color:var(--text)}
.scroll-cue-text{opacity:.85; font-weight:500; line-height:1; display:flex; align-items:center; justify-content:center}
.scroll-cue-icon{
  font-size:1rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:scrollBounce 1.6s ease-in-out infinite;
}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* layout */
.container{max-width:1100px; margin:0 auto; padding:2.25rem 1rem}
.section{margin:3rem 0; position:relative; z-index:1}
.section::before{
  content:""; position:absolute; inset:-6% -4%; background:radial-gradient(35% 35% at 12% 20%, color-mix(in srgb, var(--accent), transparent 70%) 0%, transparent 70%), radial-gradient(32% 32% at 90% 30%, color-mix(in srgb, var(--accent-2), transparent 70%) 0%, transparent 70%);
  filter:blur(60px); opacity:0; transition:opacity .45s ease; z-index:-1;
}
.section:hover::before{opacity:.55}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(20px) scale(.98); transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.show{opacity:1; transform:none}

/* stagger children on reveal */
.reveal-stagger > *{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal-stagger.show > *{opacity:1; transform:none}
.reveal-stagger.show > *:nth-child(1){transition-delay:.06s}
.reveal-stagger.show > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.show > *:nth-child(3){transition-delay:.18s}
.reveal-stagger.show > *:nth-child(4){transition-delay:.24s}
.reveal-stagger.show > *:nth-child(5){transition-delay:.30s}
.reveal-stagger.show > *:nth-child(6){transition-delay:.36s}
.reveal-stagger.show > *:nth-child(7){transition-delay:.42s}
.reveal-stagger.show > *:nth-child(8){transition-delay:.48s}

/* section parallax container */
.section-parallax{transition:transform .1s linear}

/* word reveal */
.word-reveal{display:inline-block; opacity:0; transform:translateY(100%); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
.word-reveal.visible{opacity:1; transform:none}

/* scale reveal */
.reveal-scale{opacity:0; transform:scale(.9); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal-scale.show{opacity:1; transform:none}

/* slide from left/right */
.reveal-left{opacity:0; transform:translateX(-30px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal-left.show{opacity:1; transform:none}
.reveal-right{opacity:0; transform:translateX(30px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal-right.show{opacity:1; transform:none}

/* about */
.about{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.about-text{display:flex; flex-direction:column; gap:1rem}
.about-intro{font-size:1.1rem; line-height:1.6}
.highlight{color:var(--accent); font-weight:700}
.emoji-rotate{display:inline-block; animation:emojiSpin 2s ease-in-out infinite}
.about-content{display:flex; flex-direction:column; gap:1.2rem}
.about-item{display:flex; gap:1rem; padding:1rem; background:color-mix(in srgb, var(--bg-1), var(--accent) 5%); border-radius:12px; border-left:3px solid var(--accent-2); transition:all .3s ease}
.about-item:hover{transform:translateX(6px); background:color-mix(in srgb, var(--bg-1), var(--accent-2) 10%); border-left-color:var(--accent)}
.item-icon{font-size:2rem; line-height:1}
.about-item h4{margin:0 0 .3rem; color:var(--text)}
.about-item p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.5}
.about-cta{margin-top:.5rem}
.cta-link{display:inline-flex; align-items:center; gap:.6rem; padding:.9rem 1.4rem; background:linear-gradient(120deg, var(--accent), var(--accent-2)); color:#0a0c10; font-weight:700; border-radius:12px; text-decoration:none; transition:all .3s ease; box-shadow:0 8px 16px rgba(0,0,0,.25); width:fit-content}
.cta-link:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.35); background-position:100% 0}
.cta-link::after{content:"→"; transition:transform .3s ease}
.cta-link:hover::after{transform:translateX(4px)}
.about-figure{display:flex; flex-direction:column; gap:1.5rem; align-items:center; justify-content:center}

/* Skills Visualization Orb */
.skills-visual{position:relative; width:280px; height:280px; display:flex; align-items:center; justify-content:center}
.skill-orb{position:absolute; width:110px; height:110px; border-radius:50%; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent), white 30%), var(--accent)); box-shadow:0 0 60px color-mix(in srgb, var(--accent), transparent 30%), inset -10px -10px 20px rgba(0,0,0,.4); animation:orbPulse 5s ease-in-out infinite; z-index:10}
.orb-core{position:absolute; inset:20%; border-radius:50%; background:radial-gradient(circle, var(--accent-2), var(--accent)); box-shadow:0 0 30px color-mix(in srgb, var(--accent-2), transparent 20%); animation:coreGlow 2s ease-in-out infinite}
.orb-ring{position:absolute; inset:0; border-radius:50%; border:2px solid; opacity:.6}
.orb-ring-1{border-color:var(--accent); animation:ringRotate 12s linear infinite}
.orb-ring-2{border-color:var(--accent-2); inset:10%; animation:ringRotate 16s linear infinite reverse}
.orb-ring-3{border-color:#5fd1ff; inset:25%; animation:ringRotate 20s linear infinite}

/* Orbiting Icons */
.skill-icons-orbit{position:absolute; width:260px; height:260px}
.orbit-icon{
  position:absolute;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  font-size:1.7rem;
  border-radius:12px;
  background:color-mix(in srgb, var(--bg-1), var(--accent) 15%);
  border:1px solid var(--border);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  animation:orbitRotate 30s linear infinite;
  animation-delay:calc(var(--index) * -5s);
  transform-origin:130px 130px;
}
.orbit-icon:hover{transform:scale(1.1); box-shadow:0 6px 20px color-mix(in srgb, var(--accent), transparent 40%)}

.about-badges{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}
.badge-pill{display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; background:color-mix(in srgb, var(--accent), transparent 80%); border:1px solid var(--border); border-radius:999px; font-size:.9rem; color:var(--text); animation:badgeFloat .8s ease-in-out infinite}
.badge-pill:nth-child(2){animation-delay:.2s}
.badge-pill:nth-child(3){animation-delay:.4s}

/* ====================== RESPONSIVE ====================== */

/* --- Tablet projects (≤ 1100px) --- */
@media (max-width:1100px){
  .section-head{grid-template-columns:1fr; gap:.75rem}
  .section-head h2{grid-column:1}
  .github-tag{grid-column:1; width:100%; justify-content:center}
  .projects-grid{grid-template-columns:1fr}
}

/* --- Tablet / small desktop (≤ 860px) --- */
@media (max-width:860px){
  .about{grid-template-columns:1fr}
  .about-figure{justify-self:center}
  .skills-visual{width:220px; height:220px}
  .skill-orb{width:90px; height:90px}
  .skill-icons-orbit{width:200px; height:200px}
  .orbit-icon{width:40px; height:40px; font-size:1.3rem}
  .orbit-icon{transform-origin:100px 100px}
  @keyframes orbitRotate{0%{transform:rotate(0deg) translateX(100px)}100%{transform:rotate(360deg) translateX(100px)}}
  .skills-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
}

/* --- Mobile (≤ 640px) --- */
@media (max-width:640px){
  /* Navbar */
  .nav-inner{flex-wrap:wrap; padding:.45rem .6rem; gap:.35rem}
  .nav-list{gap:0; padding:2px; font-size:.78rem; order:3; width:100%; justify-content:center; flex-wrap:wrap}
  .nav-list a{padding:.3rem .55rem; font-size:.78rem}
  .nav-toggles{order:2}

  /* Hero */
  .hero{min-height:38vh}
  .hero-inner{padding:1.8rem .6rem}
  .hero .typing{font-size:clamp(1.3rem, 6vw, 1.9rem); white-space:normal; overflow:visible; animation:none; border-right:none; width:auto}
  .subtitle{font-size:.85rem; margin-top:.35rem}
  .fade-in{font-size:.88rem}
  .blob{width:280px; height:280px; inset:auto -30% -50% auto; filter:blur(35px) saturate(130%)}

  /* Scroll cue + CV button */
  .scroll-cue{margin-top:1.2rem; font-size:.75rem}
  .btn-minimal{padding:.6rem 1.2rem; font-size:.88rem; gap:.45rem}
  .btn-minimal svg{width:16px; height:16px}

  /* About */
  .about-text{gap:.5rem}
  .about-text h2{font-size:1.3rem}
  .about-intro{font-size:.88rem; line-height:1.5}
  .about-item{padding:.55rem; gap:.5rem; border-radius:8px}
  .about-item h4{font-size:.85rem; margin-bottom:.2rem}
  .about-item p{font-size:.82rem; line-height:1.4}
  .item-icon{font-size:1.2rem}
  .about-cta{margin-top:.3rem}
  .cta-link{padding:.65rem 1rem; font-size:.85rem; border-radius:8px}
  .skills-visual{width:150px; height:150px; margin:0 auto}
  .skill-orb{width:56px; height:56px}
  .skill-icons-orbit{width:134px; height:134px}
  .orbit-icon{width:30px; height:30px; font-size:.95rem; border-radius:7px; transform-origin:67px 67px}
  @keyframes orbitRotate{0%{transform:rotate(0deg) translateX(67px)}100%{transform:rotate(360deg) translateX(67px)}}
  .about-badges{gap:.3rem}
  .badge-pill{font-size:.72rem; padding:.3rem .55rem}

  /* Skills */
  .skills-grid{grid-template-columns:1fr}
  .skills-intro{font-size:.85rem; margin-bottom:.8rem}
  .skill-card{padding:.75rem; gap:.5rem; border-radius:10px}
  .skill-icon{font-size:1.6rem}
  .skill-label{font-size:.95rem}
  .skill-facts{gap:.3rem}
  .skill-fact{font-size:.82rem}

  /* Projects */
  .projects-grid{grid-template-columns:1fr}
  .section-head{grid-template-columns:1fr}
  .github-tag{grid-column:1; font-size:.82rem; padding:.35rem .5rem}
  .card{padding:.85rem; border-radius:12px}
  .card h3{font-size:1rem; margin-bottom:.25rem}
  .card p{font-size:.82rem; margin:.15rem 0 .5rem}
  .meta-row{gap:.3rem; margin-bottom:.5rem}
  .badge{font-size:.78rem; padding:.22rem .4rem}
  .projects-controls{gap:.6rem; margin-top:.8rem}
  .projects-btn{padding:.4rem .8rem; font-size:.82rem}
  .projects-note{font-size:.82rem; margin-top:.6rem}

  /* Contact */
  .contact-form{max-width:100%; gap:.25rem}
  .contact-form input,.contact-form textarea{padding:.65rem .8rem; border-radius:8px; font-size:.88rem}
  .cta{padding:.7rem .9rem; font-size:.88rem; border-radius:8px}

  /* Section spacing */
  .container{padding:1rem .6rem}
  .section{margin:1.5rem 0}
  .section h2{font-size:1.3rem}

  /* Clock + cursor */
  .clock-widget{display:none}
  .cursor-ring{display:none}

  /* Scroll-to-top */
  .scroll-to-top{width:38px; height:38px; right:10px; bottom:10px; font-size:.85rem}

  /* Footer */
  .footer{padding:.8rem .6rem; font-size:.78rem}
}

/* --- Small phones (≤ 380px) --- */
@media (max-width:380px){
  .hero-inner{padding:1.4rem .4rem}
  .hero .typing{font-size:1.2rem}
  .subtitle{font-size:.78rem}
  .blob{width:200px; height:200px}
  .skills-visual{width:120px; height:120px}
  .skill-orb{width:44px; height:44px}
  .skill-icons-orbit{width:108px; height:108px}
  .orbit-icon{width:26px; height:26px; font-size:.85rem; border-radius:6px; transform-origin:54px 54px}
  @keyframes orbitRotate{0%{transform:rotate(0deg) translateX(54px)}100%{transform:rotate(360deg) translateX(54px)}}
  .btn-minimal{padding:.55rem 1rem; font-size:.82rem}
  .about-item{flex-direction:column; gap:.35rem; text-align:center; padding:.45rem}
  .about-item .item-icon{align-self:center}
  .about-text h2{font-size:1.15rem}
  .section h2{font-size:1.15rem}
}

@keyframes emojiSpin{0%,100%{transform:rotate(0deg)}50%{transform:rotate(20deg)}}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes coreGlow{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes ringRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes orbitRotate{0%{transform:rotate(0deg) translateX(130px)}100%{transform:rotate(360deg) translateX(130px)}}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- ANIMATED SKILLS CARDS (FACT-BASED) ---------- */
.skills-intro{text-align:center; color:var(--muted); margin-bottom:1.5rem; font-size:.95rem; animation:fadeIn 1s ease .2s forwards; opacity:0}
.skills-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; align-items:stretch}
.skill-card{
  background:linear-gradient(135deg, color-mix(in srgb, var(--bg-1), #0a0c13 40%), var(--bg-1));
  border:1px solid var(--border);
  border-radius:14px;
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.8rem;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s, background-color .3s;
  position:relative;
  overflow:hidden;
  animation:skillCardRise .8s cubic-bezier(.2,.7,.3,1) both;
}
.skill-card:nth-child(2){animation-delay:60ms}
.skill-card:nth-child(3){animation-delay:120ms}
.skill-card:nth-child(4){animation-delay:180ms}
.skill-card:nth-child(5){animation-delay:240ms}
.skill-card:nth-child(6){animation-delay:300ms}
.skill-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent-2), transparent 70%), transparent);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
  z-index:0;
}
.skill-card:hover::before{opacity:.15}
.skill-card:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--accent), transparent 40%); box-shadow:0 14px 28px rgba(0,0,0,.32); background-color:color-mix(in srgb, var(--bg-1), var(--accent) 5%)}
.skill-icon{
  font-size:2.2rem;
  line-height:1;
  animation:iconFloat 3s ease-in-out infinite;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.skill-card:nth-child(2) .skill-icon{animation-delay:.1s}
.skill-card:nth-child(3) .skill-icon{animation-delay:.2s}
.skill-card:nth-child(4) .skill-icon{animation-delay:.3s}
.skill-card:nth-child(5) .skill-icon{animation-delay:.4s}
.skill-card:nth-child(6) .skill-icon{animation-delay:.5s}
.skill-label{font-weight:700; font-size:1.1rem; text-align:left; color:var(--text)}
.skill-facts{display:flex; flex-direction:column; gap:.5rem; width:100%}
.skill-fact{display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.95rem}
.fact-icon{font-size:1.1rem; opacity:.8}
.fact-value{font-weight:600; color:var(--accent-2)}
.skill-card.loading{opacity:.7; pointer-events:none}

/* ---------- PROJECTS CAROUSEL ---------- */
.section-head{display:grid; grid-template-columns:repeat(3, minmax(260px, 1fr)); gap:.75rem; align-items:center; margin-bottom:.35rem}
.section-head h2{grid-column:1; margin:0}
.github-tag{grid-column:3; width:100%; display:flex; align-items:center; justify-content:center; gap:.45rem; color:var(--muted); font-size:.88rem; padding:.42rem .65rem; border-radius:12px; border:1px solid var(--border); background:transparent; box-shadow:none}
.pulse-dot{width:6px; height:6px; border-radius:50%; background:var(--accent-2); position:relative; box-shadow:none; animation:none}
.projects-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; align-items:stretch; grid-auto-rows:1fr; perspective:1200px}
.project-card{height:100%; display:flex}
.project-card .card{height:100%; width:100%; transform-style:preserve-3d; will-change:transform}
.projects-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  margin-top:1.2rem;
}
.projects-btn{
  border:1px solid var(--border);
  background:var(--bg-1);
  color:var(--text);
  padding:.5rem 1rem;
  border-radius:999px;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, color .2s ease;
}
.projects-btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent-2);
  color:var(--accent-2);
}
.projects-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
}
.projects-page{color:var(--muted); font-size:.95rem}

.project-card.flip-in{
  animation:cardFlipIn .65s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes cardFlipIn{
  from{opacity:0; transform:rotateY(60deg) translateY(10px)}
  to{opacity:1; transform:rotateY(0) translateY(0)}
}
.card{--rx:0deg; --ry:0deg; --tz:0px; background:var(--bg-1); border:1px solid var(--border); border-radius:16px; padding:1.1rem; box-shadow:0 6px 16px rgba(0,0,0,.22); transition:box-shadow .2s ease, border-color .2s ease; transform:none; position:relative; overflow:hidden; isolation:isolate}
.card::before{display:none}
.card:hover{border-color:color-mix(in srgb, var(--border), var(--accent-2) 20%); box-shadow:0 10px 20px rgba(0,0,0,.24)}
.card h3{margin:0 0 .4rem}
.card p{color:var(--muted); margin:.2rem 0 .8rem}
.meta-row{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-bottom:.75rem}
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .52rem; border-radius:999px; background:transparent; color:var(--text); border:1px solid var(--border); font-size:.88rem}
.meta-muted{color:var(--muted); font-size:.9rem}
.ghost{color:var(--accent-2); font-weight:600; display:inline-flex; align-items:center; gap:.25rem}
.ghost::after{content:"→"}
.projects-note{color:var(--muted); margin-top:1rem; font-size:.95rem}
.projects-grid .card{animation:riseIn .9s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--stagger, 0) * 80ms)}
.project-card.loading .card{background:var(--bg-1); color:var(--muted)}

/* Projects single column already handled in mobile section above */

/* contact */
.contact-form{display:grid; gap:.32rem; max-width:560px}
.contact-form input,.contact-form textarea{background:var(--bg-1); border:1px solid var(--border); color:var(--text); border-radius:12px; padding:.85rem 1rem}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;
  border-color:var(--accent-2);
  background:var(--bg-1);
  transition:border-color .18s;
}
.contact-form input:active,.contact-form textarea:active{
  border-color:var(--accent);
}
.contact-form input.error,.contact-form textarea.error{
  border-color:#ff4d6d;
}
.contact-form input.success,.contact-form textarea.success{
  border-color:#4dffb8;
}
.contact-form .input-msg{
  font-size:.88rem;
  margin:.15rem 0 .3rem 1rem;
  color:#b0b0b0;
  min-height:1.1em;
  font-weight:400;
  letter-spacing:.01em;
  transition:color .18s;
}
.contact-form .input-msg.success{color:#4dffb8;}
.contact-form .input-msg.error{color:#ff4d6d;}
.contact-form button{
  transition:transform .15s;
}
.contact-form button:hover{
  transform:scale(1.025);
}
.contact-form button:active{
  transform:scale(.98);
}
.cta{padding:.9rem 1.1rem; border:none; border-radius:12px; cursor:pointer; color:#0b0c10; font-weight:700; background:linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent)); background-size:220% 220%; transition:transform .25s ease, box-shadow .25s ease, background-position 6s ease; box-shadow:0 8px 16px rgba(0,0,0,.25)}
.cta:hover{transform:translateY(-2px); background-position:100% 0}
.typing-dots{margin-top:.3rem; text-align:center; font-size:2rem}
.typing-dots.hidden{display:none}
.typing-dots span{display:inline-block; color:var(--accent-2); animation:blinkDot 1s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes blinkDot{0%,100%{opacity:.2} 50%{opacity:1}}

/* ---------- EXTRA INTERACTIVITY ---------- */
.section h2{
  position:relative;
  display:inline-block;
  transition:transform .25s ease, color .25s ease;
}
.section h2::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:48%; height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.section:hover h2::after{transform:scaleX(1)}
.section:hover h2{transform:translateY(-2px)}

.about-item, .skill-card, .repo-item, .badge-pill, .badge{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.about-item:hover, .skill-card:hover, .repo-item:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}
.badge-pill:hover, .badge:hover{transform:translateY(-3px) scale(1.03)}

.cta-link, .cta, .ghost, .theme-toggle, .lang-toggle, .nav-list a{
  position:relative;
  overflow:hidden;
}
.cta-link::before, .cta::before, .ghost::before, .theme-toggle::before, .lang-toggle::before, .nav-list a::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.14) 45%, transparent 90%);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none;
  border-radius:inherit;
}
.cta-link:hover::before, .cta:hover::before, .ghost:hover::before, .theme-toggle:hover::before, .lang-toggle:hover::before, .nav-list a:hover::before{
  transform:translateX(120%);
}

.ripple-effect{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:rippleAnim .55s ease-out;
  background:rgba(255,255,255,.35);
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:1;
}
@keyframes rippleAnim{
  to{transform:scale(2.6); opacity:0;}
}

/* ---------- MODAL FOR EXPERTISE DETAILS ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  display:grid; place-items:center; z-index:2000; animation:fadeIn .3s ease;
  padding:1rem;
}
.modal-content{
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.4);
  max-width:600px; width:100%; max-height:80vh; overflow-y:auto;
  position:relative; animation:modalSlideIn .4s cubic-bezier(.2,.7,.3,1);
  padding:2rem;
}
.modal-close{
  position:absolute; top:1rem; right:1rem;
  background:none; border:none; color:var(--text); font-size:1.5rem;
  cursor:pointer; padding:.5rem; opacity:.7; transition:opacity .2s;
}
.modal-close:hover{opacity:1}
.modal-header{margin-bottom:1.5rem}
.modal-header h3{margin:0 0 .5rem; font-size:1.4rem}
.modal-subtitle{color:var(--muted); margin:0; font-size:.95rem}
.modal-body h4{color:var(--text); margin-top:0; margin-bottom:1rem}
.repo-list{display:flex; flex-direction:column; gap:.75rem}
.repo-item{
  display:block; padding:1rem; background:var(--bg-0); border:1px solid var(--border);
  border-radius:12px; text-decoration:none; transition:all .3s ease;
  color:inherit;
}
.repo-item:hover{border-color:var(--accent); background:color-mix(in srgb, var(--bg-0), var(--accent) 8%); transform:translateX(4px)}
.repo-name{font-weight:700; color:var(--accent-2); margin-bottom:.4rem}
.repo-desc{color:var(--muted); font-size:.9rem; margin-bottom:.5rem; line-height:1.4}
.repo-meta{display:flex; gap:1rem; color:var(--muted); font-size:.85rem}
@keyframes modalSlideIn{from{opacity:0; transform:scale(.95) translateY(20px)}to{opacity:1; transform:none}}
.footer{border-top:1px solid var(--border); padding:2rem 1rem; text-align:center; color:var(--muted)}
.scroll-to-top{position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0b0f; display:grid; place-items:center; font-weight:900; box-shadow:var(--shadow); transform:scale(.8); opacity:0; pointer-events:none; transition:transform .25s, opacity .25s; animation:floaty 4.5s ease-in-out infinite; z-index:900}
.scroll-to-top.visible{transform:scale(1); opacity:1; pointer-events:auto}
.scroll-to-top:hover{transform:scale(1.08) translateY(-3px)}

/* magnetic hover base */
.magnetic{transition:transform .3s cubic-bezier(.2,.7,.3,1)}

/* enhanced section glow */
.section-glow{position:relative}
.section-glow::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(40% 40% at 50% 50%, color-mix(in srgb, var(--accent), transparent 85%) 0%, transparent 70%);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
  z-index:-1;
}
.section-glow:hover::after{opacity:1}

/* clock widget (kept) */
.clock-widget{position:fixed; bottom:20px; left:20px; background:linear-gradient(135deg,color-mix(in oklab, var(--bg-1), #0b0c12 30%), var(--bg-1)); color:#cfe0ff; padding:12px 18px; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow)}
:root[data-theme="light"] .clock-widget{color:#2b2f3a}
.clock-widget #clock{font-weight:700; font-size:1.2rem; color:#baccff}
:root[data-theme="light"] .clock-widget #clock{color:#3341cc}

/* cursor ring */
.cursor-ring{position:fixed; top:0; left:0; width:24px; height:24px; border-radius:50%; pointer-events:none; border:2px solid color-mix(in srgb, var(--accent), white 25%); transform:translate(-50%,-50%); mix-blend-mode:screen; opacity:.7; transition:width .2s, height .2s, border-color .2s, opacity .2s; z-index:9999}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .cursor-ring{display:none}
  .blob{animation:none}
  .reveal{transition:none}
  .reveal-stagger > *{transition:none}
  .radial{transition:none}
  .typing{animation:none; border:none}
  .particle-canvas{display:none}
  .grain{display:none}
}

/* prevent mobile horizontal scroll */
@supports (overflow: clip){
  html,
  body{
    overflow-x:clip;
  }
}

/* ---------- Animation keyframes ---------- */
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-18px,0) scale(1.04)}100%{transform:translate3d(-18px,12px,0) scale(1)}}
@keyframes gridShift{0%{background-position:0 0,0 0,0 0}100%{background-position:0 0, -240px -240px, -240px -240px}}
@keyframes navEnter{to{opacity:1; transform:none}}
@keyframes softRise{to{opacity:1; transform:none}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 8px 18px rgba(0,0,0,.25),0 0 0 0 color-mix(in srgb,var(--accent),transparent 80%)}50%{box-shadow:0 12px 24px rgba(0,0,0,.3),0 0 0 16px color-mix(in srgb,var(--accent),transparent 90%); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent-2), transparent 60%))}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-2), transparent 55%)}70%{box-shadow:0 0 0 16px color-mix(in srgb, var(--accent-2), transparent 100%)}100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-2), transparent 100%)}}
@keyframes cardGlow{0%{transform:translateX(-40%)}100%{transform:translateX(50%)}}
@keyframes riseIn{0%{opacity:0; transform:translateY(18px) scale(.97)}100%{opacity:1; transform:none}}
@keyframes skillCardRise{0%{opacity:0; transform:translateY(20px) scale(.95)}100%{opacity:1; transform:none}}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-4px) rotate(2deg)}75%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes fadeInUp{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:none}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes gentleDrift{0%,100%{transform:translate(0,0)}25%{transform:translate(8px,-12px)}50%{transform:translate(-6px,-20px)}75%{transform:translate(-10px,-8px)}}
@keyframes textGradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes auroraShift{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}33%{transform:translate3d(10px,8px,0) scale(1.02) rotate(1deg)}66%{transform:translate3d(-14px,-6px,0) scale(.98) rotate(-1deg)}100%{transform:translate3d(6px,-10px,0) scale(1.01) rotate(.5deg)}}

/* ---------- CV DOWNLOAD BUTTON (PROMINENT) ---------- */
.btn-minimal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  border: none;
  color: #0a0c10;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent), transparent 50%), 0 0 0 0 color-mix(in srgb, var(--accent), transparent 80%);
  transition: transform .3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow .3s ease;
  animation: cvPulse 3s ease-in-out infinite;
}

/* pulsing glow ring */
@keyframes cvPulse{
  0%,100%{box-shadow: 0 8px 24px color-mix(in srgb, var(--accent), transparent 50%), 0 0 0 0 color-mix(in srgb, var(--accent), transparent 80%)}
  50%{box-shadow: 0 12px 32px color-mix(in srgb, var(--accent), transparent 40%), 0 0 0 10px color-mix(in srgb, var(--accent), transparent 92%)}
}

.cv-icon {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  color: #0a0c10;
}

.btn-minimal:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--accent), transparent 35%), 0 0 0 0 transparent;
  animation: none;
  color: #0a0c10;
}

.btn-minimal:hover .cv-icon {
  transform: translateY(3px);
}
.btn-minimal:hover #cvText {
  transform: translateY(3px);
  transition: transform .3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
#cvText {
  transition: transform .3s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.btn-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 45%, transparent 90%);
  transform: translateX(-120%);
  transition: transform .8s ease;
  pointer-events: none;
}
.btn-minimal:hover::before {
  transform: translateX(120%);
}

.btn-minimal:active {
  transform: scale(.96);
}