*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --canvas:#07080a;
  --surface:#0d0d0d;
  --surface-elevated:#101111;
  --surface-card:#121212;
  --hairline:#242728;
  --hairline-soft:rgba(255,255,255,0.08);
  --hairline-strong:rgba(255,255,255,0.16);
  --ink:#f4f4f6;
  --body:#cdcdcd;
  --mute:#9c9c9d;
  --ash:#6a6b6c;
  --stone:#434345;
  --on-dark:#ffffff;
  --primary:#ffffff;
  --primary-pressed:#e8e8e8;
  --on-primary:#000000;
  --accent-blue:#57c1ff;
  --accent-blue-soft:rgba(87,193,255,0.15);
  --accent-red:#ff6161;
  --accent-green:#59d499;
  --accent-yellow:#ffc533;
  --hero-stripe-start:#ff5757;
  --hero-stripe-end:#a1131a;
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:10px;
  --radius-xl:16px;
  --radius-full:9999px;
  --max-width:1180px;
  --section-gap:96px;
  --font-mono:'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --nav-height:56px;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-mono);
  background:var(--canvas);
  color:var(--body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"calt","kern","liga";
}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--canvas)}
::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:var(--radius-full)}
img{max-width:100%;display:block}
a{color:var(--on-dark);text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}
.section{padding:var(--section-gap) 0}
.section-title{
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--ash);
  margin-bottom:32px;
  display:flex;
  align-items:center;
  gap:12px;
}
.section-title::before{
  content:'//';
  color:var(--mute);
  font-weight:400;
}
/* ---- Navigation ---- */
nav{
  position:fixed;
  top:12px;
  left:50%;
  translate:-50% 0;
  z-index:100;
  height:var(--nav-height);
  width:calc(100% - 32px);
  max-width:var(--max-width);
  background:rgba(13,13,13,0.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  padding:0 20px;
  transform:translateY(-150%);
  opacity:0;
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s ease;
}
body.nav-loaded nav{
  transform:translateY(0);
  opacity:1;
}
body.nav-hidden nav{
  transform:translateY(-120%);
  opacity:0;
  pointer-events:none;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-width);
  width:100%;
  margin:0 auto;
}
.nav-logo{
  font-size:14px;
  font-weight:600;
  color:var(--on-dark);
  letter-spacing:-0.3px;
}
.nav-logo .aka{color:var(--mute);font-weight:400;font-size:12px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-size:12px;
  color:var(--mute);
  padding:6px 12px;
  border-radius:var(--radius-sm);
  transition:color .2s,background .2s;
}

.nav-links a:hover{color:var(--on-dark);background:var(--surface-elevated)}
.nav-links a.btn-primary{margin-left:auto}
.nav-actions{display:flex;align-items:center;gap:12px}
.btn{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  padding:8px 16px;
  border-radius:var(--radius-md);
  border:none;
  cursor:pointer;
  transition:background .2s,color .2s;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
}
.btn-primary{
  background:var(--primary);
  color:var(--on-primary);
}
.btn-primary:hover{background:var(--primary-pressed)}
.btn-secondary{
  background:transparent;
  color:var(--on-dark);
  border:1px solid var(--ash);
}


.btn-secondary:hover{background:var(--surface-elevated);border-color:var(--hairline-strong)}
.btn-surface{
  background:var(--surface-elevated);
  color:var(--on-dark);
}
.btn-surface:hover{background:var(--surface-card)}
.mobile-backdrop{display:none}
.btn-icon{
  width:36px;
  height:36px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  color:var(--body);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  cursor:pointer;
  font-size:16px;
  transition:background .2s,color .2s,border-color .2s;
  font-family:var(--font-mono);
}
.btn-icon:hover{background:var(--surface-elevated);color:var(--on-dark);border-color:var(--hairline-strong)}
.mobile-toggle{display:none}

/* ---- Hero ---- */
#hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--canvas);
  padding-top:calc(var(--nav-height) + 24px);
}
#hero::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:200px;
  background:linear-gradient(to bottom, transparent, var(--canvas));
  pointer-events:none;
  z-index:5;
}
#hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:2;
}
.hero-ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.ambient-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  mix-blend-mode:screen;
  will-change:transform;
}
.blob-1{
  width:600px;height:600px;
  top:10%;left:5%;
  background:radial-gradient(circle, rgba(161,19,26,0.35) 0%, transparent 70%);
  animation:blobDrift1 28s ease-in-out infinite;
}
.blob-2{
  width:450px;height:450px;
  bottom:5%;right:10%;
  background:radial-gradient(circle, rgba(140,60,120,0.28) 0%, transparent 70%);
  animation:blobDrift2 36s ease-in-out infinite;
}
.blob-3{
  width:380px;height:380px;
  top:40%;left:55%;
  background:radial-gradient(circle, rgba(50,90,140,0.22) 0%, transparent 70%);
  animation:blobDrift3 42s ease-in-out infinite;
}
@keyframes blobDrift1{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(40px,-30px) scale(1.06)}
  50%{transform:translate(-20px,50px) scale(0.94)}
  75%{transform:translate(30px,20px) scale(1.02)}
}
@keyframes blobDrift2{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-35px,-25px) scale(0.96)}
  66%{transform:translate(25px,40px) scale(1.08)}
}
@keyframes blobDrift3{
  0%,100%{transform:translate(0,0) scale(1)}
  20%{transform:translate(20px,-40px) scale(1.04)}
  40%{transform:translate(-30px,-10px) scale(0.98)}
  60%{transform:translate(15px,35px) scale(1.02)}
  80%{transform:translate(-25px,15px) scale(0.96)}
}
.hero-gradient{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,87,87,0.10) 0%, rgba(161,19,26,0.05) 30%, transparent 70%),
    radial-gradient(circle at 30% 70%, rgba(150,70,200,0.05) 0%, transparent 45%),
    radial-gradient(circle at 70% 20%, rgba(87,40,40,0.06) 0%, transparent 50%);
}
.hero-noise{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:3;
  mix-blend-mode:overlay;
  opacity:0.4;
}
.hero-content{
  position:relative;
  z-index:4;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--accent-blue);
  background:var(--accent-blue-soft);
  padding:3px 10px;
  border-radius:var(--radius-full);
  margin-bottom:24px;
  letter-spacing:0.3px;
}
.hero-prompt{
  font-size:13px;
  color:var(--mute);
  margin-bottom:8px;
}
.hero-prompt .prompt{color:var(--accent-green);font-weight:500}
.hero-prompt .cursor{display:inline-block;width:8px;height:16px;background:var(--accent-green);animation:blink 1s step-end infinite;margin-left:4px;vertical-align:middle}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-name{
  font-size:clamp(2.2rem,7vw,4.5rem);
  font-weight:600;
  color:var(--ink);
  line-height:1.05;
  letter-spacing:-1.5px;
  margin-bottom:4px;
}
.hero-aka{
  font-size:clamp(0.85rem,2vw,1.15rem);
  color:var(--mute);
  margin-bottom:20px;
}
.hero-aka .placeholder-text{color:var(--stone);font-style:italic}
.hero-sub-prompt{
  font-size:13px;
  color:var(--mute);
  margin-bottom:4px;
}
.hero-sub-prompt .prompt{color:var(--accent-green);font-weight:500}
.hero-tagline{
  font-size:clamp(1rem,2vw,1.25rem);
  color:var(--body);
  line-height:1.5;
  max-width:540px;
  margin-bottom:36px;
}
.hero-tagline .highlight{color:var(--on-dark);font-weight:500}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-keycap-hint{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--mute);
  margin-top:24px;
}
kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--body);
  background:linear-gradient(135deg,var(--surface-card),var(--surface));
  border:1px solid var(--hairline);
  border-radius:var(--radius-xs);
  padding:1px 6px;
  height:20px;
  min-width:20px;
}

/* ---- Spotlight cards ---- */
[data-spotlight]{
  position:relative;
  overflow:hidden;
}
[data-spotlight]::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(650px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.07),transparent 40%);
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
  z-index:1;
}
[data-spotlight]:hover::before{
  opacity:1;
}

/* ---- Cards ---- */
.card{
  background:rgba(13,13,13,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.card-elevated{
  background:rgba(18,18,18,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.card-sm{
  padding:24px;
}
.card-title{
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:12px;
}
.card p{color:var(--body);margin-bottom:12px;font-size:14px}
.card p:last-child{margin-bottom:0}

/* ---- About ---- */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.about-bio{font-size:14px;line-height:1.7;color:var(--body)}
.about-bio strong{color:var(--ink);font-weight:500}
.stats-list{display:flex;flex-direction:column;gap:8px}
.stat-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--hairline);
  font-size:13px;
}
.stat-row:last-child{border-bottom:none}
.stat-label{color:var(--ash);text-transform:uppercase;letter-spacing:0.4px;font-size:11px}
.stat-value{color:var(--body)}

/* ---- Work / Skills ---- */
.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
.skill-card{
  background:rgba(13,13,13,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.skill-card:hover{background:rgba(18,18,18,0.75);border-color:var(--hairline-strong);box-shadow:0 6px 28px rgba(0,0,0,0.4)}
.skill-icon{font-size:24px;margin-bottom:12px}
.skill-name{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px}
.skill-desc{font-size:12px;color:var(--mute);line-height:1.5}

/* ---- Projects ---- */
#projects{position:relative;overflow:hidden}
#chromaticCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#projects .container{position:relative;z-index:1}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:16px;
}
.project-card{
  background:rgba(13,13,13,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.project-card:hover{background:rgba(18,18,18,0.75);border-color:var(--hairline-strong);box-shadow:0 6px 28px rgba(0,0,0,0.4)}
.project-card .card-title{font-size:15px;margin-bottom:8px}
.project-card .card-title .project-status{
  display:inline-block;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:2px 6px;
  border-radius:var(--radius-xs);
  margin-left:8px;
  vertical-align:middle;
  font-weight:500;
}
.project-card .card-title .status-active{background:var(--accent-green-soft, rgba(89,212,153,0.15));color:var(--accent-green)}
.project-card .card-title .status-archived{background:var(--accent-blue-soft);color:var(--accent-blue)}
.project-card .card-title .status-idea{background:var(--accent-yellow-soft, rgba(255,197,51,0.15));color:var(--accent-yellow)}
.project-links{margin-top:16px;display:flex;gap:12px}
.project-links a{font-size:12px;color:var(--mute);transition:color .2s}
.project-links a:hover{color:var(--on-dark)}

/* ---- Likes ---- */
.likes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
}
.like-card{
  background:rgba(13,13,13,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.like-card:hover{background:rgba(18,18,18,0.75);border-color:var(--hairline-strong);box-shadow:0 6px 28px rgba(0,0,0,0.4)}
.like-category{font-size:10px;text-transform:uppercase;letter-spacing:0.6px;color:var(--ash);margin-bottom:8px}
.like-item{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:2px}
.like-note{font-size:12px;color:var(--mute);line-height:1.4}

/* ---- Now ---- */
.now-card{
  background:rgba(18,18,18,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:32px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.now-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.now-item-icon{font-size:20px;margin-bottom:8px}
.now-item-title{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:4px}
.now-item-desc{font-size:12px;color:var(--mute);line-height:1.5}
.now-updated{font-size:11px;color:var(--ash);margin-top:24px;text-align:right}

.now-item-link{
  color:var(--accent-blue);
  transition:color .2s;
}

.now-item-link:hover{
  color:var(--accent-green);
  font-weight: bold;
}

/* ---- Contact ---- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.contact-item{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background:rgba(13,13,13,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-md);
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.contact-item:hover{background:rgba(18,18,18,0.75);border-color:var(--hairline-strong);box-shadow:0 6px 28px rgba(0,0,0,0.4)}
.contact-icon{font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(13,13,13,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--hairline);border-radius:var(--radius-sm);flex-shrink:0}
.contact-label{font-size:11px;text-transform:uppercase;letter-spacing:0.4px;color:var(--ash)}
.contact-value{font-size:14px;font-weight:500;color:var(--on-dark)}

/* ---- Blog ---- */
.blog-placeholder{
  text-align:center;
  padding:48px 32px;
  background:rgba(13,13,13,0.65);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.blog-placeholder-icon{font-size:36px;margin-bottom:16px;opacity:0.4}
.blog-placeholder-text{color:var(--mute);font-size:13px;margin-bottom:4px}
.blog-placeholder-sub{color:var(--ash);font-size:11px}

/* ---- Footer ---- */
footer{
  border-top:1px solid var(--hairline);
  padding:48px 24px;
  background:var(--canvas);
}
.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.footer-copy{font-size:11px;color:var(--ash)}
.footer-links{display:flex;gap:16px}
.footer-links a{font-size:11px;color:var(--mute);transition:color .2s}
.footer-links a:hover{color:var(--body)}

/* ---- Command Palette ---- */
.cmd-palette-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:15vh;
}
.cmd-palette-overlay.open{display:flex}
.cmd-palette{
  width:100%;
  max-width:600px;
  background:var(--surface-elevated);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:slideDown .15s ease;
}
@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.cmd-input-wrap{
  display:flex;
  align-items:center;
  padding:12px 16px;
  border-bottom:1px solid var(--hairline);
  gap:10px;
}
.cmd-input-wrap .cmd-icon{color:var(--ash);font-size:14px;flex-shrink:0}
.cmd-input{
  background:transparent;
  border:none;
  outline:none;
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--on-dark);
  width:100%;
}
.cmd-input::placeholder{color:var(--ash)}
.cmd-results{padding:4px;max-height:300px;overflow-y:auto}
.cmd-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  color:var(--body);
  font-size:13px;
  transition:background .1s;
}
.cmd-item:hover,.cmd-item.active{background:var(--surface-card);color:var(--on-dark)}
.cmd-item-left{display:flex;align-items:center;gap:10px}
.cmd-item-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:var(--radius-xs);font-size:12px;flex-shrink:0}
.cmd-item-shortcut{display:flex;gap:4px}
.cmd-item-shortcut kbd{font-size:9px;height:18px;min-width:18px;padding:0 4px}

/* ---- Reveal Animations ---- */
.reveal{opacity:0;filter:blur(4px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1)}
.reveal.revealed{opacity:1;filter:blur(0)}
.reveal-up{transform:translateY(48px)}.reveal-up.revealed{transform:translateY(0)}
.reveal-down{transform:translateY(-48px)}.reveal-down.revealed{transform:translateY(0)}
.reveal-left{transform:translateX(-40px)}.reveal-left.revealed{transform:translateX(0)}
.reveal-right{transform:translateX(40px)}.reveal-right.revealed{transform:translateX(0)}
.reveal-scale{transform:scale(0.92)}.reveal-scale.revealed{transform:scale(1)}
.stagger-1{transition-delay:0s}.stagger-2{transition-delay:.08s}.stagger-3{transition-delay:.16s}
.stagger-4{transition-delay:.24s}.stagger-5{transition-delay:.32s}.stagger-6{transition-delay:.40s}
.stagger-7{transition-delay:.48s}.stagger-8{transition-delay:.56s}

/* ---- Parallax ---- */
.parallax-layer{will-change:transform}

/* ---- Utility ---- */
.text-muted{color:var(--mute)}
.text-ash{color:var(--ash)}
.text-sm{font-size:12px}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.gap-8{gap:8px}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}

/* ---- Responsive ---- */
@media(max-width:900px){
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .now-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  :root{--section-gap:64px}
  .nav-actions .btn-secondary{display:none}
  .mobile-toggle{display:flex}
  .projects-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:1fr}
  .likes-grid{grid-template-columns:1fr 1fr}
  .now-grid{grid-template-columns:1fr}

  .mobile-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:99;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .mobile-nav-open .mobile-backdrop{
    opacity:1;
    pointer-events:auto;
  }
  .nav-links{
    position:fixed;
    top:calc(var(--nav-height) + 24px);
    left:16px;
    right:16px;
    z-index:100;
    background:rgba(13,13,13,0.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    flex-direction:column;
    padding:0 16px;
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    box-shadow:0 8px 32px rgba(0,0,0,0.45);
    gap:2px;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform:translateY(-12px) scale(0.97);
    pointer-events:none;
    transition:max-height .45s cubic-bezier(.22,1,.36,1),opacity .35s ease,transform .4s cubic-bezier(.22,1,.36,1);
  }
  .mobile-nav-open .nav-links{
    max-height:400px;
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    padding:16px;
  }
  .nav-links a{
    font-size:14px;
    padding:12px 16px;
    width:100%;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .3s ease,transform .3s ease,color .2s,background .2s;
    transition-delay:0s;
  }
  .mobile-nav-open .nav-links a{
    opacity:1;
    transform:translateY(0);
  }
  .mobile-nav-open .nav-links a:nth-child(1){transition-delay:.10s}
  .mobile-nav-open .nav-links a:nth-child(2){transition-delay:.16s}
  .mobile-nav-open .nav-links a:nth-child(3){transition-delay:.22s}
  .mobile-nav-open .nav-links a:nth-child(4){transition-delay:.28s}
  .mobile-nav-open .nav-links a:nth-child(5){transition-delay:.34s}
  .mobile-nav-open .nav-links a:nth-child(6){transition-delay:.40s}
  .mobile-nav-open .nav-links a:nth-child(7){transition-delay:.46s}
}
@media(max-width:480px){
  :root{--section-gap:48px}
  .container{padding:0 16px}
  .hero-name{letter-spacing:-0.5px}
  .likes-grid{grid-template-columns:1fr}
  .card,.card-elevated,.now-card{padding:20px}
  .hero-actions .btn-secondary{display:none}
}