/* ============================================
   RED — Ultimate Tech Showcase v6
   ============================================ */

:root {
  --bg:       #050507;
  --bg2:      #0c0c10;
  --bg3:      #121218;
  --surface:   #0e0e14;
  --border:    #1a1a24;
  --text:      #ededf5;
  --text2:     #6a6a7a;
  --red:       #ff2040;
  --red-glow:  rgba(255,32,64,.35);
  --red-soft:  rgba(255,32,64,.08);
  --font:      'Inter', system-ui, -apple-system, sans-serif;
  --mono:      'JetBrains Mono', 'Fira Code', monospace;
}

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

html  { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  cursor:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
img { max-width:100%; display:block; }

/* ============================================
   NOISE OVERLAY — stronger
   ============================================ */
#noise-overlay {
  position:fixed; inset:0; z-index:9998;
  pointer-events:none; opacity:0.05;
  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)' opacity='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
  mix-blend-mode:overlay;
}

/* ============================================
   PRELOADER — red glow pulse
   ============================================ */
#preloader {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              visibility 0.8s;
}
#preloader.hide { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner { text-align:center; position:relative; }
.preloader-name {
  font-size:clamp(3.5rem,8vw,7rem); font-weight:900;
  letter-spacing:0.2em; position:relative;
}
.preloader-letter {
  display:inline-block; color:var(--text2);
  transition: color 0.5s, text-shadow 0.5s, transform 0.5s;
  animation: letterPulse 1.5s ease-in-out infinite alternate;
}
.preloader-letter:nth-child(2) { animation-delay:0.15s; }
.preloader-letter:nth-child(3) { animation-delay:0.3s; }
@keyframes letterPulse {
  0%   { transform:translateY(0); }
  100% { transform:translateY(-6px); }
}
.preloader-glow {
  position:absolute; top:50%; left:50%;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--red-glow) 0%, transparent 70%);
  transform:translate(-50%,-50%); opacity:0.3;
  pointer-events:none;
}
.preloader-bar {
  width:240px; height:4px; background:var(--bg3);
  border-radius:4px; margin:2.5rem auto 1rem; overflow:hidden;
  box-shadow:0 0 20px rgba(255,32,64,0.15);
}
.preloader-fill {
  width:0%; height:100%;
  background:linear-gradient(90deg, #ff2040, #ff6060, #ff2040);
  background-size:200% 100%;
  animation:shimmerBar 1.5s linear infinite;
  border-radius:4px; transition:width 0.2s;
}
@keyframes shimmerBar { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.preloader-pct {
  font-family:var(--mono); font-size:0.85rem;
  color:var(--text2); letter-spacing:0.1em;
}

/* ============================================
   CUSTOM CURSOR — more extreme
   ============================================ */
#cursor {
  position:fixed; top:0; left:0; z-index:9997;
  width:10px; height:10px; background:var(--red);
  border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  transition: width 0.3s cubic-bezier(0.22,1,0.36,1),
              height 0.3s cubic-bezier(0.22,1,0.36,1),
              background 0.3s, transform 0.1s;
  mix-blend-mode:difference;
  box-shadow:0 0 20px var(--red-glow), 0 0 40px rgba(255,32,64,0.15);
}
#cursor.cursor-hover {
  width:56px; height:56px;
  background:rgba(255,32,64,0.25);
  border:2px solid var(--red);
  box-shadow:0 0 30px var(--red-glow);
}
#cursor-follower {
  position:fixed; top:0; left:0; z-index:9996;
  width:36px; height:36px;
  border:1.5px solid rgba(255,32,64,0.6);
  border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
  transition: width 0.4s cubic-bezier(0.22,1,0.36,1),
              height 0.4s cubic-bezier(0.22,1,0.36,1),
              border-color 0.3s, opacity 0.3s,
              background 0.3s;
  opacity:0.7;
  background:radial-gradient(circle, rgba(255,32,64,0.06) 0%, transparent 70%);
}
#cursor-follower.cursor-hover {
  width:64px; height:64px;
  border-color:var(--red);
  opacity:1;
  background:radial-gradient(circle, rgba(255,32,64,0.1) 0%, transparent 70%);
}

/* ============================================
   SCROLL PROGRESS — animated gradient
   ============================================ */
#scroll-progress {
  position:fixed; top:0; left:0; z-index:9990;
  width:100%; height:3px; background:transparent;
}
#scroll-progress-fill {
  width:0%; height:100%;
  background:linear-gradient(90deg, #ff2040, #ff6b6b, #ff2040, #ff6b6b);
  background-size:300% 100%;
  animation:shimmer 2s linear infinite;
  box-shadow:0 0 12px var(--red-glow);
}
@keyframes shimmer { 0%{background-position:300% 0} 100%{background-position:-300% 0} }

/* ============================================
   NAV — glassmorphism + slide in
   ============================================ */
#main-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 3rem;
  background:rgba(5,5,7,0.6);
  backdrop-filter:blur(24px) saturate(2);
  -webkit-backdrop-filter:blur(24px) saturate(2);
  border-bottom:1px solid transparent;
  transition: border-color 0.4s, background 0.4s, transform 0.6s cubic-bezier(0.22,1,0.36,1);
  transform:translateY(-100%);
}
#main-nav.visible { transform:translateY(0); }
#main-nav.scrolled { border-bottom-color:var(--border); background:rgba(5,5,7,0.85); }

.nav-logo {
  font-size:1.4rem; font-weight:900; letter-spacing:0.1em;
  transition: color 0.3s, text-shadow 0.3s;
}
.nav-logo span { color:var(--red); }
.nav-logo:hover { color:var(--red); text-shadow:0 0 30px var(--red-glow); }

.nav-links { display:flex; gap:2.8rem; }
.nav-links a {
  font-size:0.82rem; font-weight:500; letter-spacing:0.05em;
  color:var(--text2); position:relative; padding:0.4rem 0;
  transition: color 0.3s, text-shadow 0.3s;
  text-transform:uppercase;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:50%;
  width:0; height:2px; background:var(--red);
  border-radius:1px;
  transition:width 0.4s cubic-bezier(0.22,1,0.36,1), left 0.4s cubic-bezier(0.22,1,0.36,1);
  box-shadow:0 0 8px var(--red-glow);
}
.nav-links a:hover { color:#fff; text-shadow:0 0 20px rgba(255,255,255,0.3); }
.nav-links a:hover::after { width:100%; left:0; }

/* Language Switcher */
.lang-btn {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--text); padding:0.35rem 0.9rem;
  border-radius:10px; font-size:0.75rem; font-weight:700;
  letter-spacing:0.06em; transition:all 0.3s;
  text-transform:uppercase;
}
.lang-btn:hover { border-color:var(--red); color:var(--red); box-shadow:0 0 20px rgba(255,32,64,0.15); }

/* Mobile menu btn */
#mobile-menu-btn {
  display:none; background:none; border:none;
  flex-direction:column; gap:5px; padding:6px;
}
#mobile-menu-btn span {
  width:24px; height:2px; background:var(--text);
  border-radius:2px; transition:all 0.3s;
}
#mobile-menu-btn.active span:nth-child(1) { transform:rotate(45deg) translate(4px,4px); }
#mobile-menu-btn.active span:nth-child(2) { opacity:0; }
#mobile-menu-btn.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
#mobile-menu {
  display:none; position:fixed; inset:0; z-index:999;
  background:rgba(5,5,7,0.98);
  backdrop-filter:blur(30px);
  flex-direction:column; align-items:center; justify-content:center;
  gap:2.5rem;
}
#mobile-menu.open { display:flex; animation:fadeIn 0.3s ease; }
#mobile-menu a { font-size:1.6rem; font-weight:700; color:var(--text2); letter-spacing:0.05em; }
#mobile-menu a:hover { color:var(--red); }
#mobile-menu .lang-btn { font-size:1rem; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ============================================
   HERO — extreme visual impact
   ============================================ */
#hero {
  position:relative; min-height:100vh; display:flex;
  align-items:center; justify-content:flex-start;
  overflow:hidden; padding:0 8rem;
}
#hero-canvas { position:absolute; inset:0; z-index:0; }
.hero-glow {
  position:absolute; width:700px; height:700px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,32,64,0.12) 0%, transparent 70%);
  top:50%; right:5%; transform:translate(0,-50%);
  z-index:1; pointer-events:none;
  filter:blur(80px);
  animation:glowPulse 4s ease-in-out infinite alternate;
}
@keyframes glowPulse {
  0%   { opacity:0.5; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:1;   transform:translate(-50%,-50%) scale(1.15); }
}
.hero-content { position:relative; z-index:2; text-align:left; max-width:680px; }
.hero-eyebrow {
  font-family:var(--mono); font-size:0.78rem; font-weight:700;
  letter-spacing:0.25em; color:var(--red); margin-bottom:2rem;
  text-transform:uppercase;
  opacity:0; transform:translateY(30px);
  text-shadow:0 0 20px var(--red-glow);
}
.hero-title {
  font-size:clamp(3.5rem,9vw,8rem); font-weight:900;
  line-height:0.95; letter-spacing:-0.04em; margin-bottom:2rem;
  text-shadow:0 0 80px rgba(255,32,64,0.15);
}
.hero-line {
  display:block;
  opacity:0; transform:rotateX(50deg) translateY(80px);
  transform-origin:top center;
  background:linear-gradient(180deg, #fff 30%, var(--text2) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-accent {
  background:linear-gradient(135deg, var(--red) 0%, #ff6b6b 50%, var(--red) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradientShift 4s ease infinite;
  text-shadow:none;
  filter:drop-shadow(0 0 40px var(--red-glow));
}
@keyframes gradientShift { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.hero-sub {
  font-size:clamp(1rem,2vw,1.4rem); color:var(--text2);
  max-width:560px; margin:0 0 3rem 0; line-height:1.8;
  opacity:0; transform:translateY(30px);
}
.hero-cta {
  display:inline-block; padding:1.1rem 3.2rem;
  background:linear-gradient(135deg, var(--red) 0%, #ff4d4d 100%);
  color:#fff; font-weight:800; font-size:1.05rem;
  border-radius:70px; position:relative; overflow:hidden;
  letter-spacing:0.04em; text-transform:uppercase;
  box-shadow:0 8px 32px var(--red-glow), 0 0 60px rgba(255,32,64,0.1);
  opacity:0; transform:translateY(30px);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s;
}
.hero-cta::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.25), transparent);
  transform:translateX(-100%); transition:transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.hero-cta:hover::before { transform:translateX(100%); }
.hero-cta:hover {
  transform:translateY(-5px) scale(1.03);
  box-shadow:0 16px 48px var(--red-glow), 0 0 80px rgba(255,32,64,0.2);
}

/* Marquee — faster, bolder */
.hero-marquee {
  position:absolute; bottom:2.5rem; left:0; right:0; z-index:2;
  overflow:hidden; opacity:0;
}
.marquee-track {
  display:flex; gap:4rem; animation:marquee 18s linear infinite;
  white-space:nowrap; font-size:0.75rem; font-weight:700;
  letter-spacing:0.15em; color:var(--text2); text-transform:uppercase;
}
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ============================================
   STATS — bold numbers
   ============================================ */
#stats {
  padding:7rem 3rem; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg) 0%, #0a0508 50%, var(--bg2) 100%);
  position:relative; overflow:hidden;
}
#stats::before {
  content:''; position:absolute; top:50%; left:50%;
  width:900px; height:300px;
  background:radial-gradient(ellipse, rgba(255,32,64,0.08) 0%, transparent 70%);
  transform:translate(-50%,-50%); pointer-events:none;
  animation:statsGlowPulse 4s ease-in-out infinite alternate;
}
@keyframes statsGlowPulse {
  0% { opacity:0.5; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1.15); }
}
/* Scan line effect */
#stats::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%);
  opacity:0.15; animation:scanLine 3s linear infinite;
}
@keyframes scanLine {
  0% { top:0; opacity:0; }
  10% { opacity:0.2; }
  90% { opacity:0.2; }
  100% { top:100%; opacity:0; }
}
/* Particle canvas for stats */
#stats-particles {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0.6;
}
.stats-inner {
  display:flex; justify-content:center; gap:8rem; flex-wrap:wrap;
  position:relative; z-index:1;
}
.stat { text-align:center; position:relative; }
/* Decorative bracket around numbers */
.stat::before {
  content:'['; position:absolute; top:-8px; left:-20px;
  font-size:2rem; color:var(--red); opacity:0.2;
  font-family:var(--mono); font-weight:200;
}
.stat::after {
  content:']'; position:absolute; bottom:-12px; right:-18px;
  font-size:2rem; color:var(--red); opacity:0.2;
  font-family:var(--mono); font-weight:200;
}
.stat-number {
  display:inline-block; font-size:clamp(3.5rem,7vw,6.5rem); font-weight:900;
  color:var(--red); font-family:var(--mono);
  line-height:1; letter-spacing:-0.03em;
  text-shadow:
    0 0 40px rgba(255,32,64,0.5),
    0 0 80px rgba(255,32,64,0.2),
    0 0 120px rgba(255,32,64,0.1);
  position:relative;
  animation:numberPulse 2.5s ease-in-out infinite alternate;
}
@keyframes numberPulse {
  0% { text-shadow: 0 0 40px rgba(255,32,64,0.4), 0 0 80px rgba(255,32,64,0.15), 0 0 120px rgba(255,32,64,0.05); }
  100% { text-shadow: 0 0 50px rgba(255,32,64,0.7), 0 0 100px rgba(255,32,64,0.35), 0 0 160px rgba(255,32,64,0.15); }
}
/* Infinity symbol — special treatment */
.stat-infinity {
  font-size:clamp(4rem,8vw,7rem) !important;
  font-style:italic;
  animation:infinityGlow 3s ease-in-out infinite alternate;
}
@keyframes infinityGlow {
  0% {
    text-shadow:
      0 0 40px rgba(255,32,64,0.5),
      0 0 80px rgba(255,32,64,0.25),
      0 0 120px rgba(255,32,64,0.1);
    transform: scale(1);
  }
  100% {
    text-shadow:
      0 0 60px rgba(255,32,64,0.8),
      0 0 120px rgba(255,32,64,0.45),
      0 0 200px rgba(255,32,64,0.2),
      0 0 300px rgba(255,32,64,0.08);
    transform: scale(1.05);
  }
}
/* Subtle grid behind each number */
.stat-number-bg {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-55%);
  font-size:clamp(4rem,8vw,7.5rem); font-weight:900;
  color:transparent; -webkit-text-stroke:1px rgba(255,32,64,0.06);
  font-family:var(--mono); pointer-events:none;
  z-index:-1; line-height:1;
  letter-spacing:-0.03em;
}
.stat-label {
  display:block; font-size:0.85rem; color:var(--text2);
  margin-top:0.6rem; letter-spacing:0.12em; text-transform:uppercase;
  position:relative;
}
/* Underline decoration under label */
.stat-label::after {
  content:''; display:block; width:30px; height:1px;
  background:linear-gradient(90deg, var(--red), transparent);
  margin:0.5rem auto 0; opacity:0.4;
}

/* ============================================
   SECTION HEADER
   ============================================ */
.section-header { text-align:center; margin-bottom:4.5rem; }
.section-header h2 {
  font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:900;
  letter-spacing:-0.03em; margin-bottom:1rem;
  background:linear-gradient(180deg, #fff 40%, var(--text2) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-header p { color:var(--text2); font-size:1.05rem; }

/* ============================================
   WORKS GRID — extreme 3D hover
   ============================================ */
#works { padding:8rem 3rem; position:relative; overflow:hidden;
  /* Base gradient */
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(255,32,64,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 80% 70%, rgba(255,40,60,0.03) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #0a0508 50%, var(--bg2) 100%);
}
/* ===== WORKS BACKGROUND EFFECTS ===== */
/* Animated grid pattern */
#works::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,32,64,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,32,64,0.025) 1px, transparent 1px);
  background-size:80px 80px;
  pointer-events:none; opacity:0.5;
  animation:worksGridShift 25s linear infinite;
  z-index:0;
}
@keyframes worksGridShift {
  0% { background-position:0 0; }
  100% { background-position:80px 80px; }
}
/* Ambient glow orbs */
#works::after {
  content:''; position:absolute; top:-200px; right:-100px;
  width:600px; height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,32,64,0.06) 0%, transparent 70%);
  pointer-events:none; filter:blur(60px);
  animation:worksOrbFloat 8s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes worksOrbFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, 80px) scale(1.3); }
}

/* Works particle canvas */
#works-particles {
  position:absolute; inset:0; z-index:0; pointer-events:none;
}

/* Scan line sweep on scroll entry */
#works-scan {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), rgba(255,32,64,0.4), var(--red), transparent);
  opacity:0; pointer-events:none; z-index:2;
  filter:blur(1px);
  box-shadow:0 0 30px var(--red-glow), 0 0 60px rgba(255,32,64,0.12);
}
#works-scan.active {
  animation:worksScanSweep 2.5s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes worksScanSweep {
  0%   { top:0; opacity:0; }
  8%   { opacity:0.7; }
  92%  { opacity:0.7; }
  100% { top:100%; opacity:0; }
}

/* Mouse-following spotlight */
#works-spotlight {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,32,64,0.06) 0%, transparent 60%);
  pointer-events:none; z-index:1;
  transition:left 0.4s ease-out, top 0.4s ease-out, opacity 0.3s;
  filter:blur(50px); opacity:0;
  will-change:left, top;
}
#works-spotlight.active { opacity:1; }

/* Floating corner accents */
.works-corner-glow {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,32,64,0.05) 0%, transparent 70%);
  pointer-events:none; z-index:0; filter:blur(40px);
}
.works-corner-glow.top-left    { top:-100px; left:-100px; }
.works-corner-glow.bottom-right { bottom:-150px; right:-100px; animation:worksCornerPulse 6s ease-in-out infinite alternate; }
@keyframes worksCornerPulse {
  0%   { opacity:0.3; transform: scale(1); }
  100% { opacity:0.7; transform: scale(1.3); }
}
.works-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(380px,1fr));
  gap:2.5rem; max-width:1400px; margin:0 auto;
  position:relative;
  transform-style:preserve-3d;
  perspective:1200px;
}
/* Ongoing grid: same 3-col for consistency */
.ongoing-grid {
  grid-template-columns:repeat(auto-fill, minmax(380px,1fr));
}

/* ===== CARD BASE — ready for epic animations ===== */
.work-card {
  position:relative; border-radius:28px; overflow:hidden;
  background:linear-gradient(148deg, var(--bg2) 0%, var(--bg3) 100%);
  border:1px solid var(--border);
  transition:
    transform 0.45s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
    border-color 0.4s;
  will-change:transform, box-shadow;
  display:flex; flex-direction:column;
  transform-style:preserve-3d;
  perspective:1200px;
  /* Start invisible — JS reveals with epic entrance */
  opacity:0;
  transform: translateY(80px) scale(0.9) rotateX(8deg);
}
/* ===== HOVER STATE — explosive 3D pop ===== */
.work-card:hover {
  border-color:rgba(255,32,64,0.6);
  box-shadow:
    0 40px 120px rgba(0,0,0,0.75),
    0 0 100px rgba(255,32,64,0.2),
    0 0 200px rgba(255,32,64,0.08),
    inset 0 0 80px rgba(255,32,64,0.06);
  transform:perspective(1000px) translateZ(100px) scale3d(1.06,1.06,1.06) rotateX(-4deg) rotateY(2deg);
}
/* Hover glow pulse */
.work-card::after {
  content:''; position:absolute; inset:-1px; border-radius:28px;
  background:radial-gradient(circle at 50% 0%, rgba(255,32,64,0.15), transparent 60%);
  opacity:0; transition:opacity 0.5s; pointer-events:none; z-index:10;
}
.work-card:hover::after { opacity:1; }

/* ============================================
   ONGOING PROJECTS — distinct visual identity
   ============================================ */
.work-card.ongoing {
  background:linear-gradient(148deg, rgba(40,10,15,0.9) 0%, rgba(20,8,12,0.95) 100%);
  border-color:rgba(255,80,50,0.2);
}
/* Red glow left bar */
.work-card.ongoing::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:100%;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--red) 20%,
    #ff6b35 50%,
    var(--red) 80%,
    transparent 100%
  );
  z-index:4; opacity:1; animation:ongoingBarGlow 2s ease-in-out infinite alternate;
  filter:blur(0); border-radius:0;
}
@keyframes ongoingBarGlow {
  0% { box-shadow: 0 0 8px rgba(255,60,30,0.4), 0 0 20px rgba(255,60,30,0.2); }
  100% { box-shadow: 0 0 16px rgba(255,60,30,0.7), 0 0 40px rgba(255,60,30,0.3); }
}
.work-card.ongoing:hover {
  border-color:rgba(255,80,50,0.5);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.6),
    0 0 60px rgba(255,60,30,0.18),
    0 0 120px rgba(255,60,30,0.08),
    inset 0 0 40px rgba(255,60,30,0.04);
}
/* Ongoing card number is red */
.work-card.ongoing .card-number {
  color:#ff6b35;
  text-shadow:0 0 12px rgba(255,80,50,0.5);
}
/* Ongoing card title has red accent */
.work-card.ongoing .card-title {
  background:linear-gradient(90deg, #ff6b35 0%, #fff 60%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Animated gradient border on hover */
.work-card::before {
  content:''; position:absolute; inset:-2px; border-radius:26px;
  background:conic-gradient(from var(--angle,0deg), transparent 0%, var(--red) 15%, #ff6b6b 30%, transparent 50%, transparent 70%, var(--red) 85%, transparent 100%);
  z-index:-1; opacity:0; transition:opacity 0.5s;
  animation:rotateBorder 3s linear infinite;
  filter:blur(1px);
}
.work-card:hover::before { opacity:1; }
@keyframes rotateBorder { to { --angle:360deg; } }
@property --angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* Card number — bounce on hover */
.card-number {
  position:absolute; top:1.4rem; right:1.6rem; z-index:5;
  font-family:var(--mono); font-size:0.85rem; font-weight:800;
  color:var(--text2); letter-spacing:0.12em;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.work-card:hover .card-number {
  color:var(--red);
  text-shadow:0 0 20px var(--red-glow), 0 0 40px rgba(255,32,64,0.2);
  transform: translateY(-3px) scale(1.15);
}

/* Card preview — image zoom + brightness burst on hover */
.card-preview {
  position:relative; width:100%; height:280px; flex-shrink:0;
  overflow:hidden; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.card-preview-inner {
  position:absolute; inset:0;
  transition:transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.work-card:hover .card-preview-inner {
  transform:scale(1.18) translateY(-4px);
}
/* Image inside preview */
.card-preview-img {
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
              filter 0.5s ease;
  filter: brightness(0.65) saturate(1.15) contrast(1.05);
  position:absolute; inset:0; z-index:0;
}
.work-card:hover .card-preview-img {
  transform: scale(1.12);
  filter: brightness(0.9) saturate(1.35) contrast(1.1);
}

/* Unified mockup — glass+icon style */
.mockup-icon {
  position:absolute; top:50%; left:50%; z-index:2;
  font-size:4rem;
  transform:translate(-50%,-50%) scale(1);
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.4s;
  filter:grayscale(0.4) brightness(0.7);
}
.work-card:hover .mockup-icon {
  transform:translate(-50%,-50%) scale(1.3) translateY(-8px);
  filter:grayscale(0) brightness(1.3);
}
.mockup-glow {
  position:absolute; inset:0; z-index:1;
  opacity:0; transition:opacity 0.6s;
}
.work-card:hover .mockup-glow { opacity:1; }

/* Unique gradient per project */
.mockup-abyss   { background:linear-gradient(135deg, #1a0a2e 0%, #0a0a0a 100%); }
.mockup-abyss .mockup-glow { background:radial-gradient(circle at center, rgba(120,60,255,0.3) 0%, transparent 70%); }
.mockup-solar   { background:linear-gradient(135deg, #2e1a00 0%, #0a0a0a 100%); }
.mockup-solar .mockup-glow { background:radial-gradient(circle at center, rgba(255,160,40,0.3) 0%, transparent 70%); }
.mockup-deenergy { background:linear-gradient(135deg, #0a1a0a 0%, #0a0a0a 100%); }
.mockup-deenergy .mockup-glow { background:radial-gradient(circle at center, rgba(60,255,120,0.3) 0%, transparent 70%); }
.mockup-drone { background:linear-gradient(135deg, #0a0a1a 0%, #0a0a0a 100%); }
.mockup-drone .mockup-glow { background:radial-gradient(circle at center, rgba(60,120,255,0.3) 0%, transparent 70%); }
.mockup-compare { background:linear-gradient(135deg, #1a0a0a 0%, #0a0a0a 100%); }
.mockup-compare .mockup-glow { background:radial-gradient(circle at center, rgba(255,60,60,0.25) 0%, transparent 70%); }
.mockup-worldcup { background:linear-gradient(135deg, #0a1a0a 0%, #0a0a0a 100%); }
.mockup-worldcup .mockup-glow { background:radial-gradient(circle at center, rgba(60,200,80,0.3) 0%, transparent 70%); }
.mockup-toolstack { background:linear-gradient(135deg, #1a0a1e 0%, #0a0a0a 100%); }
.mockup-toolstack .mockup-glow { background:radial-gradient(circle at center, rgba(160,60,255,0.3) 0%, transparent 70%); }
.mockup-pet { background:linear-gradient(135deg, #1a0a10 0%, #0a0a0a 100%); }
.mockup-pet .mockup-glow { background:radial-gradient(circle at center, rgba(255,100,160,0.25) 0%, transparent 70%); }
.mockup-gameping { background:linear-gradient(135deg, #0a0a1a 0%, #0a0a0a 100%); }
.mockup-gameping .mockup-glow { background:radial-gradient(circle at center, rgba(60,160,255,0.3) 0%, transparent 70%); }
.mockup-currency { background:linear-gradient(135deg, #1a1a0a 0%, #0a0a0a 100%); }
.mockup-currency .mockup-glow { background:radial-gradient(circle at center, rgba(200,200,80,0.25) 0%, transparent 70%); }
.mockup-wig { background:linear-gradient(135deg, #1a100a 0%, #0a0a0a 100%); }
.mockup-wig .mockup-glow { background:radial-gradient(circle at center, rgba(180,120,60,0.3) 0%, transparent 70%); }
.mockup-petins { background:linear-gradient(135deg, #0a1a18 0%, #0a0a0a 100%); }
.mockup-petins .mockup-glow { background:radial-gradient(circle at center, rgba(60,200,180,0.3) 0%, transparent 70%); }
.mockup-weice { background:linear-gradient(135deg, #0a0a1a 0%, #0a0a0a 100%); }
.mockup-weice .mockup-glow { background:radial-gradient(circle at center, rgba(60,80,255,0.3) 0%, transparent 70%); }

/* Spotlight — mouse follow */
.card-spotlight {
  position:absolute; inset:0; z-index:3;
  background:radial-gradient(350px circle at var(--mx,50%) var(--my,50%), rgba(255,32,64,0.1), transparent 70%);
  opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.work-card:hover .card-spotlight { opacity:1; }

/* Card body — lift up on hover */
.card-body {
  padding:2rem 2.2rem 2.4rem; position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              background 0.4s;
}
.work-card:hover .card-body {
  transform: translateY(-12px);
  background: linear-gradient(180deg, rgba(255,32,64,0.03) 0%, transparent 100%);
}
.card-tag-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:0.9rem;
}
.card-tag {
  font-family:var(--mono); font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; color:var(--red);
  background:rgba(255,32,64,0.1); padding:0.28rem 0.85rem;
  border-radius:7px; border:1px solid rgba(255,32,64,0.15);
  text-transform:uppercase;
}
.card-arrow {
  color:var(--text2); font-size:1.4rem;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  display:inline-block;
}
.work-card:hover .card-arrow {
  color:var(--red);
  transform: translateX(8px) scale(1.3) rotate(-12deg);
  filter: drop-shadow(0 0 8px var(--red-glow));
}

/* Ongoing badge */
.card-ongoing {
  font-family:var(--mono); font-size:0.68rem; font-weight:800;
  letter-spacing:0.15em; color:#ffaa00;
  background:rgba(255,170,0,0.1); padding:0.22rem 0.7rem;
  border-radius:7px; border:1px solid rgba(255,170,0,0.2);
  text-transform:uppercase;
  animation:ongoingPulse 2s ease-in-out infinite alternate;
}
@keyframes ongingPulse {
  0%   { box-shadow:0 0 4px rgba(255,170,0,0.1); }
  100% { box-shadow:0 0 12px rgba(255,170,0,0.3); }
}
.card-title {
  font-size:1.55rem; font-weight:800; letter-spacing:-0.01em;
  margin-bottom:0.8rem; transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  color:#fff; line-height:1.25;
}
.work-card:hover .card-title {
  color:#fff;
  text-shadow: 0 2px 20px rgba(255,32,64,0.3);
  transform: translateX(4px);
}
.card-desc {
  font-size:0.95rem; color:var(--text2); line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; margin-bottom:1.4rem;
}
.card-techs { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:auto; }
/* Tech pills — cascade in on hover with stagger */
.card-tech-pill {
  font-family:var(--mono); font-size:0.68rem; font-weight:600;
  letter-spacing:0.05em; color:var(--text2);
  background:var(--bg3); padding:0.3rem 0.7rem;
  border-radius:6px; border:1px solid var(--border);
  opacity:0; transform:translateY(12px) scale(0.9);
  transition:
    opacity 0.35s cubic-bezier(0.22,1,0.36,1),
    transform 0.35s cubic-bezier(0.22,1,0.36,1),
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  text-transform:uppercase;
}
.work-card:hover .card-tech-pill {
  opacity:1; transform:translateY(0) scale(1);
  border-color:rgba(255,32,64,0.25);
  color:var(--text);
  box-shadow: 0 2px 12px rgba(255,32,64,0.08), inset 0 0 8px rgba(255,32,64,0.04);
}
/* Stagger each pill */
.card-tech-pill:nth-child(1) { transition-delay: 0.02s; }
.card-tech-pill:nth-child(2) { transition-delay: 0.05s; }
.card-tech-pill:nth-child(3) { transition-delay: 0.08s; }
.card-tech-pill:nth-child(4) { transition-delay: 0.11s; }
.card-tech-pill:nth-child(5) { transition-delay: 0.14s; }
.card-tech-pill:nth-child(6) { transition-delay: 0.17s; }
/* Pill hover glow */
.card-tech-pill:hover {
  background:rgba(255,32,64,0.12);
  border-color:rgba(255,32,64,0.45);
  color:#fff;
  box-shadow: 0 0 16px rgba(255,32,64,0.2);
  transform: translateY(-2px) scale(1.05);
}

/* ============================================
   CARD VISIT BADGE + CLICKABLE
   ============================================ */
.work-card.clickable { cursor:pointer; }
.work-card.clickable .card-preview { cursor:pointer; }

.card-visit-badge {
  position:absolute;
  bottom:16px; right:16px;
  z-index:5;
  font-family:var(--mono);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  color:#fff;
  background:rgba(255,32,64,0.85);
  border:1px solid rgba(255,32,64,0.5);
  padding:0.4rem 0.9rem;
  border-radius:10px;
  display:flex; align-items:center; gap:0.4rem;
  opacity:0;
  transform:translateY(8px);
  transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s;
  pointer-events:none;
  text-transform:uppercase;
  box-shadow: 0 4px 20px rgba(255,32,64,0.35);
}
.work-card:hover .card-visit-badge {
  opacity:1;
  transform:translateY(0);
}
.card-visit-badge svg { flex-shrink:0; }

/* ============================================
   PROJECT LENS — unified detail popup (all cards)
   ============================================ */
#project-lens {
  position:fixed;
  z-index:10000;
  pointer-events:none;
  opacity:0;
  transform:scale(0.94) translateY(16px);
  transition: opacity 0.45s cubic-bezier(0.22,1,0.36,1),
             transform 0.45s cubic-bezier(0.22,1,0.36,1);
  max-width:820px; width:88vw;
}
#project-lens.lens-visible {
  opacity:1;
  pointer-events:auto;
  transform:scale(1) translateY(0);
}

/* Outer glow aura — SUBTLE pulse (opacity swing ≤15%, no visible flicker) */
.lens-glow {
  position:absolute; inset:-60px;
  background:radial-gradient(ellipse at center, rgba(255,32,64,0.1) 0%, transparent 70%);
  filter:blur(60px);
  pointer-events:none;
  animation:lensGlowPulse 6s ease-in-out infinite alternate;
}
@keyframes lensGlowPulse {
  0% { opacity:0.85; transform:scale(1); }
  100% { opacity:1; transform:scale(1.04); }
}

/* Rotating conic gradient border — SLOWED down to reduce repaint flicker */
.lens-border {
  position:absolute; inset:-2px;
  border-radius:24px;
  background: conic-gradient(
    from var(--lens-angle, 0deg),
    transparent 0%,
    rgba(255,32,64,0.6) 6%,
    #ff6b6b 13%,
    rgba(255,120,80,0.4) 20%,
    transparent 32%,
    transparent 68%,
    rgba(255,32,64,0.6) 82%,
    #ff6b6b 92%,
    transparent 100%
  );
  animation: lensBorderRotate 4s linear infinite;  /* restored to 4s — lensHLIn was the real flicker source, not this */
  filter:blur(1.2px);
  z-index:-1;
}
@keyframes lensBorderRotate { to { --lens-angle: 360deg; } }
@property --lens-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

/* Main content area */
.lens-content {
  position:relative;
  background: linear-gradient(155deg, rgba(18,8,12,0.976) 0%, rgba(8,4,7,0.986) 100%);
  border-radius:26px;
  padding:3rem 3.4rem 2.8rem;
  min-width:420px;
  box-shadow:
    0 40px 160px rgba(0,0,0,0.9),
    0 0 130px rgba(255,32,64,0.18),
    0 0 280px rgba(255,32,64,0.07),
    inset 0 1px 0 rgba(255,255,255,0.04);
  border:1px solid rgba(255,32,64,0.16);
  z-index:1;
  overflow:hidden;
}

/* Scanline overlay */
.lens-content::before {
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,32,64,0.018) 2px,
    rgba(255,32,64,0.018) 4px
  );
  pointer-events:none;
  border-radius:22px;
  z-index:0;
}

/* Particle canvas — reduced opacity to minimize visual noise */
.lens-particles-canvas {
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0.2;  /* was 0.4 — halved */
  border-radius:22px;
}

/* ===== HEADER ===== */
.lens-header {
  display:flex; align-items:center; gap:1.1rem;
  margin-bottom:1.3rem;
  position:relative; z-index:1;
}
.lens-icon {
  font-size:4.2rem;
  filter:drop-shadow(0 0 28px rgba(255,32,64,0.65));
  animation:lensIconFloat 3.5s ease-in-out infinite alternate;
  flex-shrink:0;
}
@keyframes lensIconFloat {
  0% { transform:translateY(0) rotate(-4deg); }
  100% { transform:translateY(-5px) rotate(4deg); }
}
.lens-header-text { flex:1; min-width:0; }

.lens-title {
  font-size:1.9rem; font-weight:900;
  letter-spacing:-0.02em; line-height:1.2;
  background:linear-gradient(135deg, #fff 30%, var(--red) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.lens-meta-row {
  display:flex; align-items:center; gap:0.7rem;
  margin-top:0.45rem;
}
.lens-tag {
  font-family:var(--mono); font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; color:var(--text2);
  text-transform:uppercase;
  padding:0.2rem 0.65rem;
  border-radius:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.lens-status {
  display:inline-block;
  font-family:var(--mono); font-size:0.64rem; font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.22rem 0.75rem;
  border-radius:7px;
}
.status-done {
  color:#4caf50;
  background:rgba(76,175,80,0.1);
  border:1px solid rgba(76,175,80,0.2);
}
.status-progress {
  color:#ffaa00;
  background:rgba(255,170,0,0.1);
  border:1px solid rgba(255,170,0,0.25);
  animation:lensStatusBlink 2s ease-in-out infinite alternate;
}
@keyframes lensStatusBlink {
  0% { box-shadow:0 0 4px rgba(255,170,0,0.15); }
  100% { box-shadow:0 0 16px rgba(255,170,0,0.45); }
}

/* ===== DESCRIPTION ===== */
.lens-desc {
  font-size:1.06rem; color:var(--text2); line-height:2.0;
  margin-bottom:1.6rem;
  position:relative; z-index:1;
  padding-left:14px;
  border-left:3px solid rgba(255,32,64,0.3);
}

/* ===== HIGHLIGHTS SECTION ===== */
.lens-highlights-section {
  margin-bottom:1.5rem;
  position:relative; z-index:1;
}
.lens-section-label {
  display:block;
  font-family:var(--mono); font-size:0.7rem; font-weight:800;
  letter-spacing:0.18em; color:var(--red);
  text-transform:uppercase;
  margin-bottom:0.85rem;
  text-shadow:0 0 12px rgba(255,32,64,0.35);
}
.lens-highlights {
  display:flex; flex-direction:column; gap:0.55rem;
}
.lens-highlight-item {
  display:flex; align-items:flex-start; gap:0.7rem;
  font-size:1.0rem; color:rgba(230,225,220,0.88); line-height:1.75;
  padding:0.5rem 0.7rem;
  border-radius:8px;
  background:rgba(255,255,255,0.02);
  transition:background 0.3s, transform 0.3s;
  /* REMOVED lensHLIn animation — was causing flicker on every showProjectLens() call */
}
.lens-highlight-item:hover {
  background:rgba(255,32,64,0.06);
  transform:translateX(4px);
}
.lens-hl-bullet {
  color:var(--red);
  font-weight:bold;
  flex-shrink:0;
  font-size:0.85rem;
  margin-top:1px;
  text-shadow:0 0 8px rgba(255,32,64,0.4);
}

/* ===== TECH STACK ===== */
.lens-techs-section {
  margin-bottom:1.5rem;
  position:relative; z-index:1;
}
.lens-techs {
  display:flex; flex-wrap:wrap; gap:0.55rem;
}
.lens-techs .card-tech-pill {
  opacity:1; transform:none !important;
  font-size:0.66rem;
  padding:0.28rem 0.7rem;
  border-radius:7px;
  border-color:rgba(255,32,64,0.22);
  color:rgba(240,235,230,0.85);
  background:rgba(255,32,64,0.06);
  transition: all 0.3s;
}
.lens-techs .card-tech-pill:hover {
  background:rgba(255,32,64,0.15);
  border-color:rgba(255,32,64,0.45);
  box-shadow:0 0 12px rgba(255,32,64,0.2);
}

/* ===== PROGRESS BAR (ongoing only) ===== */
.lens-progress-section {
  display:flex; flex-direction:column; gap:0.6rem;
  margin-bottom:1.5rem;
  position:relative; z-index:1;
  padding:1rem 1.2rem;
  border-radius:14px;
  background:rgba(255,32,64,0.03);
  border:1px solid rgba(255,32,64,0.1);
}
.lens-progress-bar-wrap {
  width:100%; height:8px;
  background:rgba(255,255,255,0.05); border-radius:4px;
  overflow:hidden;
  box-shadow:inset 0 1px 4px rgba(0,0,0,0.5);
}
.lens-progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--red), #ff6b6b, #ff9955, var(--red));
  background-size:300% 100%;
  border-radius:4px;
  transition:width 1.8s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 0 18px var(--red-glow), 0 0 36px rgba(255,32,64,0.2);
  animation:lensProgressShimmer 2.5s linear infinite;
}
@keyframes lensProgressShimmer { 0%{background-position:300% 0} 100%{background-position:-300% 0} }
.lens-progress-info {
  display:flex; justify-content:space-between; align-items:center;
}
.lens-progress-pct {
  font-family:var(--mono); font-size:0.96rem; font-weight:800;
  color:var(--red);
  text-shadow:0 0 12px var(--red-glow);
}
.lens-progress-delivery {
  font-family:var(--mono); font-size:0.78rem; font-weight:600;
  color:var(--text2); letter-spacing:0.03em;
}

/* ===== CTA BUTTON ===== */
.lens-cta {
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:0.8rem;
  padding:0.9rem 2.2rem;
  background:linear-gradient(135deg, var(--red) 0%, #e63344 100%);
  color:#fff; font-weight:800; font-size:0.9rem;
  border-radius:50px; letter-spacing:0.06em; text-transform:uppercase;
  box-shadow:0 6px 28px var(--red-glow), 0 0 56px rgba(255,32,64,0.15);
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),
             box-shadow 0.3s;
  text-decoration:none; cursor:pointer;
  border:none; outline:none;
}
.lens-cta:hover {
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 48px var(--red-glow), 0 0 80px rgba(255,32,64,0.25);
}

/* ============================================
   WORKS SECTION LABELS
   ============================================ */
.works-section-label {
  font-family:var(--mono); font-size:0.72rem; font-weight:700;
  letter-spacing:0.2em; color:var(--text2);
  text-transform:uppercase; text-align:center;
  margin:4rem auto 2rem; padding:0.6rem 0;
  max-width:320px; position:relative;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.works-section-label::before {
  content:''; position:absolute; top:50%; left:50%;
  width:60px; height:1px;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  transform:translate(-50%,-50%);
  opacity:0.4;
}
.ongoing-label {
  color:var(--red);
  border-color:rgba(255,32,64,0.2);
  text-shadow:0 0 20px var(--red-glow);
}
.ongoing-label::before {
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:0.7;
}

/* Ongoing grid */
.ongoing-grid {
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  max-width:1100px; margin:0 auto;
}


/* ============================================
   ABOUT — EXTREME VISUAL OVERHAUL
   ============================================ */
#about {
  padding:10rem 3rem; border-top:1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(255,32,64,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(255,60,80,0.03) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg2) 0%, #08080c 100%);
  position:relative; overflow:hidden;
}
/* Energy field background */
#about::before {
  content:''; position:absolute; top:50%; right:10%;
  width:700px; height:700px;
  background:radial-gradient(circle, rgba(255,32,64,0.06) 0%, transparent 70%);
  pointer-events:none;
  animation:aboutGlowPulse 5s ease-in-out infinite alternate;
}
@keyframes aboutGlowPulse {
  0% { opacity:0.4; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1.2) rotate(3deg); }
}
/* Grid pattern overlay — animated */
#about::after {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,32,64,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,32,64,0.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none; opacity:0.5;
  animation:gridShift 20s linear infinite;
}
@keyframes gridShift {
  0% { background-position:0 0; }
  100% { background-position:60px 60px; }
}

/* About particles canvas */
#about-particles {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0.7;
}

/* Scan line sweep */
#about-scan {
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), rgba(255,32,64,0.3), transparent);
  opacity:0; pointer-events:none; z-index:2;
  filter:blur(1px); box-shadow:0 0 30px var(--red-glow), 0 0 60px rgba(255,32,64,0.15);
}
#about-scan.active {
  animation:aboutScanSweep 3s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes aboutScanSweep {
  0% { top:0; opacity:0; }
  8% { opacity:0.6; }
  92% { opacity:0.6; }
  100% { top:100%; opacity:0; }
}

/* Mouse-follow glow spotlight */
#about-spotlight {
  position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,32,64,0.08) 0%, transparent 70%);
  pointer-events:none; z-index:1;
  transition:left 0.3s ease-out, top 0.3s ease-out;
  filter:blur(40px); opacity:0;
  will-change:left, top;
}
#about-spotlight.active { opacity:1; }
.about-inner {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.6fr; gap:6rem;
  align-items:start; position:relative; z-index:3;
}
/* Left column — title area with dramatic styling */
.about-left { position:relative; }
.about-eyebrow {
  font-family:var(--mono); font-size:0.72rem; font-weight:700;
  letter-spacing:0.25em; color:var(--red); margin-bottom:1.5rem;
  text-transform:uppercase; text-shadow:0 0 20px var(--red-glow);
  display:inline-block;
  position:relative;
  padding-right:2rem;
}
/* Animated red line after eyebrow */
.about-eyebrow::after {
  content:''; position:absolute; right:0; top:50%; width:1.5rem; height:1px;
  background:var(--red); box-shadow:0 0 8px var(--red);
  animation:eyebrowPulse 1.5s ease-in-out infinite alternate;
}
@keyframes eyebrowPulse {
  0% { width:0.5rem; opacity:0.5; }
  100% { width:2rem; opacity:1; }
}
.about-title {
  font-size:clamp(2.5rem,5vw,4.5rem); font-weight:900;
  letter-spacing:-0.03em; line-height:1.05; margin-bottom:1.5rem;
  position:relative; display:inline-block;
  /* Gradient text with glow */
  background:linear-gradient(135deg, #fff 20%, var(--red) 60%, #ff6b6b 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:titleGradientShift 6s ease infinite;
  filter:drop-shadow(0 0 40px rgba(255,32,64,0.15));
}
@keyframes titleGradientShift {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.about-title::after {
  content:''; position:absolute; bottom:-8px; left:0; width:70%;
  height:4px;
  background:linear-gradient(90deg, var(--red), #ff6b6b, transparent);
  border-radius:2px;
  box-shadow:0 0 12px var(--red-glow);
  /* Animated underline */
  animation:underlineGlide 3s ease-in-out infinite alternate;
}
@keyframes underlineGlide {
  0% { width:45%; transform:translateX(0); }
  100% { width:75%; transform:translateX(0); }
}
.about-subtitle {
  font-size:1.2rem; color:var(--text2); line-height:1.9;
  max-width:360px;
  opacity:1; transform:translateY(0);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.about-subtitle.visible { opacity:1; transform:translateY(0); }

/* Decorative floating code lines on left */
.about-code-deco {
  margin-top:3rem; padding:1.5rem; border-radius:14px;
  background:rgba(255,32,64,0.04); border:1px solid rgba(255,32,64,0.1);
  font-family:var(--mono); font-size:0.7rem; color:var(--text2);
  line-height:2; position:relative; overflow:hidden;
  opacity:1; transform:translateX(0);
  transition:opacity 0.8s 0.4s ease, transform 0.8s 0.4s ease;
}
.about-code-deco.visible { opacity:1; transform:translateX(0); }
.about-code-deco .deco-line {
  display:block; white-space:nowrap;
  opacity:1; transform:translateX(0);
  transition:all 0.4s ease;
}
.about-code-deco.visible .deco-line:nth-child(1) { transition-delay:0.1s; opacity:1; transform:translateX(0); }
.about-code-deco.visible .deco-line:nth-child(2) { transition-delay:0.2s; opacity:1; transform:translateX(0); }
.about-code-deco.visible .deco-line:nth-child(3) { transition-delay:0.3s; opacity:1; transform:translateX(0); }
.about-code-deco.visible .deco-line:nth-child(4) { transition-delay:0.4s; opacity:1; transform:translateX(0); }
.about-code-deco.visible .deco-line:nth-child(5) { transition-delay:0.5s; opacity:1; transform:translateX(0); }
.deco-keyword { color:var(--red); font-weight:700; }
.deco-string { color:#88cc88; }
.deco-comment { color:rgba(255,255,255,0.25); }
.deco-fn { color:#66aaff; }
.deco-num { color:#ffb400; }

/* Right column */
.about-right { position:relative; }
.about-bio {
  font-size:1.08rem; color:var(--text2); line-height:2;
  margin-bottom:3rem;
  position:relative; padding-left:18px;
  border-left:3px solid rgba(255,32,64,0.35);
  opacity:1; transform:translateY(0);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.about-bio.visible { opacity:1; transform:translateY(0); }
/* Highlight key numbers in bio */
.about-bio strong {
  color:var(--red); font-weight:800;
  text-shadow:0 0 12px var(--red-glow);
}
.about-values { display:flex; flex-direction:column; gap:1.8rem; }

/* VALUE CARDS — EXTREME UPGRADE */
.value-card {
  padding:2rem 2.4rem;
  background:linear-gradient(145deg, rgba(20,18,26,0.85) 0%, rgba(12,10,18,0.95) 100%);
  border:1px solid rgba(255,255,255,0.05); border-radius:22px;
  transition:all 0.6s cubic-bezier(0.22,1,0.36,1);
  position:relative; overflow:hidden;
  backdrop-filter:blur(16px) saturate(1.2);
  transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(0) rotateY(0);
  opacity:1; transform:translateY(0) perspective(1000px) rotateX(0) rotateY(0);
}
/* Stagger reveal animation — start visible, animate in as enhancement */
.value-card.visible {
  opacity:1; transform:perspective(1000px) rotateX(0) rotateY(0) translateY(0);
}
.value-card:nth-child(1).visible { transition-delay:0.15s; }
.value-card:nth-child(2).visible { transition-delay:0.3s; }
.value-card:nth-child(3).visible { transition-delay:0.45s; }

/* Rotating conic gradient border on hover */
.value-card::before {
  content:''; position:absolute; inset:-1.5px; z-index:-2;
  border-radius:24px;
  background:conic-gradient(from var(--vc-angle,0deg),
    transparent 0%,
    rgba(255,32,64,0.5) 10%,
    #ff6b6b 25%,
    rgba(255,120,80,0.3) 40%,
    transparent 50%,
    transparent 100%
  );
  opacity:0; transition:opacity 0.5s;
  filter:blur(2px);
  animation:vcBorderRotate 4s linear infinite;
}
@keyframes vcBorderRotate { to { --vc-angle:360deg; } }
@property --vc-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }

.value-card:hover::before { opacity:1; }
/* Sweep line on hover */
.value-card::after {
  content:''; position:absolute; top:0; left:-150%;
  width:60%; height:1px;
  background:linear-gradient(90deg, transparent, var(--red), rgba(255,180,80,0.8), transparent);
  transition:left 0.7s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
  box-shadow:0 0 20px var(--red-glow), 0 0 40px rgba(255,32,64,0.15);
}
.value-card:hover::after { left:120%; }

/* Hover state — dramatic 3D lift */
.value-card:hover {
  border-color:rgba(255,32,64,0.35);
  transform:perspective(1000px) translateX(12px) translateY(-8px) rotateX(2deg) rotateY(-3deg);
  box-shadow:
    -12px 24px 60px rgba(0,0,0,0.55),
    0 0 50px rgba(255,32,64,0.1),
    0 0 100px rgba(255,32,64,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* Icon with extreme glow + float */
.value-icon {
  font-size:2.2rem; margin-bottom:1rem; display:inline-block;
  position:relative; display:inline-block;
  filter:drop-shadow(0 0 12px rgba(255,32,64,0.45));
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.5s;
}
/* Floating animation always-on for visible cards */
.value-card.visible .value-icon {
  animation:iconFloat 3s ease-in-out infinite alternate;
}
@keyframes iconFloat {
  0% { transform:translateY(0) rotate(-3deg); }
  100% { transform:translateY(-8px) rotate(5deg); }
}
.value-card:hover .value-icon {
  transform:rotate(12deg) scale(1.35) translateY(-4px);
  filter:drop-shadow(0 0 28px rgba(255,32,64,0.75));
  animation:none; /* stop float on hover, use hover transform instead */
}

/* Glow ring behind icon */
.value-icon::before {
  content:''; position:absolute; top:50%; left:50%;
  width:40px; height:40px; margin-left:-20px; margin-top:-20px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,32,64,0.25) 0%, transparent 70%);
  filter:blur(8px); opacity:0; transition:opacity 0.4s;
}
.value-card:hover .value-icon::before { opacity:1; }
.value-card h4 {
  font-size:1.2rem; font-weight:800; margin-bottom:0.7rem;
  color:#fff; letter-spacing:-0.01em;
  position:relative; display:inline-block;
  transition:color 0.3s, text-shadow 0.3s;
}
.value-card:hover h4 {
  color:#fff;
  text-shadow:0 0 20px rgba(255,255,255,0.3);
}
.value-card p {
  font-size:0.9rem; color:var(--text2); line-height:1.8;
  transition:color 0.3s;
}
.value-card:hover p { color:rgba(220,215,210,0.85); }

/* ============================================
   CONTACT — EPIC FINALE
   ============================================ */
#contact {
  padding:12rem 3rem; text-align:center;
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 100% 80% at 50% 120%, rgba(255,32,64,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(255,32,64,0.03) 0%, transparent 60%);
}
/* Energy wave sweep on entry */
#finale-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:0;
  transition:opacity 2s ease;
}
#finale-canvas.active { opacity:1; }
#contact-wave {
  position:absolute; top:0; left:-100%; right:0; height:4px;
  background:linear-gradient(90deg, transparent 10%, var(--red) 40%, #ff6b6b 60%, var(--red) 90%, transparent);
  opacity:0; z-index:3; pointer-events:none;
  filter:blur(1px);
  box-shadow:0 0 30px var(--red-glow), 0 0 60px rgba(255,32,64,0.2), 0 0 120px rgba(255,32,64,0.08);
}
#contact-wave.active {
  animation:waveSweep 2s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes waveSweep {
  0% { left:-100%; opacity:0; }
  5% { opacity:1; }
  95% { opacity:1; }
  100% { left:100%; opacity:0; }
}

/* Red flash overlay on initial reveal */
#contact-flash {
  position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(255,32,64,0.15) 0%, transparent 70%);
  opacity:0; pointer-events:none; z-index:2;
  transition:opacity 0.8s ease-out;
}
#contact-flash.active {
  animation:flashBurst 2s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes flashBurst {
  0% { opacity:0; transform:scale(0.8); }
  20% { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.05); }
}

/* Particle convergence canvas */
#contact-particles {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  transition:opacity 1s ease;
}
#contact-particles.active { opacity:1; }

.contact-inner {
  position:relative; z-index:5;
}

.contact-title {
  font-size:clamp(2.8rem,7vw,6.5rem); font-weight:900;
  letter-spacing:-0.04em; margin-bottom:1.2rem;
  text-shadow:0 0 60px rgba(255,32,64,0.15);
  display:inline-block;
  /* Gradient text */
  background:linear-gradient(135deg, #fff 10%, var(--red) 50%, #ff8888 80%, #fff 100%);
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:0; transform:scale(0.9) translateY(30px);
  transition:all 1s cubic-bezier(0.22,1,0.36,1);
}
.contact-title.revealed {
  opacity:1; transform:scale(1) translateY(0);
  animation:contactTitleGlow 4s ease-in-out infinite alternate;
}
@keyframes contactTitleGlow {
  0% { filter:drop-shadow(0 0 30px rgba(255,32,64,0.1)); background-position:0% 50%; }
  100% { filter:drop-shadow(0 0 70px rgba(255,32,64,0.35)); background-position:100% 50%; }
}

.contact-subtitle {
  font-size:1.25rem; color:var(--text2); margin-bottom:3.5rem;
  line-height:1.9; max-width:520px; margin-left:auto; margin-right:auto;
  opacity:0; transform:translateY(20px);
  transition:all 0.8s 0.3s ease;
}
.contact-subtitle.revealed { opacity:1; transform:translateY(0); }
.contact-email-wrap {
  display:inline-flex; align-items:center; gap:1rem;
  background:rgba(14,12,20,0.8); border:1px solid rgba(255,32,64,0.15);
  padding:1.2rem 2.5rem; border-radius:18px; margin-bottom:3rem;
  transition:border-color 0.4s, box-shadow 0.4s, transform 0.3s, background 0.4s;
  backdrop-filter:blur(16px);
  opacity:0; transform:translateY(25px) scale(0.97);
  transition:all 0.7s 0.5s cubic-bezier(0.22,1,0.36,1);
}
.contact-email-wrap.revealed { opacity:1; transform:translateY(0) scale(1); }
.contact-email-wrap:hover {
  border-color:var(--red); background:rgba(255,32,64,0.05);
  box-shadow:
    0 0 50px rgba(255,32,64,0.15),
    0 0 100px rgba(255,32,64,0.06),
    inset 0 0 30px rgba(255,32,64,0.03);
  transform:scale(1.02) translateY(-2px);
}
.contact-email {
  font-family:var(--mono); font-size:clamp(1rem,2vw,1.45rem);
  font-weight:700; color:var(--red); letter-spacing:0.04em;
  text-shadow:0 0 20px var(--red-glow), 0 0 40px rgba(255,32,64,0.1);
  user-select:all;
  position:relative;
}
/* Typing cursor animation */
.contact-email.typing::after {
  content:'|';
  color:var(--red);
  animation:blinkCaret 0.6s step-end infinite;
  margin-left:2px;
}
@keyframes blinkCaret { 0%,100%{opacity:1;} 50%{opacity:0;} }
.contact-copy-btn {
  background:none; border:1px solid rgba(255,255,255,0.08);
  color:var(--text2); padding:8px; border-radius:10px;
  transition:all 0.3s cubic-bezier(0.22,1,0.36,1);
}
.contact-copy-btn:hover { color:var(--red); border-color:var(--red); transform:scale(1.15) rotate(3deg); background:rgba(255,32,64,0.08); }
.contact-copy-btn.copied { color:#4caf50; border-color:#4caf50; }

/* Epic CTA button */
.contact-cta {
  display:inline-block; padding:1.2rem 3.8rem;
  background:linear-gradient(135deg, var(--red) 0%, #e63344 50%, #ff2040 100%);
  color:#fff; font-weight:800; font-size:1.1rem;
  border-radius:70px; letter-spacing:0.06em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
  opacity:0; transform:translateY(20px) scale(0.95);
  transition:all 0.7s 0.7s cubic-bezier(0.22,1,0.36,1);
}
.contact-cta.revealed { opacity:1; transform:translateY(0) scale(1); }
/* Pulsing halo */
.contact-cta::before {
  content:''; position:absolute; inset:-4px;
  border-radius:74px;
  background:linear-gradient(135deg, var(--red), transparent, var(--red));
  z-index:-1; opacity:0; filter:blur(15px);
  animation:ctaHaloPulse 2.5s ease-in-out infinite alternate;
}
@keyframes ctaHaloPulse {
  0% { opacity:0.3; transform:scale(1); }
  100% { opacity:0.7; transform:scale(1.08); }
}
/* Sweep shine on hover */
.contact-cta::after {
  content:''; position:absolute; top:0; left:-150%; width:60%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition:left 0.7s cubic-bezier(0.22,1,0.36,1);
}
.contact-cta:hover::after { left:120%; }
.contact-cta:hover {
  transform:translateY(-6px) scale(1.06);
  box-shadow:
    0 20px 56px var(--red-glow),
    0 0 100px rgba(255,32,64,0.2),
    0 0 180px rgba(255,32,64,0.07);
}

/* Finale RED signature */
#finale-signature {
  margin-top:5rem; padding-top:3rem;
  position:relative; z-index:5;
  opacity:0; transform:translateY(30px);
  transition:all 1s 1s cubic-bezier(0.22,1,0.36,1);
}
#finale-signature.revealed { opacity:1; transform:translateY(0); }
.finale-logo {
  font-size:clamp(2rem,4vw,3.5rem); font-weight:900;
  letter-spacing:0.15em;
  color:var(--text); position:relative; display:inline-block;
  /* Animated gradient text */
  background:linear-gradient(90deg, #fff 0%, var(--red) 33%, #ff8888 66%, var(--red) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:finaleLogoShift 5s linear infinite;
  filter:drop-shadow(0 0 40px rgba(255,32,64,0.3));
}
@keyframes finaleLogoShift {
  0% { background-position:0% 50%; }
  100% { background-position:200% 50%; }
}
.finale-logo span { -webkit-text-fill-color:inherit !important; }
.finale-tagline {
  font-family:var(--mono); font-size:0.75rem;
  letter-spacing:0.3em; color:var(--text2);
  margin-top:0.8rem; text-transform:uppercase;
  opacity:0.6;
}

/* ============================================
   FOOTER
   ============================================ */
#footer {
  padding:2.5rem 3rem; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:0.78rem; color:var(--text2);
}
.footer-logo { font-weight:900; letter-spacing:0.1em; }
.footer-logo span { color:var(--red); }

/* ============================================
   TERMINAL EASTER EGG
   ============================================ */
#terminal-ee { display:none; }
#terminal-ee:not(.terminal-hidden) {
  display:flex; position:fixed; inset:0; z-index:9995;
  background:rgba(0,0,0,0.94);
  backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
  animation:fadeIn 0.3s ease;
}
.terminal-hidden { display:none !important; }
.terminal-window {
  width:min(650px, 92vw); background:#0d0d0d;
  border:1px solid var(--border); border-radius:14px;
  overflow:hidden; box-shadow:0 24px 100px rgba(0,0,0,0.9);
}
.terminal-titlebar {
  display:flex; align-items:center; padding:0.7rem 1.2rem;
  background:var(--bg2); border-bottom:1px solid var(--border);
}
.terminal-dots { display:flex; gap:7px; margin-right:1.2rem; }
.terminal-dots i { width:11px; height:11px; border-radius:50%; display:block; }
.terminal-dots i:nth-child(1) { background:#ff5f57; }
.terminal-dots i:nth-child(2) { background:#febc2e; }
.terminal-dots i:nth-child(3) { background:#28c840; }
.terminal-title { font-size:0.72rem; color:var(--text2); flex:1; }
.terminal-close {
  background:none; border:none; color:var(--text2);
  font-size:1.2rem; transition:color 0.3s;
}
.terminal-close:hover { color:var(--red); }
.terminal-body {
  padding:1.4rem; font-family:var(--mono); font-size:0.82rem;
  line-height:1.9; color:var(--text2); max-height:320px;
  overflow-y:auto;
}
.terminal-line { margin-bottom:0.35rem; }
.terminal-prompt-inline { color:var(--red); margin-right:0.5rem; font-weight:700; }
.terminal-input-line {
  display:flex; align-items:center;
  padding:0 1.4rem 1.4rem;
}
.terminal-input-line input {
  flex:1; background:transparent; border:none; outline:none;
  font-family:var(--mono); font-size:0.88rem; color:var(--text);
  caret-color:var(--red);
}
.terminal-input-line::before {
  content:'$ '; color:var(--red); font-family:var(--mono); font-weight:700;
}

/* Card preview — image style (new) */
.card-preview-img {
  width:100%; height:100%; object-fit:cover;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), filter 0.5s;
  filter: brightness(0.65) saturate(1.1);
  position:absolute; inset:0; z-index:0;
}
.work-card:hover .card-preview-img {
  transform: scale(1.12);
  filter: brightness(0.85) saturate(1.3);
}
.card-preview-overlay {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, transparent 30%, rgba(5,5,7,0.9) 100%);
  pointer-events:none;
}
/* Hide old mockup elements */
.card-preview-inner,
.mockup-icon,
.mockup-glow { display:none !important; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:768px) {
  #main-nav { padding:1rem 1.5rem; }
  .nav-links { display:none; }
  #mobile-menu-btn { display:flex; }
  #hero { padding:1rem; min-height:100svh; }
  .hero-marquee { bottom:1.2rem; }
  #works { padding:5rem 1.2rem; }
  .works-grid { grid-template-columns:1fr; }

  /* About extreme — mobile */
  #about { padding:6rem 1.5rem; }
  .about-inner { grid-template-columns:1fr !important; gap:3rem; }
  .about-title { font-size:clamp(2rem,8vw,3rem); }
  .about-code-deco { display:none; }
  .value-card:hover {
    transform:perspective(1000px) translateX(4px) translateY(-4px);
  }
  #contact { padding:7rem 1.5rem; }
  .contact-title { font-size:clamp(2rem,8vw,3.5rem); }
  .contact-cta { padding:0.9rem 2.2rem !important; font-size:0.95rem !important; }
  #finale-signature { margin-top:3rem; }
  .finale-logo { font-size:clamp(1.5rem,6vw,2.5rem); }
  #footer { flex-direction:column; gap:0.5rem; text-align:center; }
  .stats-inner { gap:3rem; }
  .hero-title { letter-spacing:-0.02em; }
}

/* ===== DIFFICULTY STARS ===== */
.lens-difficulty-section {
  margin-bottom:1.5rem;
  position:relative; z-index:1;
}
.lens-difficulty-label {
  display:block;
  font-family:var(--mono); font-size:0.72rem; font-weight:800;
  letter-spacing:0.18em; color:var(--text2);
  text-transform:uppercase;
  margin-bottom:0.55rem;
}
.lens-stars {
  display:flex; align-items:center; gap:0.4rem;
}
.lens-star {
  font-size:1.5rem;
  transition:transform 0.3s;
}
.lens-star.filled { color:#ffb400; filter:drop-shadow(0 0 8px rgba(255,180,0,0.6)); }
.lens-star.empty  { color:rgba(255,180,0,0.18); }
.lens-star.filled:hover { transform:scale(1.3); }

/* difficulty descriptor text */
.lens-difficulty-desc {
  font-size:0.82rem; color:var(--text2); line-height:1.6;
  margin-top:0.4rem;
}

/* Card difficulty badge */
.card-difficulty-wrap {
  display:flex; align-items:center; gap:0.4rem;
  margin-top:0.35rem;
}
.card-difficulty-stars {
  display:flex; gap:0.08rem; align-items:center;
}
.cd-star {
  font-size:0.52rem;
  transition:color 0.3s;
}
.cd-star.filled { color:#ffb400; }
.cd-star.empty  { color:rgba(255,180,0,0.2); }
.work-card:hover .cd-star.filled {
  color:#ffcc44;
  text-shadow:0 0 8px rgba(255,180,0,0.5);
}


/* ============================================
   PROJECT LENS — MOBILE OPTIMIZATION
   ============================================ */
@media (max-width:768px) {
  /* Lens becomes fullscreen modal on mobile */
  #project-lens {
    max-width:94vw !important;
    width:94vw !important;
    bottom: auto !important;
    max-height:85vh;
    overflow-y:auto;
  }
  .lens-content {
    padding:2rem 1.6rem 1.8rem !important;
    min-width:0 !important;
    border-radius:20px;
  }
  .lens-icon { font-size:2.8rem !important; }
  .lens-title { font-size:1.35rem !important; }
  .lens-desc { font-size:0.92rem !important; line-height:1.75 !important; }
  .lens-highlight-item { font-size:0.84rem !important; padding:0.3rem 0.4rem !important; }
  .lens-techs .card-tech-pill { font-size:0.58rem !important; padding:0.18rem 0.45rem !important; }
  .lens-cta { 
    width:100%; justify-content:center; 
    padding:0.85rem 1.5rem !important; font-size:0.86rem !important; 
  }
  .lens-section-label { font-size:0.72rem !important; }
  
  /* Cards: stack single column, bigger tap targets */
  .works-grid { grid-template-columns:1fr !important; gap:1.5rem !important; }
  .ongoing-grid { grid-template-columns:1fr !important; gap:1.5rem !important; }
  .work-card { border-radius:20px !important; }

  /* Mobile: hide card visit badge — users open detail via tap, navigate via CTA inside */
  .card-visit-badge { display:none !important; }

  .card-preview { height:200px !important; }
  .card-body { padding:1.4rem 1.5rem 1.6rem !important; }
  .card-title { font-size:1.25rem !important; }
  .card-desc { font-size:0.88rem !important; -webkit-line-clamp:3 !important; }
  .card-tech-pill { font-size:0.56rem !important; padding:0.18rem 0.45rem !important; }
  
  /* Stats section mobile */
  .stats-inner { flex-wrap:wrap; gap:2rem !important; }
  .stat-item { min-width:140px; }
  
  /* About section mobile */
  .about-inner { grid-template-columns:1fr !important; }
  .value-card { padding:1.5rem !important; }
}

@media (max-width:480px) {
  #project-lens {
    width:96vw !important;
    max-height:90vh;
  }
  .lens-content { padding:1.6rem 1.3rem 1.5rem !important; border-radius:16px; }
  .lens-icon { font-size:2.4rem !important; }
  .lens-title { font-size:1.2rem !important; }
  .lens-desc { font-size:0.84rem !important; margin-bottom:1rem !important; }
  .lens-highlight-item { font-size:0.78rem !important; flex-direction:column; gap:0.2rem; }
  #hero { padding:0.8rem !important; }
  .hero-title { font-size:2rem !important; }
  .hero-subtitle { font-size:0.9rem !important; }
}


/* Lens close button */
.lens-close {
  position:absolute; top:1rem; right:1.2rem;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
  color:var(--text2); font-size:1.2rem; font-weight:300;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.3s ease; z-index:5;
  line-height:1;
}
.lens-close:hover {
  background:rgba(255,32,64,0.15);
  border-color:rgba(255,32,64,0.4);
  color:#fff;
  transform:rotate(90deg);
}
@media (max-width:768px) {
  .lens-close {
    display:flex !important;
    width:40px; height:40px; font-size:1.4rem;
    top:0.8rem; right:0.9rem;
  }
}
@media (min-width:769px) {
  .lens-close { display:none; } /* Hidden on desktop (hover-out to close) */
}