/* =========================================================
   SHUBHAM SHAH — PORTFOLIO DESIGN SYSTEM
   Single-page site with a dual-theme design-token system.
   Dark is the default (applied by :root); an explicit
   [data-theme="light"] attribute on <html> (set by js/theme.js,
   persisted via localStorage) swaps every token to the light set
   below. Every component consumes these custom properties —
   never a raw hex — so nothing goes accidentally-dark/light when
   the theme switches.
   ========================================================= */

:root {
  /* --- Color tokens: DARK (default) --- */
  --color-bg:              #0B0B12;   /* near-black base */
  --color-bg-alt:          #121219;   /* slightly lifted panel/section background */
  --color-surface:         #16161F;   /* card / panel surface */
  --color-surface-elevated:#1D1D28;   /* hover/elevated surface, one step up from --color-surface */
  --color-input-bg:        #0F0F16;   /* recessed field background, one step down from --color-surface */
  --color-ink:             #F4F3F9;   /* primary text, near-white */
  --color-ink-soft:        #B7B5C7;   /* secondary text */
  --color-muted:           #83809A;   /* tertiary text */
  --color-line:            #26263A;   /* hairline structural rule */
  --color-on-dark:         #F4F3F9;   /* alias of --color-ink, kept for older rules */
  --color-overlay:         rgba(6, 6, 10, 0.6);

  --color-orange:          #FF5C33;   /* primary accent — used deliberately, not alternated */
  --color-orange-dim:      #FF5C331a;
  --color-blue:            #4C7CFF;   /* secondary accent — focus rings, per-project accents */
  --color-blue-dim:        #4C7CFF1a;
  --color-success:         #2FBF71;
  --color-warning:         #FFB020;
  --color-error:           #FF6B5B;

  /* --- Type tokens --- */
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;

  --fs-hero:      clamp(3.2rem, 9vw, 8.5rem);
  --fs-h1:        clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2:        clamp(1.8rem, 3.2vw, 2.7rem);
  --fs-h3:        1.25rem;
  --fs-body:      1.05rem;
  --fs-small:     0.9rem;

  /* --- Spacing scale (4px base) — section/card/gap values across
     the file are expressed as multiples of this scale rather than
     arbitrary numbers ---*/
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* --- Layout tokens --- */
  --max-width:    1240px;
  --gutter:       clamp(1.5rem, 5vw, 4rem);
  --radius-s:     6px;
  --radius-m:     10px;
  --radius-l:     20px;

  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
  /* --- Color tokens: LIGHT (opt-in via the header theme toggle) ---
     Designed as its own palette, not an inversion of the dark set:
     warm off-white base (not stark white), white cards for contrast
     against it, a darker/richer accent tuned to pass AA on a light
     background instead of reusing the dark theme's brighter orange. */
  --color-bg:              #F7F5F1;
  --color-bg-alt:          #EFEBE4;
  --color-surface:         #FFFFFF;
  --color-surface-elevated:#FFFFFF;
  --color-input-bg:        #FFFFFF;
  --color-ink:             #17151F;
  --color-ink-soft:        #4A465A;
  --color-muted:           #6B6678;
  --color-line:            #E3DFD6;
  --color-on-dark:         #17151F;
  --color-overlay:         rgba(23, 21, 31, 0.35);

  --color-orange:          #D6431C;
  --color-orange-dim:      #D6431C1a;
  --color-blue:            #2F5FE0;
  --color-blue-dim:        #2F5FE01a;
  --color-success:         #1C9A5B;
  --color-warning:         #B8790A;
  --color-error:           #C4281A;
}

/* =========================================================
   SCROLL PROGRESS BAR
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 200;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { transition: none; }
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* Theme switch should read as a smooth cross-fade, not a hard cut.
   Cards/buttons already transition background-color/color/border-color
   as part of their hover states, so they animate the token swap for
   free. The plain section wrappers below have no hover state and no
   transition of their own, so without this their background would snap
   instantly while everything inside them fades. */
.site-header, .site-footer, .hero, .stats, .highlights, .md-section,
.work, .closing-cta {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.08;
}
p { margin: 0; }

/* section anchors: keep content clear of the sticky header when
   jumped to via nav / scroll-spy */
main [id] { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-label-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: 0.72rem;
}
.section-label-rule {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.section-heading {
  max-width: 640px;
  margin-bottom: 3rem;
}
.section-heading h2 {
  font-size: var(--fs-h2);
  margin-bottom: 0.75rem;
}
.section-heading p {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-s);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease-cinematic), background-color 0.35s var(--ease-cinematic), color 0.35s var(--ease-cinematic), border-color 0.35s var(--ease-cinematic), box-shadow 0.35s var(--ease-cinematic);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--color-orange);
  color: #fff;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--color-orange) 65%, transparent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--color-orange) 88%, white);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--color-orange) 65%, transparent);
}

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

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-line);
}
.btn-ghost:hover { border-color: var(--color-ink); }

.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border-color: color-mix(in srgb, var(--color-ink) 35%, transparent);
}
.btn-resume svg { width: 18px; height: 18px; }
.btn-outline:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-ink) 45%, transparent);
}

/* variant for use on the solid-orange closing CTA band */
.btn-on-accent {
  background: var(--color-bg);
  color: var(--color-orange);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,0.5);
}
.btn-on-accent:hover { background: color-mix(in srgb, var(--color-bg) 85%, black); }
.btn-outline-on-accent {
  background: transparent;
  color: var(--color-bg);
  border-color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}
.btn-outline-on-accent:hover {
  background: var(--color-bg);
  color: var(--color-orange);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: auto;
}
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-orange);
  color: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-orange) 70%, white);
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.main-nav {
  display: flex;
  gap: 2.1rem;
}
.nav-link {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  padding: 0.3rem 0;
  transition: color 0.25s;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-orange);
  transition: width 0.3s var(--ease-cinematic);
}
.nav-link:hover, .nav-link.is-active { color: var(--color-ink); }
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

.nav-cta { flex-shrink: 0; }

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: color 0.3s var(--ease-cinematic), border-color 0.3s var(--ease-cinematic), background-color 0.3s var(--ease-cinematic);
}
.theme-toggle:hover { color: var(--color-ink); border-color: var(--color-ink-soft); }
.theme-toggle-icon { width: 19px; height: 19px; }
.theme-toggle-icon.icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle-icon.icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle-icon.icon-sun { display: block; }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 8vh, 6rem) 0 clamp(1rem, 2.5vh, 1.5rem);
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--color-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-orange);
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fadeSlideUp 0.7s var(--ease-cinematic) forwards;
}

.hero-name {
  font-size: var(--fs-hero);
  color: var(--color-ink);
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-cinematic) 0.12s forwards;
}
.hero-name-accent {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-ink);
}

.hero-tagline {
  margin-top: 1.6rem;
  max-width: 30ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-ink-soft);
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-cinematic) 0.26s forwards;
}

/* ---------- Status row: live clock + "Open to Work" pill ---------- */
.hero-status-row {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-cinematic) 0.34s forwards;
}
.hero-status-chip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 0.2rem;
  column-gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  /* content-store text is admin-editable, so this can't assume it will
     always fit on one line — flex-wrap keeps a longer value from
     spilling outside the pill's rounded background */
}
#heroClockChip {
  /* the live time genuinely can't be known before JS runs — visibility
     (not display) keeps the chip's layout space reserved so there's no
     shift when js/site-render.js's first updateClock() call reveals it */
  visibility: hidden;
  transition: opacity 0.3s ease;
  opacity: 0;
}
#heroClockChip.is-ready { visibility: visible; opacity: 1; }
@media (max-width: 480px) {
  .hero-status-chip { border-radius: var(--radius-m); }
}
.hero-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent);
  animation: statusPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.hero-status-chip.is-available {
  color: var(--color-ink);
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-line));
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-cinematic) 0.4s forwards;
}

/* ---------- Hero tech-stack badge row ---------- */
.hero-stack {
  margin-top: 2.2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeSlideUp 0.8s var(--ease-cinematic) 0.52s forwards;
}
.hero-stack-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.hero-stack-icon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-bg, var(--color-ink));
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--badge-bg, var(--color-ink)) 70%, transparent);
  transition: transform 0.4s var(--ease-cinematic), box-shadow 0.4s var(--ease-cinematic);
}
.hero-stack-icon svg {
  width: 30px;
  height: 30px;
  animation: iconFloat 3.6s ease-in-out infinite;
}
.hero-stack-item:hover .hero-stack-icon {
  transform: translateY(-8px) scale(1.1) rotate(-4deg);
  box-shadow: 0 20px 36px -12px color-mix(in srgb, var(--badge-bg, var(--color-ink)) 65%, transparent);
  z-index: 1;
}
.hero-stack-label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  white-space: nowrap;
  transition: color 0.3s var(--ease-cinematic);
}
.hero-stack-item:hover .hero-stack-label { color: var(--color-ink); }

.hero-stack-item:nth-child(2) .hero-stack-icon svg { animation-delay: -0.45s; }
.hero-stack-item:nth-child(3) .hero-stack-icon svg { animation-delay: -0.9s; }
.hero-stack-item:nth-child(4) .hero-stack-icon svg { animation-delay: -1.35s; }
.hero-stack-item:nth-child(5) .hero-stack-icon svg { animation-delay: -1.8s; }
.hero-stack-item:nth-child(6) .hero-stack-icon svg { animation-delay: -2.25s; }
.hero-stack-item:nth-child(7) .hero-stack-icon svg { animation-delay: -2.7s; }
.hero-stack-item:nth-child(8) .hero-stack-icon svg { animation-delay: -3.15s; }
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (max-width: 480px) {
  .hero-stack { gap: 1rem; }
  .hero-stack-icon { width: 50px; height: 50px; border-radius: 14px; }
  .hero-stack-icon svg { width: 24px; height: 24px; }
  .hero-stack-label { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stack { opacity: 1; animation: none; }
  .hero-stack-icon svg { animation: none; }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-photo-wrap {
  position: relative;
  justify-self: center;
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-cinematic) 0.3s forwards;
}

.hero-photo-frame {
  position: relative;
  width: min(400px, 74vw);
  aspect-ratio: 5 / 6;
}

.hero-photo-glow {
  position: absolute;
  inset: -14%;
  background: radial-gradient(circle at 30% 20%, var(--color-orange) 0%, transparent 55%);
  filter: blur(38px);
  opacity: 0.4;
  z-index: 0;
  animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.55; }
}

.hero-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-m);
  border: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent);
}
.hero-photo svg, .hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-photo-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  border-color: var(--color-orange);
  border-style: solid;
  border-width: 0;
}
.hero-photo-corner.tl { top: -8px; left: -8px; border-top-width: 2px; border-left-width: 2px; }
.hero-photo-corner.tr { top: -8px; right: -8px; border-top-width: 2px; border-right-width: 2px; }
.hero-photo-corner.bl { bottom: -8px; left: -8px; border-bottom-width: 2px; border-left-width: 2px; }
.hero-photo-corner.br { bottom: -8px; right: -8px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- Code-snippet widget (technical-credibility detail) ---------- */
.hero-code-widget {
  margin-top: 1.6rem;
  width: min(400px, 74vw);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  overflow: hidden;
  opacity: 0;
  animation: fadeSlideUp 0.9s var(--ease-cinematic) 0.5s forwards;
}
.hero-code-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-line);
}
.hero-code-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-line); }
.hero-code-titlebar span:last-child {
  margin-left: 0.4rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-family: var(--font-mono);
}
.hero-code-body {
  margin: 0;
  padding: 1.1rem 1.2rem 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  /* wrap rather than rely on horizontal scroll: on narrow viewports the
     longer lines (e.g. the "stack" array) were being clipped with no
     visible scrollbar and no indication there was more to see */
  white-space: pre-wrap;
  word-break: break-word;
}
.hero-code-body .tok-kw   { color: var(--color-blue); }
.hero-code-body .tok-key  { color: var(--color-ink); }
.hero-code-body .tok-str  { color: var(--color-orange); }
.hero-code-body .tok-punc { color: var(--color-muted); }

.hero-scroll-cue {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}
.scroll-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--color-orange), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50%      { transform: scaleY(0.6); opacity: 1; }
}

/* =========================================================
   STATS
   ========================================================= */
.stats {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  padding: clamp(3rem, 8vh, 5rem) 0;
}
.stats-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 1.25rem;
}
.stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  padding: 1.8rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--color-ink) 3%, transparent);
  transition: transform 0.4s var(--ease-cinematic), border-color 0.4s var(--ease-cinematic), background-color 0.4s var(--ease-cinematic), box-shadow 0.4s var(--ease-cinematic);
}
.stat-item:hover,
.stat-item.is-visible:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--color-orange) 50%, var(--color-line));
  background: color-mix(in srgb, var(--color-orange) 8%, transparent);
  box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--color-orange) 55%, transparent);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 600;
  color: var(--color-orange);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--color-ink) 70%, transparent);
  max-width: 16ch;
}

/* =========================================================
   HIGHLIGHTS STRIP
   ========================================================= */
.highlights { padding: clamp(4rem, 10vh, 6rem) 0; }
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.highlight-card {
  --card-accent: var(--color-orange);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: 1.9rem 1.6rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-cinematic), border-color 0.4s var(--ease-cinematic), box-shadow 0.4s var(--ease-cinematic);
}
/* each card gets its own accent, matching the per-project accent system
   already used in Selected Work — four identical orange-only cards in a
   row read as flat/repetitive; distinct color per metric gives the row
   some visual variety while staying inside the established palette */
.highlight-card:nth-child(4n+2) { --card-accent: var(--color-success); }
.highlight-card:nth-child(4n+3) { --card-accent: var(--color-blue); }
.highlight-card:nth-child(4n+4) { --card-accent: var(--color-warning); }
.highlight-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent);
  opacity: 0.7;
}
.highlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 70%);
  transition: opacity 0.4s var(--ease-cinematic);
  pointer-events: none;
}
.highlight-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--card-accent) 40%, var(--color-line));
  box-shadow: 0 24px 46px -28px color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.highlight-card:hover::after { opacity: 1; }
.highlight-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card-accent) 16%, transparent);
  color: var(--card-accent);
  margin-bottom: 1.4rem;
}
.highlight-icon svg { width: 23px; height: 23px; }
.highlight-stat {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--card-accent);
  margin-bottom: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.highlight-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--color-ink);
}
.highlight-card p {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  line-height: 1.55;
}

/* =========================================================
   MASTER–DETAIL COMPONENT
   Shared by Expertise and Experience sections: a clickable
   list on the left, a single detail stage on the right that
   swaps content on selection. Stacks to a single column with
   the stage directly under the nav on narrow viewports.
   ========================================================= */
.md-section { padding: clamp(4rem, 10vh, 6rem) 0; }
.md-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.md-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: sticky;
  top: 100px;
}
.md-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.1rem;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid var(--color-line);
  border-radius: var(--radius-s);
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  cursor: pointer;
  transition: color 0.3s var(--ease-cinematic), border-color 0.3s var(--ease-cinematic), background-color 0.3s var(--ease-cinematic);
}
.md-nav-btn:hover { color: var(--color-ink); }
.md-nav-btn.is-active {
  color: var(--color-ink);
  background: var(--color-surface);
  border-left-color: var(--color-orange);
}
.md-nav-btn-title { font-weight: 600; font-size: 0.98rem; }
.md-nav-btn-sub { font-size: 0.8rem; color: var(--color-muted); }

/* holds every panel (not just the selected one) — see the comment on
   renderMasterDetail() in js/site-render.js for why. Stacking multiple
   visible panels (the no-JS case) needs its own gap; a single visible
   panel (the normal JS-enhanced case) just renders as one card either
   way. */
.md-stage-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.md-stage {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  min-height: 320px;
}
.md-badge-current {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  margin-bottom: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-orange) 45%, var(--color-line));
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
}
.md-stage h3 { font-size: 1.4rem; margin-bottom: 0.3rem; }
.md-stage-sub { color: var(--color-ink-soft); font-size: 0.92rem; margin-bottom: 1.4rem; }
.md-stage-desc { color: var(--color-ink-soft); font-size: 0.98rem; line-height: 1.65; margin-bottom: 1.4rem; }
.md-stage-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.md-stage-bullets li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.96rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
}
.md-stage-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
}
.stat-highlight {
  color: var(--color-ink);
  background: color-mix(in srgb, var(--color-orange) 16%, transparent);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-weight: 700;
}
.md-stage-note {
  padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--color-orange) 8%, transparent);
  border-left: 2px solid var(--color-orange);
  border-radius: var(--radius-s);
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin-bottom: 1.4rem;
}
.md-stage-note strong { color: var(--color-ink); }

.tag-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-pill {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

@media (max-width: 860px) {
  .md-layout { grid-template-columns: 1fr; }
  /* wrap instead of horizontally scroll: a scrollable tab row with no
     visible scrollbar and no edge fade looked like the last tab had been
     cut off, with no affordance telling a mouse/trackpad user to scroll */
  .md-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
  .md-nav-btn { flex: 1 1 auto; width: auto; border-left: none; border-bottom: 2px solid var(--color-line); border-radius: 0; }
  .md-nav-btn.is-active { border-bottom-color: var(--color-orange); }
}

/* =========================================================
   SELECTED WORK (case-study project cards)
   ========================================================= */
.work { padding: clamp(4rem, 10vh, 6rem) 0; }
.work-grid {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.work-card {
  --card-accent: var(--color-orange);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
  transition: transform 0.4s var(--ease-cinematic), border-color 0.4s var(--ease-cinematic), box-shadow 0.4s var(--ease-cinematic);
}
.work-card:nth-child(even) { grid-template-columns: 1.3fr 1fr; }
.work-card:nth-child(even) .work-card-media { order: 2; }
.work-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--card-accent) 45%, var(--color-line));
  box-shadow: 0 30px 60px -32px color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.work-card-media {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--card-accent) 20%, var(--color-bg));
  /* matches the ~16:9 aspect ratio of the actual project thumbnails —
     these are wide marketing-banner graphics with text near the edges,
     so object-fit:cover at the previous 4:3 ratio was cropping title
     text and bullet copy off the sides on every project */
  aspect-ratio: 16 / 9;
}
.work-card-media img, .work-card-media svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.06);
  transition: transform 0.7s var(--ease-cinematic), opacity 0.7s var(--ease-cinematic);
}
.work-card.is-visible .work-card-media img,
.work-card.is-visible .work-card-media svg { opacity: 1; transform: scale(1); }
.work-card:hover .work-card-media img,
.work-card:hover .work-card-media svg { transform: scale(1.05); }
.work-card-body {
  padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
}
.work-card-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* blended toward --color-ink rather than the raw per-project accent so
     every project's tag stays legible against the surface in both themes,
     regardless of how light/saturated that project's accent color is */
  color: color-mix(in srgb, var(--card-accent) 65%, var(--color-ink) 35%);
  margin-bottom: 0.9rem;
}
.work-card-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--card-accent);
}
.work-card h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.work-card-hook { color: var(--color-ink-soft); font-size: 1rem; line-height: 1.6; margin-bottom: 1.2rem; }
.work-card .tag-pills { margin-bottom: 1.4rem; }
.work-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
}
.work-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--card-accent);
}
.work-card-link svg { width: 14px; height: 14px; }
.work-behind {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line);
}
.work-behind summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  list-style: none;
}
.work-behind summary::-webkit-details-marker { display: none; }
.work-behind summary::before {
  content: '+ ';
  color: var(--card-accent);
}
.work-behind[open] summary::before { content: '\2212 '; }
.work-behind p {
  margin-top: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-ink-soft);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--ease-cinematic), opacity 0.4s var(--ease-cinematic), margin-top 0.45s var(--ease-cinematic);
}
/* Fallback for when JS hasn't run (or is disabled): without this, native
   <details> would toggle open but the paragraph would stay visually
   collapsed forever, since only main.js's toggle listener otherwise sets
   an explicit max-height. This doesn't reintroduce the instant-snap bug
   for JS users described in a prior fix — main.js sets an inline
   max-height synchronously in the same toggle-event tick, before the
   browser paints, and an inline style always wins over this class rule
   regardless of which one was written more recently. */
.work-behind[open] p {
  max-height: none;
  opacity: 1;
  margin-top: 0.8rem;
}
@media (prefers-reduced-motion: reduce) {
  .work-behind p { transition: none; }
}

@media (max-width: 860px) {
  .work-card, .work-card:nth-child(even) { grid-template-columns: 1fr; }
  .work-card:nth-child(even) .work-card-media { order: 0; }
}

/* =========================================================
   CLOSING CTA / CONTACT
   Full-bleed, color-inverted close to the page.
   ========================================================= */
.closing-cta {
  position: relative;
  overflow: hidden;
  background: var(--color-orange);
  color: var(--color-bg);
  padding: clamp(4rem, 12vh, 7rem) 0;
}
/* text sitting directly on the solid orange band needs a stronger bg-mix
   than the 6-8% used for surfaces elsewhere in the file — anything lighter
   than ~80% failed WCAG AA (verified: 70% mix measured 4.18:1, below the
   4.5:1 small-text minimum) */
.closing-cta .section-label { color: color-mix(in srgb, var(--color-bg) 82%, transparent); }
.closing-cta .section-label-index { color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 35%, transparent); }
.closing-cta .section-label-rule { background: color-mix(in srgb, var(--color-bg) 25%, transparent); }
.closing-cta h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 18ch;
  margin-bottom: 1rem;
}
.closing-cta-sub {
  max-width: 46ch;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--color-bg) 82%, transparent);
  margin-bottom: 2.2rem;
}
/* focus-visible everywhere else uses --color-blue, which measures only
   1.21:1 against this section's orange background — effectively invisible.
   Every interactive element in this section (buttons, form fields, contact
   links) needs its own high-contrast override. */
.closing-cta a:focus-visible,
.closing-cta button:focus-visible,
.closing-cta input:focus-visible,
.closing-cta textarea:focus-visible {
  outline-color: var(--color-bg);
}
.closing-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
}
.closing-cta-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-top: clamp(2.5rem, 6vh, 3.5rem);
  border-top: 1px solid color-mix(in srgb, var(--color-bg) 20%, transparent);
}
/* Below, contact-line / contact-form-col deliberately use the same solid
   surface/line/ink tokens as every other card on the site (not a
   bg-color-mix tint) — they read as clean dark/light "cutout" cards
   floating on the orange band. This replaces an earlier version that
   tinted everything a few percent off the orange itself: form input
   borders measured 1.61:1 against the background (WCAG needs 3:1 for UI
   component boundaries) and were nearly invisible; this fixes that by
   construction, since surface/ink/line already carry verified AA contrast
   against each other in both themes. */
.contact-details { display: flex; flex-direction: column; gap: 0.9rem; }
.contact-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  transition: transform 0.4s var(--ease-cinematic), background-color 0.4s var(--ease-cinematic);
}
.contact-line:hover { transform: translateY(-3px); background: var(--color-surface-elevated); }
.contact-line-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--color-orange) 16%, transparent);
  color: var(--color-orange);
}
.contact-line-icon svg { width: 19px; height: 19px; fill: currentColor; }
.contact-line-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contact-line-label { font-size: 0.78rem; color: var(--color-muted); }
.contact-line-value { font-weight: 600; font-size: 0.98rem; color: var(--color-ink); overflow-wrap: anywhere; }

.contact-form-col {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  padding: clamp(1.8rem, 3vw, 2.6rem);
}
.contact-form { display: flex; flex-direction: column; gap: 1.4rem; }
/* honeypot: off-screen (not display:none) so simple spam bots that skip
   hidden fields still fill it in, while real visitors never see it */
.form-field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label { font-size: 0.88rem; font-weight: 600; color: var(--color-ink); }
.field-optional { font-weight: 400; color: var(--color-muted); }
.form-field input, .form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--color-ink);
  background: var(--color-input-bg);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-s);
  padding: 0.85rem 1rem;
  transition: border-color 0.35s var(--ease-cinematic), box-shadow 0.35s var(--ease-cinematic);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-muted); }
.form-field input:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 4px var(--color-orange-dim);
}
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--color-error); }
.field-error {
  min-height: 1.1em;
  font-size: 0.8rem;
  color: var(--color-error);
  font-weight: 700;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.3s var(--ease-cinematic), transform 0.3s var(--ease-cinematic);
}
.form-field.has-error .field-error { opacity: 1; transform: translateY(0); }
.form-submit-row { margin-top: 0.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.form-submit { align-self: flex-start; }
.form-status {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  max-width: 46ch;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s var(--ease-cinematic), transform 0.4s var(--ease-cinematic);
}
.form-status.is-visible { opacity: 1; transform: translateY(0); }
.form-status.is-error { color: var(--color-error); font-weight: 700; }

@media (max-width: 860px) {
  .closing-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  border-top: 1px solid var(--color-line);
}
.footer-inner {
  position: relative;
  z-index: 1;
  padding: 4.2rem var(--gutter) 2.5rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}
.footer-brand { display: flex; gap: 1rem; align-items: flex-start; transition: opacity 0.3s var(--ease-cinematic); }
.footer-brand:hover { opacity: 0.8; }
.footer-brand .brand-mark {
  width: 46px;
  height: 46px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-orange) 25%, transparent);
}
.footer-brand p {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
  padding-top: 0.2rem;
}
.footer-brand p::first-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-ink);
}
.footer-social { display: flex; flex-direction: column; gap: 0.85rem; }
.footer-links h3, .footer-social h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-muted);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.footer-links h3::before, .footer-social h3::before {
  content: '';
  width: 14px;
  height: 2px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--color-orange);
}
.footer-links { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 0.7rem; column-gap: 1.5rem; }
.footer-links h3 { flex-basis: 100%; }
.footer-links a {
  position: relative;
  font-size: 0.94rem;
  color: var(--color-ink-soft);
  width: fit-content;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease-cinematic);
}
.footer-links a::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-cinematic);
}
.footer-links a:hover { color: var(--color-ink); }
.footer-links a:hover::before { transform: scaleX(1); transform-origin: left; }

.social-icons { display: flex; gap: 0.8rem; }
.social-icons a {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  transition: border-color 0.35s var(--ease-cinematic), background 0.35s var(--ease-cinematic), transform 0.35s var(--ease-cinematic), box-shadow 0.35s var(--ease-cinematic);
}
.social-icons a:hover {
  border-color: transparent;
  background: var(--color-orange);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--color-orange) 55%, transparent);
}
.social-icons svg { width: 16px; height: 16px; fill: var(--color-ink); transition: transform 0.35s var(--ease-cinematic); }
.social-icons a:hover svg { fill: #fff; transform: scale(1.12); }

.footer-bottom {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-line);
  padding: 1.5rem var(--gutter);
  text-align: center;
}
.footer-bottom p { font-size: 0.8rem; color: var(--color-muted); }

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
  transition: opacity 0.8s var(--ease-cinematic), transform 0.8s var(--ease-cinematic), filter 0.8s var(--ease-cinematic);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
}

.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  margin-left: -240px; margin-top: -240px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-orange) 16%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
  mix-blend-mode: screen;
}
.cursor-glow.is-active { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}

.ambient-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-blobs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.28; animation: blobDrift 16s ease-in-out infinite; }
.ambient-blobs span:nth-child(1) { width: 340px; height: 340px; background: var(--color-orange); top: -12%; left: 6%; }
.ambient-blobs span:nth-child(2) { width: 280px; height: 280px; background: var(--color-blue); bottom: -18%; right: 8%; animation-delay: -6s; animation-duration: 20s; }
.ambient-blobs span:nth-child(3) { width: 200px; height: 200px; background: var(--color-orange); top: 35%; right: 28%; animation-delay: -10s; animation-duration: 24s; }

.hero-edge-blobs span:nth-child(1) { top: 8%; left: -6%; }
.hero-edge-blobs span:nth-child(2) { bottom: 5%; right: -8%; }
.hero-edge-blobs span:nth-child(3) { width: 260px; height: 260px; top: 55%; left: -4%; right: auto; animation-delay: -4s; }
@keyframes blobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -25px) scale(1.1); }
  66%      { transform: translate(-25px, 20px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-blobs span { animation: none; }
}

.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, color-mix(in srgb, white 55%, transparent), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s var(--ease-cinematic);
  pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn-ghost::before, .btn-outline::before {
  background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--color-ink) 12%, transparent), transparent);
}

.stat-item, .contact-line, .md-nav-btn {
  position: relative;
  overflow: hidden;
}
.stat-item::after, .contact-line::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-orange) 16%, transparent), transparent 70%);
  transition: opacity 0.4s var(--ease-cinematic);
  pointer-events: none;
}
.stat-item:hover::after, .contact-line:hover::after { opacity: 1; }

.hero-photo-frame { transition: transform 0.25s var(--ease-cinematic); will-change: transform; }

.site-header { transition: box-shadow 0.4s var(--ease-cinematic), background-color 0.4s var(--ease-cinematic); }
.site-header.is-scrolled {
  box-shadow: 0 8px 30px -20px rgba(0,0,0,0.6);
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
}

.back-to-top {
  position: fixed;
  right: 1.6rem; bottom: 1.6rem;
  z-index: 150;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-orange);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  visibility: hidden;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--color-orange) 65%, transparent);
  transition: opacity 0.4s var(--ease-cinematic), transform 0.4s var(--ease-cinematic), visibility 0.4s, box-shadow 0.3s;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.back-to-top:hover { transform: translateY(-3px) scale(1.05); }
.back-to-top svg { width: 18px; height: 18px; }

.whatsapp-fab {
  position: fixed;
  left: 1.6rem; bottom: 1.6rem;
  z-index: 150;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-orange);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--color-orange) 65%, transparent);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  visibility: hidden;
  transition: opacity 0.4s var(--ease-cinematic), transform 0.4s var(--ease-cinematic), visibility 0.4s, box-shadow 0.3s;
}
.whatsapp-fab.is-visible { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
.whatsapp-fab:hover { transform: translateY(-3px) scale(1.05); }
.whatsapp-fab svg { width: 26px; height: 26px; }
.whatsapp-fab-tooltip {
  position: absolute;
  left: calc(100% + 0.7rem);
  top: 50%; transform: translateY(-50%);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.whatsapp-fab:hover .whatsapp-fab-tooltip,
.whatsapp-fab:focus-visible .whatsapp-fab-tooltip { opacity: 1; visibility: visible; }
@media (max-width: 620px) {
  .whatsapp-fab { left: 1rem; bottom: 1rem; width: 48px; height: 48px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  .whatsapp-fab-tooltip { display: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .main-nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .hero-photo-wrap { justify-self: center; margin-top: 2.5rem; }
  .hero-code-widget { margin-left: auto; margin-right: auto; }

  .stats-inner { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; }
  .highlights-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; margin-bottom: 1rem; }
}

@media (max-width: 620px) {
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .highlights-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--color-bg);
    padding: 1.5rem var(--gutter);
    gap: 1.2rem;
    border-bottom: 1px solid var(--color-line);
  }
}