:root{
  --bg: #0D0A16;
  --card-bg: rgba(21,16,36,0.75);
  --tile-bg: rgba(21,16,36,0.6);
  --cyan: #7C5CFA;
  --cyan-bright: #B4A1FF;
  --cyan-dim: rgba(var(--accent-rgb),0.35);
  --cyan-glow: rgba(var(--accent-rgb),0.25);
  --text: #F1EDFF;
  --text-secondary: #bdb0d9;
  --text-muted: #7d7196;
  --grid-line: rgba(var(--accent2-rgb),0.03);
  --header-bg: rgba(13,10,22,0.92);
  --header-border: rgba(var(--accent2-rgb),0.07);
  --nav-mobile-bg: #151024;
  --avatar-img: url("../img/avatar.webp");
  --accent-rgb: 124,92,250;
  --accent2-rgb: 180,161,255;
}

html[data-theme="light"]{
  --bg: #F1EDFF;
  --card-bg: rgba(255,255,255,0.72);
  --tile-bg: rgba(255,255,255,0.58);
  --cyan: #5A3FDB;
  --cyan-bright: #3f2a9e;
  --cyan-dim: rgba(90,63,219,0.35);
  --cyan-glow: rgba(90,63,219,0.20);
  --text: #151024;
  --text-secondary: #4a3f66;
  --text-muted: #6f6484;
  --grid-line: rgba(21,16,36,0.06);
  --header-bg: rgba(241,237,255,0.94);
  --header-border: rgba(21,16,36,0.1);
  --nav-mobile-bg: #ffffff;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan-dim) var(--bg);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{
  background:var(--cyan-dim);
  border-radius:999px;
  border:2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover{ background:var(--cyan); }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  transition:background .4s ease, color .4s ease;
}

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

.mono{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.1em;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

::selection{ background:var(--cyan); color:#000; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--cyan-bright);
  outline-offset:3px;
}

/* ============ BACKGROUND GRID + GLOW ============ */
.bg-fx{
  position:fixed;
  top:-80px; left:0; right:0; bottom:-80px;
  z-index:-1;
  overflow:hidden;
  background:var(--bg);
  transition:background .4s ease;
  will-change:transform;
}
.bg-fx::before, .bg-fx::after{
  content:'';
  position:absolute;
  border-radius:50%;
  will-change:transform;
}
.bg-fx::before{
  width:800px; height:800px;
  top:-310px; left:5%;
  background:radial-gradient(circle, var(--cyan-glow) 0%, rgba(var(--accent-rgb),0.06) 40%, transparent 70%);
  animation:driftOne 22s ease-in-out infinite;
}
.bg-fx::after{
  width:740px; height:740px;
  top:14%; right:-210px;
  background:radial-gradient(circle, var(--cyan-glow) 0%, rgba(var(--accent-rgb),0.06) 40%, transparent 70%);
  animation:driftTwo 26s ease-in-out infinite;
}
.bg-grid{
  position:absolute;
  inset:-42px;
  background:
    repeating-linear-gradient(0deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 42px),
    repeating-linear-gradient(90deg, var(--grid-line) 0px, var(--grid-line) 1px, transparent 1px, transparent 42px);
  animation:gridPan 50s linear infinite;
}
.bg-glow-low{
  position:absolute;
  bottom:-250px; left:50%;
  width:1000px; height:600px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse, var(--cyan-glow) 0%, rgba(var(--accent-rgb),0.05) 40%, transparent 70%);
  animation:driftThree 30s ease-in-out infinite;
  will-change:transform;
}
.bg-grain{
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:0.035;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes driftOne{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(60px, 40px) scale(1.12); }
}
@keyframes driftTwo{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-50px, 60px) scale(1.08); }
}
@keyframes driftThree{
  0%, 100%{ transform:translate(-50%, 0) scale(1); opacity:0.7; }
  50%{ transform:translate(-50%, -30px) scale(1.1); opacity:1; }
}
@keyframes gridPan{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(42px,42px); }
}

@media (prefers-reduced-motion: reduce){
  .bg-fx::before, .bg-fx::after, .bg-grid, .bg-glow-low{ animation:none; }
}

/* ============ NAV ============ */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:500;
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  transition:background .4s ease, border-color .4s ease;
}
nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1180px;
  margin:0 auto;
  padding:14px 32px;
}
@media (min-width:901px){
  nav{ padding:24px 40px; }
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  transition:opacity .25s ease;
}
.brand:hover{ opacity:0.82; }
.brand:hover .brand-icon{ box-shadow:0 0 18px var(--cyan-glow); transform:scale(1.06); }
.brand-icon{
  width:34px; height:34px;
  border-radius:50%;
  border:1.5px solid var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
  background-image:var(--avatar-img);
  background-size:cover;
  background-position:center 30%;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:22px;
}
.nav-portfolio-link{
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
  text-shadow:none;
  transition:color .25s ease, text-shadow .25s ease;
}
.nav-portfolio-link:hover{
  color:var(--cyan);
  text-shadow:0 0 14px var(--cyan-glow);
}

.theme-toggle{
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid var(--cyan-dim);
  background:transparent;
  color:var(--cyan);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.theme-toggle:hover{ box-shadow:0 0 14px var(--cyan-glow); border-color:var(--cyan); transform:translateY(-2px); }
.theme-toggle:active{ transform:translateY(0) scale(0.92); }
.theme-toggle svg{ width:15px; height:15px; transition:transform .4s ease, opacity .25s ease; }
.theme-toggle .icon-moon{ display:none; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
html[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.btn-contact{
  padding:9px 20px;
  border-radius:999px;
  border:1px solid var(--cyan);
  color:var(--text);
  font-size:0.82rem;
  font-weight:700;
  box-shadow:0 0 10px rgba(var(--accent-rgb),0.25), 0 0 2px rgba(var(--accent-rgb),0.3) inset;
  transition:box-shadow .25s ease, background .25s ease, transform .25s ease, border-color .25s ease;
}
.btn-contact.glow-text{ color:var(--cyan); }
.btn-contact:hover{
  box-shadow:0 0 26px var(--cyan-glow);
  background:rgba(var(--accent-rgb),0.1);
  border-color:var(--cyan-bright);
  transform:translateY(-2px) scale(1.06);
}

@media (max-width:600px){
  .nav-right{ gap:14px; }
  .nav-portfolio-link{ font-size:0.72rem; }
  .btn-contact{ padding:8px 14px; font-size:0.76rem; }
}

/* ============ HERO CARD ============ */
.hero{
  padding:22px 24px 100px;
  display:flex;
  justify-content:center;
}
.profile-card{
  width:100%;
  max-width:600px;
  background:var(--card-bg);
  border:1px solid var(--cyan-dim);
  border-radius:24px;
  padding:52px 40px 40px;
  text-align:center;
  animation:cardBreathe 7s ease-in-out infinite;
}
.mega-card{
  position:relative;
  max-width:1140px;
  padding:96px 64px;
  display:flex;
  align-items:center;
  gap:80px;
}
.mega-card::after{
  content:'';
  position:absolute;
  inset:16px;
  pointer-events:none;
  background:
    linear-gradient(var(--cyan) 0 0) top left / 26px 2px no-repeat,
    linear-gradient(var(--cyan) 0 0) top left / 2px 26px no-repeat,
    linear-gradient(var(--cyan) 0 0) top right / 26px 2px no-repeat,
    linear-gradient(var(--cyan) 0 0) top right / 2px 26px no-repeat,
    linear-gradient(var(--cyan) 0 0) bottom left / 26px 2px no-repeat,
    linear-gradient(var(--cyan) 0 0) bottom left / 2px 26px no-repeat,
    linear-gradient(var(--cyan) 0 0) bottom right / 26px 2px no-repeat,
    linear-gradient(var(--cyan) 0 0) bottom right / 2px 26px no-repeat;
  opacity:0.45;
  border-radius:18px;
}

@keyframes cardBreathe{
  0%, 100%{ box-shadow:0 0 60px rgba(var(--accent-rgb),0.10), inset 0 0 40px rgba(var(--accent-rgb),0.03); }
  50%{ box-shadow:0 0 84px rgba(var(--accent-rgb),0.18), inset 0 0 40px rgba(var(--accent-rgb),0.05); }
}

.hero-top{
  flex:0 1 560px;
  max-width:560px;
  margin:0;
  text-align:left;
}

.avatar-ring{
  width:116px; height:116px;
  border-radius:50%;
  margin:0 auto 28px;
  border:1.5px solid var(--cyan);
  box-shadow:0 0 26px var(--cyan-glow);
  padding:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  isolation:isolate;
  transition:box-shadow .4s ease, transform .4s ease;
}
.avatar-ring::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0%, var(--cyan) 18%, transparent 36%);
  opacity:0.55;
  transition:opacity .4s ease;
  animation:spinRing 3.5s linear infinite;
  z-index:-1;
}
.avatar-ring:hover{
  box-shadow:0 0 40px var(--cyan-glow), 0 0 70px rgba(var(--accent-rgb),0.2);
  transform:scale(1.06);
}
.avatar-ring:hover::before{ opacity:0.9; }
@keyframes spinRing{ to{ transform:rotate(360deg); } }
.avatar-inner{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  box-shadow:inset 0 0 14px rgba(0,0,0,0.5);
}
.avatar-gif{
  background-image:var(--avatar-img);
  background-size:cover;
  background-position:center;
}
.avatar-video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}

.handle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:2.1rem;
  font-weight:800;
  letter-spacing:0.02em;
}

@keyframes verifiedPulse{
  0%, 100%{ box-shadow:0 0 0 0 var(--cyan-glow); transform:scale(1); }
  50%{ box-shadow:0 0 10px 3px var(--cyan-glow); transform:scale(1.08); }
}

/* ============ GLOW / SHIMMER TEXT EFFECT ============ */
.glow-text{
  position:relative;
  display:inline-block;
  overflow:hidden;
  color:var(--cyan);
  text-shadow:0 0 20px var(--cyan-glow), 0 0 42px var(--cyan-glow);
}
.glow-text::after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:55%;
  height:100%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(var(--accent-rgb),0.25) 30%,
    rgba(255,255,255,0.95) 50%,
    rgba(var(--accent-rgb),0.25) 70%,
    transparent 100%);
  transform:translateX(-220%) skewX(-15deg);
  animation:shimmerSlide 3.2s linear infinite;
  pointer-events:none;
}
@keyframes shimmerSlide{
  0%{ transform:translateX(-220%) skewX(-15deg); }
  100%{ transform:translateX(280%) skewX(-15deg); }
}

.bio{
  margin:26px auto 0;
  max-width:38ch;
  color:var(--text-secondary);
  font-size:0.98rem;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border-radius:999px;
  background:linear-gradient(120deg, var(--cyan) 0%, var(--cyan-bright) 100%);
  color:#1e1033;
  font-weight:700;
  font-size:0.9rem;
  box-shadow:0 0 20px rgba(var(--accent-rgb),0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 30px rgba(var(--accent-rgb),0.5); }
/* light theme: the gradient turns into deep violet, so the label goes white */
html[data-theme="light"] .btn-primary{ color:var(--text-light-on-violet, #F1EDFF); }
.btn-primary svg{ width:14px; height:14px; }

@media (max-width:600px){
  .profile-card{ padding:40px 24px 32px; }
  .handle{ font-size:1.7rem; }
}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Pauses continuous animations while their element is off-screen, to cut down on
   simultaneous animated layers during scroll on lower-power machines */
.anim-idle, .anim-idle::before, .anim-idle::after,
.anim-idle *, .anim-idle *::before, .anim-idle *::after{
  animation-play-state:paused !important;
}

/* ============ SKILLSET & SPECIALTIES ============ */

.label-tag{
  font-size:0.78rem;
  font-weight:700;
  color:var(--cyan);
  margin-bottom:22px;
}

.tools-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.tool-tile{
  position:relative;
  overflow:hidden;
  width:60px; height:60px;
  border-radius:16px;
  background:var(--tile-bg);
  border:1px solid var(--cyan-dim);
  box-shadow:0 0 14px rgba(var(--accent-rgb),0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.9rem;
  color:var(--cyan);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.tool-tile::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(var(--accent-rgb),0.4), transparent);
  transform:translateX(-160%) skewX(-20deg);
  animation:tileSheen 3.2s ease-in-out infinite;
}
@keyframes tileSheen{
  0%{ transform:translateX(-160%) skewX(-20deg); }
  100%{ transform:translateX(310%) skewX(-20deg); }
}
.tool-tile:hover{
  box-shadow:0 0 26px var(--cyan-glow), inset 0 0 14px rgba(var(--accent-rgb),0.12);
  transform:translateY(-5px) scale(1.08) rotate(-2deg);
  border-color:var(--cyan);
  background:rgba(var(--accent-rgb),0.08);
}

.specialty-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.specialty-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.96rem;
  color:var(--text-secondary);
}
.dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
  flex-shrink:0;
}

@media (max-width:860px){
  .mega-card{
    flex-direction:column;
    align-items:stretch;
    gap:40px;
    padding:44px 32px 40px;
  }
  .hero-top{ max-width:100%; }
}

/* ============ HERO TOPBAR (REC + timecode) ============ */
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid var(--cyan-dim);
  background:rgba(var(--accent-rgb),0.06);
  font-size:0.72rem;
  font-weight:600;
  color:var(--text);
}
.hero-pill .dot{ width:7px; height:7px; }
.hero-pill{ letter-spacing:0.18em; font-weight:700; }
.rec-dot{
  background:var(--cyan);
  animation:recBlink 1.4s ease-in-out infinite;
}
/* "Reduce motion" (common on phones/Windows) shrinks every animation to ~0ms, which made
   the REC dot flicker non-stop; keep its calm blink at the normal speed instead */
@media (prefers-reduced-motion: reduce){
  .rec-dot{
    animation-duration:1.4s !important;
    animation-iteration-count:infinite !important;
  }
}
@keyframes recBlink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.2; }
}
.hero-topbar{
  flex:1 0 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:6px;
}
.hero-timecode{
  padding:8px 14px;
  border-radius:8px;
  background:rgba(var(--accent-rgb),0.12);
  color:var(--cyan-bright);
  font-size:0.86rem;
  font-weight:700;
  letter-spacing:0.08em;
  font-variant-numeric:tabular-nums;
}

/* ============ HERO (brand left, about video right) ============ */
.hero{
  min-height:100vh;
  min-height:100svh;
  align-items:center;
  padding:104px 24px 80px;
}
.mega-card.hero-card{
  flex-wrap:wrap;
  text-align:left;
  align-items:flex-start;
  column-gap:56px;
  row-gap:36px;
  padding:48px 64px 64px;
}
.hero-top{
  flex:0 1 580px;
  margin:0 auto;
  max-width:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* same width and 16:9 shape as the About me video, so both read as a matching pair */
.hero-brand-box{
  width:100%;
  container-type:inline-size;
  padding:12px 0 4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hero-avatar.avatar-ring{
  width:clamp(84px, 22cqw, 116px);
  height:clamp(84px, 22cqw, 116px);
  margin:0 0 20px;
  padding:6px;
}
.hero-logo-row{
  --logo-w:clamp(240px, calc(100cqw - 100px), 460px);
  display:flex;
  align-items:center;
  gap:12px;
}
.hero-avatar, .hero-logo-row, .intro-tagline{ align-self:center; }
.intro-leo, .intro-reed{ height:auto; min-width:0; }
.intro-leo{ width:calc(var(--logo-w) * 0.4208); }
.intro-reed{
  width:calc(var(--logo-w) * 0.5542);
  margin-left:calc(var(--logo-w) * 0.025 - 12px);
}
.intro-tagline{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:22px;
  font-size:clamp(0.78rem, 3.2cqw, 1rem);
  font-weight:700;
  letter-spacing:0.3em;
}
.intro-tagline .c1{ color:var(--cyan-bright); }
.intro-tagline .c2{ color:var(--text); }
.intro-line{
  width:32px;
  height:2px;
  background:var(--cyan);
  border-radius:2px;
}
.hero-top .bio{
  margin:22px 0 0;
  max-width:34ch;
  align-self:center;
  text-align:center;
  font-size:1.1rem;
}
.hero-top .hero-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  align-self:stretch;
  gap:22px;
  margin-top:34px;
}
.intro-since{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.3em;
  color:var(--text-secondary);
}
.intro-since-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan-bright);
  box-shadow:0 0 10px var(--cyan-glow), 0 0 4px var(--cyan-bright);
  flex-shrink:0;
  animation:verifiedPulse 2.6s ease-in-out infinite;
}
.intro-since .since-sep{ color:var(--text-muted); }

.hero-side{
  flex:1 1 400px;
  min-width:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:32px;
}
.hero-about .video-card{
  flex:none;
  width:100%;
  aspect-ratio:16/9;
}
.hero-about .video-card:hover{ transform:translateY(-4px) scale(1.02); }
.hero-skills{
  display:flex;
  flex-wrap:wrap;
  gap:28px 44px;
}
.hero-skills .label-tag{ margin-bottom:16px; }
.hero-skills .tool-tile{ width:52px; height:52px; border-radius:14px; }
.hero-skills .specialty-list{
  display:grid;
  grid-template-columns:repeat(2, auto);
  gap:10px 26px;
}
.hero-skills .specialty-item{ font-size:0.92rem; }

@media (max-width:1024px){
  .hero{ padding:92px 14px 72px; min-height:0; }
  .mega-card.hero-card{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:32px;
    padding:36px 26px 40px;
  }
  .hero-topbar{ flex:none; margin-bottom:0; }
  .hero-timecode{ padding:6px 10px; font-size:0.7rem; }
  .hero-pill{ padding:5px 12px; font-size:0.7rem; }
  .hero-logo-row{ --logo-w:min(440px, calc(100vw - 150px)); }
  /* phone: both columns melt into one list so See Portfolio can sit under the About me video */
  .mega-card.hero-card{ gap:0; }
  .hero-top, .hero-side, .hero-top .hero-actions{ display:contents; }
  .hero-topbar{ order:0; margin-bottom:26px; }
  .hero-brand-box{ order:1; aspect-ratio:auto; }
  .hero-avatar.avatar-ring{ width:96px; height:96px; }
  .intro-tagline{ font-size:0.8rem; }
  .hero-top .bio{ order:4; }
  .intro-since{ order:6; margin-top:22px; align-self:center; }
  .hero-about{ order:6; margin-top:28px; }
  .hero-top .btn-primary{ order:5; align-self:center; margin-top:28px; }
  .hero-skills{ order:8; margin-top:36px; }
}
@media (max-width:600px){
  .hero-logo-row{ gap:10px; }
  .hero-skills{ display:none; }
  .intro-reed{ margin-left:calc(var(--logo-w) * 0.025 - 10px); }
  .intro-tagline{ gap:10px; letter-spacing:0.2em; font-size:0.72rem; margin-top:20px; }
  .intro-line{ width:18px; }
  .hero-top .bio{ font-size:1rem; }
  .intro-since{ letter-spacing:0.16em; gap:9px; }
}

/* ============ STATS ============ */

/* ============ SHOWCASE / PORTFOLIO ============ */
.showcase{ padding:100px 24px 0; }
/* the rows follow straight after the PORTFOLIO title */
.showcase + .showcase{ padding-top:0; }
.showcase-title{
  font-family:'Unbounded', sans-serif;
  font-size:clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:44px;
}

.group-label{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:0.95rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cyan-bright);
  text-shadow:0 0 14px var(--cyan-glow);
  margin-bottom:20px;
}
.group-label::before{
  content:'';
  width:28px;
  height:2px;
  border-radius:2px;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
}

/* ============ WORK CAPTIONS (spec sheet under each video) ============ */
.showcase-note{
  max-width:60ch;
  margin:-26px 0 44px;
  color:var(--text-secondary);
  font-size:0.95rem;
}
.work-item{
  flex:0 0 calc((100% - 40px) / 3);
  min-width:0;
  scroll-snap-align:start;
}
.work-item .video-card,
.work-item .short-card{ width:100%; flex:none; }
.work-item .video-card:hover{ transform:scale(1.04) translateY(-4px); }
.work-item .short-card:hover{ transform:scale(1.04) translateY(-4px); }
.shorts-grid .work-item{ flex:0 0 260px; }
.work-meta{ margin-top:16px; text-align:left; }
.work-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.7rem;
  font-weight:700;
  color:var(--cyan);
}
.work-kicker .sep{ color:var(--text-muted); }
.work-kicker .time{ color:var(--text-muted); font-variant-numeric:tabular-nums; }
.work-title{
  margin-top:6px;
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  color:var(--text);
}
.work-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
  list-style:none;
}
.work-chips li{
  padding:4px 10px;
  border-radius:8px;
  border:1px solid var(--cyan-dim);
  background:var(--tile-bg);
  font-family:'JetBrains Mono', monospace;
  font-size:0.66rem;
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--cyan-bright);
}
.hero-about .work-meta{ margin-top:14px; }
@media (max-width:1000px){
  .long-grid .work-item{ flex-basis:420px; }
}
@media (max-width:600px){
  .long-grid .work-item{ flex-basis:78vw; }
  .shorts-grid .work-item{ flex-basis:46vw; }
  .showcase-note{ margin-top:-30px; font-size:0.9rem; }
}

.row-wrap{
  position:relative;
  margin-bottom:56px;
}
.row-wrap:last-of-type{ margin-bottom:80px; }
.row-nav{
  position:absolute;
  top:38%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,10,22,0.7);
  border:1px solid var(--cyan-dim);
  color:var(--text);
  z-index:10;
  opacity:0;
  transition:opacity .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.row-nav svg{ width:20px; height:20px; }
.row-nav-prev{ left:10px; }
.row-nav-next{ right:10px; }
.row-wrap:hover .row-nav{ opacity:0.9; }
.row-nav:hover{ opacity:1 !important; box-shadow:0 0 14px var(--cyan-glow); }
/* touch screens: keep the arrows visible so the row reads as a gallery */
@media (hover:none){
  .row-nav{ opacity:0.92; }
  .row-nav-prev{ left:2px; }
  .row-nav-next{ right:2px; }
}

.long-grid{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  padding:14px 4px 22px;
  -ms-overflow-style:none;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan-dim) transparent;
}
.long-grid::-webkit-scrollbar{ height:6px; }
.long-grid::-webkit-scrollbar-thumb{ background:var(--cyan-dim); border-radius:999px; }
.long-grid::-webkit-scrollbar-track{ background:transparent; }
.video-card{
  position:relative;
  flex:0 0 520px;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--cyan-dim);
  box-shadow:0 0 24px rgba(var(--accent-rgb),0.10);
  background:#07090a;
  cursor:pointer;
  scroll-snap-align:start;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, z-index 0s;
}
.video-card:hover{
  transform:scale(1.1) translateY(-4px);
  box-shadow:0 16px 44px rgba(0,0,0,0.55), 0 0 42px var(--cyan-glow);
  z-index:5;
}
.video-card iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
}
.video-poster{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-color:#0b1112;
  transition:transform .5s ease, filter .4s ease;
}
.video-poster::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--tile-bg);
  animation:skeletonPulse 1.4s ease-in-out infinite;
  transition:opacity .4s ease;
}
.video-poster.loaded::after{ opacity:0; animation:none; }
@keyframes skeletonPulse{
  0%, 100%{ opacity:0.5; }
  50%{ opacity:0.9; }
}
.video-card:hover .video-poster, .short-card:hover .video-poster{
  filter:brightness(0.75);
}
.play-btn{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:58px; height:58px;
  border-radius:50%;
  background:rgba(5,6,7,0.6);
  border:1.5px solid var(--cyan);
  box-shadow:0 0 22px var(--cyan-glow);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:transform .3s ease, box-shadow .3s ease;
  pointer-events:none;
}
.video-card:hover .play-btn, .short-card:hover .play-btn{
  box-shadow:0 0 32px var(--cyan-glow);
  transform:translate(-50%,-50%) scale(1.1);
}
.play-btn svg{ width:20px; height:20px; margin-left:3px; }
.play-btn-sm{ width:44px; height:44px; }
.play-btn-sm svg{ width:15px; height:15px; margin-left:2px; }
.video-poster.thumb-error{ background:linear-gradient(135deg, var(--tile-bg), #0b1112); }
.card-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:16px;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.75) 100%);
  pointer-events:none;
}

.card-badge{
  padding:5px 12px;
  border-radius:999px;
  background:rgba(5,6,7,0.7);
  border:1px solid var(--cyan-dim);
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.06em;
  color:var(--cyan-bright);
  text-transform:uppercase;
  white-space:nowrap;
  margin-left:auto;
}
/* the badge always sits on a dark video frame, so it keeps the light violet in both themes */
html[data-theme="light"] .card-badge{ color:#B4A1FF; border-color:rgba(var(--accent2-rgb),0.35); }

@media (max-width:600px){
  /* the next card peeks in, so it is clear the row continues */
  .video-card{ flex-basis:78vw; }
}

.shorts-grid{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  padding:14px 4px 22px;
  scrollbar-width:thin;
  scrollbar-color:var(--cyan-dim) transparent;
}
.shorts-grid::-webkit-scrollbar{ height:6px; }
.shorts-grid::-webkit-scrollbar-thumb{ background:var(--cyan-dim); border-radius:999px; }
.shorts-grid::-webkit-scrollbar-track{ background:transparent; }
.short-card{
  position:relative;
  flex:0 0 260px;
  aspect-ratio:9/16;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--cyan-dim);
  box-shadow:0 0 20px rgba(var(--accent-rgb),0.10);
  background:#07090a;
  cursor:pointer;
  scroll-snap-align:start;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, z-index 0s;
}
.short-card:hover{
  transform:scale(1.1) translateY(-4px);
  box-shadow:0 14px 38px rgba(0,0,0,0.55), 0 0 36px var(--cyan-glow);
  z-index:5;
}
.short-card iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
}

@media (max-width:600px){
  .short-card{ flex-basis:46vw; }
}

/* ============ SHORTS FULL-SCREEN VIEWER (phones) ============ */
.short-viewer{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(13,10,22,0.96);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.short-viewer.open{ opacity:1; pointer-events:auto; }
.short-viewer-frame{
  position:relative;
  height:min(100%, calc(100vw * 16 / 9));
  aspect-ratio:9/16;
  max-width:100%;
}
.short-viewer-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.short-viewer-close{
  position:absolute;
  top:calc(14px + env(safe-area-inset-top, 0px));
  right:14px;
  z-index:1;
  width:40px; height:40px;
  border-radius:50%;
  border:1px solid var(--cyan-dim);
  background:rgba(13,10,22,0.85);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
}
.short-viewer-close svg{ width:18px; height:18px; }
.fs-pill{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--cyan-dim);
  background:rgba(13,10,22,0.82);
  color:var(--text);
  font-size:0.64rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.fs-pill.show{ opacity:1; transform:translateY(0); }
.fs-pill:active{ box-shadow:0 0 16px var(--cyan-glow); }
.fs-pill svg{ width:13px; height:13px; color:var(--cyan-bright); }

.short-viewer-frame{ transition:transform .22s ease; }
/* long-form videos use the same viewer, laid out 16:9 */
.short-viewer.wide .short-viewer-frame{
  width:100%;
  height:auto;
  max-width:min(100%, calc(100vh * 16 / 9));
  aspect-ratio:16/9;
}
.short-viewer.wide .short-viewer-count,
.short-viewer.wide .short-viewer-hint{ display:none; }
.short-viewer-count{
  position:absolute;
  top:calc(22px + env(safe-area-inset-top, 0px));
  left:18px;
  z-index:1;
  font-size:0.7rem;
  color:var(--text-secondary);
}
.short-viewer-hint{
  position:absolute;
  bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  left:50%;
  z-index:1;
  transform:translateX(-50%) translateY(8px);
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--cyan-dim);
  background:rgba(13,10,22,0.85);
  color:var(--text-secondary);
  font-size:0.66rem;
  letter-spacing:0.08em;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.short-viewer-hint.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Section titles (PORTFOLIO / MY CHANNELS / LET'S TALK): white text, violet light sweep */
.showcase-title.glow-text,
.connect-title.glow-text{
  color:var(--text);
  text-shadow:0 0 18px var(--cyan-glow), 0 0 40px var(--cyan-glow);
}
.showcase-title.glow-text::after,
.connect-title.glow-text::after{
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(var(--accent-rgb),0.25) 30%,
    rgba(var(--accent-rgb),0.85) 50%,
    rgba(var(--accent-rgb),0.25) 70%,
    transparent 100%);
}

/* ============ TRUSTED BY ============ */

/* ============ CONNECT ============ */
.connect{ padding:100px 24px 60px; }
.connect-title{
  font-family:'Unbounded', sans-serif;
  font-size:clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:22px;
}
.connect-intro{
  max-width:60ch;
  margin-bottom:14px;
  color:var(--text-secondary);
  font-size:1rem;
}
.connect-perks{
  margin-bottom:44px;
  color:var(--text-secondary);
  font-size:.78rem;
  letter-spacing:.04em;
  opacity:.8;
}

.connect-stack{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
  width:100%;
}
@media (max-width:700px){
  /* phone: the two contact cards merge into a single block, split by a divider */
  .connect-stack{
    grid-template-columns:1fr;
    gap:0;
    overflow:hidden;
    border:1px solid var(--cyan-dim);
    border-radius:18px;
    background:var(--card-bg);
    box-shadow:0 0 20px rgba(var(--accent-rgb),0.06);
  }
  .connect-card,
  .connect-card:hover{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transform:none;
  }
  .connect-card + .connect-card{ border-top:1px solid var(--header-border); }
}
.connect-card{
  display:block;
  background:var(--card-bg);
  border:1px solid var(--cyan-dim);
  border-radius:18px;
  padding:36px 34px;
  box-shadow:0 0 20px rgba(var(--accent-rgb),0.06);
  transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.connect-card:hover{
  box-shadow:0 0 36px rgba(var(--accent-rgb),0.2);
  border-color:var(--cyan);
  transform:translateY(-4px);
}
.connect-card-link{ cursor:pointer; }

.connect-top{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.connect-icon{
  width:42px; height:42px;
  border-radius:12px;
  background:rgba(var(--accent-rgb),0.06);
  border:1px solid var(--cyan-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.connect-card:hover .connect-icon{
  box-shadow:0 0 18px var(--cyan-glow);
  border-color:var(--cyan);
  transform:scale(1.08);
}
.connect-icon svg{ width:18px; height:18px; color:var(--cyan); }

.connect-text h3{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:4px;
}
.connect-text p{
  font-size:0.88rem;
  color:var(--text-secondary);
}

.connect-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--header-border);
}
.connect-value{
  min-width:0;
  overflow-wrap:anywhere;
  color:var(--cyan);
  font-weight:600;
  font-size:0.94rem;
}
.copy-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--cyan-dim);
  background:transparent;
  color:var(--cyan);
  font-size:0.76rem;
  font-weight:700;
  transition:box-shadow .25s ease, background .25s ease;
}
.copy-pill svg{ width:12px; height:12px; }
.copy-pill:hover{ box-shadow:0 0 14px var(--cyan-glow); background:rgba(var(--accent-rgb),0.06); }
.copy-pill.copied{ color:#4ade80; border-color:#4ade80; }

.external-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  border-radius:999px;
  border:1px solid var(--cyan-dim);
  background:transparent;
  color:var(--cyan);
  transition:box-shadow .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.external-badge svg{ width:14px; height:14px; }
.connect-card-link:hover .external-badge{
  box-shadow:0 0 14px var(--cyan-glow);
  background:rgba(var(--accent-rgb),0.06);
  border-color:var(--cyan);
  transform:translate(2px,-2px);
}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--header-border);
  padding:26px 24px;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  font-size:0.76rem;
  color:var(--text-muted);
}
.footer-inner .built{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ============ BOOT SCREEN ============ */
.boot-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .5s ease;
}
.boot-screen.boot-hide{ opacity:0; pointer-events:none; }
.boot-content{ text-align:center; }
.boot-line{
  font-family:'JetBrains Mono', monospace;
  color:var(--cyan);
  font-size:0.95rem;
  letter-spacing:0.04em;
  margin-bottom:18px;
}
.boot-cursor{ animation:blinkCursor 0.9s steps(1) infinite; }
@keyframes blinkCursor{ 50%{ opacity:0; } }
.boot-bar{
  width:220px;
  height:2px;
  background:rgba(var(--accent-rgb),0.15);
  border-radius:2px;
  overflow:hidden;
  margin:0 auto;
}
.boot-bar-fill{
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
  animation:bootFill 1.1s ease forwards;
}
@keyframes bootFill{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .boot-cursor{ animation:none; }
}

/* ============ SCROLL PROGRESS BAR ============ */
.scroll-track{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:2px;
  background:var(--header-border);
  z-index:1000;
}
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:70px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--cyan-bright));
  box-shadow:0 0 10px var(--cyan-glow);
  z-index:1001;
  will-change:transform;
}

/* ============ CURSOR GLOW ============ */
.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:34px; height:34px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(var(--accent-rgb),0.65) 30%, rgba(var(--accent-rgb),0.2) 62%, transparent 78%);
  box-shadow:0 0 28px rgba(var(--accent-rgb),0.55), 0 0 55px rgba(var(--accent-rgb),0.3);
  pointer-events:none;
  z-index:9998;
  will-change:transform;
  opacity:0;
  transition:opacity .3s ease;
}
.cursor-glow.active{ opacity:1; }
.cursor-glow.behind-video{ opacity:0 !important; }

/* ============ LOWER THIRD (fixed, links to X) ============ */
.lower-third{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:900;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 16px 9px 12px;
  background:var(--header-bg);
  border:1px solid var(--cyan-dim);
  border-left:3px solid var(--cyan);
  border-radius:6px;
  text-decoration:none;
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  animation:lowerThirdIn .6s ease-out 1.8s both;
}
.lower-third:hover{
  box-shadow:0 0 16px var(--cyan-glow);
  border-color:var(--cyan);
  transform:translateY(-2px);
}
.lower-third-name{
  display:block;
  font-family:'Unbounded', sans-serif;
  font-size:0.8rem;
  font-weight:800;
  color:var(--cyan-bright);
  letter-spacing:0.02em;
  line-height:1.2;
}
.lower-third-sub{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.6rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:2px;
}
@keyframes lowerThirdIn{
  from{ opacity:0; transform:translateX(-16px); }
  to{ opacity:1; transform:translateX(0); }
}
@media (max-width:600px){
  .lower-third{ left:12px; bottom:12px; padding:7px 12px 7px 10px; }
}
/* phones: the floating badge covered cards and chips; X is still in the contact section */
@media (max-width:700px){
  .lower-third{ display:none; }
}

@media (hover:none){ .cursor-glow{ display:none; } }

/* nav jumps: land with each section's "// LABEL" ~28px below the fixed header (~90px tall at every width) */
#videos, #connect{ scroll-margin-top:18px; }


/* ============ PRODUCT LINE (same creator, different product: teal variant) ============ */
html[data-line="product"]{
  --bg: #070A0D;
  --card-bg: rgba(13,20,24,0.78);
  --tile-bg: rgba(13,20,24,0.6);
  --cyan: #34E0C4;
  --cyan-bright: #A2F7E9;
  --cyan-dim: rgba(52,224,196,0.35);
  --cyan-glow: rgba(52,224,196,0.24);
  --text: #ECFBF7;
  --text-secondary: #A7C6BE;
  --text-muted: #6A8780;
  --grid-line: rgba(162,247,233,0.03);
  --header-bg: rgba(7,10,13,0.92);
  --header-border: rgba(162,247,233,0.08);
  --nav-mobile-bg: #0D1418;
  --avatar-img: url("../img/avatar-product.webp");
  --accent-rgb: 52,224,196;
  --accent2-rgb: 162,247,233;
}
html[data-line="product"][data-theme="light"]{
  --bg: #EAFBF6;
  --card-bg: rgba(255,255,255,0.74);
  --tile-bg: rgba(255,255,255,0.6);
  --cyan: #0C9C7F;
  --cyan-bright: #08664F;
  --cyan-dim: rgba(12,156,127,0.35);
  --cyan-glow: rgba(12,156,127,0.2);
  --text: #0B1A16;
  --text-secondary: #3B5A52;
  --text-muted: #5E7A72;
  --grid-line: rgba(11,26,22,0.06);
  --header-bg: rgba(234,251,246,0.94);
  --header-border: rgba(11,26,22,0.1);
  --nav-mobile-bg: #ffffff;
  --accent-rgb: 12,156,127;
  --accent2-rgb: 8,102,79;
}

/* line switch in the nav: a small dot in the OTHER line's colour */
.nav-line-link{ display:inline-flex; align-items:center; gap:8px; }
.nav-line-link .line-dot{
  width:8px; height:8px; border-radius:50%;
  background:#34E0C4; box-shadow:0 0 10px rgba(52,224,196,.7);
}
.nav-line-link.to-youtube .line-dot{ background:#7C5CFA; box-shadow:0 0 10px rgba(124,92,250,.7); }
@media (max-width:600px){ .nav-line-link .line-dot{ width:6px; height:6px; } }

/* ---- product case study ---- */
.case{ padding:0 24px 40px; }
.case-player{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--cyan-dim); background:#000;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.06), 0 30px 80px rgba(0,0,0,0.45), 0 0 60px rgba(var(--accent-rgb),0.12);
}
.case-player video{ display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.case-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:48px; margin-top:34px; }
.case-meta .work-title{ font-family:'Unbounded', sans-serif; font-size:clamp(1.3rem, 2.6vw, 1.9rem); font-weight:800; margin-top:10px; }
.case-meta p{ color:var(--text-secondary); margin-top:14px; max-width:58ch; }
.case-spec{ list-style:none; border:1px solid var(--cyan-dim); border-radius:18px; background:var(--card-bg); padding:8px 22px; }
.case-spec li{ display:flex; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid rgba(var(--accent2-rgb),0.1); font-size:.92rem; }
.case-spec li:last-child{ border-bottom:none; }
.case-spec span:first-child{ font-family:'JetBrains Mono', monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); padding-top:2px; }
.case-spec span:last-child{ text-align:right; font-weight:700; }
.case-note{ margin-top:14px; font-size:.78rem; color:var(--text-muted); }
.case-loops{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.case-loop{ margin:0; }
.case-loop video{ display:block; width:100%; aspect-ratio:16/9; border-radius:14px; border:1px solid var(--cyan-dim); background:#000; }
.case-loop figcaption{ margin-top:10px; font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan-bright); }

.deliver{ padding:90px 24px 0; }
.deliver-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.deliver-card{ border:1px solid var(--cyan-dim); border-radius:18px; background:var(--card-bg); padding:24px 22px; transition:transform .25s ease, box-shadow .25s ease; }
.deliver-card:hover{ transform:translateY(-4px); box-shadow:0 0 28px var(--cyan-glow); }
.deliver-card .k{ font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.12em; color:var(--cyan); }
.deliver-card h3{ font-size:1.05rem; margin:10px 0 8px; }
.deliver-card p{ font-size:.88rem; color:var(--text-secondary); }
@media (max-width:1000px){
  .case-grid{ grid-template-columns:1fr; gap:28px; }
  .deliver-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .case-loops{ grid-template-columns:1fr; gap:16px; }
  .deliver-grid{ grid-template-columns:1fr; }
  .case-player{ border-radius:14px; }
}
@media (max-width:420px){
  .nav-right{ gap:11px; }
  .nav-portfolio-link{ font-size:.66rem; letter-spacing:.03em; }
  .nav-line-link{ gap:5px; }
  .btn-contact{ padding:7px 12px; font-size:.72rem; }
}
.case + .case{ margin-top:70px; }

/* ---- product: short-form row ---- */
.vert{ padding:70px 24px 0; }
.vert .showcase-note{ margin:0 0 30px; }
.vert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.vert-player{ border-radius:20px; overflow:hidden; border:1px solid var(--cyan-dim); background:#000; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.vert-player video{ display:block; width:100%; aspect-ratio:9/16; background:#000; }
.vert-item .work-kicker{ margin-top:14px; }
.vert-desc{ font-size:.84rem; color:var(--text-secondary); margin-top:6px; }
@media (max-width:1000px){ .vert-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .vert-grid{ gap:14px; } .vert-item .work-title{ font-size:.92rem; } }
/* only two long-form edits: give them half the row each on desktop */
@media (min-width:1001px){
  .long-grid .work-item:first-child:nth-last-child(2),
  .long-grid .work-item:first-child:nth-last-child(2) ~ .work-item{ flex-basis:calc((100% - 20px) / 2); }
}