/* =========================================================
   CARLOS H. PORTFOLIO v2 — Design System
   Art Direction: Hyper-Blue Tech / Glassmorphism Depth
   Palette: Deep obsidian dark / Crisp arctic light
   Accent: Hyper Electric Blue — #0066FF / #38BFFF
   Fonts: Clash Display (headings) + Satoshi (body)
   ========================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=satoshi@300,400,500,700&display=swap');

/* ─── TOKENS ──────────────────────────────────────────── */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(2.8rem,   0.5rem  + 5.5vw,  6rem);

  --space-1:  0.25rem; --space-2:  0.5rem;  --space-3:  0.75rem;
  --space-4:  1rem;    --space-5:  1.25rem; --space-6:  1.5rem;
  --space-8:  2rem;    --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.375rem; --radius-md: 0.5rem;   --radius-lg: 0.75rem;
  --radius-xl: 1rem;     --radius-2xl: 1.5rem;  --radius-3xl: 2rem;
  --radius-full: 9999px;

  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;

  --font-display: 'Clash Display', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;
}

/* ─── LIGHT MODE ──────────────────────────────────────── */
:root, [data-theme="light"] {
  --color-bg:              #F0F4F8;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #FAFCFE;
  --color-surface-offset:  #E8EEF4;
  --color-surface-offset-2:#DDE6EF;
  --color-surface-dynamic: #D0DCEB;
  --color-divider:         #C8D6E5;
  --color-border:          #B8CCDE;

  --color-text:            #0D1B2A;
  --color-text-muted:      #4A6079;
  --color-text-faint:      #8AACC5;
  --color-text-inverse:    #F6F9FC;

  /* Hyper Blue */
  --color-primary:         #0066FF;
  --color-primary-hover:   #0055DD;
  --color-primary-active:  #0044BB;
  --color-primary-subtle:  #E0EEFF;
  --color-primary-glow:    rgba(0, 102, 255, 0.18);

  --color-secondary:       #00C2FF;
  --color-secondary-subtle:#DFFAFF;
  --color-accent-grad:     linear-gradient(135deg, #0066FF 0%, #00C2FF 100%);

  --shadow-sm: 0 1px 3px rgba(13,27,42,0.07), 0 1px 2px rgba(13,27,42,0.04);
  --shadow-md: 0 4px 16px rgba(13,27,42,0.09), 0 2px 6px rgba(13,27,42,0.05);
  --shadow-lg: 0 16px 48px rgba(13,27,42,0.11), 0 4px 12px rgba(13,27,42,0.06);
  --shadow-xl: 0 32px 80px rgba(13,27,42,0.14), 0 8px 24px rgba(13,27,42,0.08);
  --shadow-glow: 0 0 40px rgba(0, 102, 255, 0.22);
  --shadow-glow-sm: 0 0 20px rgba(0, 102, 255, 0.14);

  /* Glassmorphism */
  --glass-bg: rgba(246, 249, 252, 0.72);
  --glass-border: rgba(255,255,255, 0.6);
  --glass-shadow: 0 8px 32px rgba(13,27,42,0.1), inset 0 1px 0 rgba(255,255,255,0.8);

  --hero-gradient: linear-gradient(160deg, #E8F0FF 0%, #F0F4F8 40%, #E8F5FF 100%);
  --hero-orb-1: radial-gradient(ellipse 60% 50% at 15% 50%, rgba(0,102,255,0.12) 0%, transparent 70%);
  --hero-orb-2: radial-gradient(ellipse 50% 40% at 85% 25%, rgba(0,194,255,0.10) 0%, transparent 65%);
  --hero-orb-3: radial-gradient(ellipse 40% 60% at 50% 90%, rgba(0,102,255,0.07) 0%, transparent 60%);
}

/* ─── DARK MODE ───────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:              #050A14;
  --color-surface:         #0A1020;
  --color-surface-2:       #0F1629;
  --color-surface-offset:  #121C30;
  --color-surface-offset-2:#172035;
  --color-surface-dynamic: #1F2C42;
  --color-divider:         #1E2B3F;
  --color-border:          #243350;

  --color-text:            #E2EAF4;
  --color-text-muted:      #6B8CAE;
  --color-text-faint:      #344D6A;
  --color-text-inverse:    #050A14;

  --color-primary:         #3B9EFF;
  --color-primary-hover:   #60B3FF;
  --color-primary-active:  #0066FF;
  --color-primary-subtle:  rgba(59,158,255,0.12);
  --color-primary-glow:    rgba(59, 158, 255, 0.28);

  --color-secondary:       #00D4FF;
  --color-secondary-subtle:rgba(0,212,255,0.10);
  --color-accent-grad:     linear-gradient(135deg, #3B9EFF 0%, #00D4FF 100%);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 50px rgba(59,158,255,0.35);
  --shadow-glow-sm: 0 0 24px rgba(59,158,255,0.22);

  --glass-bg: rgba(10, 16, 32, 0.75);
  --glass-border: rgba(255,255,255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);

  --hero-gradient: linear-gradient(160deg, #05091A 0%, #050A14 50%, #040C18 100%);
  --hero-orb-1: radial-gradient(ellipse 60% 50% at 15% 50%, rgba(59,158,255,0.18) 0%, transparent 70%);
  --hero-orb-2: radial-gradient(ellipse 50% 40% at 85% 25%, rgba(0,212,255,0.12) 0%, transparent 65%);
  --hero-orb-3: radial-gradient(ellipse 40% 60% at 50% 90%, rgba(59,158,255,0.09) 0%, transparent 60%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#050A14; --color-surface:#0A1020; --color-surface-2:#0F1629;
    --color-surface-offset:#121C30; --color-surface-offset-2:#172035;
    --color-surface-dynamic:#1F2C42; --color-divider:#1E2B3F; --color-border:#243350;
    --color-text:#E2EAF4; --color-text-muted:#6B8CAE; --color-text-faint:#344D6A;
    --color-text-inverse:#050A14;
    --color-primary:#3B9EFF; --color-primary-hover:#60B3FF; --color-primary-active:#0066FF;
    --color-primary-subtle:rgba(59,158,255,0.12); --color-primary-glow:rgba(59,158,255,0.28);
    --color-secondary:#00D4FF; --color-secondary-subtle:rgba(0,212,255,0.10);
    --color-accent-grad:linear-gradient(135deg, #3B9EFF 0%, #00D4FF 100%);
    --shadow-sm:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:0 16px 48px rgba(0,0,0,0.6); --shadow-xl:0 32px 80px rgba(0,0,0,0.7);
    --shadow-glow:0 0 50px rgba(59,158,255,0.35); --shadow-glow-sm:0 0 24px rgba(59,158,255,0.22);
    --glass-bg:rgba(10,16,32,0.75); --glass-border:rgba(255,255,255,0.08);
    --glass-shadow:0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);
    --hero-gradient:linear-gradient(160deg,#05091A 0%,#050A14 50%,#040C18 100%);
    --hero-orb-1:radial-gradient(ellipse 60% 50% at 15% 50%,rgba(59,158,255,0.18) 0%,transparent 70%);
    --hero-orb-2:radial-gradient(ellipse 50% 40% at 85% 25%,rgba(0,212,255,0.12) 0%,transparent 65%);
    --hero-orb-3:radial-gradient(ellipse 40% 60% at 50% 90%,rgba(59,158,255,0.09) 0%,transparent 60%);
  }
}

/* ─── LAYOUT ──────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-16));
}
.container--narrow { max-width: var(--content-default); }

/* ─── HEADER ──────────────────────────────────────────── */

.site-header {
  width: 100% !important;
  max-width: 100% !important;
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-block: var(--space-4);
  transition: background 0.4s ease, box-shadow 0.35s ease, transform 0.3s var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: inherit;
  z-index: -1;
}



.site-header.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}
.site-header.hidden { transform: translateY(-100%); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }

.nav__logo {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: var(--color-text);
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em;
}
.nav__logo svg { flex-shrink: 0; transition: transform 0.3s var(--ease-out); }
.nav__logo:hover svg { transform: rotate(-6deg) scale(1.08); }

.nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; }
.nav__links a {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted);
  text-decoration: none; letter-spacing: 0.06em; text-transform: uppercase;
  position: relative; padding-block: var(--space-1);
  transition: color var(--transition-interactive);
}
.nav__links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px;
  background: var(--color-accent-grad); transition: width var(--transition-interactive);
}
.nav__links a:hover { color: var(--color-text); }
.nav__links a:hover::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

/* kill WP/global button styles only for this control */
button.theme-toggle,
button.theme-toggle:hover,
button.theme-toggle:focus,
button.theme-toggle:active,
button.theme-toggle:focus-visible,
button.theme-toggle.focus-visible {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* base structure only */
.theme-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.theme-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
}

.theme-toggle svg * {
  stroke: currentColor !important;
}

/* =========================
   1) DARK / DEFAULT
   ========================= */
html[data-theme="dark"] .theme-toggle {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(98, 168, 255, 0.25) !important;
  color: rgb(107, 140, 174) !important;
}

/* =========================
   2) DARK / HOVER-FOCUS-ACTIVE
   ========================= */
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus,
html[data-theme="dark"] .theme-toggle:active,
html[data-theme="dark"] .theme-toggle:focus-visible,
html[data-theme="dark"] .theme-toggle.focus-visible {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgb(59, 158, 255) !important;
  color: rgb(59, 158, 255) !important;
  border-radius: 9999px !important;
  outline: none !important;
}

/* =========================
   3) LIGHT / DEFAULT
   ========================= */
html[data-theme="light"] .theme-toggle {
  background: rgba(246, 249, 252, 0.72) !important;
  background-color: rgba(246, 249, 252, 0.72) !important;
  border: 1px solid rgb(184, 204, 222) !important;
  color: rgb(90, 112, 140) !important;
}

/* =========================
   4) LIGHT / HOVER-FOCUS-ACTIVE
   ========================= */
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:focus,
html[data-theme="light"] .theme-toggle:active,
html[data-theme="light"] .theme-toggle:focus-visible,
html[data-theme="light"] .theme-toggle.focus-visible {
  background: rgba(246, 249, 252, 0.72) !important;
  background-color: rgba(246, 249, 252, 0.72) !important;
  border: 1px solid rgb(0, 102, 255) !important;
  color: rgb(0, 102, 255) !important;
  border-radius: 9999px !important;
  outline: none !important;
}


.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: rgba(98, 168, 255, 0.08) !important;
  background-color: rgba(98, 168, 255, 0.08) !important;
  color: #cfe7ff !important;
  border-radius: 9999px !important;
  border-color: rgba(98, 168, 255, 0.42) !important;
}

.theme-toggle:focus-visible,
.theme-toggle.focus-visible {
  outline: 2px solid rgba(98, 168, 255, 0.4) !important;
  outline-offset: 3px !important;
  border-radius: 9999px !important;
}


.theme-toggle svg circle,
.theme-toggle svg path {
  stroke-width: 2.2 !important;
  vector-effect: non-scaling-stroke !important;
}
.theme-toggle svg path,
.theme-toggle svg circle,
.theme-toggle svg line {
  vector-effect: non-scaling-stroke;
}

.btn-hire {
  font-size: var(--text-sm); font-weight: 600;
  padding: 10px var(--space-5); border-radius: var(--radius-full);
  background: var(--color-accent-grad); color: white;
  text-decoration: none; letter-spacing: 0.01em;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), filter var(--transition-interactive);
  box-shadow: 0 2px 12px var(--color-primary-glow);
}
.btn-hire:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  filter: brightness(1.08);
}
.btn-hire:active { transform: translateY(0); }

.nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--glass-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all var(--transition-interactive);
}
.nav__hamburger span {
  display: block; width: 18px; height: 1.5px; background: var(--color-text);
  transition: all 0.3s var(--ease-out); transform-origin: center;
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: var(--color-bg); padding-top: 80px;
  padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
  flex-direction: column; gap: var(--space-4);
}
.nav__mobile-menu.open { display: flex; }
.nav__mobile-menu a {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600;
  color: var(--color-text); text-decoration: none; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--color-divider); padding-block: var(--space-5);
  transition: color var(--transition-interactive), padding-left var(--transition-interactive);
}
.nav__mobile-menu a:hover { color: var(--color-primary); padding-left: var(--space-4); }

/* ─── BUTTONS ─────────────────────────────────────────── */

.btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--color-accent-grad); color: white; text-decoration: none;
  box-shadow: 0 4px 20px var(--color-primary-glow);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), filter var(--transition-interactive);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); filter: brightness(1.08); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 500;
  border-radius: var(--radius-full); background: var(--glass-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--color-text); text-decoration: none;
  border: 1px solid var(--color-border);
  transition: all var(--transition-interactive);
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-glow-sm); }

.btn-outline {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-full); background: transparent;
  color: var(--color-primary); text-decoration: none;
  border: 1.5px solid var(--color-primary);
  transition: all var(--transition-interactive);
}
.btn-outline:hover { background: var(--color-primary); color: white; box-shadow: var(--shadow-glow-sm); }

/* ─── HERO ────────────────────────────────────────────── */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--hero-gradient);
}
.hero__orbs {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--hero-orb-1), var(--hero-orb-2), var(--hero-orb-3);
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--color-divider) 1px, transparent 1px),
                    linear-gradient(90deg, var(--color-divider) 1px, transparent 1px);
  background-size: 72px 72px; opacity: 0.35;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.4) 0%, transparent 80%);
}
/* Hero two-column layout */
.hero__layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: flex-start;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  padding-top: calc(72px + clamp(var(--space-16), 10vw, var(--space-24)));
  padding-bottom: clamp(var(--space-16), 10vw, var(--space-24));
}
@media (max-width: 1100px) {
  .hero__layout { grid-template-columns: 1fr 360px; }
}
@media (max-width: 960px) {
  .hero__layout { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__visual { display: none; }
}
.hero__content { position: relative; z-index: 2; }

/* Hero visual column — top-aligned, parallax via JS */
.hero__visual {
  position: relative; z-index: 2;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.hero__visual-card {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  position: relative; /* needed for .hero__visual-label absolute child */
  background: var(--color-surface-offset);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--glass-border);
  /* In-flow, stacked */
  width: 100%;
  margin-bottom: var(--space-4);
}
.hero__visual-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero__visual-card--main {
  height: 220px;
}
.hero__visual-card--secondary {
  height: 140px;
  width: 80%;
  margin-left: auto;
}
.hero__visual-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.hero__visual-tag {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-primary); background: color-mix(in oklab, var(--color-primary) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  border-radius: var(--radius-sm); padding: 2px 8px; width: fit-content;
}
.hero__visual-name {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: white; letter-spacing: -0.01em;
}
.hero__visual-stat {
  /* Now in-flow, aligned right */
  align-self: flex-end;
  margin-left: auto;
  width: 50%;
  min-height: 80px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-1); padding: var(--space-4);
  box-shadow: var(--shadow-lg);
}
.hero__visual-stat-num {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 700; letter-spacing: -0.03em;
  background: var(--color-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__visual-stat-label {
  font-size: var(--text-xs); color: var(--color-text-muted);
  font-weight: 600; text-align: center;
}

/* Hero visual entrance animation — staggered float-in + idle float */
@keyframes hero-visual-enter {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.hero__visual-card--main    { animation: hero-visual-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both, hero-float 7s ease-in-out 1.5s infinite; }
.hero__visual-card--secondary { animation: hero-visual-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both, hero-float 9s ease-in-out 1.8s infinite; }
.hero__visual-stat          { animation: hero-visual-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both, hero-float 11s ease-in-out 2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero__visual-card--main, .hero__visual-card--secondary, .hero__visual-stat { animation: none; }
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero__eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary); animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.6)} }

.hero__headline {
  font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700;
  letter-spacing: -0.035em; line-height: 0.96;
  color: var(--color-text); margin-bottom: var(--space-8); max-width: 960px;
}
.hero__headline .gradient-text {
  background: var(--color-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__sub {
  font-size: var(--text-lg); font-weight: 400; color: var(--color-text-muted);
  max-width: 540px; line-height: 1.65; margin-bottom: var(--space-10);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-16); }

.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.hero__trust-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.hero__trust-brands { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.hero__trust-brand {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border); letter-spacing: 0.04em;
}

.hero__scroll {
  position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; z-index: 2; animation: scroll-bounce 2.5s infinite;
}
@keyframes scroll-bounce {
  0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)}
}

/* ─── SECTION COMMON ──────────────────────────────────── */
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-32)); }
.section__eyebrow {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-4);
}
.section__title {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--color-text); margin-bottom: var(--space-4);
}
.section__lead { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; max-width: 540px; }
.section__header { margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
.section__header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }

.section-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

/* ─── GLASS CARD ──────────────────────────────────────── */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ─── FEATURED WORK GRID ──────────────────────────────── */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 768px) { .work-grid { grid-template-columns: 1fr; } }
/* Featured stack: 2 full-width stacked rows */
.work-grid--featured-stack { display: flex; flex-direction: column; gap: var(--space-5); }
/* Standard quad: 2x2 grid */
.work-grid--standard-quad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 640px) { .work-grid--standard-quad { grid-template-columns: 1fr; } }

.work-card {
  position: relative; border-radius: var(--radius-2xl);
  background: var(--color-surface); border: 1px solid var(--color-border);
  overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border)); }
.work-card:active { transform: translateY(-1px); }

.work-card--featured { grid-column: 1 / -1; flex-direction: row; min-height: 400px; }
/* Alt featured: image on right */
.work-card--featured-alt { flex-direction: row-reverse; }
@media (max-width: 900px) { .work-card--featured { flex-direction: column; min-height: auto; } .work-card--featured-alt { flex-direction: column; } }
@media (max-width: 768px) { .work-card--featured { flex-direction: column; min-height: auto; } .work-card--featured-alt { flex-direction: column; } }

.work-card__image {
  overflow: hidden; position: relative; background: var(--color-surface-offset); flex-shrink: 0;
}
.work-card--standard .work-card__image { height: 240px; }
.work-card--featured .work-card__image { flex: 1.4; min-height: 340px; }
@media (max-width: 900px) { .work-card--featured .work-card__image { min-height: 260px; flex: none; } }
@media (max-width: 768px) { .work-card--featured .work-card__image { min-height: 220px; } }

.work-card__image img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.7s var(--ease-out);
}
.work-card:hover .work-card__image img { transform: scale(1.04); }

/* Glassmorphism overlay on image */
.work-card__image-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, color-mix(in oklab, var(--color-primary) 15%, transparent) 0%, transparent 50%);
}

/* Floating glass stat chips on featured cards */
.work-card__chip {
  position: absolute; bottom: var(--space-4); left: var(--space-4);
  display: flex; gap: var(--space-3); z-index: 3;
}
.work-card__chip-item {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; color: white;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
}

.work-card__body {
  padding: var(--space-6) var(--space-7); display: flex;
  flex-direction: column; justify-content: space-between; flex: 1; gap: var(--space-4);
  min-height: 180px;
}

.work-card__body.grid-4 {
  padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 2vw, 1.75rem) !important;
}

.work-card--featured .work-card__body { min-width: 320px; max-width: 420px; padding: var(--space-10) var(--space-10); display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); }
@media (max-width: 900px) { .work-card--featured .work-card__body { max-width: none; padding: var(--space-6); } }
@media (max-width: 768px) { .work-card--featured .work-card__body { max-width: none; padding: var(--space-6); } }

.work-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tag {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-muted); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); background: var(--color-surface-offset); border: 1px solid var(--color-border);
}
.tag--primary {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
}
.tag--blue {
  color: var(--color-secondary);
  background: var(--color-secondary-subtle);
  border-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
}
.work-card__year { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-faint); letter-spacing: 0.05em; }
.work-card__title {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.15; color: var(--color-text); margin-block: var(--space-2);
}
.work-card__desc {
  font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65;
  -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.work-card__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-primary);
  margin-top: auto; transition: gap var(--transition-interactive), color var(--transition-interactive);
}
.work-card:hover .work-card__cta { gap: var(--space-4); }

.work-card__badge {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); z-index: 3;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.work-card__badge--soon { background: rgba(0,194,255,0.18); color: var(--color-secondary); border: 1px solid rgba(0,194,255,0.35); }
.work-card__badge--nda { background: rgba(106,128,160,0.2); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ─── HORIZONTAL SCROLL CAROUSEL ─────────────────────── */
.carousel-section { padding-block: clamp(var(--space-10), 5vw, var(--space-20)); overflow: hidden; }
.carousel-track-outer {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 92%, transparent 100%);
}
.carousel-track {
  display: flex; gap: var(--space-5); overflow-x: auto; padding-inline: clamp(var(--space-6), 5vw, var(--space-16));
  padding-block: var(--space-4); scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.grabbing { cursor: grabbing; }

.carousel-card {
  flex: 0 0 320px; scroll-snap-align: start;
  border-radius: var(--radius-2xl); background: var(--color-surface);
  border: 1px solid var(--color-border); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
  text-decoration: none; color: inherit;
}
.carousel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-border)); }

.carousel-card__image {
  height: 180px; overflow: hidden; background: var(--color-surface-offset); position: relative;
}
.carousel-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.carousel-card:hover .carousel-card__image img { transform: scale(1.05); }
.carousel-card__image-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--color-surface) 40%, transparent) 0%, transparent 50%);
}
.carousel-card__body { padding: var(--space-5) var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.carousel-card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); }
.carousel-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.carousel-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-2); }
.carousel-card__year { font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 500; }

.carousel-nav { display: flex; gap: var(--space-3); justify-content: flex-end; padding-inline: clamp(var(--space-6), 5vw, var(--space-16)); margin-top: var(--space-5); }
.carousel-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--glass-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-muted); cursor: pointer;
  transition: all var(--transition-interactive);
}
.carousel-btn:hover { color: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow-glow-sm); }
.carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── ALL PROJECTS LIST ───────────────────────────────── */
.projects-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow: hidden;
}
.projects-list__item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-8); border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface); text-decoration: none; color: inherit;
  transition: background var(--transition-interactive);
}
.projects-list__item:last-child { border-bottom: none; }
.projects-list__item:hover { background: var(--color-surface-offset); }
.projects-list__item-left { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.projects-list__item-num { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-faint); min-width: 28px; font-family: var(--font-display); }
.projects-list__item-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.projects-list__item-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.projects-list__item-right { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.projects-list__item-year { font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 500; white-space: nowrap; }

/* ─── CAPABILITIES ────────────────────────────────────── */
.capabilities { background: var(--color-surface); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.capabilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.capability-card {
  padding: var(--space-8); border-radius: var(--radius-xl);
  background: var(--color-bg); border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive);
  position: relative; overflow: hidden;
}
.capability-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 0% 0%, var(--color-primary-subtle), transparent);
  opacity: 0; transition: opacity var(--transition-interactive);
}
.capability-card:hover::before { opacity: 1; }
.capability-card:hover { border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.capability-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  background: var(--color-primary-subtle); display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); margin-bottom: var(--space-5); font-size: 20px;
  position: relative;
}
.capability-card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); letter-spacing: -0.01em; position: relative; }
.capability-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; position: relative; }

/* ─── TESTIMONIALS ────────────────────────────────────── */
.testimonials { background: var(--color-bg); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.testimonial-card {
  padding: var(--space-8); border-radius: var(--radius-2xl);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  position: relative; display: flex; flex-direction: column; gap: var(--space-6);
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.testimonial-card__quote-mark {
  font-family: var(--font-display); font-size: 72px; line-height: 0.6;
  color: var(--color-primary); opacity: 0.25; font-weight: 700; position: absolute; top: var(--space-5); left: var(--space-7);
}
.testimonial-card__text { font-size: var(--text-base); color: var(--color-text); line-height: 1.75; padding-top: var(--space-6); font-style: italic; position: relative; }
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-4); }
.testimonial-card__avatar {
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-accent-grad);
  display: flex; align-items: center; justify-content: center;
  color: white; font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--glass-border);
}
.testimonial-card__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; }
.testimonial-card__role { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* ─── ABOUT ───────────────────────────────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(var(--space-12), 6vw, var(--space-20));
  align-items: start;
}
@media (max-width: 900px) { .about-layout { grid-template-columns: 1fr; gap: var(--space-10); } }

.about__visual { position: relative; }
.about__image-frame {
  border-radius: var(--radius-3xl); overflow: hidden;
  aspect-ratio: 3/4; background: var(--color-surface-offset); position: relative;
  box-shadow: var(--shadow-xl);
}
.about__image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.about__image-frame-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 50%, color-mix(in oklab, var(--color-bg) 40%, transparent) 100%);
}

/* Blue accent glow behind image — NOT using z-index negative (causes clip) */
.about__image-glow {
  position: absolute;
  inset: -24px;
  border-radius: calc(var(--radius-3xl) + 16px);
  background: radial-gradient(ellipse at center, var(--color-primary-glow), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.about__image-frame { position: relative; z-index: 1; }

/* Glass stat cards float over the image */
.about__stats {
  position: absolute; bottom: var(--space-6); right: calc(-1 * var(--space-6));
  display: flex; flex-direction: column; gap: var(--space-3); z-index: 2;
}
@media (max-width: 900px) { .about__stats { position: static; flex-direction: row; flex-wrap: wrap; margin-top: var(--space-5); } }

.about__stat {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-2xl); padding: var(--space-4) var(--space-6);
  min-width: 140px;
}
.about__stat-num {
  font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700;
  background: var(--color-accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em; line-height: 1;
}
.about__stat-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.04em; margin-top: var(--space-1); }

.about__body { padding-top: var(--space-4); }
.about__highlight { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); line-height: 1.5; margin-bottom: var(--space-6); }
.about__body p { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--space-5); }
.about__skills-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-4); margin-top: var(--space-8); }
.about__skills-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.about__skills-list li {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  background: var(--glass-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
}
.about__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* ─── CONTACT ─────────────────────────────────────────── */
.contact { text-align: center; }
.contact__inner { max-width: 680px; margin-inline: auto; }
.contact__email {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  background: var(--color-accent-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-decoration: none; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: var(--space-3); margin-block: var(--space-8);
  transition: filter var(--transition-interactive);
}
.contact__email svg { -webkit-text-fill-color: initial; color: var(--color-primary); }
.contact__email:hover { filter: brightness(1.2); }
.contact__socials { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.contact__social-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
  text-decoration: none; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition-interactive);
}
.contact__social-link:hover { color: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow-glow-sm); transform: translateY(-1px); }

/* ─── FOOTER ──────────────────────────────────────────── */
.footer {
  padding-block: var(--space-8); border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer__copy { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__pplx { font-size: var(--text-xs); color: var(--color-text-faint); text-decoration: none; transition: color var(--transition-interactive); }
.footer__pplx:hover { color: var(--color-primary); }

/* ─── SCROLL PROGRESS ─────────────────────────────────── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--color-accent-grad); z-index: 200; transform-origin: left; }

/* ─── SCROLL REVEAL ───────────────────────────────────── */
.fade-in { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 65%;
  }
}
@keyframes reveal-fade { to { opacity: 1; } }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) { .nav__links, .btn-hire { display: none; } .nav__hamburger { display: flex; } }
@media (max-width: 600px) {
  .hero__headline { font-size: clamp(2.5rem, 10vw, 4rem); }
  .section__header--split { flex-direction: column; align-items: flex-start; }
  .projects-list__item { grid-template-columns: 1fr; gap: var(--space-2); }
  .projects-list__item-right { display: none; }
  .footer__inner { flex-direction: column; text-align: center; }
}

/* ─── CASE STUDY PAGE ─────────────────────────────────── */
.cs-hero {
  min-height: 70vh; display: flex; align-items: flex-end;
  position: relative; overflow: hidden;
  padding-block: clamp(var(--space-20), 10vw, var(--space-32));
}
.cs-hero__bg { position: absolute; inset: 0; z-index: 0; }
.cs-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,10,20,0.92) 0%, rgba(5,10,20,0.6) 50%, rgba(5,10,20,0.3) 100%);
}
.cs-hero__content { position: relative; z-index: 2; }
.cs-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: rgba(255,255,255,0.7);
  text-decoration: none; margin-bottom: var(--space-8);
  transition: color var(--transition-interactive);
}
.cs-back:hover { color: white; }
.cs-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; color: white; margin-bottom: var(--space-4); }
.cs-desc { font-size: var(--text-lg); color: rgba(255,255,255,0.75); max-width: 600px; line-height: 1.65; }

.cs-meta-bar {
  padding-block: var(--space-8); background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.cs-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-6); }
.cs-meta-item__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
.cs-meta-item__value { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--color-text); }

.cs-body { max-width: 800px; margin-inline: auto; }
.cs-section { padding-block: clamp(var(--space-12), 5vw, var(--space-20)); }
.cs-section + .cs-section { border-top: 1px solid var(--color-divider); }
.cs-h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.025em; color: var(--color-text); margin-bottom: var(--space-6); }
.cs-p { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--space-5); }
.cs-p:last-child { margin-bottom: 0; }

.cs-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 900px) { .cs-outcomes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .cs-outcomes { grid-template-columns: 1fr; } }
.cs-outcome-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-md);
  text-align: center;
  min-width: 0; /* critical: allow flex/grid children to shrink */
  overflow: hidden;
}
.cs-outcome-num {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 2rem);
  font-weight: 700;
  background: var(--color-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: block;
}
.cs-outcome-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-top: var(--space-3); line-height: 1.5; }

.cs-img-full { width: 100%; border-radius: var(--radius-2xl); overflow: hidden; margin-block: var(--space-8); box-shadow: var(--shadow-xl); }
.cs-img-full img { width: 100%; height: auto; display: block; }
.cs-img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block: var(--space-8); }
.cs-img-grid-item { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-surface-offset); aspect-ratio: 4/3; }
.cs-img-grid-item img { width: 100%; height: 100%; object-fit: cover; }

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

.cs-nav-footer { padding-block: var(--space-16); border-top: 1px solid var(--color-divider); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-6); }