/* =========================================================
   Harshad Kakade — Portfolio
   Design tokens
   ========================================================= */
:root {
  --bg: #07070b;
  --bg-soft: #0d0d14;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f3f7;
  --text-dim: #a7abba;
  --text-faint: #6b7080;

  --accent: #2dd4bf;
  /* teal */
  --accent-2: #22d3ee;
  /* cyan */
  --accent-3: #a78bfa;
  /* violet */
  --accent-glow: rgba(45, 212, 191, 0.5);

  --grad: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, var(--accent-3));

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: min(75%, 1440px);
  --pad: clamp(1.25rem, 4vw, 3rem);
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-sm: 0 6px 20px -12px rgba(8, 12, 30, 0.55);
  --shadow-md: 0 22px 48px -26px rgba(8, 12, 30, 0.65);
  --shadow-lg: 0 40px 90px -40px rgba(8, 12, 30, 0.7);
}

/* ---- Light theme: Eduloom indigo/violet system ---- */
[data-theme="light"] {
  --bg: #e9e9f1;
  /* soft lavender canvas */
  --bg-soft: #ffffff;
  /* white cards / surfaces */
  --surface: #ffffff;
  --surface-2: #f4f4fb;
  --border: #ececf4;
  --border-strong: #dadaea;
  --text: #1a1830;
  /* ink */
  --text-dim: #54526b;
  /* slate secondary */
  --text-faint: #6f6d86;
  /* darkened from Eduloom #86849C for WCAG AA */

  --accent: #4338ca;
  /* indigo-700 primary */
  --accent-2: #6d28d9;
  /* purple */
  --accent-3: #7a6bf0;
  /* light indigo */
  --accent-glow: rgba(67, 56, 202, 0.32);
  --grad: linear-gradient(135deg, #4338ca, #7a6bf0);

  --shadow-sm: 0 6px 22px -14px rgba(26, 24, 48, 0.40);
  --shadow-md: 0 18px 40px -22px rgba(26, 24, 48, 0.34);
  --shadow-lg: 0 40px 90px -40px rgba(26, 24, 48, 0.42);
}

/* --maxw's 75% cap is meant to keep body text readable on wide desktop/laptop
   screens. On an actual phone that same 75% (e.g. ~293px of a 390px screen)
   leaves huge unused gutters on both sides — phones need close to full width,
   just the smaller --pad gutter, not an additional percentage cap on top of it. */
@media (max-width: 700px) {
  :root {
    --maxw: 100%;
  }
}

/* =========================================================
   Reset & base
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

strong {
  color: var(--text);
  font-weight: 600;
}

em {
  font-style: normal;
  color: var(--accent);
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ---- Accessibility: visible focus + skip link ---- */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2000;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-150%);
  transition: transform 0.25s var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* =========================================================
   Background mesh + grain
   ========================================================= */
.bg-mesh {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}

.blob-1 {
  width: 46vw;
  height: 46vw;
  top: -12vw;
  left: -8vw;
  background: radial-gradient(circle, var(--accent), transparent 68%);
  animation: float1 22s ease-in-out infinite;
}

.blob-2 {
  width: 38vw;
  height: 38vw;
  top: 22vh;
  right: -10vw;
  background: radial-gradient(circle, var(--accent-3), transparent 68%);
  opacity: 0.4;
  animation: float2 26s ease-in-out infinite;
}

.blob-3 {
  width: 34vw;
  height: 34vw;
  bottom: -8vw;
  left: 30vw;
  background: radial-gradient(circle, var(--accent-2), transparent 68%);
  opacity: 0.3;
  animation: float3 30s ease-in-out infinite;
}

@keyframes float1 {
  50% {
    transform: translate(8vw, 6vh) scale(1.1);
  }
}

@keyframes float2 {
  50% {
    transform: translate(-6vw, 8vh) scale(1.15);
  }
}

@keyframes float3 {
  50% {
    transform: translate(5vw, -6vh) scale(0.92);
  }
}

/* calmer, cleaner backdrop in light mode (Eduloom aesthetic) */
[data-theme="light"] .blob-1 {
  opacity: 0.20;
}

[data-theme="light"] .blob-2 {
  opacity: 0.16;
}

[data-theme="light"] .blob-3 {
  opacity: 0.14;
}

[data-theme="light"] .grain {
  opacity: 0.02;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Cursor
   ========================================================= */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor {
  width: 34px;
  height: 34px;
  border: 1.5px solid #fff;
  transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  background: #fff;
}

.cursor.is-hover {
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.12);
  border-color: transparent;
}

@media (hover: none),
(max-width: 768px) {

  .cursor,
  .cursor-dot {
    display: none;
  }
}

/* =========================================================
   Scroll progress
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad);
  z-index: 1000;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.85rem 1.6rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  position: relative;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.btn svg {
  width: 16px;
  height: 16px;
}

.btn--primary {
  background: var(--grad);
  color: #ffffff;
  box-shadow: var(--shadow-md);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--primary:hover svg {
  transform: translateX(4px);
}

.btn--primary svg {
  transition: transform 0.3s var(--ease);
}

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--bg-soft);
}

.btn--ghost:hover {
  background: var(--surface-2);
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.btn--small {
  min-height: 40px;
  padding: 0.55rem 1.15rem;
  font-size: 0.85rem;
  border-color: var(--border-strong);
  background: var(--bg-soft);
}

.btn--small:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--large {
  padding: 1.05rem 2rem;
  font-size: 1.05rem;
}

/* =========================================================
   Navigation
   ========================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--pad);
  transition: padding 0.4s var(--ease), background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  padding: 0.7rem var(--pad);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
}

.nav__logo-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--grad);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.03em;
  box-shadow: var(--shadow-sm);
}

.nav__logo-text {
  font-size: 0.98rem;
}

.nav__links {
  display: flex;
  gap: 0.4rem;
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-size: 0.92rem;
  color: var(--text-dim);
  border-radius: 100px;
  transition: color 0.25s, background 0.25s;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.35rem;
  height: 1.5px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav__link:hover {
  color: var(--text);
}

.nav__link.is-active {
  color: var(--text);
}

.nav__link.is-active::after {
  transform: scaleX(1);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  background: var(--bg-soft);
  transition: color 0.25s, border-color 0.25s, transform 0.25s;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(20deg);
}

.theme-toggle__moon {
  display: none;
}

[data-theme="light"] .theme-toggle__sun {
  display: none;
}

[data-theme="light"] .theme-toggle__moon {
  display: block;
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
}

.nav__burger span {
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}

/* =========================================================
   Layout primitives
   ========================================================= */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vh, 3.5rem) var(--pad);
}

.section__head {
  margin-bottom: clamp(1.2rem, 2.8vw, 2rem);
}

.section__index {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.7rem;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  letter-spacing: -0.025em;
}

.section__sub {
  color: var(--text-dim);
  margin-top: 0.7rem;
  max-width: 50ch;
  font-size: 1rem;
}

.accent-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--pad) 3rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}

.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 70%) var(--sy, 35%),
      color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%);
  transition: background 0.18s ease;
}

.hero__rotator {
  display: inline-block;
  will-change: transform, opacity;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1.8rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-glow);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent-glow);
  }

  70% {
    box-shadow: 0 0 0 9px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-bottom: 1.8rem;
}

.reveal-line {
  display: block;
  overflow: hidden;
}

.reveal-line>span {
  display: block;
  transform: translateY(110%);
  animation: lineUp 0.9s var(--ease) forwards;
}

.reveal-line:nth-child(1)>span {
  animation-delay: 0.1s;
}

.reveal-line:nth-child(2)>span {
  animation-delay: 0.22s;
}

.reveal-line:nth-child(3)>span {
  animation-delay: 0.34s;
}

@keyframes lineUp {
  to {
    transform: translateY(0);
  }
}

.hero__title-accent>span {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  color: var(--text-dim);
  max-width: 60ch;
  line-height: 1.55;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.2rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.stat {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s, box-shadow 0.35s;
}

.stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: 0.55rem;
  display: block;
  line-height: 1.35;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero__scroll-line {
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--accent), transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--text);
  animation: scrollDown 1.8s infinite;
}

@keyframes scrollDown {
  to {
    top: 120%;
  }
}

/* =========================================================
   Marquee
   ========================================================= */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.4rem 0;
  background: var(--surface);
}

.marquee__track {
  display: inline-flex;
  gap: 1.6rem;
  white-space: nowrap;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  font-weight: 500;
  color: var(--text-dim);
  animation: scrollX 38s linear infinite;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.marquee__icon {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
  object-fit: contain;
}

.marquee__dot {
  color: var(--accent);
  opacity: 0.65;
}

@keyframes scrollX {
  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   What I do (services)
   ========================================================= */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.servicetile {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}

.servicetile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.servicetile__icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: block;
}

.servicetile h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.servicetile p {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Showreel video tile — his designer -> developer transformation loop */
.servicetile--reel {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 210px;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: #eef0f5;
}

.reel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 32%;
}

.reel__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 82%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.reel__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.5rem 1.1rem 0.95rem;
  background: linear-gradient(to top, rgba(8, 10, 24, 0.82), rgba(8, 10, 24, 0.32) 55%, transparent);
}

.reel__cap h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #fff;
}

@media (max-width: 880px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .services__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   About
   ========================================================= */
.about__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about__lead p {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--text-dim);
  margin-bottom: 1.4rem;
  line-height: 1.6;
}

.about__facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
}

.about__facts li {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.about__facts li:hover {
  background: var(--surface-2);
}

.about__facts li:last-child {
  border-bottom: none;
}

.fact__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.fact__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.about__facts span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.about__facts strong {
  font-size: 0.98rem;
}

/* =========================================================
   Work cards
   ========================================================= */
.work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.card {
  position: relative;
  padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s, box-shadow 0.4s;
  display: flex;
  flex-direction: column;
}

.card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* flagship card: same footprint as the others, just a subtle accent border */
.card--feature {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

/* Eduloom-style gradient cover header with icon + badges */
.card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--cover, var(--grad));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 12px 14px;
}

.card__cover::before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  top: -42px;
  right: -30px;
}

.card__cover::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, 0.20);
  border-radius: 50%;
  bottom: 16px;
  left: 20px;
}

/* Hide decorative background circles when a full mockup image is present */
.card__cover:has(.card__cover-shot--full)::before,
.card__cover:has(.card__cover-shot--full)::after {
  display: none !important;
}

.card__cover-icon {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

/* product screenshot floating over the gradient, cropped by the cover's bottom edge */
.card__cover-shot {
  position: absolute;
  z-index: 1;
  top: 46px;
  left: 18px;
  right: 18px;
  bottom: 0;
  width: calc(100% - 36px);
  height: calc(100% - 46px);
  object-fit: cover;
  object-position: top center;
  display: block;
  background: #fff;
  border-radius: 10px 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
}

.card__badge {
  position: relative;
  z-index: 2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(5px);
  padding: 5px 10px;
  border-radius: 8px;
}

.card__cover .card__num {
  position: relative;
  z-index: 2;
  color: #fff;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(5px);
  padding: 5px 9px;
  border-radius: 8px;
}

.card__glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  filter: blur(20px);
  left: var(--mx, 50%);
  top: var(--my, 0%);
  transform: translate(-50%, -50%);
}

.card:hover .card__glow {
  opacity: 0.5;
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  gap: 1rem;
}

.card__tag-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.card__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Industry/domain eyebrow above each work-card title — lets an interviewer
   place the project (FinTech, EdTech, Enterprise SaaS…) at a glance without
   reading the description. */
.card__domain {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.card__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.12rem, 1.9vw, 1.4rem);
  margin-bottom: 0.6rem;
}

.card__desc {
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.card__tags li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  padding: 0.32rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.card__chips span {
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  font-weight: 600;
  color: var(--accent);
  width: fit-content;
  transition: gap 0.25s;
}

.card__link:hover {
  gap: 0.7rem;
}

.card--cases {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-3) 10%, transparent), var(--surface));
}

/* ---- Role filter: Design ↔ Development (so employers see the role they hire for) ---- */
.rolefilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.rolefilter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-dim);
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  transition: color .25s, background .25s, border-color .25s, transform .25s, box-shadow .25s;
}

.rolefilter__btn:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-sm);
}

.rolefilter__btn.is-active {
  color: #fff;
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.rolefilter__btn.is-active .rolefilter__count {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.rolefilter__btn.is-active .rolefilter__dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

.rolefilter__btn--bridge {
  border-style: dashed;
}

.rolefilter__btn--bridge.is-active {
  border-style: solid;
}

.rolefilter__count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-faint);
}

.rolefilter__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rolefilter__dot--design {
  background: var(--accent-2);
}

.rolefilter__dot--dev {
  background: var(--accent);
}

.rolefilter__note {
  color: var(--text-dim);
  font-size: 0.96rem;
  max-width: 62ch;
  margin-bottom: 1.6rem;
  min-height: 1.4em;
}

/* role chip pinned to each card's cover corner */
.card__role {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.card__role--both {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10));
}

/* filter visibility + entrance animation */
.card.is-hidden {
  display: none !important;
}

@keyframes cardFilterIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.card.is-filtering {
  animation: cardFilterIn 0.5s var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .card.is-filtering {
    animation: none;
  }
}

@media (max-width: 520px) {
  .rolefilter__btn {
    padding: 0.5rem 0.95rem;
    font-size: 0.86rem;
  }
}

/* =========================================================
   Experience layout (timeline + decorative visual)
   ========================================================= */
.experience__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3rem;
  align-items: start;
}

/* =========================================================
   Timeline
   ========================================================= */
.timeline {
  position: relative;
  max-width: none;
}

.timeline::before {
  content: "";
  position: absolute;
  left: calc(180px + 1.75rem + 18px);
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--accent), var(--accent-3), transparent);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 180px 36px minmax(0, 1fr);
  grid-template-areas: "date marker content";
  column-gap: 1.75rem;
  align-items: start;
  padding-bottom: 2.4rem;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__marker {
  grid-area: marker;
  display: grid;
  place-items: center;
  justify-self: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--grad);
  box-shadow: 0 0 0 5px var(--bg), 0 8px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

.timeline__marker img {
  width: 17px;
  height: 17px;
}

.timeline__head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
}

.timeline__date {
  grid-area: date;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  padding-top: 0.7rem;
  text-align: right;
}

.timeline__content {
  grid-area: content;
  min-width: 0;
  max-width: 1000px;
  padding: 1.6rem 1.9rem 1.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}

.timeline__content:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.timeline__company {
  color: var(--text-dim);
  font-weight: 500;
  margin: 0.5rem 0 1.1rem;
  max-width: 68ch;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.timeline__logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.timeline__points {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
  max-width: 68ch;
}

.timeline__points li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--text-dim);
  font-size: 0.97rem;
  line-height: 1.55;
  overflow-wrap: break-word;
  min-width: 0;
}

.timeline__points li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.timeline__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--border);
}

.timeline__tags li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  padding: 0.32rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* decorative career-growth illustration filling the right rail */
.experience__visual {
  position: sticky;
  top: 100px;
}

.expviz {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
}

.expviz__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}

.expviz__blob--1 {
  width: 60%;
  height: 60%;
  top: -12%;
  right: -18%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  opacity: 0.35;
}

.expviz__blob--2 {
  width: 52%;
  height: 52%;
  bottom: -12%;
  left: -12%;
  background: radial-gradient(circle, var(--accent-3), transparent 70%);
  opacity: 0.3;
}

.expviz__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.expviz__stop1 {
  stop-color: var(--accent);
}

.expviz__stop2 {
  stop-color: var(--accent-3);
}

.expviz__medal {
  position: relative;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}

.expviz__medal img {
  width: 38px;
  height: 38px;
}

.expviz__chip {
  position: absolute;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.expviz__chip img {
  width: 20px;
  height: 20px;
}

.expviz__chip--1 {
  top: 13%;
  left: 12%;
  animation: float-a 7s ease-in-out infinite;
}

.expviz__chip--2 {
  top: 40%;
  right: 15%;
  animation: float-b 8s ease-in-out infinite;
}

.expviz__chip--3 {
  bottom: 24%;
  left: 15%;
  animation: float-a 9s ease-in-out infinite;
}

.expviz__stat {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 3;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  background: color-mix(in srgb, var(--bg-soft) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
}

.expviz__stat strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.expviz__stat span {
  font-size: 0.85rem;
  color: var(--text-dim);
}

@media (max-width: 1180px) {
  .experience__grid {
    grid-template-columns: 1fr;
  }

  .experience__visual {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .expviz__chip {
    animation: none;
  }
}

@media (max-width: 720px) {
  .timeline::before {
    left: 17px;
  }

  .timeline__item {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: 0.3rem;
    grid-template-areas: "marker date" "marker content";
  }

  .timeline__marker {
    width: 34px;
    height: 34px;
  }

  .timeline__date {
    text-align: left;
    padding-top: 0;
  }

  .timeline__content {
    padding: 1.3rem 1.4rem 1.5rem;
  }
}

/* =========================================================
   Education
   ========================================================= */
.education__card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 720px;
  padding: 1.8rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}

.education__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.education__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--grad);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}

.education__icon img {
  width: 26px;
  height: 26px;
}

.education__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
  line-height: 1.35;
}

.education__school {
  color: var(--text-dim);
  margin-bottom: 0.9rem;
}

.education__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.education__meta li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 0.32rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

@media (max-width: 560px) {
  .education__card {
    flex-direction: column;
  }
}

/* =========================================================
   Skills
   ========================================================= */
/* role-grouped brand-logo tiles inside each skill card */
.skill-group__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px dashed var(--border);
}

.skill-group__logos li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: white;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.skill-group__logos li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: var(--bg-soft);
}

/* The chip is always white, so keep its label dark (and hover light) in dark mode
   — otherwise var(--text) turns near-white and the labels vanish on the chip. */
[data-theme="dark"] .skill-group__logos li {
  color: #1a1830;
}

[data-theme="dark"] .skill-group__logos li:hover {
  background: #f4f4fb;
  border-color: #c9c7dd;
}

.skill-group__logos img {
  width: 30px;
  height: 30px;
  display: block;
  flex-shrink: 0;
}

/* clear "Tools" vs "Skills" separation labels */
.skill-group__logos::before,
.skill-group__list::before {
  flex-basis: 100%;
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
  opacity: 0.85;
}

.skill-group__logos::before {
  content: "◆ Tools";
}

.skill-group__list::before {
  content: "◆ Skills";
}

.skills__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.skill-group {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.skill-group:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.skill-group__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.skill-group__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 1.05rem;
}

.skill-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-group__list li {
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--surface-2);
  transition: color 0.25s, border-color 0.25s, transform 0.2s;
}

.skill-group__list li:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* =========================================================
   Contact
   ========================================================= */
.contact {
  text-align: center;
}

.contact__inner {
  max-width: 760px;
  margin: 0 auto;
}

.contact__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  line-height: 1.05;
}

.contact__lead {
  color: var(--text-dim);
  font-size: 1.15rem;
  max-width: 54ch;
  margin: 1.5rem auto 2.5rem;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.contact__links a {
  color: var(--text-dim);
  transition: color 0.25s;
}

.contact__links a:hover {
  color: var(--accent);
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  border-top: 1px solid var(--border);
  /* horizontal pad lives on the inner, not here — --maxw's 75% resolves against
     the containing block, so padding out here shrinks that block and left the
     footer content 12px narrower than every section above it */
  padding: 2.5rem 0;
}

.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
}

.footer__note {
  color: var(--text-faint);
  font-size: 0.88rem;
}

.footer__top {
  color: var(--text-dim);
  font-size: 0.88rem;
  transition: color 0.25s;
}

.footer__top:hover {
  color: var(--accent);
}

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal-line>span {
    animation: none;
    transform: none;
  }

  .blob,
  .marquee__track,
  .status-dot,
  .hero__scroll-line::after {
    animation: none;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .work__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 880px) {
  .about__grid {
    grid-template-columns: 1fr;
  }

  .skills__grid {
    grid-template-columns: 1fr;
  }

  .hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
  }
}

@media (max-width: 600px) {
  .work__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(78vw, 320px);
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
  }

  .nav__links.is-open {
    transform: translateX(0);
  }

  .nav__link {
    font-size: 1.3rem;
    padding: 0.6rem 0;
  }

  .nav__burger {
    display: flex;
  }

  .nav__burger.is-open span:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
  }

  .nav__burger.is-open span:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .nav__logo-text {
    display: none;
  }

  .btn--small {
    display: none;
  }
}

@media (max-width: 460px) {
  .hero__stats {
    grid-template-columns: 1fr 1fr;
  }

  .footer__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================================================
   Hero enhancements (animated gradient + rotating word)
   ========================================================= */
.hero__title-accent>span {
  /* flat colour, not a gradient — a background-clip:text gradient renders visibly
     differently per word (thick-stroke words like "builds." show more solid colour;
     thinner/curvier ones like "designs." let more background bleed through at the
     anti-aliased edges), so no gradient tuning can make every word match exactly.
     A flat fill is the only way to guarantee the identical colour every time. */
  color: var(--accent-2);
  animation: lineUp 0.9s var(--ease) 0.34s forwards;
}

@keyframes rotateWord {
  0% {
    opacity: 0;
    transform: translateY(0.45em) rotateX(-55deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.hero__rotator.is-rotating {
  animation: rotateWord 0.6s var(--ease);
}

/* extra hero glow ring behind headline */
.hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 36%;
  left: 18%;
  width: min(46vw, 560px);
  height: min(46vw, 560px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  opacity: 0.4;
  filter: blur(30px);
  pointer-events: none;
}

/* =========================================================
   Behance showcase
   ========================================================= */
.showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.shot {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}

.shot:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-lg);
}

.shot__media {
  position: relative;
  display: block;
  aspect-ratio: 377.06 / 294.94;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent),
      color-mix(in srgb, var(--accent-3) 35%, transparent));
}

.shot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}

.shot:hover .shot__media img {
  transform: scale(1.06);
}

.shot__media.is-broken img {
  display: none;
}

.shot__media.is-broken::after {
  content: "↗ Behance";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #fff;
  letter-spacing: 0.05em;
}

.shot__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: linear-gradient(to top, color-mix(in srgb, #04110f 78%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.shot:hover .shot__overlay {
  opacity: 1;
}

.shot__cta {
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  transform: translateY(6px);
  transition: transform 0.35s var(--ease);
}

.shot:hover .shot__cta {
  transform: none;
}

.shot__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
}

.shot__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.shot__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  white-space: nowrap;
}

.showcase__foot {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

@media (max-width: 880px) {
  .showcase__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .showcase__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title-accent>span {
    animation: none;
    transform: none;
  }

  .hero__rotator.is-rotating {
    animation: none;
  }
}

/* =========================================================
   Hero 3D media stage (photo → AI video)
   ========================================================= */
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__col {
  min-width: 0;
}

.hero__grid .hero__title {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem);
}

.hero__stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 4 / 4.4;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.stage__ring {
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  z-index: 0;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-3), var(--accent-2), var(--accent));
  filter: blur(36px);
  opacity: 0.45;
  animation: spin 16s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.stage__card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  z-index: 2;
  border: 1px solid var(--border-strong);
  background: var(--bg-soft);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  transform-style: preserve-3d;
  transition: transform 0.25s var(--ease);
}

.stage__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stage__photo {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.stage__photo.is-shown {
  opacity: 1;
}

.stage__photo.is-hidden {
  opacity: 0;
}

.stage__video {
  z-index: 2;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.stage__video.is-playing {
  opacity: 1;
}

.stage__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  gap: 0.7rem;
  text-align: center;
  transition: opacity 0.6s;
  background: radial-gradient(120% 120% at 30% 18%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 58%),
    linear-gradient(160deg, var(--bg-soft), #101320);
}

.stage__monogram {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stage__hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stage__shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 42%);
  mix-blend-mode: overlay;
}

.stage__badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #fff;
  background: color-mix(in srgb, #04110f 55%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.stage__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2.2s infinite;
}

.orb {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--bg-soft) 82%, transparent);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

.orb--1 {
  top: 3%;
  left: -6%;
  animation: float-a 7s ease-in-out infinite;
}

.orb--2 {
  top: 16%;
  right: -8%;
  color: var(--accent-2);
  animation: float-b 9s ease-in-out infinite;
}

.orb--3 {
  bottom: 14%;
  left: -8%;
  color: var(--accent-3);
  animation: float-b 8s ease-in-out infinite;
}

.orb--4 {
  bottom: 2%;
  right: -3%;
  animation: float-a 10s ease-in-out infinite;
}

@keyframes float-a {
  50% {
    transform: translateY(-16px) rotate(6deg);
  }
}

@keyframes float-b {
  50% {
    transform: translateY(14px) rotate(-6deg);
  }
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero__stage {
    order: -1;
    max-width: 320px;
    aspect-ratio: 4 / 4.2;
  }

  .hero__grid .hero__title {
    font-size: clamp(2.8rem, 12vw, 5rem);
  }
}

@media (max-width: 480px) {
  .hero__stage {
    max-width: 250px;
  }

  .orb {
    width: 44px;
    height: 44px;
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .stage__ring,
  .orb,
  .stage__badge-dot {
    animation: none;
  }
}

/* =========================================================
   Scroll-scrubbed hero (pinned: video scrubs + copy swaps)
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: block;
  padding: 0;
  overflow: visible;
  isolation: auto;
}

.hero::before {
  content: none;
  display: none;
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  /* matched to the video's real studio grey (sampled ~#A6A4AD–#B1AFB7) so the clip blends with zero seam */
  background: linear-gradient(110deg, #a8a6af 0%, #aaa8b1 48%, #adabb4 100%);
}

/* Blend into the page below by fading the hero ITSELF to transparent (eased
   alpha mask), not by painting the page colour over it. The sections below are
   transparent over the fixed mesh background, so any painted-colour fade ends
   on "flat bg" meeting "bg + mesh tint" — a guaranteed seam at the boundary
   row however smooth the gradient. Masking instead reveals the genuine page
   backdrop through the hero's last ~28%, so above and below the boundary are
   literally the same pixels. Covers both hero clips and both themes for free. */
.hero__pin {
  -webkit-mask-image: linear-gradient(to bottom,
      #000 72%,
      rgba(0, 0, 0, 0.95) 78%,
      rgba(0, 0, 0, 0.78) 85%,
      rgba(0, 0, 0, 0.5) 91%,
      rgba(0, 0, 0, 0.22) 96%,
      transparent 100%);
  mask-image: linear-gradient(to bottom,
      #000 72%,
      rgba(0, 0, 0, 0.95) 78%,
      rgba(0, 0, 0, 0.78) 85%,
      rgba(0, 0, 0, 0.5) 91%,
      rgba(0, 0, 0, 0.22) 96%,
      transparent 100%);
}

/* The hero backdrop is an always-light studio-grey (so the photo blends with no
   seam). In dark mode the copy would otherwise flip to light-on-light and vanish,
   so pin the hero's ink/accents to the light-theme values. --bg is left alone so
   the bottom edge still fades into the dark page below. */
[data-theme="dark"] .hero__pin {
  --text: #1a1830;
  --text-dim: #54526b;
  --text-faint: #6f6d86;
  --surface: #ffffff;
  --surface-2: #f4f4fb;
  --border: #ececf4;
  --border-strong: #dadaea;
  --accent: #4338ca;
  --accent-2: #6d28d9;
  --accent-3: #7a6bf0;
  --accent-glow: rgba(67, 56, 202, 0.32);
  --grad: linear-gradient(135deg, #4338ca, #7a6bf0);
}

.hero__scene {
  position: relative;
  height: 100%;
}

/* RIGHT visual — the container is ALWAYS full-bleed; hero1's narrow right-side
   panel look lives on the loop <video> itself (see #heroLoopVideo). This is what
   makes the clip handoff seamless: is-clip-full no longer resizes any box, so
   the swap is a pure opacity crossfade — previously the panel width flipped
   52%→100% at a different moment than the fade and hero2 flashed squeezed
   inside hero1's narrow panel (and hero1 flashed full-bleed on the way back). */
.hero__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.visual__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 33% 30%;
  display: block;
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}

/* Light-leak sweep at the hero-clip handoff — a soft warm streak glides across
   the (perfectly stationary) video, plus a gentle brightness pulse on the clip
   itself. No movement of the video/panel at all — just light and colour, ~0.7s,
   triggered by main.js right as the two clips cross-fade. */
@keyframes heroLightLeakSweep {
  0% { transform: translateX(-60%) rotate(8deg); opacity: 0; }
  15% { opacity: 0.85; }
  55% { opacity: 0.55; }
  100% { transform: translateX(60%) rotate(8deg); opacity: 0; }
}

@keyframes heroLightLeakGlow {
  0%, 100% { filter: none; }
  30% { filter: brightness(1.1) saturate(1.15); }
  60% { filter: brightness(1.03) saturate(1.05); }
}

.hero__visual.is-glitching .visual__media {
  animation: heroLightLeakGlow 0.7s ease-out;
}

.hero__visual.is-glitching::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  z-index: 8;
  pointer-events: none;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 226, 190, 0.55) 45%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 226, 190, 0.55) 55%, transparent);
  mix-blend-mode: screen;
  animation: heroLightLeakSweep 0.7s ease-in-out;
}

/* The looping portrait clip carries hero1's panel geometry itself: right-aligned
   52% of the scene with the soft left-edge mask. Being on the video (not the
   container), none of it has to change when the full-bleed clip takes over. */
#heroLoopVideo {
  left: auto;
  width: 52%;
  object-position: 78% center;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 100%);
}

/* Full-bleed video clip (tools intro) — own centring, independent of the
   photo's object-position; starts invisible until swapClip() fades it in. */
.visual__clip-video {
  object-position: 58% center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.visual__photo {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.visual__photo.is-shown {
  opacity: 1;
}

.visual__photo.is-hidden {
  opacity: 0;
}

.visual__video {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.visual__video.is-playing {
  opacity: 1;
}

.visual__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  gap: 0.7rem;
  text-align: center;
  background: #a9a7b0;
}

/* video bleeds into the matched grey via the left mask; no edge bands on desktop */
.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: none;
}

.visual__badge {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #fff;
  background: rgba(8, 10, 22, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* LEFT copy — stacked scenes that crossfade */
.hero__copy {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  align-content: center;
}

.hscene {
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  width: min(48%, 580px);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}

.hscene.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Full-bleed clip: he's centred in frame, so split the copy to flank him instead of
   sitting in one block over the middle — title group left, lead/CTA group right.
   Pin the whole row to the top of .hero__copy (not just flex-align within it) —
   .hero__copy's own centring would otherwise re-centre the row and cancel this out. */
.hero__scene.is-clip-full .hero__copy {
  align-content: start;
  /* clamp(min, preferred, max) — was clamp(17.5rem, 18vh, 11rem), a min greater
     than its own max, which per spec pins it to a constant 280px regardless of
     viewport height. On tall monitors that constant happened to clear the video's
     orbiting icons, but on common shorter laptop screens (1366x768 and similar)
     the icons sit higher up in absolute px, and the text stayed fixed at 280px
     and landed right on top of them. Scaling with height (capped the same at
     tall screens, lower floor at short ones) keeps clearance at every size. */
  padding-top: clamp(5rem, 24vh, 15rem);
  /* the video is genuinely full-bleed here, so let the copy use more of that width too —
     the site's normal reading-width cap (--maxw) is too tight to fit both flanking columns
     at the size they need to match hero1's line-wrap and one-row buttons */
  max-width: min(96%, 1600px);
}

.hero__scene.is-clip-full .hscene {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1rem, 3vw, 3rem);
  text-shadow: 0 1px 3px rgba(178, 176, 184, 0.65), 0 2px 14px rgba(178, 176, 184, 0.45);
}

.hero__scene.is-clip-full .hscene__left {
  /* exactly the width the title box already gets outside this mode — any narrower
     and "Designer who" no longer fits on one line, wrapping an extra line lower */
  width: min(48%, 580px);
  flex-shrink: 0;
}

.hero__scene.is-clip-full .hscene__right {
  /* matches hero1's own lead/CTA width — same 2-line wrap, buttons stay in one row */
  width: min(40%, 480px);
  flex-shrink: 0;
}

.hero__scene.is-clip-full .hscene__right .hero__cta {
  justify-content: flex-start;
}

.hero__scene.is-clip-full .hscene .btn--ghost {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__copy .hero__title {
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
}

/* Same fixed-vs-scaling mismatch as the padding-top above: the title's own size
   only responds to viewport WIDTH, but the video (and the icons baked into it)
   scale with viewport HEIGHT — so on a wide-but-short window the text doesn't
   shrink to match a video that has, leaving too little vertical room between
   the title and the icons below it. Cap the size by height too so it shrinks
   in step with the video on short screens. Desktop-scoped: being 3 classes it
   would out-rank the mobile title rules too, and mobile's stacked layout never
   has this height problem — there it just made the title visibly resize every
   time the interlude toggled. */
@media (min-width: 901px) {
  .hero__scene.is-clip-full .hero__title {
    font-size: clamp(2.2rem, min(5.6vw, 6.5vh), 4.8rem);
  }
}

.hscene__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  margin-bottom: 1.1rem;
}

.hscene__title em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

.hscene .hero__eyebrow {
  margin-bottom: 1.4rem;
}

/* progress dots + scroll hint */
.hero__progress {
  position: absolute;
  left: clamp(14px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.3s, transform 0.3s;
}

.pdot.is-active {
  background: var(--accent);
  transform: scale(1.45);
  box-shadow: 0 0 10px var(--accent-glow);
}

.hero__scrollhint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* stats band */
.statsband {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
}

.statsband__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .hero {
    height: auto;
  }

  .hero__pin {
    position: static;
    height: auto;
    min-height: 0;
  }

  .hero__scene {
    display: flex;
    flex-direction: column;
  }

  /* Same transparent-fade principle as desktop, but on the video block only
     (the pin also holds the text down here, which must stay fully opaque):
     the video's own alpha eases out so the real page backdrop shows through —
     no painted colour, so no possible seam against the section below. */
  .hero__visual {
    position: relative;
    width: 100%;
    height: 58vh;
    order: -1;
    -webkit-mask-image: linear-gradient(to bottom,
        #000 55%,
        rgba(0, 0, 0, 0.95) 66%,
        rgba(0, 0, 0, 0.78) 76%,
        rgba(0, 0, 0, 0.5) 85%,
        rgba(0, 0, 0, 0.22) 93%,
        transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 55%,
        rgba(0, 0, 0, 0.95) 66%,
        rgba(0, 0, 0, 0.78) 76%,
        rgba(0, 0, 0, 0.5) 85%,
        rgba(0, 0, 0, 0.22) 93%,
        transparent 100%);
  }

  /* Desktop's 78% crop deliberately anchors the subject toward the outer edge
     of a narrow, mask-faded strip. Mobile shows the same source video full-width
     with no mask, so that offset instead reads as badly off-centre — recentre it
     (and undo the desktop panel geometry the video now carries itself). */
  #heroLoopVideo {
    left: 0;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    object-position: 60% 50%;
  }

  /* Desktop paints the pin studio-grey (behind the side-panel video) and masks
     its bottom to transparent. On mobile the pin also holds the TEXT, so the
     mask would fade the CTA out — drop it, and make the backdrop fully
     transparent so the text block sits on the genuine page background exactly
     like every section below it: nothing painted, so nothing to seam. */
  .hero__pin {
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* The desktop dark-mode rule pins the hero's ink to light-theme values because
     there the text sits ON the always-light video. On mobile the text now sits
     on var(--bg) (dark in dark mode), so un-pin everything back to the theme's
     own colours or it renders dark-ink-on-dark-bg. */
  [data-theme="dark"] .hero__pin {
    --text: inherit;
    --text-dim: inherit;
    --text-faint: inherit;
    --surface: inherit;
    --surface-2: inherit;
    --border: inherit;
    --border-strong: inherit;
    --accent: inherit;
    --accent-2: inherit;
    --accent-3: inherit;
    --accent-glow: inherit;
    --grad: inherit;
  }

  /* Same story for the full-bleed tools clip: 58% is tuned for the desktop
     16:9 crop, but on a narrower mobile box that shifts him left of centre. */
  .visual__clip-video {
    object-position: 50% center;
  }

  .hero__copy {
    display: block;
    padding: 2.4rem var(--pad) 1rem;
  }

  /* The rotator swaps in words of different lengths ("builds." vs "designs.") —
     left to natural wrapping, long words push the title to 2 lines and short
     ones pull it back to 1, so the whole block below jumps every ~2.4s (and a
     blank reserved line shows whenever the word is short). Stacking the two
     title segments as their own lines ("Designer" / "who <word>.") makes every
     word render at exactly the same 2-line height — no jump, no dead space. */
  .hero__title>span {
    display: block;
  }

  .hscene {
    position: static;
    width: 100%;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Mobile is already stacked (video full-width above, text below) — the
     full-bleed split-layout treatment is a desktop-only effect. Reset every
     property the desktop is-clip-full rules touch back to the plain mobile
     values, or (being higher-specificity) they win on mobile too and push
     the text way down / off to one side instead of the normal stacked flow. */
  .hero__scene.is-clip-full .hero__copy {
    align-content: normal;
    padding-top: 2.4rem;
    max-width: 100%;
  }

  .hero__scene.is-clip-full .hscene {
    text-shadow: none;
    display: block;
    width: 100%;
  }

  .hero__scene.is-clip-full .hscene__left,
  .hero__scene.is-clip-full .hscene__right {
    width: 100%;
  }

  .hscene[data-scene="1"],
  .hscene[data-scene="2"] {
    display: none;
  }

  /* The is-clip-full block above sets display:block on every .hscene (3-class
     selector) to unhide scene 0 for the flanking layout — that beats the plain
     display:none above (2 selectors) on specificity alone, so scenes 1 & 2
     reappear stacked under scene 0 for the length of every auto-cycling
     interlude. Re-assert the hide at matching-or-higher specificity. */
  .hero__scene.is-clip-full .hscene[data-scene="1"],
  .hero__scene.is-clip-full .hscene[data-scene="2"] {
    display: none;
  }

  .hero__progress,
  .hero__scrollhint {
    display: none;
  }
}

@media (max-width: 880px) {
  .statsband__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  .statsband__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   Card "view case study" link
   ========================================================= */
.card__case {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent);
  width: fit-content;
  transition: gap 0.25s;
}

.card__case svg {
  width: 15px;
  height: 15px;
}

.card__case:hover {
  gap: 0.7rem;
}

/* =========================================================
   Case-study page
   ========================================================= */
.casepage {
  padding-top: 5.5rem;
}

.case {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--pad);
  --case: var(--accent);
}

.case__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  transition: gap 0.25s, color 0.25s;
}

.case__back:hover {
  color: var(--accent);
  gap: 0.8rem;
}

.case__hero {
  padding: clamp(1.4rem, 3vw, 2.3rem);
  border: 1px solid color-mix(in srgb, var(--case) 24%, var(--border));
  border-radius: var(--radius);
  background: linear-gradient(150deg, color-mix(in srgb, var(--case) 13%, var(--bg-soft)), color-mix(in srgb, var(--case) 4%, var(--bg-soft)));
  margin-bottom: 2.5rem;
}

/* Case hero with square (1:1) cover art alongside the copy */
.case__hero--cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.case__cover {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.5);
}
.case__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__cover-img--alt {
  opacity: 0;
  animation: coverSwap 8s ease-in-out infinite;
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .case__cover-img--alt { animation: none; }
}
@media (max-width: 760px) {
  .case__hero--cover { grid-template-columns: 1fr; }
  .case__cover { max-width: 420px; order: -1; }
}

.case__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--case);
  margin-bottom: 1rem;
}

.case__eyebrow .rolechip {
  padding: 3px 9px;
  border-radius: 7px;
  color: #fff;
  font-size: 0.66rem;
  background: var(--case);
}

.case__title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.04;
  margin-bottom: 1rem;
}

.case__tagline {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  color: var(--text-dim);
  max-width: 60ch;
  line-height: 1.5;
}

.case__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
}

.case__meta div span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}

.case__meta div strong {
  font-size: 0.98rem;
  font-weight: 600;
}

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.case__tags li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-dim);
  padding: 0.32rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* metrics band */
.case__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2.8rem;
}

.cmetric {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-top: 3px solid color-mix(in srgb, var(--case) 55%, transparent);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
}

.cmetric__val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1;
  background: linear-gradient(135deg, var(--case), color-mix(in srgb, var(--case) 52%, #000));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cmetric__label {
  display: block;
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 0.6rem;
  line-height: 1.4;
}

/* prose sections */
.case__section {
  margin-bottom: 2.8rem;
}

.case__section-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 1rem;
}

.case__section p {
  color: var(--text-dim);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 72ch;
}

.case__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.case__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-dim);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 72ch;
}

.case__list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.case__list strong {
  color: var(--text);
}

/* screenshot gallery + placeholders */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.1rem;
}

.gallery__item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
  cursor: zoom-in;
  transition: transform 0.35s var(--ease), box-shadow 0.35s, border-color 0.35s;
}

.gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__ph {
  display: grid;
  place-content: center;
  gap: 0.6rem;
  text-align: center;
  height: 100%;
  cursor: default;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2));
}

.gallery__ph img {
  width: 34px;
  height: 34px;
  opacity: 0.55;
  margin: 0 auto;
}

.gallery__ph span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 0 1rem;
}

.gallery__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(to top, rgba(6, 8, 20, 0.82), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery__item:hover .gallery__cap {
  opacity: 1;
}

.gallery__note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 0.9rem;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(6, 8, 20, 0.88);
  backdrop-filter: blur(8px);
}

.lightbox.is-open {
  display: grid;
}

.lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.lightbox__cap {
  position: absolute;
  bottom: 2.2vh;
  left: 0;
  right: 0;
  text-align: center;
  color: #e8e8f4;
  font-size: 0.9rem;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background 0.2s;
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__btn--close {
  top: 3vh;
  right: 3vw;
}

.lightbox__btn--prev {
  left: 2vw;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__btn--next {
  right: 2vw;
  top: 50%;
  transform: translateY(-50%);
}

/* reflection + cta */
.case__reflection {
  padding: 2rem;
  border-left: 3px solid var(--case);
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 2.8rem;
}

.case__reflection p {
  color: var(--text-dim);
  font-size: 1.08rem;
  line-height: 1.7;
  font-style: italic;
}

.case__cta {
  text-align: center;
  padding: 2.5rem 0 1rem;
  border-top: 1px solid var(--border);
}

.case__cta h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 1.4rem;
}

.case__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.case__missing {
  display: none !important;
}

/* case-study process flow chart */
.flowchart {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flowstep {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 1rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.flowstep:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--case) 42%, var(--border));
}

.flowstep__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--case), color-mix(in srgb, var(--case) 55%, #000));
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--case) 65%, transparent);
}

.flowstep__icon img {
  width: 22px;
  height: 22px;
}

.flowstep__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--case), color-mix(in srgb, var(--case) 55%, #000));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.flowstep__label {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.flowstep__sub {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}

.flowarrow {
  flex-shrink: 0;
  align-self: center;
  width: 26px;
  height: 16px;
  color: var(--case);
}

@media (max-width: 640px) {
  .flowchart {
    flex-direction: column;
  }

  .flowstep {
    width: 100%;
  }

  .flowarrow {
    transform: rotate(90deg);
    margin: -0.15rem 0;
  }
}

@media (max-width: 560px) {
  .lightbox__btn--prev {
    left: 1vw;
  }

  .lightbox__btn--next {
    right: 1vw;
  }
}

/* Card hover cover-shot rotation effect */
.card__cover-shot--hover {
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__cover-shot--hover {
  opacity: 1;
}

/* Full aspect-ratio cover-shot mockup fitting */
.card__cover-shot--full {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: cover !important;
}

/* Auto-alternating dual cover — cycles BOTH square (1:1) cover options
   without needing hover, so both show on mobile/touch too. Cards are
   staggered via inline animation-delay so they don't flip in unison. */
.card__cover--art { background: #0e0d12; }
.card__cover-shot--alt {
  opacity: 0;
  animation: coverSwap 8s ease-in-out infinite;
  will-change: opacity;
}
@keyframes coverSwap {
  0%, 42%  { opacity: 0; }
  50%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card__cover-shot--alt { animation: none; opacity: 0; transition: opacity 0.35s ease; }
  .card:hover .card__cover-shot--alt { opacity: 1; }
}

/* Card cover tags overlay on hover */
.card__cover .card__tags {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(8, 7, 11, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  margin-top: 0;
}

.card:hover .card__cover .card__tags {
  opacity: 1;
  pointer-events: auto;
}

.card__cover .card__tags li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #ffffff;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(10px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card__cover .card__tags li {
  transform: translateY(0);
}