/* ================================================
   ROX SINSON — Lanes-inspired Portfolio v4
   Floating shapes + subtle vignette + neon glow
   ================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0e0e0f;
  --surface:#161618;
  --card:#1c1c1f;
  --text:#fff;
  --dim:#8a8a8f;
  --muted:#555559;
  --border:#222226;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Chivo Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1200px;
  --gutter:48px;

  /* Glass surfaces — dark mode defaults */
  --glass-bg:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.1);
  --glass-hover-bg:rgba(255,255,255,.09);
  --glass-hover-border:rgba(255,255,255,.18);
  --glass-glow:rgba(255,255,255,.08);
  --glass-glow-line:rgba(255,255,255,.12);
  --dock-bg:rgba(255,255,255,.06);
  --dock-border:rgba(255,255,255,.1);
  --dock-active-bg:rgba(255,255,255,.1);
  --dock-active-glow:rgba(255,255,255,.1);
  --dock-text:rgba(255,255,255,.4);
  --dock-text-hover:rgba(255,255,255,.7);
  --dock-text-active:#fff;
  --badge-bg:rgba(255,255,255,.12);
  --card-shadow:rgba(0,0,0,.4);
  --blur-header-bg:rgba(14,14,15,.45);
  --hero-blend:difference;
  --logo-color:#fff;
  --transition-bg:#0e0e0f;
}

/* ========== LIGHT MODE ========== */
html.light{
  --bg:#f5f5f7;
  --surface:#eeeef0;
  --card:#e8e8ec;
  --text:#1a1a1f;
  --dim:#5a5a64;
  --muted:#8a8a94;
  --border:#d4d4d8;

  --glass-bg:rgba(255,255,255,.65);
  --glass-border:rgba(0,0,0,.08);
  --glass-hover-bg:rgba(255,255,255,.8);
  --glass-hover-border:rgba(0,0,0,.14);
  --glass-glow:rgba(255,255,255,.5);
  --glass-glow-line:rgba(255,255,255,.6);
  --dock-bg:rgba(255,255,255,.7);
  --dock-border:rgba(0,0,0,.08);
  --dock-active-bg:rgba(0,0,0,.06);
  --dock-active-glow:rgba(0,0,0,.04);
  --dock-text:rgba(0,0,0,.4);
  --dock-text-hover:rgba(0,0,0,.65);
  --dock-text-active:#1a1a1f;
  --badge-bg:rgba(0,0,0,.06);
  --card-shadow:rgba(0,0,0,.08);
  --blur-header-bg:rgba(245,245,247,.6);
  --hero-blend:normal;
  --logo-color:#1a1a1f;
  --transition-bg:#f5f5f7;
}

/* Theme transition on all key elements */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after{
  transition:background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, fill .4s ease, stroke .4s ease !important;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.5}

/* ================================================
   PAGE TRANSITION — Slide-up with loading reveal
   ================================================ */
.page-transition{
  position:fixed;inset:0;z-index:9999;
  background:var(--transition-bg);
  transform:translateY(100%);
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.page-transition .transition-text{
  display:flex;flex-direction:column;align-items:center;gap:0;
  text-align:center;
  opacity:0;
  transition:opacity .3s ease .15s;
}
.page-transition.active .transition-text{opacity:1}
.transition-line{
  display:flex;gap:0;
  font-size:clamp(52px,12vw,160px);
  font-weight:900;letter-spacing:-.06em;
  text-transform:uppercase;color:#fff;line-height:.85;
}
.transition-letter{
  display:inline-block;
  opacity:0;
  filter:blur(12px);
  animation:transLetterIn .8s var(--ease) var(--td, 0s) forwards;
}
@keyframes transLetterIn{
  0%{opacity:0;filter:blur(12px)}
  60%{opacity:.7;filter:blur(2px)}
  100%{opacity:1;filter:blur(0)}
}

/* ================================================
   HERO LETTER REVEAL — LANES-style loading
   Letters blur-reveal, then glow + shapes fade in
   ================================================ */
.hero-letter{
  display:inline-block;
  opacity:0;
  filter:blur(16px);
  transform:translateY(14px);
  animation:heroLetterReveal 1.1s var(--ease) var(--ld, 0s) forwards;
}

@keyframes heroLetterReveal{
  0%{opacity:0;filter:blur(16px);transform:translateY(14px)}
  55%{opacity:.7;filter:blur(3px);transform:translateY(4px)}
  100%{opacity:1;filter:blur(0px);transform:translateY(0)}
}

/* Skip intro animations when arriving via page transition */
body.skip-intro .hero-letter{animation:none;opacity:1;filter:none;transform:none}
body.skip-intro .hero-glow{animation:none;opacity:1}
body.skip-intro .hero-sub{animation:none;opacity:1;filter:none;transform:none}
body.skip-intro .hero-greeting{animation:none;opacity:1;filter:none;transform:none}
body.skip-intro .hero-role-ticker{animation:none;opacity:1;filter:none;transform:none}
body.skip-intro .hero-bio{animation:none;opacity:1;filter:none;transform:none}
body.skip-intro .hero-portrait{animation:none;opacity:1;filter:none;transform:none}
body.skip-intro .c-item{animation:none;opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg))}
body.skip-intro .nav{animation:none;opacity:1}
body.skip-intro .scroll-btn{animation:none;opacity:1}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{background:none;border:none;color:inherit;cursor:pointer;font-family:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ================================================
   STICKY BLUR HEADER — Frosted strip
   ================================================ */
.blur-header{
  position:fixed;top:0;left:0;right:0;z-index:198;
  height:120px;
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  background:var(--blur-header-bg);
  mask-image:linear-gradient(to bottom, black 40%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 40%, transparent 100%);
  pointer-events:none;
}

/* ================================================
   NAV
   ================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:80px;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);
  opacity:0;animation:fadeIn .8s var(--ease) 1.6s forwards;
}
.nav-logo{
  font-size:18px;font-weight:900;line-height:1;
  letter-spacing:.06em;
  display:flex;gap:0;align-items:center;
  text-decoration:none;
  padding:6px 14px;
  border-radius:12px;
  transition:text-shadow .35s ease;
}
.nav-logo:hover{
  text-shadow:
    0 0 6px rgba(130,40,255,.5),
    0 0 16px rgba(130,40,255,.3),
    0 0 32px rgba(0,220,130,.15);
}
.nav-logo-letter{
  display:inline-block;
  color:#fff;
  -webkit-text-fill-color:#fff;
  transition:text-shadow .35s ease;
}
html.light .nav-logo-letter{
  color:#1a1a1f;
  -webkit-text-fill-color:#1a1a1f;
}
html.light .nav-logo:hover{
  text-shadow:
    0 0 6px rgba(130,40,255,.4),
    0 0 16px rgba(130,40,255,.2),
    0 0 32px rgba(0,220,130,.1);
}

/* ========== THEME TOGGLE ========== */
.theme-toggle{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
  color:var(--text);
  position:relative;
}
.theme-toggle:hover{
  background:var(--glass-hover-bg);
  border-color:var(--glass-hover-border);
  transform:scale(1.08);
}
.theme-icon{transition:opacity .3s ease, transform .3s ease}
/* Dark mode: show sun, hide moon */
.theme-icon--sun{opacity:1;transform:rotate(0deg)}
.theme-icon--moon{position:absolute;opacity:0;transform:rotate(-90deg)}
/* Light mode: show moon, hide sun */
html.light .theme-icon--sun{opacity:0;transform:rotate(90deg)}
html.light .theme-icon--moon{opacity:1;transform:rotate(0deg)}
/* ================================================
   BOTTOM DOCK NAV — Liquid glass (Apex-style)
   ================================================ */
.dock{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:200;
  opacity:0;animation:fadeIn .8s var(--ease) 2s forwards;
}
.dock-inner{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;
  border-radius:24px;
  background:var(--dock-bg);
  border:1px solid var(--dock-border);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:
    0 8px 32px var(--card-shadow),
    0 2px 8px var(--card-shadow),
    inset 0 1px 0 var(--dock-active-glow),
    inset 0 -1px 0 rgba(255,255,255,.03);
}
/* Inner glow line at top of dock */
.dock-inner::before{
  content:'';
  position:absolute;top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--glass-glow-line) 50%,transparent 100%);
  border-radius:1px;
}

.dock-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 20px;
  border-radius:18px;
  color:var(--dock-text);
  font-size:11px;font-weight:500;letter-spacing:.02em;
  transition:color .3s ease, background .3s ease, box-shadow .3s ease;
  text-decoration:none;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.dock-item svg{
  width:22px;height:22px;
  opacity:.5;
  transition:opacity .3s ease, transform .3s ease;
}
.dock-item span{
  transition:opacity .3s ease;
}

/* Hover state */
.dock-item:hover{
  color:var(--dock-text-hover);
}
.dock-item:hover svg{
  opacity:.75;
  transform:translateY(-1px);
}

/* Active state — pill highlight */
.dock-item.active{
  color:var(--dock-text-active);
  background:var(--dock-active-bg);
  box-shadow:
    inset 0 1px 0 var(--dock-active-glow),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 2px 8px var(--card-shadow);
}
.dock-item.active svg{
  opacity:1;
}

/* Skip intro: show dock immediately */
body.skip-intro .dock{animation:none;opacity:1}

/* ================================================
   HERO — Left-aligned layout with portrait
   ================================================ */
.hero{
  position:relative;width:100%;height:100vh;min-height:700px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--bg);
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* Hero ambient background video */
.hero-bg-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
  opacity:.18;
  filter:brightness(.7) saturate(.4);
}
html.light .hero-bg-video{
  opacity:.06;
  filter:brightness(.8) saturate(.2);
}

/* Hero particle canvas background */
.hero-particles{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;
}

.hero-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(90vw,1100px);height:min(70vh,650px);
  z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 45% 55% at 30% 45%, rgba(130,40,255,.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 55%, rgba(0,220,130,.2) 0%, transparent 65%),
    radial-gradient(ellipse 30% 25% at 50% 50%, rgba(200,50,180,.08) 0%, transparent 55%);
  filter:blur(60px);
  opacity:0;
  animation:glowFade 2.2s var(--ease) 1.3s forwards;
}

/* Soft vignette */
.hero-vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 85% 80% at 50% 50%, transparent 50%, rgba(14,14,15,.55) 100%);
}

/* Hide collage (removed from HTML but keep CSS for safety) */
.collage{display:none}

.c-item{
  position:absolute;
  width:var(--w,120px);height:var(--h,140px);
  left:calc(50% + var(--x,0%));top:calc(50% + var(--y,0%));
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  overflow:hidden;
  opacity:0;
  animation:itemPop 1.1s var(--ease) calc(1.4s + var(--delay,.2s)) forwards;
  will-change:transform;
}
.c-item[data-shape="rect"]{border-radius:14px}
.c-item[data-shape="pill"]{border-radius:100px}
.c-item[data-shape="circle"]{border-radius:50%}
.c-item img, .c-item video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}
.c-item::after{
  content:'';
  position:absolute;inset:-8px;
  border-radius:inherit;
  background:inherit;
  filter:blur(18px);
  opacity:.45;
  z-index:-1;
  pointer-events:none;
}

/* After pop, switch to autonomous floating */
.c-item.floating{
  animation:float var(--float-dur,7s) ease-in-out infinite;
  opacity:1;
}

/* ========== Hero Content — split layout ========== */
.hero-content{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:1400px;
  margin:0 auto;
  gap:60px;
}

/* Hero text — left side */
.hero-text{
  position:relative;z-index:10;text-align:left;pointer-events:none;
  flex:1;
  max-width:58%;
}

/* Greeting line */
.hero-greeting{
  font-family:var(--mono);
  font-size:clamp(14px,1.4vw,20px);
  font-weight:400;
  color:var(--dim);
  letter-spacing:.04em;
  margin-bottom:8px;
  opacity:0;
  animation:heroSubReveal 1s var(--ease) 0.4s forwards;
}
.wave-emoji{
  display:inline-block;
  transform-origin:70% 70%;
  animation:waveHand 2.5s ease-in-out infinite;
  margin-left:-2px;
  margin-right:2px;
}
@keyframes waveHand{
  0%{transform:rotate(0deg)}
  10%{transform:rotate(11deg)}
  20%{transform:rotate(-8deg)}
  30%{transform:rotate(11deg)}
  40%{transform:rotate(-8deg)}
  50%{transform:rotate(11deg)}
  60%{transform:rotate(0deg)}
  100%{transform:rotate(0deg)}
}

.hero-title{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
.hero-line{
  font-size:clamp(56px,9.5vw,136px);font-weight:900;letter-spacing:-.06em;
  line-height:.88;text-transform:uppercase;color:rgba(255,255,255,.88);
  display:flex;
  mix-blend-mode:var(--hero-blend);
}

/* Role ticker — Claude-thinking style */
.hero-role-ticker{
  display:flex;align-items:center;gap:10px;
  margin-top:16px;
  opacity:0;
  animation:heroSubReveal 1s var(--ease) 1.4s forwards;
}
.hero-role-spinner{
  display:flex;align-items:center;gap:3px;
  flex-shrink:0;
  width:18px;height:18px;
  justify-content:center;
}
.hero-role-spinner::before,
.hero-role-spinner::after,
.hero-role-spinner span{
  content:'';
  display:block;
  width:4px;height:4px;
  border-radius:50%;
  background:#f97316;
  animation:claudeThink 1.4s ease-in-out infinite;
}
.hero-role-spinner::before{animation-delay:0s}
.hero-role-spinner span{animation-delay:.2s}
.hero-role-spinner::after{animation-delay:.4s}
@keyframes claudeThink{
  0%,80%,100%{opacity:.25;transform:scale(.8)}
  40%{opacity:1;transform:scale(1.1)}
}
.hero-role-track{
  position:relative;
  height:30px;
  min-width:320px;
  overflow:hidden;
}
.hero-role-text{
  height:30px;
  line-height:30px;
  font-family:var(--mono);
  font-size:clamp(14px,1.4vw,20px);
  font-weight:400;
  color:rgba(255,255,255,.88);
  letter-spacing:.04em;
  white-space:nowrap;
  position:absolute;left:0;top:0;
  opacity:0;
  filter:blur(6px);
  transition:opacity .4s ease, filter .4s ease;
}
.hero-role-text.active{
  opacity:1;
  filter:blur(0);
}

/* Hero bio */
.hero-bio{
  font-family:var(--mono);
  font-size:clamp(12px,1.1vw,15px);
  font-weight:300;
  color:rgba(255,255,255,.6);
  line-height:1.7;
  max-width:500px;
  margin-top:24px;
  opacity:0;
  animation:heroSubReveal 1s var(--ease) 1.8s forwards;
}

.hero-sub{
  margin-top:24px;font-size:clamp(16px,1.6vw,22px);font-weight:600;
  color:var(--text);line-height:1.6;
  letter-spacing:.02em;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
  mix-blend-mode:normal;
  opacity:0;
  animation:heroSubReveal 1.2s var(--ease) 1.6s forwards;
}
html.light .hero-line{color:rgba(0,0,0,.88)}
html.light .hero-role-text{color:rgba(0,0,0,.88)}
html.light .hero-bio{color:rgba(0,0,0,.55)}
html.light .hero-sub{text-shadow:none}

/* Hero portrait — right side (looping video) */
.hero-portrait{
  flex:0 0 auto;
  width:320px;
  border-radius:20px;
  overflow:hidden;
  opacity:0;
  animation:heroSubReveal 1.2s var(--ease) 1s forwards;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.hero-portrait video,
.hero-portrait img{
  width:100%;height:auto;
  display:block;
  object-fit:cover;
  border-radius:20px;
}

@keyframes heroSubReveal{
  from{opacity:0;transform:translateY(12px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* Scroll button — liquid glass */
.scroll-btn{
  position:absolute;bottom:100px;left:50%;transform:translateX(-50%);
  z-index:10;width:48px;height:48px;border-radius:50%;
  background:var(--glass-bg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  box-shadow:0 4px 24px var(--card-shadow), inset 0 1px 0 var(--glass-glow);
  display:flex;align-items:center;justify-content:center;
  color:var(--dim);
  opacity:0;animation:fadeIn 1s ease 2.4s forwards;
  transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
}
.scroll-btn:hover{
  background:var(--glass-hover-bg);
  border-color:var(--glass-hover-border);
  color:var(--text);
  box-shadow:0 6px 32px var(--card-shadow), inset 0 1px 0 var(--glass-glow);
}

/* ========== HERO VIDEO PROFILE CIRCLE ========== */
.hero-video-profile{
  display:flex;justify-content:center;
  padding:32px 0 0;
}
.hero-video-avatar{
  width:96px;height:96px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--border);
  box-shadow:0 4px 20px var(--card-shadow);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hero-video-avatar:hover{
  transform:scale(1.08);
  box-shadow:0 8px 32px var(--card-shadow);
}
.hero-video-avatar video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 15%;
}

/* ================================================
   INTRO TEXT — Scroll-driven blur reveal
   ================================================ */
.intro{padding:0 0 80px;margin-top:-40px}
.intro-text{
  font-size:clamp(16px,2vw,24px);font-weight:500;letter-spacing:-.01em;
  line-height:1.6;max-width:740px;margin:0 auto;text-align:center;
  text-wrap:balance;
}

.intro-word{
  display:inline-block;
  margin-right:.22em;
  transition:filter .6s var(--ease), opacity .6s var(--ease), color .6s var(--ease);
  will-change:filter,opacity;
}

.intro-word.dim{
  color:var(--dim);
  filter:blur(5px);
  opacity:.2;
}

.intro-word.revealed{
  color:var(--text) !important;
  filter:blur(0px) !important;
  opacity:1 !important;
}

/* ================================================
   MARQUEE
   ================================================ */
.marquee{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:20px 0;overflow:hidden;
  margin-bottom:40px;
}
.marquee-track{display:flex;width:max-content;animation:scroll 30s linear infinite;align-items:center;will-change:transform}
.marquee-track span{
  padding:0 32px;white-space:nowrap;display:flex;align-items:center;
}
.marquee-track span img{
  height:30px;
  min-width:60px;
  width:auto;
  object-fit:contain;
  opacity:.5;
  filter:brightness(0) invert(1);
  transition:opacity .3s ease;
}
.marquee-track span img:hover{opacity:.8}
/* Del Monte — theme switching */
.marquee-track .dm-dark{display:block}
.marquee-track .dm-light{display:none}
html.light .marquee-track .dm-dark{display:none}
html.light .marquee-track .dm-light{display:block}
/* Del Monte uses original colors, no filter */
.marquee-track .dm-dark,
.marquee-track .dm-light{
  filter:none;
  opacity:.5;
}
.marquee-track .dm-dark:hover,
.marquee-track .dm-light:hover{opacity:.8}
html.light .marquee-track span img{
  filter:brightness(0) invert(0);
  opacity:.7;
}
html.light .marquee-track span img:hover{opacity:1}
html.light .marquee-track .dm-light{
  filter:none;
  opacity:.7;
}
html.light .marquee-track .dm-light:hover{opacity:1}

/* ================================================
   PROJECTS — Apollo-style 2-column grid
   ================================================ */
.projects{padding:60px 0 0}

.projects-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:60px;gap:40px;
}
.projects-title{
  font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;
}
.projects-sub{
  font-size:15px;color:var(--dim);max-width:380px;margin-top:12px;line-height:1.5;
}
.lets-talk{
  font-size:15px;color:var(--text);text-decoration:underline;text-underline-offset:4px;
  white-space:nowrap;transition:opacity .3s ease;display:flex;align-items:center;gap:8px;
}
.lets-talk:hover{opacity:.6}

/* Project image marquee */
/* ================================================
   APOLLO-STYLE PROJECT CARDS — Floating images + frosted glass
   ================================================ */
.apollo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  padding-bottom:80px;
}

.apollo-card{
  position:relative;
  text-decoration:none;
  color:#fff;
  background:transparent;
  border:none;
  height:460px;
  overflow:visible;
  transition:transform .5s var(--ease);
}
.apollo-card:hover{
  transform:translateY(-6px);
}
.apollo-card:hover .apollo-card-icon{
  transform:scale(1.08);
}

/* Glow layer — duplicate of image, blurred, shown on hover */
.apollo-card-glow{
  position:absolute;
  z-index:0;
  top:50px;bottom:60px;left:0;right:0;
  overflow:hidden;
  border-radius:18px;
  opacity:0;
  filter:brightness(1.6) saturate(1.5) blur(80px);
  transition:opacity .6s var(--ease);
  pointer-events:none;
}
.apollo-card-glow img{
  width:100%;height:100%;
  object-fit:cover;
}
.apollo-card:hover .apollo-card-glow{
  opacity:.15;
}

/* Image area — absolutely positioned like Apollo, resizes with card */
.apollo-card-surface{
  position:absolute;
  z-index:0;
  top:0;bottom:85px;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:center;
}

/* Floating image — margin-bottom pulls it down into the glass zone (~20% overlap) */
.apollo-float-img{
  width:88%;
  max-height:100%;
  object-fit:contain;
  display:block;
  position:relative;
  margin-bottom:-25px;
  transition:transform .6s var(--ease);
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.45));
}
.apollo-card:hover .apollo-float-img{
  transform:translateY(-8px) scale(1.03);
}

/* Frosted glass bar — absolute, overlays ON TOP of bottom of images */
.apollo-card-glass{
  position:absolute;
  z-index:1;
  bottom:10px;left:0;right:0;
  height:170px;
  padding:24px 28px 24px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:20px;
  box-shadow:rgba(0,0,0,.11) 0px 1px 2px -0.4px, rgba(0,0,0,.15) 0px 2px 4px -0.8px, rgba(0,0,0,.3) 0px 10px 18px -1.2px, rgba(0,0,0,.5) 0px -1px 1px 0px inset;
  transition:box-shadow .5s ease;
}

/* Badge pill */
.apollo-badge{
  display:inline-block;
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--mono);
  color:rgba(255,255,255,.55);
  padding:5px 14px;
  border-radius:100px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}

.apollo-card-title{
  font-size:clamp(20px,2.5vw,28px);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:2px;
}
.apollo-card-desc{
  font-size:12px;
  color:rgba(255,255,255,.4);
  line-height:1.45;
  max-width:75%;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Small icon — bottom right of glass bar */
.apollo-card-icon{
  position:absolute;
  bottom:24px;right:28px;
  width:40px;height:40px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:transform .4s var(--ease);
}

.apollo-card-icon--img{
  background:transparent;
  padding:0;
  overflow:hidden;
}
.apollo-card-icon--img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  border-radius:10px;
}

/* Light mode */
html.light .apollo-card-glass{
  background:rgba(255,255,255,.5);
  box-shadow:0 8px 32px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
html.light .apollo-badge{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.06);
  color:rgba(0,0,0,.45);
}
html.light .apollo-card-title{color:#111}
html.light .apollo-card-desc{color:rgba(0,0,0,.45)}

/* Old stacking cards — kept for other pages */
.projects-stack{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  position:relative;
}

.pcard{
  display:block;border-radius:20px;overflow:hidden;position:relative;
  position:sticky;top:80px;
  margin-bottom:24px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.pcard[data-index="0"]{top:80px;z-index:10}
.pcard[data-index="1"]{top:90px;z-index:11}
.pcard[data-index="2"]{top:100px;z-index:12}
.pcard[data-index="3"]{top:110px;z-index:13}
.pcard[data-index="4"]{top:120px;z-index:14}
.pcard[data-index="5"]{top:130px;z-index:15}
.pcard[data-index="6"]{top:140px;z-index:16}
.pcard[data-index="7"]{top:150px;z-index:17}
.pcard[data-index="8"]{top:160px;z-index:18}

.pcard-img{
  width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  position:relative;transition:transform .7s var(--ease);overflow:hidden;
  border-radius:20px;
}
.pcard:hover .pcard-img{transform:scale(1.01)}

/* Background image for project cards */
.pcard-bg-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
  filter:grayscale(100%) contrast(1.05) brightness(.95);
  transition:transform .6s var(--ease), filter .6s ease;
}
.pcard:hover .pcard-bg-img{
  transform:scale(1.02);
  filter:grayscale(0%) contrast(1) brightness(1);
}

.pcard-badge{
  position:absolute;top:20px;right:20px;
  background:var(--badge-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:#fff;font-size:13px;font-weight:500;
  padding:8px 20px;border-radius:100px;z-index:2;
  border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);letter-spacing:.04em;
}

.pcard-center{
  display:flex;align-items:center;justify-content:center;gap:12px;
  z-index:2;position:relative;
}

.pcard-logo{
  font-size:clamp(32px,4vw,56px);font-weight:700;color:rgba(255,255,255,.9);
  letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}

.pcard.stacked{
  transform:scale(0.96);
  filter:brightness(0.7);
}

/* ================================================
   SERVICES — Accordion (foliofy-inspired)
   ================================================ */
.services{padding:140px 0;border-top:1px solid var(--border)}
.services-head{margin-bottom:60px}
.services-title{
  font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;
  margin-top:8px;
}

.services-accordion{
  display:flex;flex-direction:column;
  max-width:800px;margin:0 auto;
}

/* Individual accordion item */
.svc-item{
  border-bottom:1px solid var(--border);
}

/* Header row — icon + name + chevron */
.svc-header{
  display:flex;align-items:center;gap:20px;
  width:100%;
  padding:28px 0;
  background:none;border:none;
  color:var(--text);
  cursor:pointer;
  font-family:var(--font);
  transition:opacity .3s ease;
}
.svc-header:hover{opacity:.7}

/* Icon circle with color variants */
.svc-icon{
  width:48px;height:48px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:transform .4s var(--ease), box-shadow .4s ease;
}
.svc-item[data-open] .svc-icon{
  transform:scale(1.08);
}
.svc-icon--purple{background:rgba(130,40,255,.15);color:#a855f7}
.svc-icon--blue{background:rgba(59,130,246,.15);color:#3b82f6}
.svc-icon--green{background:rgba(34,197,94,.15);color:#22c55e}
.svc-icon--orange{background:rgba(249,115,22,.15);color:#f97316}

html.light .svc-icon--purple{background:rgba(130,40,255,.1);color:#9333ea}
html.light .svc-icon--blue{background:rgba(59,130,246,.1);color:#2563eb}
html.light .svc-icon--green{background:rgba(34,197,94,.1);color:#16a34a}
html.light .svc-icon--orange{background:rgba(249,115,22,.1);color:#ea580c}

/* Service name */
.svc-name{
  font-size:clamp(22px,3vw,32px);
  font-weight:700;letter-spacing:-.02em;
  flex:1;text-align:left;
}

/* Chevron */
.svc-chevron{
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--dim);
  transition:transform .4s var(--ease), background .3s ease, border-color .3s ease;
}
html.light .svc-chevron{
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.08);
}
.svc-item[data-open] .svc-chevron{
  transform:rotate(180deg);
}

/* Expandable body */
.svc-body{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease), padding .4s var(--ease), opacity .4s ease;
  opacity:0;
  padding:0 0 0 68px;
}
.svc-item[data-open] .svc-body{
  max-height:200px;
  opacity:1;
  padding:0 0 28px 68px;
}

.svc-desc{
  font-size:15px;color:var(--dim);
  line-height:1.6;max-width:560px;
  margin-bottom:16px;
}

/* Tag pills */
.svc-tags{
  display:flex;flex-wrap:wrap;gap:8px;
}
.svc-tag{
  padding:6px 16px;
  border-radius:100px;
  font-size:12px;font-weight:500;
  letter-spacing:.02em;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:var(--dim);
  transition:background .3s ease, color .3s ease;
}
.svc-tag:hover{
  background:rgba(255,255,255,.14);
  color:var(--text);
}
html.light .svc-tag{
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.08);
}
html.light .svc-tag:hover{
  background:rgba(0,0,0,.1);
}

/* ================================================
   SOLUTIONS I PROVIDE — Zayla-style 4 cards
   ================================================ */
.solutions{padding:140px 0;border-top:1px solid var(--border)}
.solutions-head{margin-bottom:60px}
.solutions-title{
  font-size:clamp(32px,5vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;
  margin-top:8px;
}
.solutions-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.sol-card{
  position:relative;border-radius:16px;overflow:hidden;
  aspect-ratio:3/4;
  background:rgba(20,20,22,.9);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease;
  cursor:default;
}
.sol-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  border-color:rgba(255,255,255,.15);
}
.sol-card-bg{
  position:absolute;inset:0;z-index:0;
  opacity:.25;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.sol-card:hover .sol-card-bg{
  opacity:.45;
  transform:scale(1.05);
}
.sol-card-bg img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Gradient overlay for readability */
.sol-card::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(14,14,15,.3) 0%, rgba(14,14,15,.85) 100%);
  pointer-events:none;
}
.sol-card-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  height:100%;padding:28px 24px;
}
.sol-card-title{
  font-size:clamp(18px,2vw,24px);font-weight:800;
  letter-spacing:.02em;color:#fff;
  margin-bottom:auto;
}
.sol-card-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:0;
  margin-bottom:auto;margin-top:40px;
}
.sol-card-list li{
  font-size:13px;font-weight:500;
  color:rgba(255,255,255,.65);
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
  text-transform:uppercase;letter-spacing:.04em;
  font-family:var(--mono);
  transition:color .3s ease, padding-left .3s ease;
}
.sol-card:hover .sol-card-list li{
  color:rgba(255,255,255,.85);
}
.sol-card-list li:last-child{border-bottom:none}
.sol-card-num{
  font-size:clamp(48px,5vw,72px);font-weight:900;
  background:linear-gradient(135deg, rgba(130,40,255,.8) 0%, rgba(0,220,130,.8) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  text-align:right;line-height:1;
  margin-top:auto;
  transition:filter .4s ease;
}
.sol-card:hover .sol-card-num{
  filter:drop-shadow(0 0 12px rgba(130,40,255,.4));
}
/* Light mode */
html.light .sol-card{
  background:rgba(240,240,244,.9);
  border-color:rgba(0,0,0,.08);
}
html.light .sol-card:hover{
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.15);
}
html.light .sol-card::before{
  background:linear-gradient(180deg, rgba(245,245,247,.2) 0%, rgba(245,245,247,.88) 100%);
}
html.light .sol-card-title{color:var(--text)}
html.light .sol-card-list li{
  color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1);
}
html.light .sol-card:hover .sol-card-list li{color:rgba(0,0,0,.75)}

/* ================================================
   ABOUT
   ================================================ */
.about{padding:140px 0;border-top:1px solid var(--border)}
.tag{
  display:inline-block;font-size:12px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-bottom:24px;
  font-family:var(--mono);
}
.about-top{margin-bottom:80px}
.about-headline{
  font-size:clamp(24px,3vw,44px);font-weight:500;letter-spacing:-.02em;
  line-height:1.3;color:var(--text);max-width:780px;
}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
/* About portrait — horizontal glass card style (matches services cards) */
.about-portrait-wrap{margin-bottom:28px}
.about-portrait{
  position:relative;
  width:100%;max-width:280px;
  aspect-ratio:1/1;
  border-radius:20px;
  overflow:hidden;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  box-shadow:0 2px 20px var(--card-shadow), inset 0 1px 0 var(--glass-glow);
}
.about-portrait img{
  width:100%;height:100%;display:block;
  object-fit:cover;
  object-position:center 10%;
  border-radius:20px;
  transition:transform .6s var(--ease);
}
.portrait-neon{
  position:absolute;inset:0;
  border-radius:20px;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
  background:
    radial-gradient(ellipse 60% 80% at 30% 40%, rgba(160,50,255,.25) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 70% 60%, rgba(0,220,180,.2) 0%, transparent 65%);
  mix-blend-mode:screen;
}
/* Inner glow line at top like glass cards */
.about-portrait::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent 10%,var(--glass-glow-line) 50%,transparent 90%);
}
.about-portrait:hover img{
  transform:scale(1.03);
}
.about-portrait:hover .portrait-neon{
  opacity:1;
}

/* Available to jam badge */
.available-badge{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;
  font-size:12px;color:var(--muted);
  font-family:var(--mono);
  letter-spacing:.04em;
}
.available-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:#a040ff;
  box-shadow:0 0 6px rgba(160,64,255,.6), 0 0 12px rgba(160,64,255,.3);
  animation:availBlink 2s ease-in-out infinite;
}
@keyframes availBlink{
  0%,100%{opacity:1;box-shadow:0 0 6px rgba(160,64,255,.6), 0 0 12px rgba(160,64,255,.3)}
  50%{opacity:.4;box-shadow:0 0 3px rgba(160,64,255,.3), 0 0 6px rgba(160,64,255,.15)}
}
.available-text{color:#fff;font-weight:600;letter-spacing:.08em}
html.light .available-text{color:var(--text)}
.available-emoji{
  filter:none !important;
  opacity:1 !important;
  font-style:normal;
  display:inline-block;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important;
  -webkit-text-fill-color:initial !important;
  color:initial !important;
  mix-blend-mode:normal !important;
  font-size:14px;
}
html.light .available-emoji{
  filter:none !important;
  opacity:1 !important;
  -webkit-text-fill-color:initial !important;
  color:initial !important;
}
/* hover removed from services/tools */

.about-left{display:flex;flex-direction:column;gap:40px}
.about-bio p{font-size:16px;color:#fff;line-height:1.8;margin-bottom:20px}
.about-bio p:last-child{margin-bottom:0}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.about-cols--mobile{display:none}
.about-list h4{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:#fff;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--border);
  font-family:var(--mono);
}
.about-list li{font-size:14px;color:#fff;padding:9px 0;pointer-events:none}

/* ========== Tool icon grid — app-style ========== */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  max-width:220px;
}
.tool-icon{
  width:100%;
  aspect-ratio:1/1;
  border-radius:18px;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  pointer-events:none;
}

.tool-icon img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 35%;
  display:block;
}

/* ================================================
   CONTACT / FOOTER — with purple+green glow
   ================================================ */
.contact{
  position:relative;padding:180px 0 0;overflow:hidden;
  border-top:1px solid var(--border);
}
.contact-glow{
  position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);
  width:800px;height:500px;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 40% 50%, rgba(130,50,220,.2) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 60% 55%, rgba(30,200,130,.15) 0%, transparent 65%);
  filter:blur(80px);
}
.contact-content{
  position:relative;z-index:2;
  padding-bottom:80px;
}
.contact-inner{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:16px;
  max-width:700px;
}
.contact-cta-title{font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.03em;margin-bottom:4px}
.contact-cta-sub{font-size:15px;color:var(--dim);margin-bottom:8px}
.contact-email{
  font-size:clamp(18px,2vw,28px);font-weight:500;
  border-bottom:1px solid var(--border);padding-bottom:4px;
  transition:border-color .3s ease;
}
.contact-email:hover{border-color:var(--text)}

/* Contact page button — white on black glass */
.contact-page-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;border-radius:100px;
  background:rgba(255,255,255,.95);
  color:#0e0e0f;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  box-shadow:0 2px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.5);
}
.contact-page-btn:hover{
  background:#fff;
  border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
html.light .contact-page-btn{
  background:rgba(20,20,24,.9);
  color:#fff;
  border-color:rgba(0,0,0,.1);
  box-shadow:0 2px 16px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
html.light .contact-page-btn:hover{
  background:rgba(10,10,14,.95);
  box-shadow:0 8px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
}

/* Footer profile section */
.contact-footer-profile{
  display:flex;flex-direction:column;align-items:flex-start;
}
.contact-footer-profile .ct-profile{
  display:flex;align-items:center;gap:16px;
}
.contact-footer-profile .ct-avatar{
  width:80px;height:80px;
  border-radius:50%;overflow:hidden;
  border:2px solid var(--border);
  flex-shrink:0;
}
.contact-footer-profile .ct-avatar video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 15%;
}
.contact-footer-profile .ct-name{
  display:block;font-size:14px;font-weight:700;
  letter-spacing:.04em;color:var(--text);
}
.contact-footer-profile .ct-role{
  display:block;font-size:12px;color:var(--muted);
  font-family:var(--mono);letter-spacing:.02em;margin-top:2px;
}

.footer{border-top:1px solid var(--border);padding:24px 0;position:relative;z-index:2}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-links{display:flex;gap:28px}
.footer-links a,.footer-right a,.footer-right span{font-size:13px;color:var(--dim);transition:color .3s ease}
.footer-links a:hover,.footer-right a:hover{color:var(--text)}
.footer-right{display:flex;align-items:center;gap:10px}
.footer-sep{color:var(--muted)}

/* ================================================
   SCROLL REVEAL
   ================================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ================================================
   ANIMATIONS
   ================================================ */
@keyframes fadeIn{to{opacity:1}}
/* heroFade removed — letters now animate individually */
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes glowFade{from{opacity:0}to{opacity:1}}

@keyframes itemPop{
  from{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.6)}
  to{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}
}

@keyframes float{
  0%,100%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateY(0)}
  50%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateY(var(--float-y,-12px))}
}

/* ================================================
   LIGHT MODE — Additional overrides
   ================================================ */
html.light .hero-vignette{
  background:radial-gradient(ellipse 85% 80% at 50% 50%, transparent 50%, rgba(245,245,247,.55) 100%);
}
html.light .hero-glow{
  background:
    radial-gradient(ellipse 45% 55% at 30% 45%, rgba(130,40,255,.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 55%, rgba(0,220,130,.12) 0%, transparent 65%),
    radial-gradient(ellipse 30% 25% at 50% 50%, rgba(200,50,180,.06) 0%, transparent 55%);
}
html.light .c-item::after{opacity:.2}
html.light .transition-line{color:var(--text)}
html.light .pcard{box-shadow:0 10px 40px rgba(0,0,0,.1)}
html.light .pcard-logo{color:rgba(255,255,255,.95)}
html.light .marquee{border-color:var(--border)}
html.light .contact-glow{
  background:
    radial-gradient(ellipse 55% 50% at 40% 50%, rgba(130,50,220,.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 60% 55%, rgba(30,200,130,.06) 0%, transparent 65%);
}
html.light .contact-email{border-color:var(--border)}
html.light .contact-email:hover{border-color:var(--text)}
html.light .hero-portrait{box-shadow:0 20px 60px rgba(0,0,0,.12)}
html.light .about-bio p{color:var(--text)}
html.light .about-list li{color:var(--text)}
html.light .about-list h4{color:var(--text)}

/* ================================================
   RESPONSIVE — TABLET (1024px)
   ================================================ */
@media(max-width:1024px){
  :root{--gutter:32px}

  .c-item{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0.85)}

  .projects-head{flex-direction:column;align-items:flex-start;gap:16px}
  .about-grid{gap:48px}
  .contact-inner{gap:16px}

  .glass-card-inner{flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px}
  .glass-desc{text-align:left;max-width:none}

  .hero-content{gap:32px}
  .hero-text{max-width:60%}
  .hero-portrait{flex:0 0 30%;max-width:240px}
}

/* ================================================
   RESPONSIVE — MOBILE (810px)
   ================================================ */
@media(max-width:810px){
  :root{--gutter:20px}
  .nav{height:64px}
  .blur-header{height:90px}

  .hero-line{font-size:clamp(44px,8vw,80px)}
  .c-item{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0.85)}

  /* Hero mobile — stack vertically */
  .hero{padding-left:var(--gutter);padding-right:var(--gutter)}
  .hero-content{flex-direction:column;align-items:flex-start;gap:24px}
  .hero-text{max-width:100%}
  .hero-portrait{flex:0 0 auto;max-width:200px;align-self:center;margin-left:0}
  .hero-bio{max-width:100%}

  .intro{padding:0 0 40px;margin-top:-20px}
  .intro-text{font-size:clamp(14px,3.5vw,20px)}

  .marquee{padding:16px 0}
  .marquee-track span{padding:0 24px}
  .marquee-track span img{height:25px}

  .projects{padding:60px 0 0}
  .projects-stack{padding:0 var(--gutter)}

  .apollo-grid{grid-template-columns:1fr;gap:8px}
  .apollo-card{height:auto;display:flex;flex-direction:column;position:relative}
  .apollo-card-surface{position:relative;top:auto;bottom:auto;left:auto;right:auto;height:200px;display:flex;align-items:flex-end;justify-content:center}
  .apollo-float-img{margin-bottom:-18px}
  .apollo-card-glass{position:relative;bottom:auto;left:auto;right:auto;padding:18px 22px 20px;border-radius:16px;height:auto}
  .apollo-card-title{font-size:20px}
  .apollo-card-desc{font-size:11px;max-width:70%;-webkit-line-clamp:5}
  .apollo-card-icon{width:34px;height:34px;font-size:12px;bottom:18px;right:22px}
  .apollo-badge{font-size:9px;padding:4px 10px;margin-bottom:6px}
  .apollo-card-glow{display:none}
  .apollo-card:hover .apollo-card-glow{opacity:0}

  .pcard-img{aspect-ratio:4/3}

  .pcard[data-index="0"]{top:64px}
  .pcard[data-index="1"]{top:70px}
  .pcard[data-index="2"]{top:76px}
  .pcard[data-index="3"]{top:82px}
  .pcard[data-index="4"]{top:88px}
  .pcard[data-index="5"]{top:94px}
  .pcard[data-index="6"]{top:100px}
  .pcard[data-index="7"]{top:106px}
  .pcard[data-index="8"]{top:112px}

  .pcard-logo{font-size:clamp(24px,6vw,36px)}
  .pcard-badge{padding:6px 14px;font-size:11px;top:12px;right:12px}

  .services{padding:80px 0}
  .solutions{padding:80px 0}
  .solutions-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-portrait{max-width:180px}
  .about-cols--desktop{display:none}
  .about-cols--mobile{display:grid;grid-template-columns:1fr 1fr}
  .about-cols{gap:32px}

  /* Dock mobile adjustments */
  .dock{bottom:12px;left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 24px)}
  .dock-inner{
    background:rgba(20,20,22,.85);
    border-color:rgba(255,255,255,.12);
    box-shadow:0 4px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  }
  html.light .dock-inner{
    background:rgba(255,255,255,.88);
    border-color:rgba(0,0,0,.1);
    box-shadow:0 4px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5);
  }
  .dock-item{padding:8px 16px}
  .dock-item svg{width:20px;height:20px}
  .dock-item span{font-size:10px}

  .contact{padding:100px 0 0}
  /* Extra bottom padding so content isn't hidden behind dock */
  .footer{padding-bottom:80px}

  .footer-inner{flex-direction:column;gap:16px;text-align:center}
  .footer-links{justify-content:center}
  .footer-right{justify-content:center}
}

@media(max-width:480px){
  .hero-line{font-size:40px}
  .pcard-img{aspect-ratio:3/2}
  .pcard-logo{font-size:20px}
  .about-cols{grid-template-columns:1fr}
  .solutions-grid{grid-template-columns:1fr}
  .sol-card{aspect-ratio:4/3}
  .pcard{border-radius:14px}
  .pcard-img{border-radius:14px}
  .hero-portrait{max-width:200px}

  .marquee{padding:14px 0}
  .marquee-track span{padding:0 18px}
  .marquee-track span img{height:21px}
}