/* BWAY PROD — Landing */
:root {
  --bg: #0A0A0A;
  --bg-2: #0F0F0F;
  --bg-3: #141414;
  --line: #1F1F1F;
  --line-2: #2A2520;
  --ink: #F5F2EC;
  --ink-2: #B7B2A8;
  --ink-3: #6E6A62;
  --gold: #F0A500;
  --gold-deep: #D4AF37;
  --gold-light: #E9C46A;
  --gold-soft: rgba(240, 165, 0, 0.14);
  --display-font: 'Instrument Serif', 'Times New Roman', serif;
  --grain-opacity: 0.06;
  --section-pad: 140px;
  --stats-pad: 56px;
  --head-mb: 72px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: transparent;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  letter-spacing: 0.005em;
}

/* Page background — fixed video layer with parallax */
.page-bg-base {
  position: fixed;
  inset: 0;
  z-index: -10;
  background: var(--bg);
  pointer-events: none;
}
.page-bg-video {
  position: fixed;
  inset: -4%;
  z-index: -8;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, filter, opacity;
  transform-origin: center 50%;
  transition:
    transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.page-bg-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.45, 0, 0.55, 1);
  pointer-events: none;
  filter: contrast(1.05) saturate(0.92);
}
.page-bg-vid.on { opacity: 1; }
.page-bg-veil {
  position: fixed;
  inset: 0;
  z-index: -6;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(10,10,10,0.35) 70%),
    linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.25) 50%, rgba(10,10,10,0.55) 100%);
}

/* Film grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: var(--grain-opacity, 0.06);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.4s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -3%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Typography */
.serif { font-family: var(--display-font); font-weight: 400; }
.mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.italic { font-style: italic; }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}

.display {
  font-family: var(--display-font);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* Selection */
::selection { background: var(--gold); color: #0A0A0A; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.4s cubic-bezier(.2,.7,.2,1);
  position: relative;
  background: transparent;
  color: inherit;
}
.btn .arrow {
  width: 16px; height: 1px; background: currentColor;
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.btn .arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow { width: 28px; }

.btn-gold {
  background: var(--gold);
  color: #0A0A0A;
  border-color: var(--gold);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-ghost {
  border-color: rgba(240,165,0,0.55);
  color: var(--gold);
}
.btn-ghost:hover {
  background: var(--gold-soft);
  border-color: var(--gold);
}

/* Navigation */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.5s cubic-bezier(.2,.7,.2,1);
}
.nav.scrolled {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  padding: 16px 40px;
}

/* Centered-logo nav */
.nav-centered {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
}
.nav-side {
  display: flex;
  align-items: center;
  gap: 38px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.nav-left { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }
.nav-side a {
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color 0.3s;
}
.nav-side a::after {
  content: ""; position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav-side a:hover { color: var(--ink); }
.nav-side a:hover::after { width: 100%; }

.nav-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 16px !important;
  border: 1px solid rgba(240,165,0,0.55);
  color: var(--gold) !important;
  transition: all 0.4s cubic-bezier(.2,.7,.2,1) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--gold);
  color: #0A0A0A !important;
  border-color: var(--gold);
}
.nav-cta .arrow {
  width: 14px; height: 1px; background: currentColor;
  position: relative;
  transition: width 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav-cta .arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.nav-cta:hover .arrow { width: 22px; }

.nav-logo {
  display: flex; align-items: center; gap: 14px;
  color: var(--ink); text-decoration: none;
  font-family: var(--display-font);
  font-size: 21px;
  letter-spacing: 0.22em;
  white-space: nowrap;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav-logo:hover { transform: scale(1.04); }
.nav-logo .brand-mark {
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 14px rgba(240,165,0,0.18));
  transition: filter 0.4s cubic-bezier(.2,.7,.2,1), height 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav.scrolled .nav-logo .brand-mark { height: 44px; }
.nav-logo:hover .brand-mark {
  filter: drop-shadow(0 0 18px rgba(240,165,0,0.35));
}

@media (max-width: 1024px) {
  .nav-side { gap: 24px; font-size: 10.5px; }
  .nav-centered { gap: 24px; }
}
@media (max-width: 860px) {
  .nav { padding: 16px 22px; }
  .nav.scrolled { padding: 12px 22px; }
  .nav-side a:not(.nav-cta) { display: none; }
  .nav-centered { grid-template-columns: 1fr auto 1fr; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 130vh;
  isolation: isolate;
}
.hero-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.hero-cursor-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle 280px at var(--mx, 50%) var(--my, 50%),
    rgba(240, 165, 0, 0.22) 0%,
    rgba(240, 165, 0, 0.08) 35%,
    transparent 65%
  );
  mix-blend-mode: screen;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero.is-hovering .hero-cursor-glow { opacity: 1; }

.hero-scan-line {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240, 165, 0, 0.0) 10%,
    var(--gold) 50%,
    rgba(240, 165, 0, 0.0) 90%,
    transparent 100%);
  box-shadow: 0 0 18px rgba(240, 165, 0, 0.6);
  opacity: 0;
}
.hero.is-scrolling .hero-scan-line {
  animation: heroScan 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero.is-scrolling[data-scroll-dir="up"] .hero-scan-line {
  animation: heroScanUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes heroScan {
  0% { top: 20%; opacity: 0; transform: scaleY(0.6); }
  30% { opacity: 1; }
  100% { top: 95%; opacity: 0; transform: scaleY(1.4); }
}
@keyframes heroScanUp {
  0% { top: 80%; opacity: 0; transform: scaleY(0.6); }
  30% { opacity: 1; }
  100% { top: 5%; opacity: 0; transform: scaleY(1.4); }
}

/* Decor reacts to scroll pulse */
.hero-corners > span {
  transition:
    border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero.is-scrolling .hero-corners > span {
  border-color: var(--gold-light);
  box-shadow: 0 0 16px rgba(240, 165, 0, 0.5);
  width: 38px;
  height: 38px;
}

.hero-meta,
.hero-timecode {
  transition:
    color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    letter-spacing 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero.is-scrolling .hero-meta,
.hero.is-scrolling .hero-timecode {
  color: var(--gold-light);
  letter-spacing: 0.28em;
}

/* Cursor proximity glow for REC + TC — they react when cursor is close */
.hero.is-hovering .hero-meta,
.hero.is-hovering .hero-timecode {
  color: var(--ink);
}
.hero-video-stack {
  position: absolute; inset: 0;
  z-index: -2;
  will-change: transform, filter, opacity;
  transform-origin: center 50%;
  transition:
    transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
  pointer-events: none;
  will-change: opacity;
}
.hero-video.on { opacity: 1; }
.hero-veil {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(10,10,10,0.55) 75%),
    linear-gradient(180deg, rgba(10,10,10,0.0) 0%, rgba(10,10,10,0.15) 35%, rgba(10,10,10,0.9) 100%);
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity;
}
.hero-decor {
  position: absolute; inset: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-decor .hero-corners,
.hero-decor .hero-meta,
.hero-decor .hero-timecode {
  pointer-events: auto;
}
.hero-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
  z-index: 2;
  will-change: transform, opacity;
  transition:
    transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-content .eyebrow {
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-content > * { max-width: 1100px; }

/* Reduced motion fallback — disable all parallax */
@media (prefers-reduced-motion: reduce) {
  .hero-video-stack,
  .hero-content,
  .hero-decor,
  .hero-content .eyebrow {
    transform: none !important;
    filter: none !important;
    transition: opacity 0.4s ease-out !important;
  }
  .hero { min-height: 100vh !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .scroll-thread .thread-dot { transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
  }
}
.hero h1 {
  font-size: clamp(40px, 6.6vw, 96px);
  margin: 28px 0 8px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.hero h1 .em {
  font-style: italic;
  color: var(--gold-light);
}
.hero .sub {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 48px);
  color: var(--ink-2);
  margin: 0 0 38px;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hero-corners {
  position: absolute; inset: 32px;
  pointer-events: none;
  z-index: 1;
}
.hero-corners > span {
  position: absolute; width: 28px; height: 28px;
  border: 1px solid var(--gold);
  opacity: 0.7;
}
.hero-corners .tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.hero-corners .tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.hero-corners .bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.hero-corners .br { bottom: 0; right: 0; border-left: none; border-top: none; }

.hero-meta {
  position: absolute;
  bottom: 36px; left: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
  z-index: 2;
}
.hero-meta .rec {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #E04848;
  margin-right: 8px;
  animation: blink 1.4s infinite;
  vertical-align: middle;
}
@keyframes blink { 50% { opacity: 0.25; } }

.hero-timecode {
  position: absolute;
  bottom: 36px; right: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  z-index: 2;
}

.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  z-index: 2;
}
.scroll-cue .line {
  width: 1px; height: 50px;
  background: linear-gradient(180deg, transparent, var(--gold));
  position: relative; overflow: hidden;
}
.scroll-cue .line::after {
  content: ""; position: absolute;
  top: -10px; left: 0; width: 1px; height: 14px;
  background: var(--ink);
  animation: cue 2s infinite cubic-bezier(.6,.1,.4,.9);
}
@keyframes cue {
  0% { top: -14px; opacity: 0; }
  20% { opacity: 1; }
  100% { top: 60px; opacity: 0; }
}

@media (max-width: 860px) {
  .hero-meta { left: 22px; bottom: 22px; }
  .hero-timecode { right: 22px; bottom: 22px; }
  .hero-corners { inset: 18px; }
  .scroll-cue { bottom: 22px; }
}
@media (max-height: 760px) {
  .scroll-cue { display: none; }
}

/* Stats bar */
.stats {
  background: rgba(15, 15, 15, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding: clamp(56px, 7vw, 96px) 40px clamp(56px, 7vw, 96px);
  overflow: hidden;
  position: relative;
  perspective: 1600px;
  perspective-origin: center 30%;
}
.stats::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.6) 100%);
  pointer-events: none;
  z-index: 0;
}
.stats-glow {
  position: absolute;
  inset: -20% 5% -20% 5%;
  background: radial-gradient(ellipse at center, rgba(240,165,0,0.06) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(50px);
  z-index: 0;
}
.stats-section-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}
.stats-section-inner.in {
  animation: statsIn 1s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes statsIn {
  to { opacity: 1; }
}
.stats-head {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 36px;
}
.stats-eyebrow { color: var(--gold); }
.stats-bar-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(240,165,0,0.4), rgba(240,165,0,0.05));
  max-width: 320px;
}
.stats-meta { color: var(--ink-2); }

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.stat-card {
  position: relative;
  padding: 32px 30px 26px;
  background: rgba(12,12,12,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 22px;
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-card.is-hover {
  background: rgba(18,16,12,0.78);
  border-color: rgba(240,165,0,0.3);
}

/* Animated gradient border (only visible on hover) */
.stat-card-border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg,
    var(--gold) 0%,
    var(--gold-light) 35%,
    transparent 50%,
    var(--gold-deep) 75%,
    var(--gold) 100%);
  background-size: 220% 220%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: gradientShift 6s ease infinite;
  pointer-events: none;
  z-index: 3;
}
.stat-card.is-hover .stat-card-border { opacity: 1; }

/* Inner faint grid pattern */
.stat-card-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(240,165,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,165,0,0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: 0 0;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 85%);
}

/* Cursor-follow glow */
.stat-card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 280px at var(--gx, 50%) var(--gy, 50%),
    rgba(240,165,0,0.18) 0%,
    rgba(240,165,0,0.05) 35%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.stat-card.is-hover .stat-card-glow { opacity: 1; }

/* Top row: index + live indicator */
.stat-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.stat-idx { color: var(--ink-3); transition: color 0.4s; }
.stat-card.is-hover .stat-idx { color: var(--gold); }

.stat-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
}
.stat-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(240,165,0,0.6);
  animation: liveDot 1.8s ease-in-out infinite;
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 rgba(240,165,0,0.55); transform: scale(1); }
  60%  { box-shadow: 0 0 0 9px rgba(240,165,0,0); transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 rgba(240,165,0,0); transform: scale(1); }
}
.stat-card.is-hover .stat-live-label { color: var(--ink); }

/* Huge number */
.stat-card-num {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(72px, 10vw, 130px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--gold);
  margin: 28px 0 20px;
  transition: text-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-variant-numeric: tabular-nums;
}
.stat-card.is-hover .stat-card-num {
  text-shadow:
    0 0 24px rgba(240,165,0,0.45),
    0 0 60px rgba(240,165,0,0.18);
  transform: translateZ(20px);
}
.stat-card-num .num { display: inline-flex; align-items: baseline; }
.stat-card-arrow {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 22px;
  color: var(--ink-3);
  opacity: 0;
  transform: translate(-8px, 6px);
  transition:
    opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    color 0.4s;
  margin-top: 14px;
}
.stat-card.is-hover .stat-card-arrow {
  opacity: 1;
  transform: translate(0, 0);
  color: var(--gold);
}

/* Bottom: label + description + progress bar */
.stat-card-bottom {
  position: relative;
  z-index: 2;
}
.stat-card-label {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 8px;
  transition: color 0.4s;
}
.stat-card.is-hover .stat-card-label { color: var(--gold-light); }

.stat-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 280px;
  margin-bottom: 18px;
  transition: color 0.45s;
}
.stat-card.is-hover .stat-card-desc { color: var(--ink-2); }

.stat-card-bar {
  position: relative;
  height: 2px;
  background: rgba(240,165,0,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.stat-card-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
  background-size: 200% 100%;
  animation: gradientShift 5s ease infinite;
  transition: width 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 0 14px rgba(240,165,0,0.5);
}

/* Active state — flash on click */
.stat-card:active {
  transform: perspective(1400px) scale(0.985) !important;
  transition-duration: 0.12s;
}

@media (max-width: 980px) {
  .stats-grid { grid-template-columns: 1fr; gap: 14px; }
  .stat-card { min-height: 220px; padding: 26px 24px 22px; }
  .stat-card-num { font-size: clamp(64px, 16vw, 96px); margin: 22px 0 16px; }
}

@media (max-width: 640px) {
  .stats-head { font-size: 9.5px; letter-spacing: 0.22em; gap: 12px; margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .stat-card *,
  .stat-card-bar-fill,
  .stat-live-dot {
    transition: none !important;
    animation: none !important;
  }
}
.stats-row {
  display: flex; justify-content: center; align-items: center;
  gap: 56px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stats-row .stat {
  display: flex; align-items: baseline; gap: 14px;
  transform: translate3d(0, var(--px, 0px), 0);
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Interactive stat — hover lift, glow follow, click to replay */
.stat-interactive {
  position: relative;
  padding: 14px 20px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
  isolation: isolate;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-interactive .stat-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle 160px at var(--gx, 50%) var(--gy, 50%),
    rgba(240, 165, 0, 0.18) 0%,
    rgba(240, 165, 0, 0.04) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-interactive:hover .stat-glow,
.stat-interactive:focus-visible .stat-glow {
  opacity: 1;
}
.stat-interactive .num {
  position: relative;
  display: inline-block;
  transition:
    color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    text-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-interactive .num-underline {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: blur(0.3px);
}
.stat-interactive:hover .num-underline,
.stat-interactive:focus-visible .num-underline {
  transform: scaleX(1);
}
.stat-interactive:hover .num,
.stat-interactive:focus-visible .num {
  color: var(--gold-light);
  text-shadow:
    0 0 18px rgba(240, 165, 0, 0.4),
    0 0 40px rgba(240, 165, 0, 0.18);
  transform: translateY(-2px) scale(1.04);
}
.stat-interactive .label {
  transition:
    color 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    letter-spacing 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stat-interactive:hover .label,
.stat-interactive:focus-visible .label {
  color: var(--ink);
  letter-spacing: 0.32em;
}
.stat-interactive:active .num {
  transform: translateY(-1px) scale(0.96);
  transition-duration: 0.12s;
}

/* Tiny ambient cursor dot at gx/gy when hovering */
.stat-interactive::after {
  content: "";
  position: absolute;
  left: var(--gx, 50%);
  top: var(--gy, 50%);
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s, transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}
.stat-interactive:hover::after {
  opacity: 0.7;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .stat-interactive,
  .stat-interactive .num,
  .stat-interactive .label,
  .stat-interactive .num-underline,
  .stat-interactive::after,
  .stat-interactive .stat-glow {
    transition: none !important;
    animation: none !important;
  }
}
.stats-row .num {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 32px;
  color: var(--gold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.stats-row .label { color: var(--ink-2); }
.stats-row .divider {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
  opacity: 0.6;
}

/* Apple-style staggered entry for stats */
.stats-anim .stat,
.stats-anim .divider {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
.stats-anim .divider {
  transform: scaleY(0.2);
  transform-origin: center;
}
.stats-anim.in .stat {
  opacity: 1;
  transform: translateY(0);
}
.stats-anim.in .divider {
  opacity: 0.6;
  transform: scaleY(1);
}

/* Soft, slow breathing on the gold dividers — Apple's quiet motion */
@keyframes statsBreathe {
  0%, 100% { opacity: 0.45; transform: scaleY(0.92); }
  50%      { opacity: 0.75; transform: scaleY(1.05); }
}
.stats-anim.in .divider {
  animation: statsBreathe 5.5s ease-in-out infinite;
  animation-delay: calc(var(--d, 0ms) + 1400ms);
}

/* Subtle ambient breathe on the number — opacity only, no layout shift */
@keyframes numBreathe {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
.stats-anim.in .stat .num {
  animation: numBreathe 6s ease-in-out infinite;
  animation-delay: calc(var(--d, 0ms) + 1800ms);
}

/* Section base */
.section {
  position: relative;
  padding: var(--section-pad, 140px) 40px;
  background: rgba(10, 10, 10, 0.55);
}
.section.dark2 {
  background: rgba(15, 15, 15, 0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.section-inner { max-width: 1240px; margin: 0 auto; }

.section-head { margin-bottom: var(--head-mb, 72px); max-width: 820px; }
.section-head h2 {
  font-size: clamp(40px, 5.2vw, 76px);
  margin: 18px 0 22px;
  line-height: 1;
}
.section-head h2 .em { font-style: italic; color: var(--gold-light); }
.section-head .lead {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  max-width: 620px;
}

@media (max-width: 860px) {
  .section { padding: 90px 22px; }
  .section-head { margin-bottom: 48px; }
}

/* MUSA Method video */
.musa-frame {
  position: relative;
  margin-top: 56px;
  border: 1px solid var(--line-2);
  background: #050505;
}
.musa-frame::before, .musa-frame::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--gold);
}
.musa-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.musa-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.musa-frame .tr, .musa-frame .bl {
  position: absolute; width: 14px; height: 14px; border: 1px solid var(--gold);
}
.musa-frame .tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.musa-frame .bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }

.video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-wrap video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.video-poster {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  cursor: pointer;
  transition: opacity 0.5s;
}
.video-poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.25), rgba(10,10,10,0.55));
}
.video-poster.hidden { opacity: 0; pointer-events: none; }

.play-btn {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 0 0 rgba(240,165,0,0.5);
}
.play-btn::before {
  content: ""; position: absolute; inset: -14px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.5;
  animation: pulseRing 2.4s infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 0; }
}
.play-btn:hover { transform: scale(1.06); }
.play-btn svg { fill: #0A0A0A; margin-left: 4px; }

.musa-controls {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: #060606;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
}
.musa-controls .ctrl-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.3s;
}
.musa-controls .ctrl-btn:hover { border-color: var(--gold); color: var(--gold); }
.musa-controls .progress {
  flex: 1; height: 2px;
  background: var(--line);
  position: relative;
  cursor: pointer;
}
.musa-controls .progress .fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--gold);
  transition: width 0.1s linear;
}
.musa-controls .progress .fill::after {
  content: ""; position: absolute; right: -5px; top: -4px;
  width: 10px; height: 10px;
  background: var(--gold);
  border-radius: 50%;
}

/* Services grid */
.line-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin: 80px 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.line-head .lhs {
  display: flex; align-items: baseline; gap: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.line-head .lhs .idx { color: var(--gold); }
.line-head .lhs .title {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 28px;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.line-head .rhs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--ink-3);
  text-transform: uppercase;
  max-width: 380px;
  text-align: right;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.svc-card {
  position: relative;
  padding: 36px 32px 32px;
  background: var(--bg);
  cursor: pointer;
  transition: background 0.4s;
  display: flex; flex-direction: column;
  min-height: 320px;
}
.svc-card:hover { background: #100C04; }
.svc-card::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.4s;
}
.svc-card:hover::before { border-color: var(--gold); }

.svc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 32px;
}
.svc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.25em;
  color: var(--ink-3);
}
.svc-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  padding: 4px 8px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  text-transform: uppercase;
}
.badge.tier-low { color: var(--ink-2); }
.badge.tier-med { color: var(--gold-light); border-color: rgba(240,165,0,0.4); }
.badge.tier-high { color: #0A0A0A; background: var(--gold); border-color: var(--gold); }
.badge.popular { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); }

.svc-name {
  font-family: var(--display-font);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.svc-name .musa {
  font-style: italic;
  color: var(--gold-light);
  font-size: 22px;
  display: block;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.svc-tagline {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 14px 0 0;
  max-width: 280px;
}
.svc-foot {
  margin-top: auto;
  padding-top: 26px;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.svc-price {
  font-family: var(--display-font);
  font-size: 30px;
  letter-spacing: -0.01em;
}
.svc-price .ccy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 2px;
}
.svc-arrow {
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: all 0.4s;
}
.svc-card:hover .svc-arrow {
  border-color: var(--gold);
  color: var(--gold);
  transform: translate(4px, -4px);
}

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .line-head { flex-direction: column; align-items: flex-start; }
  .line-head .rhs { text-align: left; max-width: 100%; }
}

/* Portfolio */
.portfolio-list { border-top: 1px solid var(--line); }
.port-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 1fr 1fr 60px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding 0.4s cubic-bezier(.2,.7,.2,1);
}
.port-row::before {
  content: ""; position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}
.port-row:hover { padding-left: 24px; }
.port-row:hover::before { width: 100%; }
.port-row .idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
}
.port-row .name {
  font-family: var(--display-font);
  font-size: 36px;
  letter-spacing: -0.012em;
  line-height: 1;
  transition: color 0.4s;
}
.port-row:hover .name { color: var(--gold-light); }
.port-row .name .em { font-style: italic; }
.port-row .kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.port-row .year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-2);
}
.port-row .arr {
  justify-self: end;
  font-size: 20px;
  color: var(--ink-3);
  transition: all 0.4s;
}
.port-row:hover .arr { color: var(--gold); transform: translateX(6px); }

@media (max-width: 760px) {
  .port-row { grid-template-columns: 40px 1fr 50px; row-gap: 6px; padding: 22px 0; }
  .port-row .name { font-size: 24px; grid-column: 2 / 3; }
  .port-row .kind { grid-column: 2 / 3; font-size: 10px; }
  .port-row .year { display: none; }
}

/* About */
.about-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}
.about-card .name {
  font-family: var(--display-font);
  font-size: clamp(72px, 11vw, 156px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 18px 0 4px;
  font-style: italic;
}
.about-card .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 56px;
}
.about-card .role::before, .about-card .role::after {
  content: "·"; margin: 0 18px; color: var(--ink-3);
}
.about-card p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.about-quote {
  margin: 72px auto 0;
  padding: 36px 32px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: 720px;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 26px;
  line-height: 1.3;
  color: var(--gold-light);
}
.about-quote::before {
  content: "✦";
  display: block;
  color: var(--gold);
  font-size: 18px;
  margin-bottom: 16px;
}

/* CTA */
.cta {
  position: relative;
  padding: 180px 40px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(22,18,8,0.85) 0%, rgba(10,10,10,0.7) 70%);
  overflow: hidden;
}
.cta::before, .cta::after {
  content: ""; position: absolute;
  width: 1px; height: 60%;
  top: 20%;
  background: linear-gradient(180deg, transparent, var(--gold-deep), transparent);
  opacity: 0.3;
}
.cta::before { left: 8%; }
.cta::after { right: 8%; }
.cta h2 {
  font-size: clamp(40px, 6vw, 92px);
  font-family: var(--display-font);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 1000px;
  margin: 24px auto 22px;
}
.cta h2 .em { font-style: italic; color: var(--gold-light); }
.cta .sub {
  color: var(--ink-2);
  font-size: 17px;
  margin: 0 0 48px;
}
.cta-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Footer */
.footer {
  border-top: 1px solid var(--line);
  background: rgba(15, 15, 15, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 80px 40px 36px;
}
.footer-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 60px;
}
.footer h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0 0 22px;
  font-weight: 400;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}
.footer a:hover { color: var(--gold); }
.footer-brand {
  font-family: var(--display-font);
  font-size: 38px;
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}
.footer-brand .em { font-style: italic; color: var(--gold-light); }
.footer-tag {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 17px;
  color: var(--gold);
  margin: 22px 0 0;
  line-height: 1.35;
  max-width: 360px;
}
.footer-bottom {
  max-width: 1240px; margin: 60px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ink-3);
  text-transform: uppercase;
  flex-wrap: wrap; gap: 12px;
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer { padding: 60px 22px 28px; }
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(5,5,5,0.78);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  max-width: 720px; width: 100%;
  position: relative;
  padding: 56px 48px 44px;
  animation: rise 0.4s cubic-bezier(.2,.7,.2,1);
}
@keyframes rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal::before, .modal::after,
.modal .corner-tr, .modal .corner-bl {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
}
.modal::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.modal::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.modal .corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.modal .corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }

.modal-close {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.3s;
  font-size: 16px;
}
.modal-close:hover { color: var(--gold); border-color: var(--gold); }
.modal .eyebrow { margin-bottom: 18px; }
.modal h3 {
  font-family: var(--display-font);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.modal h3 .musa { display: block; font-style: italic; color: var(--gold-light); font-size: 26px; letter-spacing: 0.06em; margin-bottom: 6px; }
.modal .modal-tag { color: var(--ink-2); font-size: 15px; margin: 8px 0 28px; }
.modal-price-row {
  display: flex; align-items: baseline; gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.modal-price-row .price {
  font-family: var(--display-font);
  font-size: 44px;
  letter-spacing: -0.01em;
}
.modal-price-row .ccy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ink-3);
}
.modal-includes {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 12px;
}
.modal-includes li {
  font-size: 14.5px;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
  line-height: 1.55;
}
.modal-includes li::before {
  content: "—"; position: absolute; left: 0;
  color: var(--gold);
}
.modal-ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.modal-link {
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
}
.modal-link:hover { color: var(--gold); }

@media (max-width: 640px) {
  .modal { padding: 48px 24px 32px; }
  .modal h3 { font-size: 38px; }
}

/* Toggleable cinematic details */
html.no-corners .hero-corners { display: none; }
html.no-tc .hero-meta,
html.no-tc .hero-timecode { display: none; }
html.no-italic-em .em {
  font-style: normal !important;
  color: var(--ink) !important;
}
/* Scroll thread — a thin gold thread on the side that unites all sections */
.scroll-thread {
  position: fixed;
  top: 0; bottom: 0;
  left: 18px;
  width: 1px;
  z-index: 150;
  pointer-events: none;
}
.scroll-thread .thread-line {
  position: absolute;
  top: 90px;
  bottom: 110px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(240,165,0,0.18) 14%,
    rgba(240,165,0,0.18) 86%,
    transparent 100%);
}
.scroll-thread .thread-dot {
  position: absolute;
  left: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 0 22px rgba(240,165,0,0.4);
  transform: translateY(-50%);
  transition: top 0.2s cubic-bezier(.2,.7,.2,1);
}
.scroll-thread .thread-meta {
  position: absolute;
  bottom: 32px;
  left: -4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--ink-3);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.scroll-thread .thread-meta .dash {
  width: 1px;
  height: 18px;
  background: var(--gold);
  opacity: 0.5;
}

@media (max-width: 860px) {
  .scroll-thread { display: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition:
    opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.in { opacity: 1; transform: none; }

/* ─── MUSA Marquee — scroll-driven 2-row gallery ──────────── */
.musa-marquee {
  position: relative;
  margin-top: 64px;
  padding: 32px 0;
  overflow: hidden;
}
.mq-row {
  display: flex;
  margin-bottom: 16px;
  width: 100%;
  overflow: hidden;
}
.mq-row:last-child { margin-bottom: 0; }
.mq-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mq-tile {
  position: relative;
  width: clamp(280px, 28vw, 420px);
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line);
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.4s;
}
.mq-tile:hover {
  border-color: rgba(240,165,0,0.5);
  transform: translateY(-4px);
}
.mq-tile-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.mq-tile:hover .mq-tile-bg { transform: scale(1.06); }
.mq-tile-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0,
    transparent 30px,
    rgba(240,165,0,0.05) 30px,
    rgba(240,165,0,0.05) 31px
  );
  mix-blend-mode: screen;
}
.mq-tile-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.65  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}
.mq-tile-corners {
  position: absolute;
  inset: 14px;
  pointer-events: none;
}
.mq-tile-corners span {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid rgba(240,165,0,0.7);
}
.mq-tile-corners span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.mq-tile-corners span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.mq-tile-corners span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.mq-tile-corners span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }
.mq-tile-top {
  position: absolute;
  top: 22px;
  left: 26px;
  right: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.mq-code { color: var(--gold); }
.mq-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(245,242,236,0.65);
}
.mq-rec-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #E04848;
  animation: blink 1.4s infinite;
}
.mq-tile-bottom {
  position: absolute;
  bottom: 22px;
  left: 26px;
  right: 26px;
}
.mq-name {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 8px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.mq-kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(245,242,236,0.55);
  text-transform: uppercase;
}
.mq-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  pointer-events: none;
  z-index: 5;
}
.mq-edge-l {
  left: 0;
  background: linear-gradient(90deg, var(--bg-2) 0%, transparent 100%);
}
.mq-edge-r {
  right: 0;
  background: linear-gradient(270deg, var(--bg-2) 0%, transparent 100%);
}

@media (max-width: 720px) {
  .mq-tile { width: 260px; }
  .mq-tile-top { top: 14px; left: 18px; right: 18px; font-size: 9.5px; }
  .mq-tile-bottom { bottom: 14px; left: 18px; right: 18px; }
}

/* ─── MUSA Immersive 3D parallax video band ───────────────── */
.musa-immersive {
  position: relative;
  padding: 60px 40px 80px;
  background: rgba(10, 10, 10, 0.35);
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: center 45%;
}
.musa-immersive::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(240,165,0,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(240,165,0,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.musa-immersive-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.musa-immersive-particles .mip {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  filter: blur(80px);
  opacity: 0.18;
}
.musa-immersive-particles .mip-1 {
  width: 320px; height: 320px;
  top: 10%; left: 8%;
  animation: mipDrift 14s ease-in-out infinite;
}
.musa-immersive-particles .mip-2 {
  width: 280px; height: 280px;
  top: 30%; right: 6%;
  animation: mipDrift 18s ease-in-out infinite reverse;
}
.musa-immersive-particles .mip-3 {
  width: 220px; height: 220px;
  bottom: 8%; left: 38%;
  animation: mipDrift 16s ease-in-out infinite 2s;
}
@keyframes mipDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(40px, -30px, 0) scale(1.18); }
}
.musa-immersive-stage {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  aspect-ratio: 21 / 9;
  transform-style: preserve-3d;
}
.musa-immersive-shadow {
  position: absolute;
  inset: 5% 8%;
  background: radial-gradient(ellipse at center, rgba(240,165,0,0.35) 0%, transparent 65%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.musa-immersive-card {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow:
    0 50px 100px -30px rgba(0,0,0,0.8),
    0 30px 60px -20px rgba(240,165,0,0.18),
    0 0 0 1px rgba(240,165,0,0.18) inset;
  background: #050505;
}
.musa-immersive-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(1.05);
}
.musa-immersive-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(10,10,10,0.4) 0%,
      transparent 25%,
      transparent 70%,
      rgba(10,10,10,0.85) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(10,10,10,0.5) 95%);
  pointer-events: none;
}
.musa-immersive-frame {
  position: absolute;
  inset: 18px;
  pointer-events: none;
  z-index: 3;
}
.musa-immersive-frame .ift {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(240,165,0,0.85);
}
.musa-immersive-frame .tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.musa-immersive-frame .tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.musa-immersive-frame .bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.musa-immersive-frame .br { bottom: 0; right: 0; border-left: none; border-top: none; }

.musa-immersive-meta {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.78);
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.musa-immersive-meta.tl { top: 36px; left: 44px; }
.musa-immersive-meta.tr { top: 36px; right: 44px; color: var(--gold); }
.musa-immersive-meta.br { bottom: 36px; right: 44px; color: rgba(245,242,236,0.55); }
.musa-immersive-meta .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: blink 1.4s infinite;
}

/* Audio toggle inside the immersive card */
.musa-immersive-audio {
  position: absolute;
  bottom: 30px;
  left: 40px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 11px;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(240,165,0,0.25);
  border-radius: 999px;
  color: rgba(245,242,236,0.85);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.musa-immersive-audio:hover {
  background: rgba(10,10,10,0.78);
  border-color: rgba(240,165,0,0.6);
  color: var(--ink);
  transform: translateY(-1px);
}
.musa-immersive-audio.is-on {
  background: rgba(240,165,0,0.14);
  border-color: var(--gold);
  color: var(--gold-light);
  box-shadow: 0 0 18px rgba(240,165,0,0.25);
}
.musa-immersive-audio .audio-icon {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(240,165,0,0.12);
  color: currentColor;
  flex-shrink: 0;
}
.musa-immersive-audio.is-on .audio-icon {
  background: var(--gold);
  color: #0A0A0A;
  box-shadow: 0 0 12px rgba(240,165,0,0.5);
}
.musa-immersive-audio .audio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.musa-immersive-audio .audio-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.musa-immersive-audio .audio-bars span {
  display: inline-block;
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.4;
  transition: height 0.2s, opacity 0.2s;
}
.musa-immersive-audio .audio-bars span:nth-child(1) { height: 30%; }
.musa-immersive-audio .audio-bars span:nth-child(2) { height: 60%; }
.musa-immersive-audio .audio-bars span:nth-child(3) { height: 85%; }
.musa-immersive-audio .audio-bars span:nth-child(4) { height: 50%; }
.musa-immersive-audio.is-on .audio-bars span {
  opacity: 1;
  animation: audioBars 1.1s ease-in-out infinite;
}
.musa-immersive-audio.is-on .audio-bars span:nth-child(1) { animation-delay: 0s; }
.musa-immersive-audio.is-on .audio-bars span:nth-child(2) { animation-delay: 0.15s; }
.musa-immersive-audio.is-on .audio-bars span:nth-child(3) { animation-delay: 0.3s; }
.musa-immersive-audio.is-on .audio-bars span:nth-child(4) { animation-delay: 0.45s; }
@keyframes audioBars {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1.2); }
}
.musa-immersive-audio .audio-bars span { transform-origin: bottom center; }

@media (max-width: 720px) {
  .musa-immersive-audio {
    bottom: 18px;
    left: 22px;
    padding: 7px 11px 7px 8px;
    font-size: 9px;
    letter-spacing: 0.22em;
    gap: 7px;
  }
  .musa-immersive-audio .audio-icon { width: 18px; height: 18px; }
  .musa-immersive-audio .audio-bars { height: 10px; }
}

.musa-immersive-caption {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 4;
  white-space: nowrap;
}
.musa-immersive-caption .cap-em {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 36px);
  letter-spacing: 0.16em;
  color: var(--gold-light);
  text-shadow: 0 2px 16px rgba(0,0,0,0.8);
}
.musa-immersive-caption .cap-line {
  width: clamp(40px, 8vw, 100px);
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.musa-immersive-caption .cap-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.7);
}

@media (max-width: 860px) {
  .musa-immersive { padding: 70px 22px 40px; }
  .musa-immersive-stage { aspect-ratio: 4 / 5; }
  .musa-immersive-meta { font-size: 9px; letter-spacing: 0.22em; gap: 6px; }
  .musa-immersive-meta.tl { top: 18px; left: 22px; }
  .musa-immersive-meta.tr { top: 18px; right: 22px; }
  .musa-immersive-meta.br { bottom: 18px; right: 22px; }
  .musa-immersive-caption { bottom: 24px; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 0 22px; }
  .musa-immersive-caption .cap-sub { font-size: 9px; letter-spacing: 0.22em; }
  .musa-immersive-frame { inset: 12px; }
  .musa-immersive-frame .ift { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .musa-immersive-card,
  .musa-immersive-shadow {
    transform: none !important;
  }
}

/* Stats fade-in */
.stat-num-anim { display: inline-block; }

/* ─── Loading screen ─────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: 36px 40px;
  color: var(--ink);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.8s;
}
.loader-out {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  visibility: hidden;
}
.loader-tl {
  position: absolute;
  top: 36px; left: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  text-transform: uppercase;
  animation: loaderTL 0.9s 0.1s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes loaderTL {
  from { opacity: 0; transform: translateY(-12px); }
}
.loader-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: blink 1.4s infinite;
}
.loader-center {
  grid-row: 1;
  display: grid;
  place-items: center;
  position: relative;
}
.loader-word-stack {
  position: relative;
  height: 1.05em;
  width: min(80vw, 900px);
  display: grid;
  place-items: center;
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(56px, 10vw, 140px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.loader-word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s cubic-bezier(.4,0,.2,1), transform 0.55s cubic-bezier(.4,0,.2,1);
}
.loader-word.on {
  opacity: 1;
  transform: translateY(0);
}
.loader-word .em { color: var(--gold-light); }

.loader-br {
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  padding: 0 0 14px;
}
.loader-count {
  font-family: var(--display-font);
  font-size: clamp(80px, 14vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.loader-bar {
  grid-row: 3;
  height: 2px;
  background: rgba(240,165,0,0.12);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.loader-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 50%, var(--gold-light));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.1s linear;
  box-shadow: 0 0 12px rgba(240,165,0,0.5);
}
.loader-meta {
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 18px;
}

@media (max-width: 720px) {
  .loader { padding: 24px 22px; }
  .loader-tl { top: 24px; left: 22px; }
  .loader-meta { flex-direction: column; gap: 8px; }
}

/* ─── Floating pill nav ─────────────────────────────────────── */
.nav-pill-wrap {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 18px 16px 0;
  pointer-events: none;
  transition: padding 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav-pill-wrap.nav-pill-scrolled { padding-top: 14px; }
.nav-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 7px 7px 12px;
  background: rgba(15,15,15,0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(240,165,0,0.16);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 18px 50px -20px rgba(0,0,0,0.6);
  transition: box-shadow 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav-pill-scrolled .nav-pill {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px -20px rgba(0,0,0,0.8),
    0 0 0 1px rgba(240,165,0,0.08);
}
.pill-logo {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  text-decoration: none;
  background: var(--bg-2);
  border: 1px solid rgba(240,165,0,0.3);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.4s;
}
.pill-logo:hover {
  transform: scale(1.08);
  border-color: var(--gold);
}
.pill-logo::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--gold), var(--gold-deep), var(--gold-light), var(--gold));
  z-index: 0;
  opacity: 0.65;
  animation: pillRotate 8s linear infinite;
}
.pill-logo::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: var(--bg);
  z-index: 1;
}
.pill-logo img {
  position: relative;
  z-index: 2;
  height: 24px;
  width: auto;
  filter: drop-shadow(0 0 4px rgba(240,165,0,0.4));
}
@keyframes pillRotate {
  to { transform: rotate(360deg); }
}
.pill-divider {
  width: 1px;
  height: 22px;
  background: rgba(240,165,0,0.18);
  margin: 0 4px;
}
.pill-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pill-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 999px;
  transition: color 0.3s, background 0.3s;
  white-space: nowrap;
}
.pill-link:hover {
  color: var(--ink);
  background: rgba(240,165,0,0.06);
}
.pill-link.active {
  color: var(--ink);
  background: rgba(240,165,0,0.1);
  position: relative;
}
.pill-link.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--gold);
}
.pill-cta {
  position: relative;
  text-decoration: none;
  padding: 2px;
  border-radius: 999px;
}
.pill-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold-deep) 100%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(.2,.7,.2,1);
  background-size: 200% 100%;
  animation: gradientShift 6s ease infinite;
}
.pill-cta:hover::before { opacity: 1; }
.pill-cta-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(240,165,0,0.4);
  transition: color 0.4s, background 0.4s, border-color 0.4s;
}
.pill-cta:hover .pill-cta-inner {
  color: var(--ink);
  border-color: transparent;
  background: rgba(10,10,10,0.6);
}
.pill-arrow {
  font-size: 13px;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.pill-cta:hover .pill-arrow { transform: translate(2px, -2px); }

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 980px) {
  .pill-links .pill-link:nth-child(n+4) { display: none; }
}
@media (max-width: 720px) {
  .nav-pill { padding: 6px; gap: 4px; }
  .pill-divider { display: none; }
  .pill-link { padding: 6px 10px; font-size: 11px; letter-spacing: 0.1em; }
  .pill-cta-inner { padding: 7px 12px; font-size: 11px; }
  .pill-links .pill-link:nth-child(n+3) { display: none; }
}

/* ─── Portfolio header w/ side CTA ─────────────────────────── */
.portfolio-head .head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}
.portfolio-head .head-row > div { max-width: 620px; }
.head-cta {
  position: relative;
  text-decoration: none;
  padding: 2px;
  border-radius: 999px;
  flex-shrink: 0;
}
.head-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold-deep));
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s;
  animation: gradientShift 6s ease infinite;
}
.head-cta:hover::before { opacity: 1; }
.head-cta-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: color 0.4s, background 0.4s, border-color 0.4s;
}
.head-cta:hover .head-cta-inner {
  color: var(--ink);
  background: var(--bg);
  border-color: transparent;
}
@media (max-width: 720px) {
  .portfolio-head .head-row { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ─── Bento grid for portfolio ─────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  margin: 8px 0 24px;
}
.bento-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: pointer;
  aspect-ratio: 5 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 30px;
  isolation: isolate;
  transition: border-color 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.bento-card.span-7 { grid-column: span 7; }
.bento-card.span-5 { grid-column: span 5; aspect-ratio: 1 / 1; }
.bento-card:hover {
  border-color: rgba(240,165,0,0.5);
}
.bento-fill {
  position: absolute;
  inset: 0;
  z-index: -2;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.bento-card:hover .bento-fill { transform: scale(1.05); }
.bento-halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}
.bento-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.94  0 0 0 0 0.65  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
}
.bento-stripes {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0,
    transparent 36px,
    rgba(240,165,0,0.04) 36px,
    rgba(240,165,0,0.04) 37px
  );
  mix-blend-mode: screen;
}
.bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 35%, rgba(10,10,10,0.7) 100%);
  pointer-events: none;
}
.bento-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.bento-num { color: var(--gold); }
.bento-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.bento-name {
  font-family: var(--display-font);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.bento-cta {
  position: relative;
  padding: 2px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1);
  flex-shrink: 0;
}
.bento-card:hover .bento-cta {
  opacity: 1;
  transform: translateY(0);
}
.bento-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold-deep));
  background-size: 200% 100%;
  animation: gradientShift 5s ease infinite;
}
.bento-cta-inner {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 9px 16px;
  background: var(--ink);
  color: #0A0A0A;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.bento-cta-inner em {
  font-family: var(--display-font);
  font-style: italic;
  margin-left: 4px;
  text-transform: none;
  font-size: 13.5px;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card.span-7, .bento-card.span-5 {
    grid-column: 1;
    aspect-ratio: 4 / 3;
  }
}

/* ─── Footer marquee + status ───────────────────────────────── */
.footer { position: relative; }
.footer-marquee {
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  background: var(--bg);
}
.footer-marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 40s linear infinite;
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}
.footer-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 48px;
}
.footer-marquee-dot {
  color: var(--gold);
  font-style: normal;
  font-family: 'Inter', sans-serif;
  font-size: 0.4em;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.footer { padding-top: 200px; }
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6AE48A;
  box-shadow: 0 0 0 0 rgba(106,228,138,0.6);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(106,228,138,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(106,228,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(106,228,138,0); }
}
@media (max-width: 720px) {
  .footer { padding-top: 160px; }
  .footer-marquee { padding: 18px 0; }
}


/* ────────── Bento Stats — multi-card portfolio layout ────── */
.bento-stats {
  position: relative;
  z-index: 1;
  padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 56px);
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.bn-section-inner {
  max-width: 1480px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bento-stats.in .bn-section-inner { opacity: 1; transform: translateY(0); }

.bn-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}
.bn-header-text { max-width: 720px; }
.bn-h {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 14px;
}
.bn-h-em {
  font-family: var(--display-font);
  font-style: italic;
  color: var(--gold-light);
  letter-spacing: -0.012em;
}
.bn-p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.6);
  margin: 0;
  max-width: 640px;
}
.bn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-cta:hover { transform: translateY(-2px) scale(1.02); }
.bn-cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-cta:hover .bn-cta-arrow { transform: translate(3px, -3px); }

.bn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.bn-col {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-height: 0;
}

.bn-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #060606;
  border: 1px solid rgba(255, 255, 255, 0.06);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  min-height: 220px;
}
.bn-card-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
  filter: contrast(1.05) saturate(0.92);
}
.bn-card-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.32) 40%, rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}
.bn-card-veil.dark {
  background: linear-gradient(180deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.92) 100%);
}

.bn-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.75);
  margin-bottom: 22px;
  white-space: nowrap;
}
.bn-tag-center { justify-content: center; }
.bn-tag-start { justify-content: flex-start; }
.bn-tag svg { color: var(--gold-light); }

.bn-trayectoria {
  min-height: 360px;
  padding: 28px 28px 32px;
}
.bn-timeline {
  margin-top: auto;
  display: grid;
  gap: 14px;
}
.bn-tl-row {
  display: grid;
  grid-template-columns: 92px auto 1fr auto;
  align-items: center;
  gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.3;
}
.bn-tl-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.bn-tl-sep { color: rgba(245, 242, 236, 0.5); }
.bn-tl-role { color: var(--ink); font-weight: 400; }
.bn-tl-where {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.45);
  text-align: right;
  white-space: nowrap;
}

.bn-quote {
  background: linear-gradient(140deg, #2a2218 0%, #1a1813 100%);
  padding: 26px 28px;
  min-height: 220px;
}
.bn-q-text {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(245, 242, 236, 0.92);
  margin: 0 0 18px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.bn-q-text::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  left: -8px;
  font-family: var(--display-font);
  font-size: 60px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.55;
}
.bn-q-author {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(245, 242, 236, 0.65);
  position: relative;
  z-index: 1;
}
.bn-q-author strong { font-weight: 500; color: var(--ink); }
.bn-q-author em {
  font-family: var(--display-font);
  font-style: italic;
  color: var(--gold-light);
  letter-spacing: -0.005em;
}

.bn-bignum {
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
  min-height: 240px;
  text-align: center;
}
.bn-bignum-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.bn-bignum-value {
  font-family: var(--display-font);
  font-weight: 300;
  font-size: clamp(72px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 4px 24px rgba(0,0,0,0.6),
    0 0 36px rgba(240,165,0,0.12);
}
.bn-bignum-caption {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(245, 242, 236, 0.78);
}

.bn-stack { min-height: 240px; padding-bottom: 18px; }
.bn-marquees {
  margin-top: auto;
  display: grid;
  gap: 10px;
  width: 100%;
  overflow: hidden;
}
.bn-mqr {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.bn-mqr-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}
.bn-mqr-left { animation: bnMqLeft 22s linear infinite; }
.bn-mqr-right { animation: bnMqRight 26s linear infinite; }
@keyframes bnMqLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes bnMqRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.bn-icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--ink);
}
.bn-icon { width: 22px; height: 22px; display: block; }
.bn-icon svg { width: 100%; height: 100%; display: block; }

.bn-contact {
  background: linear-gradient(140deg, #2a2218 0%, #1a1813 100%);
  padding: 26px 28px;
  position: relative;
  min-height: 220px;
}
.bn-arrow-btn {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.3s;
}
.bn-arrow-btn:hover { transform: translate(2px, -2px); color: var(--gold); }
.bn-c-lines {
  margin-top: auto;
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.bn-c-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
  transition: border-color 0.3s;
}
.bn-c-line:last-child { border-bottom: none; }
.bn-c-line:hover { border-color: rgba(240, 165, 0, 0.4); }
.bn-c-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.55);
}
.bn-c-val {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color 0.3s;
  white-space: nowrap;
}
.bn-c-line:hover .bn-c-val { color: var(--gold-light); }

.liquid-glass {
  background: rgba(255, 255, 255, 0.025);
  background-blend-mode: luminosity;
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  z-index: 0;
}

@media (max-width: 980px) {
  .bn-grid { grid-template-columns: 1fr 1fr; }
  .bn-trayectoria { grid-column: 1 / -1; min-height: 320px; }
}
@media (max-width: 720px) {
  .bn-grid { grid-template-columns: 1fr; }
  .bn-trayectoria { grid-column: 1; min-height: 280px; }
  .bn-header { flex-direction: column; align-items: flex-start; gap: 22px; }
  .bn-tl-row { grid-template-columns: 72px auto 1fr; gap: 10px; }
  .bn-tl-where { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-section-inner,
  .bn-cta,
  .bn-mqr-left,
  .bn-mqr-right,
  .bn-arrow-btn,
  .bn-c-line {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* ────────── Pilares creativos — feature cards ────────────── */
.pillars-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 9vw, 130px) clamp(20px, 4vw, 56px);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden;
}
.pillars-head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.pillars-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.75);
  margin-bottom: 20px;
}
.pillars-eyebrow svg { color: var(--gold-light); }
.pillars-h {
  font-family: var(--display-font);
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 18px;
}
.pillars-em {
  font-style: italic;
  color: var(--gold-light);
}
.pillars-p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.6);
  margin: 0 auto;
  max-width: 560px;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  perspective: 1600px;
}

.pillar-wrap {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  animation: pillarIn 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes pillarIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.pillar-glow {
  position: absolute;
  inset: 0;
  height: 320px;
  border-radius: 40px;
  opacity: 0.55;
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s;
}
.pillar-wrap:hover .pillar-glow {
  opacity: 0.85;
  filter: blur(60px);
}

.pillar-card {
  position: relative;
  z-index: 1;
  height: 320px;
  border-radius: 40px;
  border: 8px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  overflow: hidden;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cursor-follow inner glow */
.pillar-cursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 220px at var(--gx, 50%) var(--gy, 50%),
    rgba(255,255,255,0.06) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 1;
}
.pillar-card:hover .pillar-cursor { opacity: 1; }

/* Diagonal shimmer that traverses on hover */
.pillar-shimmer {
  position: absolute;
  inset: -50%;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255,255,255,0.08) 50%,
    transparent 62%);
  transform: translateX(-100%);
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 1;
}
.pillar-card:hover .pillar-shimmer {
  transform: translateX(100%);
}

.pillar-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.4s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pillar-card:hover .pillar-icon {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px) scale(1.04);
}
.pillar-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.45);
  padding-top: 8px;
}

.pillar-bottom {
  position: relative;
  z-index: 2;
}
.pillar-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 12px;
}
.pillar-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(160, 160, 165, 1);
  margin: 0;
}

@media (max-width: 980px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 32px; }
  .pillar-wrap { max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-wrap, .pillar-card, .pillar-glow, .pillar-shimmer, .pillar-icon {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* Bento stats — 3D arc perspective + glowing CTA (reference: curved fan layout) */
.bn-grid {
  perspective: 1600px;
  perspective-origin: center 30%;
  padding-top: 12px;
}
.bn-grid > * {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
  will-change: transform;
}
.bn-grid > *:nth-child(1) { transform: rotateY(6deg) translateZ(-20px); }
.bn-grid > *:nth-child(2) { transform: rotateY(0deg) translateZ(0); }
.bn-grid > *:nth-child(3) { transform: rotateY(-6deg) translateZ(-20px); }
.bn-grid > *:hover { transform: rotateY(0deg) translateZ(20px); }

.bn-card {
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.5s;
  box-shadow:
    0 30px 60px -30px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.04) inset;
}
.bn-card:hover {
  border-color: rgba(240, 165, 0, 0.3);
  box-shadow:
    0 40px 70px -25px rgba(0,0,0,0.85),
    0 0 30px -10px rgba(240,165,0,0.35),
    0 1px 0 rgba(255,255,255,0.08) inset;
}

/* Glowing animated CTA */
.bn-cta {
  position: relative;
}
.bn-cta::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: conic-gradient(
    from var(--cta-angle, 0deg),
    transparent 0deg,
    var(--gold) 90deg,
    var(--gold-light) 130deg,
    transparent 220deg
  );
  z-index: -1;
  opacity: 0.6;
  filter: blur(8px);
  animation: ctaSpin 4s linear infinite;
}
@property --cta-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes ctaSpin {
  to { --cta-angle: 360deg; }
}
.bn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(240,165,0,0.55) 50%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: ctaShimmer 3.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
}
@keyframes ctaShimmer {
  0% { background-position: 200% 0; }
  60%, 100% { background-position: -100% 0; }
}
.bn-cta:hover::after {
  opacity: 0.9;
  filter: blur(12px);
}

/* Trayectoria mid filler */
.bn-trayectoria-mid {
  position: relative;
  z-index: 1;
  margin: 22px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bn-now-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.78);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(240, 165, 0, 0.12);
  border: 1px solid rgba(240, 165, 0, 0.32);
}
.bn-now-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(240,165,0,0.55);
  animation: liveDot 1.8s ease-in-out infinite;
}
.bn-trayectoria-quote {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: rgba(245, 242, 236, 0.88);
  margin: 0;
  max-width: 340px;
  text-wrap: pretty;
}
.bn-trayectoria-quote em {
  color: var(--gold-light);
}

@media (max-width: 980px) {
  .bn-grid > *:nth-child(1),
  .bn-grid > *:nth-child(2),
  .bn-grid > *:nth-child(3) {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bn-grid > *,
  .bn-cta::after,
  .bn-cta::before {
    transform: none !important;
    animation: none !important;
  }
}


/* ────────── Bento Stats — 3D arc carousel layout ─────────── */
.bn-arc-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Header (centered) */
.bn-arc-header {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}
.bn-arc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.75);
}
.bn-arc-eyebrow svg { color: var(--gold-light); }
.bn-arc-h {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0;
  max-width: 800px;
}
.bn-arc-h-em {
  font-family: var(--display-font);
  font-style: italic;
  color: var(--gold-light);
  letter-spacing: -0.012em;
}
.bn-arc-p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.58);
  margin: 0;
  max-width: 540px;
}

/* Glowing CTA — gold neon ring around pill */
.bn-cta-glow {
  position: relative;
  display: inline-block;
  border-radius: 999px;
  text-decoration: none;
  margin-top: 8px;
  isolation: isolate;
}
.bn-cta-glow::before {
  content: '';
  position: absolute;
  inset: -10px -16px;
  border-radius: 999px;
  background: radial-gradient(ellipse at center,
    rgba(240, 165, 0, 0.55) 0%,
    rgba(240, 165, 0, 0.15) 30%,
    transparent 65%);
  filter: blur(14px);
  opacity: 0.9;
  z-index: -1;
  animation: ctaGlowPulse 3.6s ease-in-out infinite;
}
@keyframes ctaGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.06); }
}
.bn-cta-glow::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  box-shadow: 0 0 12px var(--gold), 0 0 24px var(--gold-light);
  border-radius: 2px;
}
.bn-cta-glow-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 28px;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 165, 0, 0.45);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-cta-glow:hover .bn-cta-glow-inner {
  background: rgba(240, 165, 0, 0.12);
  border-color: var(--gold);
  transform: scale(1.04);
}
.bn-cta-glow .bn-cta-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-cta-glow:hover .bn-cta-arrow { transform: translateX(4px); }

/* Arc stage — perspective container */
.bn-arc-stage {
  position: relative;
  width: 100%;
  height: clamp(360px, 44vw, 480px);
  margin: 12px 0 64px;
  perspective: 1300px;
  perspective-origin: center bottom;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bn-arc-stage-floor {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 90%;
  height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240,165,0,0.15) 0%, transparent 55%);
  filter: blur(40px);
  pointer-events: none;
}
.bn-arc {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* Individual arc card */
.bn-arc-card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -160px;
  width: 200px;
  height: 320px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  background: #060606;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.75),
    0 1px 0 rgba(255,255,255,0.06) inset;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, filter;
  transition:
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-arc-card.is-hover {
  box-shadow:
    0 50px 80px -20px rgba(0,0,0,0.9),
    0 0 40px -5px rgba(240,165,0,0.4),
    0 1px 0 rgba(255,255,255,0.12) inset;
  border-color: rgba(240, 165, 0, 0.4);
}
.bn-arc-card.is-center {
  box-shadow:
    0 40px 70px -20px rgba(0,0,0,0.8),
    0 0 50px -10px rgba(240,165,0,0.35),
    0 1px 0 rgba(255,255,255,0.12) inset;
  border-color: rgba(240, 165, 0, 0.3);
}

.bn-arc-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bn-arc-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.bn-arc-halftone {
  background-image: radial-gradient(circle, rgba(0,0,0,0.85) 1.4px, transparent 1.4px);
  background-size: 5px 5px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.bn-arc-stripes {
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0,
    transparent 22px,
    rgba(240,165,0,0.18) 22px,
    rgba(240,165,0,0.18) 23px
  );
}
.bn-arc-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.8  0 0 0 0 0.3  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  z-index: 1;
}
.bn-arc-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, transparent 35%, rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}

/* Gold beam for center card */
.bn-arc-beam {
  position: absolute;
  left: 50%;
  top: -20%;
  bottom: -20%;
  width: 4px;
  margin-left: -2px;
  z-index: 3;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(240,165,0,0.8) 20%,
    var(--gold-light) 50%,
    rgba(240,165,0,0.8) 80%,
    transparent 100%);
  box-shadow:
    0 0 16px var(--gold),
    0 0 32px rgba(240,165,0,0.5),
    0 0 60px rgba(240,165,0,0.3);
  filter: blur(0.5px);
  border-radius: 2px;
  animation: arcBeam 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes arcBeam {
  0%, 100% { opacity: 0.85; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.05); }
}

/* Card content overlays */
.bn-arc-top {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.bn-arc-code {
  color: var(--gold);
}
.bn-arc-live {
  color: var(--gold-light);
  font-size: 9px;
  animation: blink 1.4s infinite;
}
.bn-arc-bottom {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  z-index: 4;
  text-align: left;
}
.bn-arc-name {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.bn-arc-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.6);
}

/* Bottom feature labels */
.bn-arc-features {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.bn-arc-feature {
  padding: 28px 24px;
  background: rgba(8, 8, 8, 0.85);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.bn-arc-f-num {
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.bn-arc-f-label {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.bn-arc-f-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(245, 242, 236, 0.5);
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .bn-arc-card {
    width: 160px;
    height: 260px;
    margin-left: -80px;
    margin-top: -130px;
  }
}

@media (max-width: 720px) {
  .bn-arc-stage {
    height: 340px;
  }
  .bn-arc-card {
    width: 130px;
    height: 220px;
    margin-left: -65px;
    margin-top: -110px;
  }
  .bn-arc-name { font-size: 17px; }
  .bn-arc-features { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-arc-card,
  .bn-arc-beam,
  .bn-cta-glow::before {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ────────── Arc carousel — extra motion (parallax, floating, rays) ── */

/* Floating cards — gentle vertical drift while open */
@keyframes bnArcFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(var(--float-amp, 6px) * -1); }
}
.bn-arc-card.is-open {
  animation: bnArcCardEntry 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}
.bn-arc-card.is-open::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: bnArcFloat 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  z-index: -1;
}

/* Card entry — fly in from below, fade + scale */
@keyframes bnArcCardEntry {
  from {
    opacity: 0;
    translate: 0 60px;
    scale: 0.7;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* Translate-based floating using transform layered after entry */
.bn-arc-card.is-open .bn-arc-card-bg {
  animation: bnArcFloatBg 6s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}
@keyframes bnArcFloatBg {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--float-amp, 6px) * -1)); }
}

/* Card shine — diagonal sweep on hover */
.bn-arc-card-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 65%);
  transform: translateX(-100%);
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-arc-card:hover .bn-arc-card-shine {
  transform: translateX(100%);
}

/* Stage rays — golden light beams emanating from center */
.bn-arc-rays {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}
.bn-arc-rays span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 80%;
  margin-left: -1px;
  margin-top: -40%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(240, 165, 0, 0.18) 30%,
    rgba(240, 165, 0, 0.32) 50%,
    rgba(240, 165, 0, 0.18) 70%,
    transparent 100%);
  filter: blur(2px);
  opacity: 0.5;
  transform-origin: center center;
  animation: bnArcRayPulse 5s ease-in-out infinite;
}
.bn-arc-rays span:nth-child(1) { transform: rotate(-32deg) translateY(-8%); animation-delay: 0s; }
.bn-arc-rays span:nth-child(2) { transform: rotate(-18deg) translateY(-4%); animation-delay: 0.5s; }
.bn-arc-rays span:nth-child(3) { transform: rotate(0deg); animation-delay: 1s; opacity: 0.75; }
.bn-arc-rays span:nth-child(4) { transform: rotate(18deg) translateY(-4%); animation-delay: 1.5s; }
.bn-arc-rays span:nth-child(5) { transform: rotate(32deg) translateY(-8%); animation-delay: 2s; }
@keyframes bnArcRayPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.75; }
}

/* Stage container — apply mouse-tilt smoothly */
.bn-arc {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Strengthen the stage when scrolled into view */
.bento-stats.in .bn-arc-stage-floor {
  animation: bnArcFloorPulse 4s ease-in-out infinite;
}
@keyframes bnArcFloorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .bn-arc-card.is-open,
  .bn-arc-card.is-open .bn-arc-card-bg,
  .bn-arc-rays span,
  .bn-arc {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}


/* Arc cards — larger, more spaced, scroll parallax */
.bn-arc-stage {
  height: clamp(420px, 50vw, 540px);
  margin: 24px 0 80px;
  perspective: 1500px;
}
.bn-arc-card {
  width: 220px;
  height: 360px;
  margin-left: -110px;
  margin-top: -180px;
  border-radius: 26px;
  transition:
    transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-arc-card.is-hover {
  transition:
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bn-arc-name { font-size: 26px; }
.bn-arc-top { top: 16px; left: 18px; right: 18px; font-size: 10.5px; }
.bn-arc-bottom { bottom: 22px; left: 22px; right: 22px; }

/* Each card has its own subtle ambient color rim that animates */
.bn-arc-card.is-open::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(240,165,0,0.35) 0%, transparent 30%, transparent 70%, rgba(240,165,0,0.18) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.6;
  animation: gradientShift 6s ease infinite;
  background-size: 200% 200%;
}
.bn-arc-card.is-center.is-open::before {
  background: linear-gradient(140deg, var(--gold) 0%, rgba(240,165,0,0.4) 30%, transparent 50%, rgba(240,165,0,0.4) 70%, var(--gold-light) 100%);
  background-size: 200% 200%;
  opacity: 1;
}
.bn-arc-card.is-hover::before {
  opacity: 1;
  background: linear-gradient(140deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-light) 100%);
  background-size: 200% 200%;
}

/* Bigger floor + extra glow */
.bn-arc-stage-floor {
  bottom: -8%;
  width: 95%;
  height: 60%;
  background: radial-gradient(ellipse at center,
    rgba(240,165,0,0.22) 0%,
    rgba(240,165,0,0.06) 35%,
    transparent 65%);
  filter: blur(50px);
}

/* Scroll-direction hint badge — appears on first card with arrow */
.bn-arc-stage::after {
  content: '← scroll →';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.3);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 1024px) {
  .bn-arc-card {
    width: 180px;
    height: 300px;
    margin-left: -90px;
    margin-top: -150px;
  }
  .bn-arc-name { font-size: 22px; }
}
@media (max-width: 720px) {
  .bn-arc-card {
    width: 140px;
    height: 240px;
    margin-left: -70px;
    margin-top: -120px;
  }
  .bn-arc-name { font-size: 18px; }
}


/* Arc → cylinder geometry overrides */
.bn-arc-stage {
  perspective: 1800px;
  perspective-origin: center 55%;
  height: clamp(440px, 52vw, 580px);
  margin: 24px 0 80px;
}
.bn-arc {
  transform-style: preserve-3d;
  transition: transform 0.12s linear;
}
.bn-arc-card {
  transform-origin: center center;
  transform-style: preserve-3d;
  /* Slightly slower transition for the cylinder unfold so it feels smooth on scroll */
  transition:
    opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    z-index 0s 0s;
  will-change: transform, opacity;
}
.bn-arc-card.is-hover {
  transition:
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stage hint update — clarifies vertical scroll triggers horizontal unfold */
.bn-arc-stage::after {
  content: '↓ scroll para desplegar';
  font-size: 10px;
  letter-spacing: 0.28em;
  top: 12px;
}

/* Floor wider for the cylinder */
.bn-arc-stage-floor {
  bottom: -10%;
  width: 100%;
  height: 70%;
}

@media (max-width: 1024px) {
  .bn-arc-stage { perspective: 1400px; }
}

/* ════════════════════════════════════════════
   FUTURE LAYER — gold dust, word cascade,
   chapter numerals, magnetic CTAs
   ════════════════════════════════════════════ */

/* Gold dust particle field — between bg video and content */
.gold-dust {
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Hero — word cascade reveal (gated behind loading screen) */
.hw-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero-line .hw-clip:not(:last-child) { margin-right: 0.24em; }
.hw {
  display: inline-block;
  transform: translateY(115%) rotate(2.5deg);
  transform-origin: 0 100%;
}
.app-ready .hw {
  animation: hwRise 0.95s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}
@keyframes hwRise {
  to { transform: translateY(0) rotate(0deg); }
}

/* Hero — mouse-depth parallax layers (vars set on .hero by JS) */
.hero-title {
  transform: translate3d(calc(var(--hx, 0) * -14px), calc(var(--hy, 0) * -9px), 0);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.hero-sub-depth {
  transform: translate3d(calc(var(--hx, 0) * -24px), calc(var(--hy, 0) * -15px), 0);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

/* Giant chapter numerals — editorial echo of the brand manual */
.section,
.bento-stats,
.pillars-section { position: relative; }

.section-inner,
.bn-section-inner,
.pillars-head,
.pillars-grid { position: relative; z-index: 1; }

.chapter-num {
  position: absolute;
  top: -30px;
  z-index: 0;
  font-family: var(--display-font);
  font-size: clamp(190px, 26vw, 440px);
  line-height: 0.8;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 161, 30, 0.16);
  text-stroke: 1px rgba(242, 161, 30, 0.16);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
}
.chapter-num.right { right: -1.5%; }
.chapter-num.left { left: -1.5%; }
.chapter-num::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, var(--bg) 95%);
  opacity: 0.35;
}
@media (max-width: 900px) {
  .chapter-num { font-size: clamp(140px, 32vw, 240px); top: -16px; opacity: 0.6; }
}

/* Magnetic CTA wrapper */
.magnetic {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

/* Bento tilt — give the card a hint of material response */
.bento-card { will-change: transform; }

/* Anton display mode — condensed sans needs tighter tracking + caps energy */
:root.font-anton .display,
:root.font-anton .chapter-num {
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

/* Reduced motion — future layer stands down */
@media (prefers-reduced-motion: reduce) {
  .gold-dust { display: none; }
  .hw { transform: none; }
  .app-ready .hw { animation: none; }
  .hero-title, .hero-sub-depth { transform: none; transition: none; }
  .magnetic { transition: none; }
  .chapter-num { transform: none !important; }
}

/* ════════════════════════════════════════════
   SCROLLYTELLING — ORIGEN pinned chapter
   ════════════════════════════════════════════ */

.origen { position: relative; }
.origen-track { height: 520vh; position: relative; }
.origen-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Letterbox bars — cinema crop while the chapter plays */
.og-bar {
  position: absolute;
  left: 0; right: 0;
  height: 7vh;
  background: #050505;
  z-index: 6;
  pointer-events: none;
}
.og-bar-top { top: 0; box-shadow: 0 1px 0 rgba(242,161,30,0.12); }
.og-bar-bottom { bottom: 0; box-shadow: 0 -1px 0 rgba(242,161,30,0.12); }

.og-head {
  position: absolute;
  top: calc(7vh + 18px);
  left: 40px; right: 40px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
  z-index: 5;
  pointer-events: none;
}
.og-head-l { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); }
.og-head-l .rec {
  width: 7px; height: 7px; border-radius: 50%;
  background: #E5484D;
  animation: ogRec 1.4s ease-in-out infinite;
}
@keyframes ogRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Gold flare sweeping horizontally with chapter progress */
.og-flare {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse 40% 60% at center, rgba(242,161,30,0.10), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 1;
}

/* Progress rail with year ticks */
.og-rail {
  position: absolute;
  right: 44px;
  top: 18vh;
  bottom: 18vh;
  width: 1px;
  background: rgba(245,242,236,0.12);
  z-index: 5;
}
.og-rail-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(242,161,30,0.6);
  transition: height 0.15s linear;
}
.og-tick {
  position: absolute;
  right: -4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-direction: row-reverse;
}
.og-tick-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(245,242,236,0.3);
  background: var(--bg);
  transition: all 0.4s cubic-bezier(.2,.7,.2,1);
}
.og-tick-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  transition: color 0.4s;
}
.og-tick.on .og-tick-dot {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(242,161,30,0.8);
}
.og-tick.on .og-tick-year { color: var(--gold); }

/* Scene — full-stage layer, dolly handled inline */
.og-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity, filter;
  z-index: 2;
}

/* Far layer — giant year numeral */
.og-year {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.42em;
  margin-left: -1.05em;
  font-family: var(--display-font);
  font-size: clamp(220px, 34vw, 560px);
  line-height: 0.84;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,161,30,0.20);
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* Floating artist names — scene 2 depth field */
.og-names {
  position: absolute;
  inset: 7vh 0;
  pointer-events: none;
}
.og-name {
  position: absolute;
  font-family: var(--display-font);
  font-style: italic;
  color: var(--gold-light);
  white-space: nowrap;
  will-change: transform, opacity;
  text-shadow: 0 0 24px rgba(242,161,30,0.25);
}

/* Mid + near layers — content */
.og-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 760px;
  padding: 0 32px;
}
.og-kicker {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--gold);
  margin-bottom: 26px;
  will-change: transform;
}
.og-title {
  font-size: clamp(52px, 8.5vw, 132px);
  margin: 0 0 28px;
  will-change: transform;
}
.og-copy {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 520px;
  margin: 0 auto;
  will-change: transform;
}
.og-tags {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
  will-change: transform;
}
.og-tags span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--ink-3);
  border: 1px solid rgba(245,242,236,0.14);
  padding: 7px 14px;
  border-radius: 999px;
}

.og-hint {
  position: absolute;
  bottom: calc(7vh + 22px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--ink-3);
  z-index: 5;
}
.og-hint .line {
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* Static fallback (reduced motion) */
.origen-static { padding: var(--section-pad) 32px; position: relative; }
.ogs-block { margin-top: 48px; border-left: 1px solid rgba(242,161,30,0.3); padding-left: 28px; }
.ogs-year { font-family: 'JetBrains Mono', monospace; color: var(--gold); letter-spacing: 0.3em; font-size: 12px; }
.ogs-block h3 { font-family: var(--display-font); font-size: 38px; margin: 10px 0 12px; font-weight: 400; }
.ogs-block p { color: var(--ink-2); line-height: 1.7; max-width: 560px; margin: 0; }

@media (max-width: 720px) {
  .origen-track { height: 460vh; }
  .og-rail { right: 20px; }
  .og-tick-year { display: none; }
  .og-head { left: 20px; right: 20px; font-size: 9px; }
  .og-year { font-size: clamp(150px, 44vw, 280px); }
  .og-name { display: none; }
}

/* ════════════════════════════════════════════
   SCROLLYTELLING — Services horizontal travel
   ════════════════════════════════════════════ */

.sc-section { position: relative; }
.sc-track { position: relative; }
.sc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.sc-rail {
  display: flex;
  align-items: center;
  gap: 4.5vw;
  padding: 0 9vw;
  will-change: transform;
}
.sc-intro { flex: none; width: 52vw; min-width: 480px; }
.sc-intro-inner { will-change: transform; }
.sc-intro-big {
  font-size: clamp(72px, 11vw, 180px);
  margin: 22px 0 26px;
  white-space: nowrap;
}
.sc-intro-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.26em;
  line-height: 2.1;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0;
}
.sc-item { flex: none; width: 372px; will-change: transform; }
.sc-item .svc-card { width: 100%; }
.sc-outro {
  flex: none;
  width: 46vw;
  min-width: 420px;
  text-align: center;
}
.sc-outro-h { font-size: clamp(48px, 6vw, 96px); margin: 20px 0 34px; }

.sc-progress {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 5;
}
.sc-progress-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
}
.sc-progress-track {
  width: 34vw;
  max-width: 460px;
  height: 1px;
  background: rgba(245,242,236,0.14);
  position: relative;
  overflow: hidden;
}
.sc-progress-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: 0 50%;
  box-shadow: 0 0 10px rgba(242,161,30,0.6);
}

/* ════════════════════════════════════════════
   V2 — ATMOSPHERE LAYER
   Practical lighting: drifting orbs + light sweep
   ════════════════════════════════════════════ */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.atmo-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  filter: blur(70px);
  transform: translate3d(0, 0, 0);
}
.atmo-orb-a {
  width: 44vw;
  height: 44vw;
  left: -14vw;
  top: 8vh;
  background: radial-gradient(circle at 40% 40%,
    rgba(242, 161, 30, 0.085) 0%,
    rgba(242, 161, 30, 0.03) 45%,
    transparent 70%);
  animation: atmoDriftA 52s ease-in-out infinite;
}
.atmo-orb-b {
  width: 36vw;
  height: 36vw;
  right: -10vw;
  top: 46vh;
  background: radial-gradient(circle at 55% 45%,
    rgba(233, 196, 106, 0.06) 0%,
    rgba(233, 196, 106, 0.022) 50%,
    transparent 72%);
  animation: atmoDriftB 64s ease-in-out infinite;
}
.atmo-orb-c {
  width: 26vw;
  height: 26vw;
  left: 38vw;
  bottom: -12vh;
  background: radial-gradient(circle at 50% 50%,
    rgba(212, 175, 55, 0.05) 0%,
    transparent 68%);
  animation: atmoDriftC 47s ease-in-out infinite;
}

@keyframes atmoDriftA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(7vw, 9vh, 0) scale(1.12); }
  66%      { transform: translate3d(2vw, -6vh, 0) scale(0.94); }
}
@keyframes atmoDriftB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-9vw, -10vh, 0) scale(1.08); }
  75%      { transform: translate3d(-3vw, 6vh, 0) scale(0.96); }
}
@keyframes atmoDriftC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-6vw, -12vh, 0) scale(1.15); }
}

/* Diagonal projector sweep — rare, slow, almost subliminal */
.atmo-sweep {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38vw;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(242, 161, 30, 0.035) 42%,
    rgba(245, 242, 236, 0.05) 50%,
    rgba(242, 161, 30, 0.035) 58%,
    transparent 100%);
  transform: translateX(-60vw) skewX(-12deg);
  animation: atmoSweep 21s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}
@keyframes atmoSweep {
  0%, 78%  { transform: translateX(-60vw) skewX(-12deg); opacity: 0; }
  80%      { opacity: 1; }
  96%, 100% { transform: translateX(160vw) skewX(-12deg); opacity: 0; }
}

@media (max-width: 1024px) {
  .atmosphere { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere { display: none; }
}

/* ════════════════════════════════════════════
   V2 — SERVICE CARD MATERIAL (tilt + sheen)
   ════════════════════════════════════════════ */

.svc-card {
  will-change: transform;
  transform-style: preserve-3d;
}
.svc-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    480px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(242, 161, 30, 0.085) 0%,
    rgba(242, 161, 30, 0.025) 35%,
    transparent 62%);
  opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 0;
}
.svc-card:hover .svc-sheen { opacity: 1; }
.svc-card > *:not(.svc-sheen) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .svc-sheen { display: none; }
  .svc-card { will-change: auto; }
}

/* ════════════════════════════════════════════
   V2 — CINEMATIC REVEALS
   Blur settle + section-head choreography
   ════════════════════════════════════════════ */

/* Rack-focus settle — desktop only, motion-safe only */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .reveal {
    filter: blur(9px);
    transition:
      opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      filter 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .reveal.in { filter: blur(0); }
}

/* Section heads enter as a staged sequence: kicker → title → lead */
@media (prefers-reduced-motion: no-preference) {
  .section-head.reveal { transform: translateY(10px) scale(1); }
  .section-head.reveal > .eyebrow,
  .section-head.reveal > .display,
  .section-head.reveal > .lead {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.95s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .section-head.reveal.in > .eyebrow {
    opacity: 1; transform: none; transition-delay: 0.05s;
  }
  .section-head.reveal.in > .display {
    opacity: 1; transform: none; transition-delay: 0.18s;
  }
  .section-head.reveal.in > .lead {
    opacity: 1; transform: none; transition-delay: 0.34s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none !important; }
  .section-head.reveal > .eyebrow,
  .section-head.reveal > .display,
  .section-head.reveal > .lead {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════
   V2 — CTA FINAL SCENE
   Letterbox, slate metadata, breathing flare
   ════════════════════════════════════════════ */

.cta { padding: 200px 40px 210px; }

.cta-bar {
  position: absolute;
  left: 0; right: 0;
  height: 56px;
  background: #050505;
  z-index: 2;
  pointer-events: none;
}
.cta-bar-top { top: 0; box-shadow: 0 1px 0 rgba(242, 161, 30, 0.14); }
.cta-bar-bottom { bottom: 0; box-shadow: 0 -1px 0 rgba(242, 161, 30, 0.14); }

.cta-slate {
  position: absolute;
  top: 74px;
  left: 44px; right: 44px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 2;
  pointer-events: none;
}
.cta-slate-l {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
}
.cta-slate-l .rec {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E5484D;
  animation: ogRec 1.4s ease-in-out infinite;
}

/* Slow breathing key light behind the closing line */
.cta-flare {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 80vw);
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(242, 161, 30, 0.10) 0%,
    rgba(242, 161, 30, 0.04) 45%,
    transparent 72%);
  filter: blur(28px);
  pointer-events: none;
  animation: ctaFlare 7s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes ctaFlare {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
}

.cta > .reveal { position: relative; z-index: 3; }

@media (max-width: 720px) {
  .cta { padding: 150px 24px 160px; }
  .cta-bar { height: 38px; }
  .cta-slate { top: 52px; left: 20px; right: 20px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-flare { animation: none; opacity: 0.7; }
  .cta-slate-l .rec { animation: none; }
}

/* ════════════════════════════════════════════
   V2.1 — HERO: CINEMATIC OPTICS
   Anamorphic flare, lens rings, light rays,
   vignette, recomposed title hierarchy
   ════════════════════════════════════════════ */

.hero-cine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}

/* Anamorphic lens flare — the horizontal gold streak behind the title */
.hero-flare {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 140vw;
  height: 200px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(242, 161, 30, 0.05) 18%,
      rgba(242, 161, 30, 0.16) 42%,
      rgba(255, 233, 184, 0.30) 50%,
      rgba(242, 161, 30, 0.16) 58%,
      rgba(242, 161, 30, 0.05) 82%,
      transparent 100%);
  -webkit-mask: radial-gradient(ellipse 50% 38% at center, #000 30%, transparent 72%);
  mask: radial-gradient(ellipse 50% 38% at center, #000 30%, transparent 72%);
  mix-blend-mode: screen;
  animation: heroFlareBreath 8s ease-in-out infinite;
}
.hero-flare::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76vw;
  height: 1.5px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(242, 161, 30, 0.55) 30%,
    rgba(255, 240, 205, 0.95) 50%,
    rgba(242, 161, 30, 0.55) 70%,
    transparent 100%);
  box-shadow:
    0 0 18px rgba(242, 161, 30, 0.55),
    0 0 60px rgba(242, 161, 30, 0.30);
  filter: blur(0.4px);
}
@keyframes heroFlareBreath {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scaleX(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scaleX(1.06); }
}

/* Lens rings — slow-rotating optical geometry, off-center for asymmetry */
.hero-rings {
  position: absolute;
  right: -16vmin;
  top: 50%;
  width: 110vmin;
  height: 110vmin;
  margin-top: -55vmin;
}
.hero-rings i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(242, 161, 30, 0.16);
}
.hero-rings i:nth-child(1) {
  inset: 0;
  border-style: dashed;
  border-color: rgba(242, 161, 30, 0.13);
  animation: heroRingSpin 90s linear infinite;
}
.hero-rings i:nth-child(2) {
  inset: 11%;
  border-color: rgba(242, 161, 30, 0.20);
  animation: heroRingSpin 70s linear infinite reverse;
}
.hero-rings i:nth-child(2)::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(242, 161, 30, 0.9);
}
.hero-rings i:nth-child(3) {
  inset: 24%;
  border-style: dashed;
  border-color: rgba(245, 242, 236, 0.07);
  animation: heroRingSpin 120s linear infinite;
}
@keyframes heroRingSpin {
  to { transform: rotate(360deg); }
}

/* Projector rays — light shaft falling from the top */
.hero-rays {
  position: absolute;
  top: -12%;
  left: 50%;
  width: 90vw;
  height: 78%;
  transform: translateX(-50%);
  background:
    conic-gradient(from 178deg at 50% 0%,
      transparent 0deg,
      rgba(242, 161, 30, 0.07) 4deg,
      transparent 9deg,
      rgba(245, 242, 236, 0.045) 13deg,
      transparent 18deg,
      rgba(242, 161, 30, 0.05) 23deg,
      transparent 28deg);
  filter: blur(14px);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: heroRaysShift 13s ease-in-out infinite;
}
@keyframes heroRaysShift {
  0%, 100% { opacity: 0.65; transform: translateX(-50%) skewX(0deg); }
  50%      { opacity: 1;    transform: translateX(-51.5%) skewX(-1.2deg); }
}

/* Cinema vignette — pulls the eye to center frame */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 72% 58% at 50% 46%, transparent 48%, rgba(5, 5, 5, 0.52) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.42) 0%, transparent 18%, transparent 82%, rgba(5, 5, 5, 0.42) 100%);
}

/* Title — bigger, sharper, more cinematic separation */
.hero h1 {
  font-size: clamp(46px, 7.6vw, 122px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 30px 0 12px;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.65),
    0 14px 60px rgba(0, 0, 0, 0.5);
}
.hero h1 .em {
  font-style: italic;
  background: linear-gradient(95deg,
    var(--gold-light) 0%,
    var(--gold) 38%,
    #FFEDC2 52%,
    var(--gold) 66%,
    var(--gold-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 26px rgba(242, 161, 30, 0.38));
  animation: heroEmShimmer 6s ease-in-out infinite;
}
@keyframes heroEmShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero .sub {
  color: var(--ink);
  opacity: 0.88;
  font-size: clamp(26px, 3.6vw, 52px);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1024px) {
  .hero-rings { right: -42vmin; opacity: 0.6; }
  .hero-rays { display: none; }
}
@media (max-width: 720px) {
  .hero-rings { display: none; }
  .hero-flare { height: 130px; }
  .hero-vignette {
    background: radial-gradient(ellipse 95% 60% at 50% 46%, transparent 42%, rgba(5, 5, 5, 0.5) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-flare, .hero-rays, .hero-rings i, .hero h1 .em {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════
   V2.1 — SCENE SYSTEM
   Dividers + per-scene depth grading
   ════════════════════════════════════════════ */

.scene-div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 84px 6vw;
  pointer-events: none;
}
.scene-div-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(880px, 86vw);
  height: 160px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at center,
    rgba(242, 161, 30, 0.085) 0%,
    rgba(242, 161, 30, 0.025) 50%,
    transparent 75%);
  filter: blur(18px);
}
.scene-div-line {
  position: relative;
  height: 1px;
  flex: 1;
  max-width: 420px;
  background: linear-gradient(90deg, transparent, rgba(242, 161, 30, 0.55));
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.scene-div-line.l { transform-origin: 100% 50%; }
.scene-div-line.r {
  transform-origin: 0% 50%;
  background: linear-gradient(90deg, rgba(242, 161, 30, 0.55), transparent);
}
.scene-div.in .scene-div-line { transform: scaleX(1); }
.scene-div-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.scene-div-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.38em;
  color: var(--gold);
  border: 1px solid rgba(242, 161, 30, 0.35);
  border-radius: 999px;
  padding: 7px 16px 6px 18px;
  background: rgba(10, 9, 6, 0.6);
  box-shadow: 0 0 24px rgba(242, 161, 30, 0.12);
}
.scene-div-title {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: rgba(245, 242, 236, 0.55);
}
/* The divider itself fades in but never translates (lines do the motion) */
.scene-div.reveal { transform: none; }

@media (max-width: 720px) {
  .scene-div { padding: 56px 8vw; gap: 16px; }
  .scene-div-title { font-size: 16px; }
}

/* ─── Per-scene depth grading — each section is its own set ─── */
.section, .bento-stats, .pillars-section { isolation: isolate; }

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Paquetes — golden hour studio */
#services::before {
  background:
    radial-gradient(1000px 640px ellipse at 88% 6%, rgba(242, 161, 30, 0.10), transparent 62%),
    radial-gradient(1300px 900px ellipse at 4% 92%, rgba(212, 175, 55, 0.07), transparent 64%),
    linear-gradient(180deg, rgba(4, 4, 4, 0.72) 0%, transparent 14%, transparent 86%, rgba(4, 4, 4, 0.72) 100%);
}

/* Portafolio — screening room, deep and dark */
#portfolio::before {
  background:
    radial-gradient(1100px 700px ellipse at 50% 0%, rgba(242, 161, 30, 0.06), transparent 58%),
    linear-gradient(180deg, rgba(3, 3, 3, 0.85) 0%, rgba(6, 6, 6, 0.45) 22%, rgba(6, 6, 6, 0.45) 78%, rgba(3, 3, 3, 0.85) 100%);
}

/* Founder — single warm portrait key light */
#founder::before {
  background:
    radial-gradient(820px 760px ellipse at 26% 38%, rgba(242, 161, 30, 0.09), transparent 60%),
    radial-gradient(600px 500px ellipse at 82% 80%, rgba(212, 175, 55, 0.05), transparent 65%),
    linear-gradient(180deg, rgba(4, 4, 4, 0.6) 0%, transparent 16%, transparent 88%, rgba(4, 4, 4, 0.7) 100%);
}

/* Método — projection beam from above */
#method::before {
  background:
    radial-gradient(900px 560px ellipse at 50% 4%, rgba(242, 161, 30, 0.075), transparent 60%),
    linear-gradient(180deg, rgba(4, 4, 4, 0.66) 0%, transparent 18%, transparent 84%, rgba(4, 4, 4, 0.66) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .scene-div-line { transform: scaleX(1) !important; transition: none !important; }
}

/* ════════════════════════════════════════════
   V2.1 — PACKAGE CARDS: PREMIUM MATERIAL
   Glass surface, gradient edge, lift hover
   ════════════════════════════════════════════ */

.services-grid { gap: 18px; background: transparent; border: none; }

.svc-card {
  border-radius: 22px;
  background:
    linear-gradient(168deg,
      rgba(30, 24, 12, 0.85) 0%,
      rgba(14, 12, 8, 0.92) 40%,
      rgba(8, 8, 8, 0.96) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -18px 40px -28px rgba(242, 161, 30, 0.25) inset,
    0 30px 60px -30px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  translate: 0 0;
  transition:
    translate 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s;
}
.svc-card:hover {
  background:
    linear-gradient(168deg,
      rgba(38, 30, 14, 0.92) 0%,
      rgba(18, 15, 9, 0.95) 40%,
      rgba(10, 10, 10, 0.97) 100%);
  translate: 0 -10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -18px 40px -24px rgba(242, 161, 30, 0.4) inset,
    0 50px 90px -34px rgba(0, 0, 0, 0.9),
    0 24px 70px -24px rgba(242, 161, 30, 0.28);
}

/* Gradient hairline edge (replaces the flat border) */
.svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg,
    rgba(242, 161, 30, 0.55) 0%,
    rgba(255, 255, 255, 0.10) 28%,
    rgba(242, 161, 30, 0.06) 55%,
    rgba(242, 161, 30, 0.40) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.65;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 4;
}
.svc-card:hover::before { opacity: 1; border-color: transparent; }

/* Diagonal light sweep across the card on hover */
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255, 240, 205, 0.10) 50%,
    transparent 62%);
  transform: translateX(-110%);
  transition: transform 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.svc-card:hover::after { transform: translateX(110%); }

/* Pricing — the number is the protagonist */
.svc-price {
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(34px, 3vw, 44px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.svc-price .ccy {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.svc-card:hover .svc-price {
  background: linear-gradient(95deg, var(--gold-light), #FFEDC2 55%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Popular tier — gold-lit hero card */
.svc-card.is-popular {
  background:
    radial-gradient(560px 300px ellipse at 50% -10%, rgba(242, 161, 30, 0.16), transparent 65%),
    linear-gradient(168deg,
      rgba(36, 28, 12, 0.92) 0%,
      rgba(16, 13, 8, 0.95) 45%,
      rgba(9, 9, 9, 0.97) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 -18px 44px -24px rgba(242, 161, 30, 0.42) inset,
    0 36px 70px -30px rgba(0, 0, 0, 0.9),
    0 0 60px -18px rgba(242, 161, 30, 0.25);
}
.svc-card.is-popular::before {
  opacity: 1;
  background: linear-gradient(165deg,
    var(--gold) 0%,
    rgba(242, 161, 30, 0.25) 30%,
    rgba(242, 161, 30, 0.12) 55%,
    var(--gold-light) 100%);
}

@media (pointer: coarse) {
  .svc-card, .svc-card:hover { translate: 0 0; }
  .svc-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card::after { transition: none !important; }
}

/* ════════════════════════════════════════════
   V2.1 — MOTION DIRECTION
   Mask reveals for headings, staged grids
   ════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  /* Display headings rise out of a mask — film-title energy */
  .section-head.reveal > .display {
    clip-path: inset(-12% 0 104% 0);
    transform: translateY(54px);
    transition:
      clip-path 1.15s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.5s ease-out;
  }
  .section-head.reveal.in > .display {
    clip-path: inset(-12% 0 -12% 0);
    transform: none;
    transition-delay: 0.14s;
  }

  /* Line-head rails wipe in from the left */
  .line-head.reveal {
    clip-path: inset(0 102% 0 0);
    transform: none;
    transition:
      clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.6s ease-out;
  }
  .line-head.reveal.in { clip-path: inset(0 -2% 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .section-head.reveal > .display,
  .line-head.reveal {
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════
   V2.1 — CTA: TRAILER ENDING
   Full-frame final scene with gold horizon
   ════════════════════════════════════════════ */

.cta {
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 160px 40px;
}
.cta h2 {
  font-size: clamp(46px, 8.4vw, 138px);
  line-height: 0.96;
  letter-spacing: -0.028em;
  max-width: 1200px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.cta h2 .em {
  background: linear-gradient(95deg,
    var(--gold-light) 0%,
    var(--gold) 40%,
    #FFEDC2 54%,
    var(--gold) 68%,
    var(--gold-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(242, 161, 30, 0.35));
  animation: heroEmShimmer 6s ease-in-out infinite;
}
.cta .sub {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(19px, 2vw, 26px);
  color: var(--ink-2);
  margin: 6px 0 54px;
}

/* Gold horizon — light rising from below the final frame */
.cta-horizon {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 130vw;
  height: 46%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 46% 72% at 50% 100%,
      rgba(242, 161, 30, 0.20) 0%,
      rgba(242, 161, 30, 0.08) 42%,
      transparent 70%);
  filter: blur(22px);
  pointer-events: none;
  animation: ctaHorizon 9s ease-in-out infinite;
}
.cta-horizon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: 60vw;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
    transparent, rgba(242, 161, 30, 0.7) 35%,
    rgba(255, 240, 205, 0.95) 50%,
    rgba(242, 161, 30, 0.7) 65%, transparent);
  box-shadow: 0 0 24px rgba(242, 161, 30, 0.6), 0 0 80px rgba(242, 161, 30, 0.3);
}
@keyframes ctaHorizon {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* Final-frame vignette */
.cta-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 58% at 50% 48%, transparent 46%, rgba(4, 4, 4, 0.6) 100%);
}

/* Buttons sit above everything; make the gold one the destination */
.cta-ctas .btn-gold {
  box-shadow:
    0 0 0 1px rgba(255, 240, 205, 0.25) inset,
    0 18px 50px -12px rgba(242, 161, 30, 0.55);
}
.cta-ctas .btn-gold:hover {
  box-shadow:
    0 0 0 1px rgba(255, 240, 205, 0.4) inset,
    0 22px 70px -10px rgba(242, 161, 30, 0.75);
}

@media (max-width: 720px) {
  .cta { min-height: 88vh; padding: 130px 24px; }
  .cta-horizon { height: 36%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-horizon, .cta h2 .em { animation: none !important; }
}

/* Fix — background-clip:text fails inside the animated hw-clip system
   (Chromium compositing). Hero em uses solid gold + glow instead. */
.hero h1 .em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gold-light);
  animation: heroEmGlow 6s ease-in-out infinite;
  filter: none;
  text-shadow:
    0 0 22px rgba(242, 161, 30, 0.50),
    0 0 70px rgba(242, 161, 30, 0.28);
}
@keyframes heroEmGlow {
  0%, 100% {
    text-shadow:
      0 0 22px rgba(242, 161, 30, 0.50),
      0 0 70px rgba(242, 161, 30, 0.28);
  }
  50% {
    text-shadow:
      0 0 30px rgba(242, 161, 30, 0.75),
      0 0 90px rgba(242, 161, 30, 0.40);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .em { animation: none !important; }
}

/* Fix 2 — the glow animation was REPLACING hwRise (the word never rose
   out of its clip mask). Run both: rise once, then glow forever. */
.hero h1 .em { animation: none; }
.app-ready .hero h1 .em {
  animation:
    hwRise 0.95s cubic-bezier(0.2, 0.75, 0.2, 1) forwards,
    heroEmGlow 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .app-ready .hero h1 .em { animation: none !important; }
}

/* ============================================================
   V2.2 — UNIFIED SCROLL NARRATIVE
   One continuous story: gold progress thread, fixed scene HUD,
   global per-scene color grading, narrative phrases on dividers.
   ============================================================ */

/* --- Gold fill inside the right-side scroll thread --- */
.thread-line { position: relative; overflow: hidden; }
.thread-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: block;
  background: linear-gradient(180deg, var(--gold-light, #E9C46A), var(--gold, #F0A500));
  box-shadow: 0 0 8px rgba(240, 165, 0, 0.55);
  border-radius: inherit;
  pointer-events: none;
}

/* --- Global scene tint: a fixed grading layer driven by html[data-scene] --- */
.scene-tint {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 110%, var(--scene-glow, rgba(240, 165, 0, 0.05)) 0%, transparent 60%),
    linear-gradient(180deg, var(--scene-wash, rgba(0, 0, 0, 0)) 0%, transparent 45%);
  opacity: 0.9;
  transition: --scene-glow 1.4s ease, --scene-wash 1.4s ease, opacity 1.4s ease;
}
@supports not (transition: --scene-glow 1s) {
  .scene-tint { transition: opacity 1.4s ease, filter 1.4s ease; }
}

html[data-scene="01"] .scene-tint { --scene-glow: rgba(240, 165, 0, 0.07); --scene-wash: rgba(35, 22, 4, 0.16); }
html[data-scene="02"] .scene-tint { --scene-glow: rgba(220, 225, 235, 0.045); --scene-wash: rgba(10, 12, 18, 0.20); }
html[data-scene="03"] .scene-tint { --scene-glow: rgba(212, 175, 55, 0.075); --scene-wash: rgba(26, 17, 3, 0.22); }
html[data-scene="04"] .scene-tint { --scene-glow: rgba(240, 165, 0, 0.06); --scene-wash: rgba(14, 11, 4, 0.18); }
html[data-scene="05"] .scene-tint { --scene-glow: rgba(180, 190, 215, 0.05); --scene-wash: rgba(6, 8, 14, 0.26); }
html[data-scene="06"] .scene-tint { --scene-glow: rgba(233, 196, 106, 0.07); --scene-wash: rgba(28, 19, 5, 0.20); }
html[data-scene="07"] .scene-tint { --scene-glow: rgba(240, 165, 0, 0.12); --scene-wash: rgba(30, 19, 2, 0.28); }

/* Fallback: browsers without registered-property transitions still get
   smooth crossfade because each tint state shares the same geometry. */

/* --- Scene HUD: fixed cinematic slate, bottom-left --- */
.scene-hud {
  position: fixed;
  left: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.6vw, 30px);
  z-index: 60;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(245, 242, 236, 0.62);
  text-transform: uppercase;
}
.scene-hud-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 100px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(240, 165, 0, 0.16);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.scene-hud-rec {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold, #F0A500);
  box-shadow: 0 0 8px rgba(240, 165, 0, 0.8);
  animation: sceneHudRec 2.2s ease-in-out infinite;
}
@keyframes sceneHudRec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.scene-hud-num { color: rgba(240, 165, 0, 0.85); font-weight: 500; }
.scene-hud-sep { color: rgba(245, 242, 236, 0.3); }
.scene-hud-title {
  color: rgba(245, 242, 236, 0.85);
  animation: sceneHudTitleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sceneHudTitleIn {
  from { opacity: 0; transform: translateY(7px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.scene-hud-bar {
  height: 2px;
  margin: 0 13px;
  border-radius: 2px;
  background: rgba(245, 242, 236, 0.12);
  overflow: hidden;
}
.scene-hud-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep, #D4AF37), var(--gold, #F0A500));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* --- Narrative phrase under each scene divider --- */
.scene-div { flex-wrap: wrap; }
.scene-div-phrase {
  flex-basis: 100%;
  text-align: center;
  margin-top: 14px;
  font-family: var(--display-font, 'Instrument Serif', serif);
  font-style: italic;
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: 0.01em;
  color: rgba(245, 242, 236, 0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease 0.45s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}
.scene-div.in .scene-div-phrase {
  opacity: 1;
  transform: translateY(0);
}

/* --- Mobile: keep the story light --- */
@media (max-width: 720px) {
  .scene-hud-row { padding: 6px 11px; font-size: 9.5px; gap: 7px; }
  .scene-hud-title { display: none; }
  .scene-hud-sep { display: none; }
  .scene-div-phrase { font-size: 15.5px; margin-top: 10px; }
}

/* --- Reduced motion: static, no pulses or crossfades --- */
@media (prefers-reduced-motion: reduce) {
  .scene-hud-rec { animation: none; }
  .scene-hud-title { animation: none; }
  .scene-tint { transition: none; }
  .scene-div-phrase { opacity: 1; transform: none; transition: none; }
}

@property --scene-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(240, 165, 0, 0.05);
}
@property --scene-wash {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(0, 0, 0, 0);
}

/* ============================================================
   V3 — ART DIRECTION
   No new features. Stronger composition, scale, hierarchy,
   per-scene identity, premium card material, luxury light.
   ============================================================ */

/* ----------------------------------------------------------
   3.1 HERO — dominant headline, 5:1 scale hierarchy, focal light
   ---------------------------------------------------------- */

.hero-content > * { max-width: 1280px; }

/* Spotlight behind the title block — the eye lands on the words */
.hero-content::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(1180px, 94vw);
  height: 62vh;
  transform: translate(-50%, -54%);
  background: radial-gradient(ellipse 58% 52% at 50% 50%,
    rgba(8, 7, 5, 0.78) 0%,
    rgba(8, 7, 5, 0.42) 45%,
    transparent 72%);
  z-index: -1;
  pointer-events: none;
}

/* Eyebrow — quieter, wider, framed by twin rules */
.hero-content .eyebrow {
  font-size: 10px;
  letter-spacing: 0.46em;
  color: rgba(240, 165, 0, 0.78);
  gap: 18px;
}
.hero-content .eyebrow::before { width: 44px; opacity: 0.5; }
.hero-content .eyebrow::after {
  content: "";
  width: 44px; height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

/* Headline — the protagonist. Massive scale, tight set */
.hero h1 {
  font-size: clamp(56px, 9.4vw, 154px);
  line-height: 0.9;
  letter-spacing: -0.034em;
  margin: 34px 0 0;
  text-shadow:
    0 2px 22px rgba(0, 0, 0, 0.72),
    0 18px 80px rgba(0, 0, 0, 0.55);
}

/* Sub — steps down hard (≈5:1 against H1). A whisper after the shout */
.hero .sub {
  font-size: clamp(19px, 2.1vw, 28px);
  color: var(--ink-2);
  opacity: 1;
  margin: 0 0 52px;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.hero .sub::before {
  content: "";
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  opacity: 0.85;
  margin-top: 26px;
}

/* Optics recede so typography wins the frame */
.hero-rings { opacity: 0.55; }
.hero-rays { opacity: 0.65; }

/* Deeper edge vignette — pulls the eye to center */
.hero-vignette {
  background:
    radial-gradient(ellipse 68% 54% at 50% 46%, transparent 42%, rgba(4, 4, 4, 0.62) 100%),
    linear-gradient(90deg, rgba(4, 4, 4, 0.5) 0%, transparent 16%, transparent 84%, rgba(4, 4, 4, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 4, 4, 0.35) 0%, transparent 22%, transparent 72%, rgba(4, 4, 4, 0.55) 100%);
}

/* CTA pair — one clear protagonist, one quiet alternative */
.hero-ctas { gap: 20px; }
.hero-ctas .btn {
  padding: 17px 30px;
  border-radius: 100px;
}
.hero-ctas .btn-gold {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -8px 16px -8px rgba(120, 70, 0, 0.5) inset,
    0 14px 38px -14px rgba(240, 165, 0, 0.65),
    0 4px 14px -6px rgba(0, 0, 0, 0.6);
}
.hero-ctas .btn-gold:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -8px 16px -8px rgba(120, 70, 0, 0.4) inset,
    0 20px 50px -14px rgba(240, 165, 0, 0.8),
    0 4px 14px -6px rgba(0, 0, 0, 0.6);
}
.hero-ctas .btn-ghost {
  border-color: rgba(245, 242, 236, 0.16);
  color: var(--ink-2);
}
.hero-ctas .btn-ghost:hover {
  border-color: rgba(240, 165, 0, 0.6);
  color: var(--ink);
  background: rgba(240, 165, 0, 0.06);
}

@media (max-width: 720px) {
  .hero h1 { font-size: clamp(46px, 13.5vw, 72px); letter-spacing: -0.026em; }
  .hero .sub { font-size: 18px; margin-bottom: 40px; }
  .hero .sub::before { height: 32px; margin-top: 18px; }
  .hero-content .eyebrow {
    letter-spacing: 0.3em;
    font-size: 9px;
    gap: 10px;
    justify-content: center;
    max-width: 88vw;
    text-align: center;
  }
  .hero-content .eyebrow::before,
  .hero-content .eyebrow::after { display: none; }
}

/* ----------------------------------------------------------
   3.2 SECTIONS — editorial spacing rhythm + per-scene identity
   ---------------------------------------------------------- */

:root {
  --section-pad: clamp(150px, 15vw, 230px);
  --head-mb: clamp(84px, 8vw, 124px);
}

.section { background: rgba(8, 8, 8, 0.6); }
.section.dark2 { background: rgba(11, 11, 11, 0.78); }

/* Section headlines scale up to scene-title weight */
.section-head h2 {
  font-size: clamp(44px, 6.4vw, 100px);
  letter-spacing: -0.028em;
  line-height: 0.95;
  margin: 22px 0 28px;
}
.section-head .lead {
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.65;
  max-width: 560px;
  color: rgba(183, 178, 168, 0.95);
}

/* Ghost scene numerals — each scene signs its own frame */
#method::after,
#services::after,
#portfolio::after,
#founder::after {
  position: absolute;
  top: clamp(60px, 7vw, 120px);
  right: 3vw;
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(140px, 22vw, 340px);
  line-height: 0.8;
  color: rgba(240, 165, 0, 0.025);
  -webkit-text-stroke: 1px rgba(240, 165, 0, 0.2);
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
#method::after    { content: "03"; }
#services::after  { content: "04"; }
#portfolio::after { content: "05"; -webkit-text-stroke-color: rgba(200, 205, 220, 0.16); color: rgba(200, 205, 220, 0.02); }
#founder::after   { content: "06"; }

/* Per-scene wash contrast — alternating depth between scenes */
#portfolio { background: rgba(5, 6, 9, 0.72); }
#founder { background: rgba(12, 9, 4, 0.62); }

@media (max-width: 860px) {
  .section { padding: clamp(96px, 16vw, 130px) 22px; }
  #method::after, #services::after, #portfolio::after, #founder::after {
    font-size: clamp(110px, 30vw, 180px);
    top: 36px;
    right: 4vw;
  }
}

/* ----------------------------------------------------------
   3.3 CARDS — more air, sharper hierarchy, protagonist pricing
   ---------------------------------------------------------- */

.svc-card {
  padding: 44px 38px 38px;
  min-height: 380px;
}
.svc-num {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(110, 106, 98, 0.85);
}
.badge {
  border-radius: 100px;
  padding: 5px 11px;
  font-size: 9px;
}
.svc-name {
  font-size: clamp(38px, 2.9vw, 46px);
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}
.svc-name .musa {
  font-size: 17px;
  letter-spacing: 0.2em;
  opacity: 0.85;
  margin-bottom: 8px;
}
.svc-tagline {
  font-size: 14px;
  line-height: 1.62;
  margin: 16px 0 0;
  color: rgba(183, 178, 168, 0.88);
}

/* Hairline separates story from price — the receipt moment */
.svc-foot {
  padding-top: 28px;
  margin-top: 34px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg,
    rgba(240, 165, 0, 0.38) 0%,
    rgba(245, 242, 236, 0.08) 45%,
    transparent 100%) 1;
}
.svc-price {
  font-size: clamp(38px, 3.2vw, 50px);
  gap: 10px;
}
.svc-price .ccy {
  font-size: 10.5px;
  letter-spacing: 0.26em;
}
.svc-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border-color: rgba(245, 242, 236, 0.14);
}
.svc-card:hover .svc-arrow {
  border-color: var(--gold);
  color: #0A0A0A;
  background: var(--gold);
  transform: translate(3px, -3px);
  box-shadow: 0 10px 26px -10px rgba(240, 165, 0, 0.7);
}

/* Cleaner card material — crisper inner light, calmer bloom */
.svc-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -14px 34px -26px rgba(242, 161, 30, 0.18) inset,
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 34px 70px -34px rgba(0, 0, 0, 0.9);
}
.svc-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -14px 34px -22px rgba(242, 161, 30, 0.32) inset,
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 60px 110px -40px rgba(0, 0, 0, 0.95),
    0 28px 80px -30px rgba(242, 161, 30, 0.22);
}

@media (max-width: 720px) {
  .svc-card { padding: 34px 26px 28px; min-height: 0; }
  .svc-name { font-size: 34px; }
  .svc-price { font-size: 36px; }
}

/* ----------------------------------------------------------
   3.4 LUXURY LIGHT SYSTEM — disciplined glow, deeper blacks
   ---------------------------------------------------------- */

/* Scene dividers breathe more — pauses between scenes */
.scene-div { padding: clamp(96px, 11vw, 150px) 6vw; }

/* Buttons everywhere get the refined material */
.btn { border-radius: 100px; }
.btn-gold {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 12px 32px -14px rgba(240, 165, 0, 0.55);
}

/* CTA headline scales to closing-card weight */
#cta h2 {
  letter-spacing: -0.034em;
  line-height: 0.92;
}

/* Calmer atmosphere — luxury is restraint */
.atmo-orb { opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .hero-content::before { transform: translate(-50%, -54%) !important; }
}

/* ============================================================
   V4 — SIGNATURE PORTFOLIO MOMENT
   Pinned cinematic archive — vertical posters in 3D depth,
   driven by vertical scroll as a horizontal camera dolly.
   "The proof: what already became eternal."
   ============================================================ */

/* ----------------------------------------------------------
   4.1 ARCHIVE STAGE — pin track, sticky cinematic hall
   ---------------------------------------------------------- */

.portfolio-archive {
  padding: 0 !important;
  background: transparent !important;
}
.portfolio-archive::after { display: none; }

.port-archive-pin {
  position: relative;
  height: 240vh;
}
.port-archive-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(8, 9, 14, 0.7) 0%, transparent 65%),
    linear-gradient(180deg, rgba(4, 4, 6, 0.92) 0%, rgba(6, 7, 10, 0.96) 50%, rgba(3, 3, 5, 0.98) 100%);
  isolation: isolate;
  perspective: 1800px;
  perspective-origin: 50% 56%;
}

/* Floor + spotlight: a dark exhibition hall */
.port-archive-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.port-archive-floor {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 0;
  height: 38%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(240, 165, 0, 0.025) 60%, rgba(240, 165, 0, 0.05) 100%),
    repeating-linear-gradient(90deg,
      rgba(245, 242, 236, 0.025) 0px,
      rgba(245, 242, 236, 0.025) 1px,
      transparent 1px,
      transparent 80px);
  transform: perspective(900px) rotateX(58deg);
  transform-origin: bottom center;
  opacity: 0.85;
  mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}
.port-archive-spot {
  position: absolute;
  left: 50%; top: 36%;
  width: 90vw;
  height: 80vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 52% 60% at 50% 50%,
    rgba(240, 165, 0, 0.085) 0%,
    rgba(240, 165, 0, 0.035) 28%,
    transparent 65%);
  mix-blend-mode: screen;
  filter: blur(8px);
}
.port-archive-grain {
  position: absolute; inset: 0;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.012) 0, rgba(255, 255, 255, 0) 1px),
    repeating-radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.014) 0, rgba(255, 255, 255, 0) 1px);
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* Top overlay HUD — scene tag + piece counter */
.port-archive-overlay {
  position: absolute;
  top: clamp(18px, 3vw, 36px);
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: rgba(245, 242, 236, 0.62);
  text-transform: uppercase;
}
.port-archive-kicker { color: rgba(240, 165, 0, 0.85); }
.port-archive-counter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 100px;
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 165, 0, 0.2);
  font-variant-numeric: tabular-nums;
}
.port-archive-counter .rec {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(240, 165, 0, 0.8);
  animation: portRec 2s ease-in-out infinite;
}
@keyframes portRec { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.port-archive-counter .sep { color: rgba(245, 242, 236, 0.25); }

/* The editorial mega title — entry beat of the archive */
.port-archive-mega {
  position: absolute;
  top: clamp(82px, 11vw, 152px);
  left: clamp(28px, 4vw, 56px);
  z-index: 2;
  margin: 0;
  font-family: var(--display-font);
  font-style: italic;
  line-height: 0.86;
  letter-spacing: -0.038em;
  color: var(--ink);
  pointer-events: none;
  transform: translate3d(calc(var(--p, 0) * -22vw), 0, 0);
  will-change: transform;
  user-select: none;
}
.port-archive-mega-pre {
  display: block;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.42);
  margin-bottom: 14px;
}
.port-archive-mega-word {
  display: block;
  font-size: clamp(120px, 19vw, 280px);
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(245, 242, 236, 0.92) 35%,
    rgba(233, 196, 106, 0.7) 75%,
    rgba(212, 175, 55, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
}

/* ----------------------------------------------------------
   4.2 RAIL — horizontal dolly of cinematic posters
   ---------------------------------------------------------- */

.port-archive-rail-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 3;
  padding: clamp(60px, 8vw, 110px) 0 clamp(80px, 9vw, 130px);
  pointer-events: none;
}
.port-archive-rail {
  display: flex;
  align-items: center;
  gap: clamp(48px, 5vw, 90px);
  padding: 0 max(8vw, 120px) 0 max(38vw, 380px);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: auto;
}
.port-archive-rail-wrap > .port-archive-rail {
  transform:
    translate3d(calc(var(--p, 0) * -68%), 0, 0)
    rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
}

/* ----------------------------------------------------------
   4.3 POSTER — premium archive artifact
   ---------------------------------------------------------- */

.port-piece {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 26vw, 380px);
  aspect-ratio: 3 / 4.4;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.port-piece.is-feature {
  z-index: 2;
}

.port-piece-frame {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 1.8vw, 28px);
  background:
    linear-gradient(168deg,
      rgba(20, 18, 14, 0.92) 0%,
      rgba(10, 9, 8, 0.96) 45%,
      rgba(5, 5, 6, 0.98) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -16px 38px -24px rgba(242, 161, 30, 0.22) inset,
    0 60px 110px -40px rgba(0, 0, 0, 0.9),
    0 18px 50px -22px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.6s, transform 0.6s;
}

/* Gradient rim — hairline gold-silver edge */
.port-piece-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(242, 161, 30, 0.55) 0%,
    rgba(200, 210, 230, 0.16) 30%,
    rgba(242, 161, 30, 0.04) 55%,
    rgba(200, 210, 230, 0.16) 78%,
    rgba(242, 161, 30, 0.42) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

/* Filled visual area — top 60% of poster */
.port-piece-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62%;
  background:
    radial-gradient(120% 90% at 50% 0%, hsla(var(--hue, 36deg), 18%, 14%, 0.92) 0%, transparent 70%),
    linear-gradient(180deg, hsla(var(--hue, 36deg), 22%, 11%, 1) 0%, hsla(var(--hue, 36deg), 14%, 6%, 1) 100%);
  z-index: 0;
}
.port-piece-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(245, 242, 236, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(245, 242, 236, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  mask: radial-gradient(80% 60% at 50% 35%, #000 0%, transparent 80%);
  -webkit-mask: radial-gradient(80% 60% at 50% 35%, #000 0%, transparent 80%);
  opacity: 0.7;
}
.port-piece-grain {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.045) 0px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.04) 0px, transparent 1px),
    radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.035) 0px, transparent 1px);
  background-size: 4px 4px, 5px 5px, 6px 6px;
  opacity: 0.6;
  mix-blend-mode: overlay;
}
.port-piece-rim {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 165, 0, 0.65), transparent);
}

/* Top metadata — number + format codec */
.port-piece-meta-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.26em;
  color: rgba(245, 242, 236, 0.62);
  text-transform: uppercase;
}
.port-piece-num { color: rgba(240, 165, 0, 0.85); }
.port-piece-format { color: rgba(180, 195, 215, 0.55); }

/* Body — the editorial typography moment */
.port-piece-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 60%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.port-piece-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 236, 0.42);
  text-transform: uppercase;
}
.port-piece-name {
  font-family: var(--display-font);
  font-size: clamp(34px, 3vw, 46px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.port-piece-name .em {
  font-style: italic;
  background: linear-gradient(95deg, var(--gold-light), #FFEDC2 55%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.port-piece-frame-name {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 15px;
  color: rgba(245, 242, 236, 0.5);
  letter-spacing: 0.01em;
}

/* Bottom metadata — location + glyph */
.port-piece-meta-bot {
  position: relative;
  z-index: 2;
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: 16px;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}
.port-piece-arrow {
  display: inline-flex;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(240, 165, 0, 0.4);
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 11px;
  transition: all 0.4s;
}

/* Ground shadow under each piece — depth ambient */
.port-piece-shadow {
  position: absolute;
  left: 4%; right: 4%;
  bottom: -28px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 0%, rgba(0, 0, 0, 0.78) 0%, transparent 70%);
  filter: blur(14px);
  z-index: -1;
  opacity: 0.85;
  transition: opacity 0.5s;
}

/* Hover — bring forward, sharpen rim, lift shadow */
@media (hover: hover) and (pointer: fine) {
  .port-piece:hover {
    transform: translate3d(0, -16px, 90px) rotateY(0deg) scale(1.02) !important;
    z-index: 6;
  }
  .port-piece:hover .port-piece-frame {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.14) inset,
      0 -16px 38px -20px rgba(242, 161, 30, 0.38) inset,
      0 80px 130px -36px rgba(0, 0, 0, 0.95),
      0 30px 90px -26px rgba(242, 161, 30, 0.32);
  }
  .port-piece:hover .port-piece-arrow {
    background: var(--gold);
    color: #0A0A0A;
    box-shadow: 0 6px 18px -6px rgba(240, 165, 0, 0.7);
  }
  .port-piece:hover .port-piece-shadow { opacity: 1; }
}

/* Feature card (middle) — silver-cold sheen accent */
.port-piece.is-feature .port-piece-fill {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(170, 190, 220, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, hsla(220, 14%, 10%, 1) 0%, hsla(225, 14%, 5%, 1) 100%);
}
.port-piece.is-feature .port-piece-frame::before {
  background: linear-gradient(160deg,
    rgba(242, 161, 30, 0.7) 0%,
    rgba(220, 230, 245, 0.25) 35%,
    rgba(242, 161, 30, 0.08) 55%,
    rgba(220, 230, 245, 0.22) 78%,
    rgba(242, 161, 30, 0.55) 100%);
}

/* ----------------------------------------------------------
   4.4 PROGRESS HUD (bottom)
   ---------------------------------------------------------- */

.port-archive-progress {
  position: absolute;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(24px, 3vw, 40px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: rgba(245, 242, 236, 0.52);
  text-transform: uppercase;
}
.port-archive-progress-label { color: var(--gold); }
.port-archive-progress-track {
  flex: 1;
  height: 1px;
  background: rgba(245, 242, 236, 0.10);
  overflow: hidden;
  position: relative;
}
.port-archive-progress-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform-origin: left center;
  will-change: transform;
}
.port-archive-progress-pct {
  color: rgba(245, 242, 236, 0.75);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------
   4.5 FOOTER INDEX — quieter list below the cinematic moment
   ---------------------------------------------------------- */

.port-archive-foot {
  padding: clamp(110px, 13vw, 170px) 40px clamp(140px, 16vw, 200px);
  position: relative;
  background:
    linear-gradient(180deg, rgba(4, 4, 6, 0.95) 0%, rgba(8, 8, 10, 0.92) 100%);
}
.port-archive-foot-title {
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.024em;
  margin: 16px 0 22px;
}

/* ----------------------------------------------------------
   4.6 MOBILE — swap pin for touch swipe, premium kept
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .port-archive-pin { height: auto; }
  .port-archive-stage {
    position: relative;
    height: auto;
    padding: 90px 0 110px;
    perspective: none;
  }
  .port-archive-floor { display: none; }
  .port-archive-mega {
    position: relative;
    top: auto; left: auto;
    padding: 0 24px;
    transform: none !important;
    margin-bottom: 36px;
  }
  .port-archive-mega-word { font-size: clamp(72px, 22vw, 110px); }
  .port-archive-overlay {
    position: relative;
    top: auto; left: auto; right: auto;
    padding: 0 24px;
    margin-bottom: 24px;
  }
  .port-archive-rail-wrap {
    position: relative;
    inset: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 40px;
    scrollbar-width: none;
  }
  .port-archive-rail-wrap::-webkit-scrollbar { display: none; }
  .port-archive-rail {
    transform: none !important;
    padding: 0 22px;
    gap: 22px;
    will-change: auto;
  }
  .port-piece {
    transform: none !important;
    scroll-snap-align: center;
    width: 76vw;
    max-width: 360px;
  }
  .port-piece.is-feature { transform: none !important; }
  .port-archive-progress {
    position: relative;
    inset: auto;
    padding: 0 24px;
    margin-top: 4px;
  }
  .port-archive-foot { padding: 70px 22px 96px; }
}

/* ----------------------------------------------------------
   4.7 REDUCED MOTION — flatten, no dolly, no tilt
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .port-archive-pin { height: auto; }
  .port-archive-stage {
    position: relative;
    height: auto;
    padding: 80px 24px 100px;
    perspective: none;
  }
  .port-archive-floor, .port-archive-grain, .port-archive-spot { display: none; }
  .port-archive-mega { position: relative; top: auto; left: auto; transform: none !important; }
  .port-archive-overlay { position: relative; top: auto; left: auto; right: auto; padding: 0; margin-bottom: 28px; }
  .port-archive-rail-wrap {
    position: relative;
    inset: auto;
    padding: 8px 0 40px;
    overflow: visible;
  }
  .port-archive-rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    transform: none !important;
    padding: 0;
    transform-style: flat;
    will-change: auto;
  }
  .port-piece, .port-piece.is-feature {
    transform: none !important;
    width: 100%;
    aspect-ratio: 3 / 4;
  }
  .port-archive-progress { display: none; }
  .port-archive-counter .rec { animation: none; }
}

/* ----------------------------------------------------------
   4.8 POSTER VISUAL MARKS — film-slate numeral + light beam
   So each piece reads as a distinct cinematic artifact.
   ---------------------------------------------------------- */

.port-piece-mark {
  position: absolute;
  right: -8px;
  top: 28%;
  z-index: 1;
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(160px, 19vw, 240px);
  line-height: 0.78;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240, 165, 0, 0.18);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.port-piece-take {
  position: absolute;
  left: 28px;
  top: 30%;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: rgba(245, 242, 236, 0.32);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.port-piece-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      transparent 32%,
      rgba(240, 165, 0, 0.06) 48%,
      rgba(255, 240, 200, 0.10) 50%,
      rgba(240, 165, 0, 0.06) 52%,
      transparent 68%);
  mix-blend-mode: screen;
  opacity: 0.85;
}
.port-piece.is-feature .port-piece-mark {
  -webkit-text-stroke-color: rgba(210, 220, 240, 0.22);
}
.port-piece.is-feature .port-piece-beam {
  background:
    linear-gradient(118deg,
      transparent 32%,
      rgba(200, 220, 245, 0.08) 48%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(200, 220, 245, 0.08) 52%,
      transparent 68%);
}

/* ----------------------------------------------------------
   4.9 EDITORIAL MEGA TITLE — entry beat refinement
   Make it dominate the frame on entry, then dolly past.
   ---------------------------------------------------------- */

.port-archive-mega-pre {
  display: flex;
  align-items: center;
  gap: 14px;
}
.port-archive-mega-pre::before {
  content: "";
  width: 38px;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.port-archive-mega-word {
  position: relative;
  display: inline-block;
}
.port-archive-mega-word::after {
  content: "";
  position: absolute;
  left: 4%;
  bottom: 0.04em;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  opacity: 0.55;
}

@media (max-width: 860px) {
  .port-piece-mark { font-size: 140px; right: -4px; }
  .port-piece-take { left: 18px; font-size: 8px; letter-spacing: 0.32em; }
}

/* ============================================================
   V5 — REFINEMENT PASS
   - Remove false underline under hero "dura"
   - 3D depth on hero headline driven by mouse (--hx/--hy)
   - Seamless story flow: kill section seams, continuous wash
   - Cinematic numerals in portfolio index
   - Stronger click affordance everywhere
   ============================================================ */

/* 5.1 Hero — kill the horizontal beam that reads as an underline */
.hero-flare::after { display: none !important; }
.hero-flare {
  height: 320px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(242, 161, 30, 0.04) 22%,
      rgba(242, 161, 30, 0.12) 45%,
      rgba(255, 233, 184, 0.20) 50%,
      rgba(242, 161, 30, 0.12) 55%,
      rgba(242, 161, 30, 0.04) 78%,
      transparent 100%);
  -webkit-mask: radial-gradient(ellipse 48% 60% at center, #000 0%, transparent 75%);
  mask: radial-gradient(ellipse 48% 60% at center, #000 0%, transparent 75%);
  opacity: 0.55;
}

/* 5.2 Hero — 3D depth on the headline driven by mouse parallax */
.hero-content { transform-style: preserve-3d; }
.hero h1 {
  transform-style: preserve-3d;
  transform:
    perspective(1400px)
    rotateX(calc(var(--hy, 0) * -3.2deg))
    rotateY(calc(var(--hx, 0) * 4.4deg))
    translateZ(0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow:
    0 1px 0 rgba(255, 240, 200, 0.06),
    0 2px 14px rgba(0, 0, 0, 0.55),
    0 14px 50px rgba(0, 0, 0, 0.55),
    0 28px 80px rgba(0, 0, 0, 0.42);
  will-change: transform;
}
.hero h1 .em {
  display: inline-block;
  transform: translateZ(34px);
}
.hero .sub {
  transform: translateZ(-18px) translateY(calc(var(--hy, 0) * 4px));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-content .eyebrow {
  transform: translateZ(20px);
}

/* UI/UX scaffolding — register marks at title block corners */
.hero h1::before,
.hero h1::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid rgba(240, 165, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  animation: heroBracketIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards;
}
.hero h1 {
  position: relative;
  padding: 4px 18px;
}
.hero h1::before {
  top: -2px; left: -2px;
  border-right: none; border-bottom: none;
}
.hero h1::after {
  bottom: -2px; right: -2px;
  border-left: none; border-top: none;
}
@keyframes heroBracketIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 0.6; transform: scale(1); }
}

@media (max-width: 720px) {
  .hero h1 { transform: none; padding: 4px 0; }
  .hero h1::before, .hero h1::after { display: none; }
  .hero .sub { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .sub, .hero h1 .em, .hero-content .eyebrow {
    transform: none !important;
    transition: none !important;
  }
  .hero h1::before, .hero h1::after { animation: none; opacity: 0.45; }
}

/* 5.3 Seamless story flow — kill the visible section seams */
.section, .section.dark2, .portfolio-archive, #cta {
  background: transparent !important;
}
.section::before, .section.dark2::before { display: none !important; }
/* A single continuous wash sits below everything; per-scene tint
   layers on top via .scene-tint (already exists). */
.page-bg-base {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(28, 22, 8, 0.5) 0%, transparent 55%),
    radial-gradient(110% 70% at 50% 100%, rgba(12, 14, 22, 0.5) 0%, transparent 60%),
    var(--bg);
}
/* Soft scene-to-scene transition mask — fades the wash between sections */
.section { position: relative; }
.section + .section::before,
.portfolio-archive + .section::before,
.section + .portfolio-archive::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.45) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
  display: block !important;
}

/* 5.4 Portfolio numerals — cinematic editorial restyle */
.port-row {
  position: relative;
  padding: 22px 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
  transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.port-row:hover { padding-left: 14px; }
.port-row .idx {
  font-family: var(--display-font) !important;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  letter-spacing: -0.01em !important;
  color: rgba(240, 165, 0, 0.85) !important;
  min-width: 64px;
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s;
  transform-origin: left center;
}
.port-row:hover .idx {
  transform: scale(1.18) translateX(-4px);
  color: var(--gold-light) !important;
}
.port-row::before {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.port-row:hover::before { width: 100%; }

/* Reveal cascade for index rows */
.portfolio-list.reveal .port-row {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-list.reveal.in .port-row { opacity: 1; transform: translateY(0); }
.portfolio-list.reveal.in .port-row:nth-child(1) { transition-delay: 0.05s; }
.portfolio-list.reveal.in .port-row:nth-child(2) { transition-delay: 0.14s; }
.portfolio-list.reveal.in .port-row:nth-child(3) { transition-delay: 0.23s; }
.portfolio-list.reveal.in .port-row:nth-child(4) { transition-delay: 0.32s; }
.portfolio-list.reveal.in .port-row:nth-child(5) { transition-delay: 0.41s; }

/* 5.5 Package cards — stronger click affordance */
.svc-card { cursor: pointer; }
.svc-card::before { transition: opacity 0.5s, transform 0.5s; }
.svc-card:hover .svc-foot { padding-top: 32px; }
.svc-card .svc-cta-hint {
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s, transform 0.4s, bottom 0.4s;
  pointer-events: none;
  z-index: 6;
}
.svc-card:hover .svc-cta-hint {
  opacity: 1;
  bottom: 14px;
  transform: translateY(0);
}
.svc-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(240, 165, 0, 0.6),
    0 30px 70px -30px rgba(0, 0, 0, 0.85),
    0 24px 70px -24px rgba(242, 161, 30, 0.32);
}

/* ============================================================
   5.6 PILLARS — expanded process layout + scroll motion
   ============================================================ */

.pillar-card {
  padding: 28px 26px 32px !important;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pillar-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.pillar-process {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(240, 165, 0, 0.85);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pillar-process::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.pillar-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.55);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.pillar-step {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--gold);
  line-height: 1;
}
.pillar-sep { color: rgba(245, 242, 236, 0.3); }
.pillar-total { color: rgba(245, 242, 236, 0.4); }

.pillar-steps {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pillar-steps li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(183, 178, 168, 0.85);
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--i, 0) * 0.12s),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--i, 0) * 0.12s);
}
.pillar-wrap.reveal.in .pillar-steps li,
.pillar-wrap .pillar-steps li {
  opacity: 1;
  transform: translateX(0);
}
.pillar-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  flex: 0 0 24px;
}

/* Pillar wrap reveal — staggered scroll motion */
.pillars-grid { perspective: 1400px; }
.pillar-wrap {
  opacity: 0;
  transform: translateY(60px) rotateX(8deg);
  transform-origin: 50% 100%;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar-wrap.in,
.pillar-wrap[style*="in"] {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
/* Fallback — IntersectionObserver adds `in` to .reveal; we observe it */
.pillars-section .pillar-wrap { opacity: 1; transform: none; }
.pillars-section.reveal-pillars .pillar-wrap {
  opacity: 0;
  transform: translateY(60px) rotateX(8deg);
}
.pillars-section.reveal-pillars.in .pillar-wrap {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .pillar-wrap { opacity: 1 !important; transform: none !important; }
  .pillar-steps li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   5.7 PORT PIECE — clickable 3D flip
   ============================================================ */

.port-piece { perspective: 1400px; }
.port-piece-3d {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.port-piece.is-flipped .port-piece-3d {
  transform: rotateY(180deg);
}
.port-piece-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.port-piece-back { transform: rotateY(180deg); }

/* Front — small clickable hint that appears on hover */
.port-piece-flip-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.36em;
  color: rgba(240, 165, 0, 0.7);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(10, 10, 12, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(240, 165, 0, 0.22);
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .port-piece:hover .port-piece-flip-hint {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
  }
}

/* Back face — editorial detail card */
.port-piece-back {
  background:
    radial-gradient(140% 90% at 50% 0%, rgba(38, 30, 14, 0.85) 0%, transparent 70%),
    linear-gradient(168deg, rgba(14, 12, 8, 0.96) 0%, rgba(6, 6, 8, 0.98) 100%);
}
.port-piece-back-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(240, 165, 0, 0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(240, 165, 0, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask: radial-gradient(90% 60% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask: radial-gradient(90% 60% at 50% 30%, #000 0%, transparent 80%);
  opacity: 0.7;
}
.port-piece-back-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.port-piece-back-frame {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 17px;
  color: rgba(245, 242, 236, 0.55);
}
.port-piece-back-name {
  font-family: var(--display-font);
  font-size: clamp(30px, 2.8vw, 42px);
  letter-spacing: -0.02em;
  line-height: 0.96;
  margin: 0;
  color: var(--ink);
}
.port-piece-back-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  border-top: 1px solid rgba(245, 242, 236, 0.10);
}
.port-piece-back-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.port-piece-back-list li span { color: rgba(245, 242, 236, 0.4); }
.port-piece-back-list li b {
  font-weight: 500;
  color: var(--gold-light);
  font-family: var(--display-font);
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.port-piece-arrow-back {
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .port-piece-3d { transition: none !important; }
}

/* 5.8 MUSA Immersive — scrub indicator strip */
.musa-immersive-scrub {
  position: absolute;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(245, 242, 236, 0.5);
  text-transform: uppercase;
  pointer-events: none;
}
.scrub-label { color: var(--gold); }
.scrub-track {
  flex: 1;
  height: 1px;
  background: rgba(245, 242, 236, 0.12);
  overflow: hidden;
}
.scrub-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform-origin: left center;
  will-change: transform;
}
.scrub-pct { color: rgba(245, 242, 236, 0.8); }
@media (max-width: 720px) {
  .musa-immersive-scrub { gap: 8px; font-size: 9px; letter-spacing: 0.24em; }
}
@media (prefers-reduced-motion: reduce) {
  .musa-immersive-scrub { display: none; }
}

/* ============================================================
   5.9 MUSA METHOD — pin + expand to fullscreen on scroll
   ============================================================ */

.method-section { padding-bottom: 0 !important; }
.method-head-inner { padding-bottom: clamp(48px, 6vw, 80px); }

.method-pin {
  position: relative;
  height: 220vh;
}
.method-pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}
.method-frame {
  position: relative;
  width: 100vw;
  height: 88vh;
  max-width: 100vw;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(28, 22, 8, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8, 8, 10, 0.96) 0%, rgba(4, 4, 6, 0.98) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -22px 60px -36px rgba(242, 161, 30, 0.22) inset,
    0 80px 130px -50px rgba(0, 0, 0, 0.9),
    0 30px 80px -30px rgba(0, 0, 0, 0.6);
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-radius 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, border-radius;
}
.method-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240, 165, 0, 0.18);
  pointer-events: none;
  z-index: 4;
}
.method-frame-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(50% 40% at 50% 50%, rgba(242, 161, 30, 0.10) 0%, transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  filter: blur(20px);
  opacity: calc(0.4 + var(--p, 0) * 0.5);
  transition: opacity 0.3s;
}
.method-frame-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* As the frame grows, the marquee fades in cleanly */
  opacity: calc(0.25 + var(--p, 0) * 0.75);
  transition: opacity 0.3s;
}
.method-frame-inner .musa-marquee {
  padding: 0;
}
.method-frame-meta {
  position: absolute;
  left: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 32px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}
.method-frame-tag { color: var(--gold); }
.method-frame-counter {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 165, 0, 0.18);
}
.method-frame-counter .rec {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(240, 165, 0, 0.8);
  animation: portRec 2s ease-in-out infinite;
}
.method-frame-counter .sep { color: rgba(245, 242, 236, 0.25); }

@media (max-width: 860px) {
  .method-pin { height: auto; }
  .method-pin-stage {
    position: relative;
    height: auto;
    padding: 24px 0;
    overflow: visible;
  }
  .method-frame {
    width: calc(100vw - 24px);
    height: auto;
    transform: none !important;
    border-radius: 16px !important;
    padding: 40px 0;
  }
  .method-frame-inner { position: relative; inset: auto; opacity: 1 !important; }
  .method-frame-meta { position: relative; left: auto; right: auto; bottom: auto; padding: 20px 22px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .method-pin { height: auto; }
  .method-pin-stage { position: relative; height: auto; overflow: visible; }
  .method-frame { transform: none !important; border-radius: 16px !important; height: auto; padding: 40px 0; }
  .method-frame-inner { position: relative; inset: auto; opacity: 1 !important; }
  .method-frame-meta { position: relative; left: auto; right: auto; bottom: auto; padding: 20px 22px 0; }
  .method-frame-counter .rec { animation: none; }
}

/* ============================================================
   V6 — REFINEMENTS
   - Origen → Portfolio: parallax bridge, no seam
   - Brand modal for portfolio click
   - Stats redesigned as 3D inspirational monoliths
   - MUSA video always playing + folder strip
   - Pillars glassmorphism + deeper 3D
   - "Un solo ritual" bridge into next section
   - Founder photo+bio card + seam removal to CTA
   ============================================================ */

/* ----------------------------------------------------------
   6.1 Origen → Portfolio bridge — kill seam, add parallax wash
   ---------------------------------------------------------- */

.musa-immersive {
  position: relative;
}
.musa-immersive::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -120px;
  height: 240px;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(240, 165, 0, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(6, 7, 10, 0.8) 60%, rgba(4, 4, 6, 0.95) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ----------------------------------------------------------
   6.2 BRAND MODAL — premium archive ficha
   ---------------------------------------------------------- */

.brand-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  animation: brandModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes brandModalIn { from { opacity: 0; } to { opacity: 1; } }
.brand-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 4, 6, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.brand-modal-card {
  position: relative;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 0;
  background:
    linear-gradient(168deg,
      rgba(20, 18, 14, 0.96) 0%,
      rgba(10, 9, 8, 0.98) 50%,
      rgba(5, 5, 6, 1) 100%);
  border-radius: 12px;
  border: 1px solid rgba(240, 165, 0, 0.24);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -20px 60px -30px rgba(242, 161, 30, 0.25) inset,
    0 80px 140px -40px rgba(0, 0, 0, 0.92);
  animation: brandModalUp 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes brandModalUp { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

.brand-modal-close {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 5;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(240, 165, 0, 0.35);
  background: rgba(10, 10, 12, 0.6);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.3s;
}
.brand-modal-close span {
  position: absolute;
  width: 14px; height: 1px;
  background: var(--gold);
}
.brand-modal-close span:first-child { transform: rotate(45deg); }
.brand-modal-close span:last-child { transform: rotate(-45deg); }
.brand-modal-close:hover {
  background: var(--gold);
  transform: rotate(90deg);
}
.brand-modal-close:hover span { background: #0A0A0A; }

.brand-modal-poster {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(36, 28, 12, 0.85) 0%, transparent 65%),
    linear-gradient(180deg, rgba(14, 12, 8, 0.96) 0%, rgba(6, 6, 8, 0.98) 100%);
}
.brand-modal-poster-fill {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(245, 242, 236, 0.04) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(245, 242, 236, 0.04) 0 1px, transparent 1px 56px);
  mask: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 90%);
  -webkit-mask: radial-gradient(70% 70% at 50% 40%, #000 0%, transparent 90%);
}
.brand-modal-poster-mark {
  position: absolute;
  left: 30px; right: 30px;
  top: 38%;
  transform: translateY(-50%);
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(46px, 5vw, 78px);
  line-height: 0.94;
  color: var(--ink);
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.brand-modal-poster-format {
  position: absolute;
  bottom: 28px; left: 30px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.brand-modal-poster-grain {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05) 0px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.04) 0px, transparent 1.5px);
  background-size: 4px 4px, 5px 5px;
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.brand-modal-poster-rim {
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.brand-modal-body {
  padding: clamp(32px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brand-modal-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: rgba(240, 165, 0, 0.85);
  text-transform: uppercase;
}
.brand-modal-name {
  font-family: var(--display-font);
  font-size: clamp(40px, 4.4vw, 64px);
  letter-spacing: -0.024em;
  line-height: 0.96;
  margin: 0;
}
.brand-modal-name .em {
  font-style: italic;
  background: linear-gradient(95deg, var(--gold-light), #FFEDC2 50%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-modal-frame {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 17px;
  color: rgba(245, 242, 236, 0.5);
  margin-bottom: 6px;
}
.brand-modal-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 4px 0 6px;
  padding: 16px 0;
  border-top: 1px solid rgba(245, 242, 236, 0.1);
  border-bottom: 1px solid rgba(245, 242, 236, 0.1);
}
.brand-modal-meta > div { display: flex; flex-direction: column; gap: 3px; }
.brand-modal-meta dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: rgba(245, 242, 236, 0.4);
  text-transform: uppercase;
}
.brand-modal-meta dd {
  margin: 0;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 17px;
  color: var(--gold-light);
}
.brand-modal-story {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(183, 178, 168, 0.92);
  margin: 0;
}
.brand-modal-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.brand-modal-bullets li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(183, 178, 168, 0.9);
  opacity: 0;
  transform: translateX(-6px);
  animation: brandBullet 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(0.3s + var(--i, 0) * 0.08s) forwards;
}
.brand-modal-bullet-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  flex: 0 0 26px;
}
@keyframes brandBullet { to { opacity: 1; transform: translateX(0); } }

.brand-modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
}
.brand-modal-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 236, 0.4);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .brand-modal-card { grid-template-columns: 1fr; }
  .brand-modal-poster { min-height: 280px; }
  .brand-modal-meta { grid-template-columns: 1fr; }
  .brand-modal-foot { flex-direction: column; gap: 14px; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-modal, .brand-modal-card, .brand-modal-bullets li { animation: none; opacity: 1; transform: none; }
}

/* Make existing port-piece hint match new behaviour */
.port-piece-flip-hint { color: rgba(240, 165, 0, 0.85); }

/* ----------------------------------------------------------
   6.3 STATS — inspirational 3D monoliths
   ---------------------------------------------------------- */

.bn-arc-monoliths {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: clamp(18px, 2vw, 32px);
  perspective: 1600px;
  margin-top: clamp(60px, 7vw, 100px);
}
.bn-monolith {
  position: relative;
  padding: clamp(36px, 3.4vw, 52px) clamp(28px, 2.8vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(170deg,
      rgba(22, 18, 12, 0.94) 0%,
      rgba(10, 9, 8, 0.97) 50%,
      rgba(6, 6, 7, 0.98) 100%);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 -16px 50px -28px rgba(242, 161, 30, 0.22) inset,
    0 40px 90px -38px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    perspective(1600px)
    rotateY(calc(var(--idx-rot, 0) * 1deg))
    translateZ(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s;
  isolation: isolate;
  animation: monolithFloat 11s ease-in-out infinite;
}
.bn-monolith[data-idx="01"] { --idx-rot: 4; animation-delay: 0s; }
.bn-monolith[data-idx="02"] { --idx-rot: 0; animation-delay: -3.5s; }
.bn-monolith[data-idx="03"] { --idx-rot: -4; animation-delay: -7s; }
@keyframes monolithFloat {
  0%, 100% { transform: perspective(1600px) rotateY(calc(var(--idx-rot, 0) * 1deg)) translateY(0); }
  50%      { transform: perspective(1600px) rotateY(calc(var(--idx-rot, 0) * 1deg)) translateY(-12px); }
}
.bn-monolith::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(165deg,
    rgba(242, 161, 30, 0.5) 0%,
    rgba(245, 242, 236, 0.12) 35%,
    rgba(242, 161, 30, 0.06) 60%,
    rgba(242, 161, 30, 0.45) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}
.bn-monolith-feature {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(242, 161, 30, 0.18) 0%, transparent 70%),
    linear-gradient(170deg,
      rgba(36, 28, 12, 0.96) 0%,
      rgba(14, 12, 8, 0.97) 50%,
      rgba(6, 6, 7, 0.98) 100%);
}

.bn-monolith-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(240, 165, 0, 0.85);
  text-transform: uppercase;
}
.bn-monolith-num {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(72px, 9vw, 134px);
  line-height: 0.9;
  letter-spacing: -0.036em;
  color: var(--ink);
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(245, 242, 236, 0.92) 30%,
    rgba(233, 196, 106, 0.75) 78%,
    rgba(212, 175, 55, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.65));
  margin: -10px 0 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.bn-monolith-num-letters {
  font-size: clamp(56px, 7vw, 100px);
  letter-spacing: 0.02em;
}
.bn-monolith-num-letters .bn-mn-l {
  display: inline-block;
  animation: monolithLetter 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bn-monolith-num-letters .bn-mn-l:nth-child(1) { animation-delay: 0.4s; }
.bn-monolith-num-letters .bn-mn-l:nth-child(2) { animation-delay: 0.5s; }
.bn-monolith-num-letters .bn-mn-l:nth-child(4) { animation-delay: 0.7s; }
.bn-monolith-num-letters .bn-mn-l:nth-child(5) { animation-delay: 0.8s; }
.bn-monolith-num-letters .bn-mn-l:nth-child(6) { animation-delay: 0.9s; }
@keyframes monolithLetter {
  from { opacity: 0; transform: translateY(40px) rotateX(60deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}
.bn-mn-arrow {
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  font-size: 0.4em;
  margin: 0 0.18em;
  align-self: center;
  animation: monolithArrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}
@keyframes monolithArrow {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.bn-monolith-suffix {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 17px;
  color: rgba(240, 165, 0, 0.85);
  margin-top: 4px;
}
.bn-monolith-label {
  font-family: var(--display-font);
  font-size: clamp(22px, 1.8vw, 26px);
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.15;
  margin-top: 12px;
}
.bn-monolith-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(183, 178, 168, 0.82);
  margin-top: 6px;
}
.bn-monolith-glow {
  position: absolute;
  left: 50%; top: -60%;
  width: 90%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(242, 161, 30, 0.18) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
.bn-monolith-edge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.7;
}

@media (max-width: 860px) {
  .bn-arc-monoliths { grid-template-columns: 1fr; gap: 20px; }
  .bn-monolith { animation: none; transform: none !important; }
  .bn-monolith-num { font-size: clamp(64px, 16vw, 96px); }
}
@media (prefers-reduced-motion: reduce) {
  .bn-monolith { animation: none; }
  .bn-monolith-num-letters .bn-mn-l, .bn-mn-arrow { animation: none; opacity: 1; transform: none; }
}

/* ----------------------------------------------------------
   6.4 MUSA FOLDER STRIP — contact-sheet of clips
   ---------------------------------------------------------- */

.musa-folder {
  position: relative;
  max-width: 1240px;
  margin: 80px auto 0;
  padding: 0 clamp(20px, 4vw, 40px) clamp(60px, 8vw, 100px);
  z-index: 6;
}
.musa-folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: rgba(245, 242, 236, 0.5);
  text-transform: uppercase;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(240, 165, 0, 0.2);
}
.musa-folder-tag { color: var(--gold); }
.musa-folder-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.musa-folder-clip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  background: rgba(10, 10, 12, 0.6);
  border: 1px solid rgba(245, 242, 236, 0.08);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}
.musa-folder-clip:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 165, 0, 0.45);
  box-shadow:
    0 20px 50px -18px rgba(0, 0, 0, 0.85),
    0 0 24px -8px rgba(242, 161, 30, 0.4);
}
.musa-folder-clip.is-active {
  border-color: rgba(240, 165, 0, 0.7);
  background: rgba(28, 22, 8, 0.7);
}
.musa-folder-clip-fill {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 100% at 50% 0%, hsla(var(--hue, 36deg), 24%, 16%, 1) 0%, hsla(var(--hue, 36deg), 14%, 7%, 1) 100%);
}
.musa-folder-clip-fill::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(245, 242, 236, 0.045) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(245, 242, 236, 0.045) 0 1px, transparent 1px 14px);
  mask: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 90%);
  -webkit-mask: radial-gradient(60% 60% at 50% 50%, #000 0%, transparent 90%);
}
.musa-folder-clip-play {
  position: relative;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(240, 165, 0, 0.5);
  display: grid; place-items: center;
  font-size: 10px;
  color: var(--gold);
  background: rgba(10, 10, 12, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.4s;
}
.musa-folder-clip:hover .musa-folder-clip-play {
  background: var(--gold);
  color: #0A0A0A;
  transform: scale(1.08);
}
.musa-folder-clip-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 4px 4px;
}
.musa-folder-clip-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(240, 165, 0, 0.8);
  text-transform: uppercase;
}
.musa-folder-clip-name {
  font-family: var(--display-font);
  font-size: 17px;
  letter-spacing: -0.014em;
  color: var(--ink);
  line-height: 1.05;
}
.musa-folder-clip-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.45);
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .musa-folder-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .musa-folder-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .musa-folder-clip-name { font-size: 15px; }
}

/* ----------------------------------------------------------
   6.5 PILLARS — glassmorphism hover + deeper 3D
   ---------------------------------------------------------- */

.pillar-card {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s,
    box-shadow 0.5s,
    backdrop-filter 0.5s;
}
.pillar-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(165deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 25%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.025) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .pillar-card:hover {
    background:
      linear-gradient(168deg,
        rgba(36, 28, 14, 0.42) 0%,
        rgba(20, 18, 14, 0.48) 50%,
        rgba(14, 12, 8, 0.55) 100%) padding-box,
      linear-gradient(137deg, var(--gold-light), var(--gold), var(--gold-deep)) border-box !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.18) inset,
      0 -24px 50px -28px rgba(242, 161, 30, 0.45) inset,
      0 50px 100px -36px rgba(0, 0, 0, 0.9),
      0 24px 60px -22px rgba(242, 161, 30, 0.35);
    transform:
      perspective(1200px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translateZ(28px);
  }
  .pillar-card:hover::before { opacity: 1; }
  .pillar-card:hover .pillar-icon { transform: translateZ(40px) scale(1.08); }
  .pillar-card:hover .pillar-title { transform: translateZ(30px); }
  .pillar-card:hover .pillar-step { transform: translateZ(38px) scale(1.06); }
  .pillar-card:hover .pillar-process { transform: translateZ(20px); }
  .pillar-card:hover .pillar-steps { transform: translateZ(14px); }
}

.pillar-icon,
.pillar-title,
.pillar-step,
.pillar-process,
.pillar-steps {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.pillar-icon { transform: translateZ(0); }

/* Light sweep across pillar on hover */
.pillar-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg,
    transparent 32%,
    rgba(255, 240, 200, 0.08) 48%,
    rgba(255, 240, 200, 0.16) 50%,
    rgba(255, 240, 200, 0.08) 52%,
    transparent 68%);
  transform: translateX(-110%);
  transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: inherit;
  z-index: 2;
}
.pillar-card:hover .pillar-shimmer { transform: translateX(110%); }

@media (prefers-reduced-motion: reduce) {
  .pillar-card:hover, .pillar-card { transform: none !important; }
  .pillar-card:hover .pillar-shimmer { transform: translateX(-110%) !important; }
}

/* ----------------------------------------------------------
   6.6 "UN SOLO RITUAL" — bridge into next section
   ---------------------------------------------------------- */

.sc-outro {
  position: relative;
  isolation: isolate;
}
.sc-outro::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -160px;
  width: 1px;
  height: 220px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  opacity: 0;
  animation: scBridge 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-play-state: paused;
}
.sc-outro::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -190px;
  transform: translateX(-50%);
  font-family: var(--display-font);
  font-style: italic;
  font-size: 28px;
  color: var(--gold);
  opacity: 0;
  animation: scBridgeArrow 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  animation-play-state: paused;
}
.sc-section.in .sc-outro::before,
.sc-section.in .sc-outro::after { animation-play-state: running; }
@keyframes scBridge {
  from { opacity: 0; transform: scaleY(0); transform-origin: top; }
  to { opacity: 0.85; transform: scaleY(1); }
}
@keyframes scBridgeArrow {
  0% { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  100% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
}
.sc-outro-h {
  background: linear-gradient(180deg, var(--ink) 0%, rgba(245, 242, 236, 0.9) 40%, rgba(233, 196, 106, 0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sc-outro .btn-gold {
  animation: ritualPulse 3.4s ease-in-out infinite;
}
@keyframes ritualPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 165, 0, 0); }
  50% { box-shadow: 0 0 0 12px rgba(240, 165, 0, 0); 0 14px 38px -14px rgba(240, 165, 0, 0.7); }
}

/* ----------------------------------------------------------
   6.7 FOUNDER — photo+bio card + seam removal to CTA
   ---------------------------------------------------------- */

.founder-section {
  padding-bottom: 0 !important;
  position: relative;
}
.founder-section + .cta,
.cta { padding-top: 60px !important; }

.founder-inner {
  max-width: 1200px;
  padding-bottom: clamp(80px, 8vw, 120px);
}

.founder-card {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: stretch;
  padding: clamp(40px, 4vw, 64px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(36, 28, 12, 0.42) 0%, transparent 60%),
    linear-gradient(168deg, rgba(14, 12, 8, 0.78) 0%, rgba(8, 8, 10, 0.82) 100%);
  border-radius: 18px;
  border: 1px solid rgba(240, 165, 0, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 -24px 60px -32px rgba(242, 161, 30, 0.25) inset,
    0 60px 120px -42px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.founder-card.in { opacity: 1; transform: translateY(0); }

.founder-card-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.founder-photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(38, 30, 14, 0.7) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20, 16, 10, 1) 0%, rgba(8, 7, 6, 1) 100%);
  isolation: isolate;
}
.founder-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  filter: contrast(1.05) saturate(0.95);
}
.founder-photo-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.founder-photo-mono {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(80px, 12vw, 140px);
  line-height: 1;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(233, 196, 106, 0.55) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.04em;
}
.founder-photo-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
}
.founder-photo-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.035) 0px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.04) 0px, transparent 1.5px);
  background-size: 4px 4px, 5px 5px;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.founder-photo-rim {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 1px solid rgba(240, 165, 0, 0.2);
  border-radius: inherit;
  pointer-events: none;
}
.founder-photo-corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--gold);
  z-index: 5;
  pointer-events: none;
  opacity: 0.7;
}
.founder-photo-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.founder-photo-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.founder-photo-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.founder-photo-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.founder-photo-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(245, 242, 236, 0.5);
  text-transform: uppercase;
}
.founder-photo-meta .rec {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 6px;
  animation: portRec 2s ease-in-out infinite;
}

.founder-card-bio {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.founder-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
}
.founder-name {
  font-family: var(--display-font);
  font-size: clamp(54px, 5.4vw, 92px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.founder-name-em {
  font-style: italic;
  background: linear-gradient(95deg, var(--gold-light), #FFEDC2 50%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 0.55em;
}
.founder-role {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 19px;
  color: rgba(245, 242, 236, 0.6);
  margin: 0;
}
.founder-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 6px 0;
  padding: 16px 0;
  border-top: 1px solid rgba(245, 242, 236, 0.1);
  border-bottom: 1px solid rgba(245, 242, 236, 0.1);
}
.founder-facts > div { display: flex; flex-direction: column; gap: 2px; }
.founder-facts dt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: rgba(245, 242, 236, 0.4);
  text-transform: uppercase;
}
.founder-facts dd {
  margin: 0;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-light);
}
.founder-bio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.founder-bio p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(183, 178, 168, 0.92);
  margin: 0;
}
.founder-quote {
  position: relative;
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  margin: 12px 0 0;
  padding-left: 28px;
  border-left: 2px solid var(--gold);
}
.founder-quote-mark {
  position: absolute;
  left: -8px;
  top: -18px;
  font-size: 60px;
  color: var(--gold);
  line-height: 1;
}
.founder-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.founder-cta-bridge {
  position: relative;
  height: 220px;
  margin-top: -40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.founder-cta-line {
  position: absolute;
  left: 50%; top: 30px;
  width: 1px;
  height: 130px;
  background: linear-gradient(180deg, transparent 0%, var(--gold) 30%, transparent 100%);
  opacity: 0.6;
}
.founder-cta-glow {
  position: absolute;
  left: 50%; top: 50%;
  width: 600px; height: 400px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(240, 165, 0, 0.08) 0%, transparent 70%);
  filter: blur(20px);
  mix-blend-mode: screen;
}

@media (max-width: 860px) {
  .founder-card { grid-template-columns: 1fr; padding: 32px 24px; }
  .founder-facts { grid-template-columns: 1fr; }
  .founder-cta-bridge { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .founder-card { opacity: 1; transform: none; transition: none; }
  .founder-photo-meta .rec { animation: none; }
}

/* Kill any seam between Founder section and CTA */
.founder-section ~ .cta::before { display: none !important; }
.cta { margin-top: 0 !important; border-top: none !important; }

/* ============================================================
   V7 — AUTH + DASHBOARDS
   Separate visual layer for /login, /activate, /dashboard/*.
   BEM-ish `dash-*` / `phase-*` / `client-*` / `task-*` namespaces
   so nothing collides with the landing styles.
   ============================================================ */

:root {
  --color-success: oklch(74% 0.18 145);
  --color-warn:    oklch(78% 0.16 75);
  --color-blocked: oklch(64% 0.18 30);
  --color-info:    oklch(72% 0.12 240);
}

#bway-auth-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
#bway-auth-root > * { pointer-events: auto; }
#bway-auth-root:empty { display: none; }

/* When auth routes are mounted, hide landing chrome to avoid visual noise */
html:has(#bway-auth-root:not(:empty)) .nav-pill,
html:has(#bway-auth-root:not(:empty)) .scroll-thread,
html:has(#bway-auth-root:not(:empty)) .scene-hud { display: none !important; }

/* When the dashboard overlay is mounted, hide the landing tree completely.
   Stops the landing's videos, RAF loops and scroll listeners — which were
   burning CPU and making the dashboard feel like it was loading forever. */
html:has(#bway-auth-root:not(:empty)) #root,
html:has(#bway-auth-root:not(:empty)) .page-bg-video,
html:has(#bway-auth-root:not(:empty)) .page-bg-base,
html:has(#bway-auth-root:not(:empty)) .atmosphere,
html:has(#bway-auth-root:not(:empty)) .gold-dust,
html:has(#bway-auth-root:not(:empty)) video { display: none !important; }
html:has(#bway-auth-root:not(:empty)) body { overflow: hidden !important; }


/* ----------------------------------------------------------
   7.1 Auth screen (login / activate / errors)
   ---------------------------------------------------------- */

.auth-screen {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(28, 22, 8, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, rgba(6, 6, 8, 0.97) 0%, rgba(3, 3, 4, 1) 100%);
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 60px);
  isolation: isolate;
  z-index: 1;
}
.auth-bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.auth-bg-grain {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.035) 0px, transparent 1.4px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.04) 0px, transparent 1.5px);
  background-size: 4px 4px, 5px 5px;
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.auth-bg-flare {
  position: absolute;
  left: 50%; top: 38%;
  width: 110vw; height: 60vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 60% at 50% 50%,
    rgba(240,165,0,0.10) 0%, rgba(240,165,0,0.03) 35%, transparent 70%);
  filter: blur(20px);
  mix-blend-mode: screen;
}
.auth-back {
  position: absolute;
  top: 28px; left: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: rgba(245,242,236,0.55);
  text-transform: uppercase;
  text-decoration: none;
}
.auth-back:hover { color: var(--gold); }

.auth-card {
  width: 100%;
  max-width: 480px;
  padding: clamp(34px, 4vw, 52px);
  background:
    linear-gradient(168deg, rgba(18, 16, 12, 0.85) 0%, rgba(10, 9, 8, 0.92) 100%);
  border-radius: 16px;
  border: 1px solid rgba(240, 165, 0, 0.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -22px 60px -32px rgba(242, 161, 30, 0.3) inset,
    0 80px 130px -40px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.auth-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
}
.auth-h {
  font-family: var(--display-font);
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.96;
  letter-spacing: -0.024em;
  margin: 0;
}
.auth-h .em {
  font-style: italic;
  background: linear-gradient(95deg, var(--gold-light), #FFEDC2 50%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(183, 178, 168, 0.92);
  margin: 0;
}
.auth-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.4);
  text-transform: uppercase;
  margin: 6px 0 0;
}
.auth-link {
  background: none;
  border: none;
  color: rgba(240, 165, 0, 0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.auth-link:hover { color: var(--gold-light); }

/* ----------------------------------------------------------
   7.2 Inputs / fields / buttons / banners / spinner
   ---------------------------------------------------------- */

.dash-field { display: flex; flex-direction: column; gap: 6px; }
.dash-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}
.dash-field-hint {
  font-size: 12px;
  color: rgba(183, 178, 168, 0.7);
}
.dash-input {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  padding: 14px 16px;
  background: rgba(10, 10, 12, 0.7);
  border: 1px solid rgba(245, 242, 236, 0.12);
  border-radius: 8px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.dash-input:focus {
  border-color: rgba(240, 165, 0, 0.6);
  box-shadow: 0 0 0 3px rgba(240, 165, 0, 0.15);
  background: rgba(14, 14, 16, 0.85);
}
.dash-input-area { resize: vertical; min-height: 86px; }

.dash-btn {
  align-self: flex-start;
  position: relative;
  padding: 14px 24px;
  border-radius: 100px;
}
.dash-btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  margin-right: 10px;
  vertical-align: -2px;
  animation: dashSpin 0.75s linear infinite;
}
@keyframes dashSpin { to { transform: rotate(360deg); } }

.dash-banner {
  padding: 12px 14px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid;
}
.dash-banner.is-info  { color: var(--gold-light); border-color: rgba(240,165,0,0.32); background: rgba(36, 28, 12, 0.55); }
.dash-banner.is-error { color: #ff9c8a; border-color: rgba(255, 100, 80, 0.4); background: rgba(40, 12, 12, 0.6); }

.dash-spinner-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  color: rgba(245, 242, 236, 0.6);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dash-spinner {
  display: inline-block;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 165, 0, 0.45);
  border-top-color: transparent;
  animation: dashSpin 0.75s linear infinite;
}

/* ----------------------------------------------------------
   7.3 Dashboard shell
   ---------------------------------------------------------- */

.dash-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(28, 22, 8, 0.42) 0%, transparent 60%),
    linear-gradient(180deg, rgba(6, 6, 8, 0.97) 0%, rgba(3, 3, 4, 1) 100%);
  color: var(--ink);
  z-index: 1;
}

.dash-side {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(240, 165, 0, 0.18);
  padding: 28px 22px;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.7) 0%, rgba(6, 6, 8, 0.85) 100%);
  position: relative;
}
.dash-side::before {
  content: "";
  position: absolute;
  top: 0; right: -1px;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(240, 165, 0, 0.45) 50%, transparent 100%);
  pointer-events: none;
}
.dash-side-brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 28px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
}
.dash-side-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  font-family: var(--display-font);
  font-size: 26px;
  letter-spacing: -0.02em;
}
.dash-side-mono {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 14px;
  font-style: italic;
}
.dash-side-name .em {
  font-style: italic;
  color: var(--gold-light);
}
.dash-side-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.36em;
  color: var(--gold);
  text-transform: uppercase;
}

.dash-side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.dash-side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(245, 242, 236, 0.65);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  transition: background 0.25s, color 0.25s;
}
.dash-side-nav a .dash-side-icon {
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold);
  width: 18px; text-align: center;
  opacity: 0.7;
}
.dash-side-nav a:hover { background: rgba(240, 165, 0, 0.08); color: var(--ink); }
.dash-side-nav a[aria-current="page"] {
  background: linear-gradient(95deg, rgba(36, 28, 12, 0.7), rgba(16, 14, 10, 0.5));
  color: var(--ink);
}
.dash-side-nav a[aria-current="page"] .dash-side-icon { opacity: 1; }

.dash-side-foot {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-side-me {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-side-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  color: #0A0A0A;
  display: grid; place-items: center;
  font-family: var(--display-font);
  font-size: 17px;
  font-style: italic;
}
.dash-side-me-name { font-family: 'Inter', sans-serif; font-size: 13.5px; }
.dash-side-me-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(240, 165, 0, 0.8);
  text-transform: uppercase;
}
.dash-side-out {
  background: none;
  border: 1px solid rgba(245, 242, 236, 0.14);
  border-radius: 100px;
  color: rgba(245, 242, 236, 0.7);
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.dash-side-out:hover { color: var(--gold); border-color: rgba(240, 165, 0, 0.55); }

.dash-main {
  overflow-y: auto;
  padding: 32px clamp(28px, 4vw, 52px) 80px;
  scrollbar-width: thin;
  scrollbar-color: rgba(240, 165, 0, 0.4) transparent;
}
.dash-main::-webkit-scrollbar { width: 8px; }
.dash-main::-webkit-scrollbar-thumb { background: rgba(240, 165, 0, 0.3); border-radius: 4px; }

.dash-page { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
}
.dash-header-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--gold);
  text-transform: uppercase;
}
.dash-header-title {
  font-family: var(--display-font);
  font-size: clamp(34px, 3.6vw, 54px);
  letter-spacing: -0.024em;
  line-height: 0.98;
  margin: 6px 0 8px;
}
.dash-header-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(183, 178, 168, 0.85);
  margin: 0;
  max-width: 640px;
}
.dash-header-actions { display: flex; gap: 10px; }

.dash-crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: rgba(245, 242, 236, 0.6);
  text-decoration: none;
  text-transform: uppercase;
}
.dash-crumb:hover { color: var(--gold); }

/* ----------------------------------------------------------
   7.4 KPI grid + dash cards + table + list rows
   ---------------------------------------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.kpi-card {
  position: relative;
  padding: 22px 22px 26px;
  background:
    linear-gradient(168deg, rgba(18, 16, 12, 0.7) 0%, rgba(10, 9, 8, 0.86) 100%);
  border-radius: 14px;
  border: 1px solid rgba(245, 242, 236, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  isolation: isolate;
}
.kpi-card.is-accent {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(242, 161, 30, 0.16) 0%, transparent 70%),
    linear-gradient(168deg, rgba(28, 22, 12, 0.85) 0%, rgba(10, 9, 8, 0.92) 100%);
  border-color: rgba(240, 165, 0, 0.3);
}
.kpi-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 236, 0.5);
  text-transform: uppercase;
}
.kpi-value {
  font-family: var(--display-font);
  font-style: italic;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.026em;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(233, 196, 106, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kpi-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(183, 178, 168, 0.7);
  text-transform: uppercase;
}
.kpi-edge {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}

.dash-card {
  padding: 24px;
  background:
    linear-gradient(168deg, rgba(14, 12, 10, 0.7) 0%, rgba(8, 8, 10, 0.84) 100%);
  border-radius: 14px;
  border: 1px solid rgba(245, 242, 236, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
  padding-bottom: 12px;
}
.dash-card-head h2 {
  font-family: var(--display-font);
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0;
}
.dash-card-head a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-transform: uppercase;
  text-decoration: none;
}

.dash-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.dash-list-empty {
  padding: 24px 0;
  color: rgba(183, 178, 168, 0.65);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.dash-list-row {
  display: grid;
  grid-template-columns: 70px 1.4fr 1fr 1.2fr 24px;
  align-items: center;
  gap: 14px;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
  cursor: pointer;
  transition: padding-left 0.4s, background 0.25s;
}
.dash-list-row:hover { padding-left: 18px; background: rgba(240, 165, 0, 0.05); }
.dash-list-num {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
}
.dash-list-name {
  font-family: var(--display-font);
  font-size: 18px;
  letter-spacing: -0.012em;
}
.dash-list-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}
.dash-list-pct {
  position: relative;
  display: flex; align-items: center; gap: 10px;
}
.dash-list-pct i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  min-width: 4px;
}
.dash-list-pct b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-light);
}
.dash-list-arrow {
  font-family: 'JetBrains Mono', monospace;
  color: rgba(245, 242, 236, 0.5);
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
}
.dash-table th {
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: rgba(245, 242, 236, 0.5);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(240, 165, 0, 0.18);
  padding: 12px 14px;
}
.dash-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
  font-size: 14px;
  color: rgba(245, 242, 236, 0.88);
}
.dash-table tbody tr { cursor: pointer; transition: background 0.25s; }
.dash-table tbody tr:hover { background: rgba(240, 165, 0, 0.05); }
.dash-bar {
  display: inline-block;
  width: 120px; height: 4px;
  background: rgba(245, 242, 236, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-right: 8px;
  vertical-align: middle;
}
.dash-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}

.dash-form { display: flex; flex-direction: column; gap: 14px; }
.dash-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.dash-form-grid .dash-banner,
.dash-form-grid .dash-form-submit { grid-column: 1 / -1; }
.dash-form-submit { justify-self: start; }
.dash-modal-card { grid-template-columns: 1fr !important; max-width: 640px !important; }

/* ----------------------------------------------------------
   7.5 Empty state
   ---------------------------------------------------------- */

.dash-empty {
  padding: 56px 24px;
  border: 1px dashed rgba(240, 165, 0, 0.28);
  border-radius: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dash-empty-mark {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 56px;
  color: var(--gold-light);
  opacity: 0.6;
}
.dash-empty h3 {
  font-family: var(--display-font);
  font-size: 26px;
  margin: 0;
}
.dash-empty p {
  color: rgba(183, 178, 168, 0.85);
  font-size: 14.5px;
  max-width: 460px;
  margin: 0;
}

/* ----------------------------------------------------------
   7.6 Cliente cards + project summary
   ---------------------------------------------------------- */

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.client-card {
  position: relative;
  padding: 24px;
  border-radius: 14px;
  background:
    linear-gradient(168deg, rgba(20, 18, 14, 0.85) 0%, rgba(10, 9, 8, 0.92) 100%);
  border: 1px solid rgba(240, 165, 0, 0.2);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s;
}
.client-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.85), 0 0 32px -10px rgba(242,161,30,0.4);
}
.client-card-head {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}
.client-card-num   { color: var(--gold); }
.client-card-stage { color: rgba(240, 165, 0, 0.7); }
.client-card-title {
  font-family: var(--display-font);
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.018em;
  margin: 14px 0 8px;
}
.client-card-desc {
  font-size: 13.5px;
  color: rgba(183, 178, 168, 0.82);
  line-height: 1.5;
  margin: 0 0 18px;
}
.client-card-bar {
  height: 6px;
  background: rgba(245, 242, 236, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.client-card-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.client-card-foot {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.5);
  margin-top: 10px;
  text-transform: uppercase;
}

.project-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.project-summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-summary b {
  font-family: var(--display-font);
  font-size: 18px;
  color: var(--gold-light);
}

/* ----------------------------------------------------------
   7.7 PhaseTracker — the signature client component
   ---------------------------------------------------------- */

.phase-tracker {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.phase-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding-bottom: 18px;
}
.phase-step-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.phase-step-dot {
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(245, 242, 236, 0.08);
  border: 1px solid rgba(245, 242, 236, 0.15);
  display: grid; place-items: center;
  margin-top: 6px;
  transition: all 0.4s;
}
.phase-step-dot i {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(245, 242, 236, 0.25);
  transition: all 0.4s;
}
.phase-step-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, rgba(245, 242, 236, 0.12) 0%, transparent 100%);
  margin: 6px 0 0;
  min-height: 60px;
}
.phase-step-body {
  padding: 18px 22px;
  border-radius: 12px;
  background: linear-gradient(168deg, rgba(14, 12, 10, 0.7) 0%, rgba(8, 8, 10, 0.85) 100%);
  border: 1px solid rgba(245, 242, 236, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.4s, transform 0.4s;
}
.phase-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.phase-step-num {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 26px;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.phase-step-name {
  font-family: var(--display-font);
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0;
}
.phase-step-desc {
  font-size: 13.5px;
  color: rgba(183, 178, 168, 0.85);
  line-height: 1.55;
  margin: 0;
}
.phase-step-meta {
  display: flex;
  gap: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(245, 242, 236, 0.45);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.phase-step-notes {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(240, 165, 0, 0.04);
  font-family: var(--display-font);
  font-style: italic;
  font-size: 14px;
  color: rgba(245, 242, 236, 0.78);
}
.phase-step-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.phase-step-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(245, 242, 236, 0.06);
  color: rgba(245, 242, 236, 0.85);
  border: 1px solid rgba(245, 242, 236, 0.14);
  cursor: pointer;
  transition: all 0.25s;
}
.phase-step-btn:hover { border-color: var(--gold); color: var(--gold); }
.phase-step-btn.is-gold {
  background: var(--gold);
  color: #0A0A0A;
  border-color: var(--gold);
}
.phase-step-btn.is-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.phase-step-btn.is-ghost {
  border-style: dashed;
  color: rgba(245, 242, 236, 0.55);
}

.phase-pill {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid;
  text-transform: uppercase;
  margin-left: auto;
}
.phase-pill.is-pending   { color: rgba(245, 242, 236, 0.62); border-color: rgba(245, 242, 236, 0.22); }
.phase-pill.is-progress  { color: var(--gold); border-color: rgba(240, 165, 0, 0.5); background: rgba(240, 165, 0, 0.1); }
.phase-pill.is-done      { color: oklch(74% 0.18 145); border-color: oklch(74% 0.18 145 / 0.55); background: oklch(74% 0.18 145 / 0.08); }
.phase-pill.is-blocked   { color: oklch(64% 0.18 30); border-color: oklch(64% 0.18 30 / 0.5); background: oklch(64% 0.18 30 / 0.08); }
.phase-pill.is-admin     { color: var(--gold); border-color: rgba(240, 165, 0, 0.5); }
.phase-pill.is-cliente   { color: var(--gold-light); border-color: rgba(233, 196, 106, 0.4); }
.phase-pill.is-usuario   { color: rgba(245, 242, 236, 0.7); border-color: rgba(245, 242, 236, 0.22); }
.phase-pill.is-pending,
.phase-pill.is-accepted,
.phase-pill.is-revoked,
.phase-pill.is-expired { font-size: 9px; }
.phase-pill.is-accepted  { color: oklch(74% 0.18 145); border-color: oklch(74% 0.18 145 / 0.55); }
.phase-pill.is-expired,
.phase-pill.is-revoked   { color: rgba(245, 242, 236, 0.45); border-color: rgba(245, 242, 236, 0.18); }

/* Per-state visual treatment of the rail dot */
.phase-step.is-in_progress .phase-step-dot {
  background: rgba(240, 165, 0, 0.22);
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(240, 165, 0, 0.18), 0 0 16px rgba(240, 165, 0, 0.5);
}
.phase-step.is-in_progress .phase-step-dot i {
  background: var(--gold);
  animation: dashSpin 2.4s linear infinite;
  transform-origin: center;
}
.phase-step.is-done .phase-step-dot {
  background: oklch(74% 0.18 145 / 0.25);
  border-color: oklch(74% 0.18 145);
}
.phase-step.is-done .phase-step-dot i { background: oklch(74% 0.18 145); }
.phase-step.is-blocked .phase-step-dot {
  background: oklch(64% 0.18 30 / 0.22);
  border-color: oklch(64% 0.18 30);
}
.phase-step.is-blocked .phase-step-dot i { background: oklch(64% 0.18 30); }

.phase-step.is-in_progress .phase-step-body { border-color: rgba(240, 165, 0, 0.45); }
.phase-step.is-done        .phase-step-body { border-color: oklch(74% 0.18 145 / 0.4); }
.phase-step.is-blocked     .phase-step-body { border-color: oklch(64% 0.18 30 / 0.45); }

/* ----------------------------------------------------------
   7.8 Usuario tasks + updates list
   ---------------------------------------------------------- */

.tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.task-card {
  padding: 22px;
  border-radius: 12px;
  background: linear-gradient(168deg, rgba(14, 12, 10, 0.78) 0%, rgba(8, 8, 10, 0.9) 100%);
  border: 1px solid rgba(245, 242, 236, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-card.is-in_progress { border-color: rgba(240, 165, 0, 0.4); box-shadow: 0 0 24px -8px rgba(242, 161, 30, 0.35); }
.task-card.is-done        { border-color: oklch(74% 0.18 145 / 0.4); }
.task-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.task-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(240, 165, 0, 0.85);
  text-transform: uppercase;
}
.task-title {
  font-family: var(--display-font);
  font-size: 24px;
  letter-spacing: -0.012em;
  margin: 0;
}
.task-project {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(183, 178, 168, 0.85);
  text-decoration: none;
}
.task-project b { color: var(--ink); }
.task-meta {
  display: flex;
  gap: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.5);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.task-notes {
  font-size: 13px;
  color: rgba(183, 178, 168, 0.85);
  margin: 4px 0 0;
}
.task-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.task-done-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: oklch(74% 0.18 145);
  text-transform: uppercase;
}

.updates-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.updates-list li {
  padding: 12px 14px;
  border-left: 2px solid var(--gold);
  background: rgba(240, 165, 0, 0.04);
  border-radius: 0 8px 8px 0;
}
.updates-list p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: rgba(245, 242, 236, 0.85); }
.updates-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.45);
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   7.9 Responsive
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  .dash-shell { grid-template-columns: 1fr; }
  .dash-side {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(240, 165, 0, 0.18);
    padding: 14px 18px;
    gap: 14px;
  }
  .dash-side-brand { padding: 0; margin: 0; border: none; flex: 1; }
  .dash-side-nav { flex-direction: row; gap: 6px; flex: 0 0 100%; overflow-x: auto; }
  .dash-side-nav a { padding: 8px 12px; white-space: nowrap; }
  .dash-side-foot { flex-direction: row; padding: 0; margin: 0; border: none; }
  .dash-main { padding: 24px 18px 60px; }
  .dash-form-grid { grid-template-columns: 1fr; }
  .dash-list-row { grid-template-columns: 50px 1.4fr 1fr 24px; }
  .dash-list-row .dash-list-pct { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .phase-step.is-in_progress .phase-step-dot i,
  .dash-btn-spinner, .dash-spinner { animation: none !important; }
}

/* ============================================================
   V8 — Nav login button
   ============================================================ */

.pill-link-login {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: rgba(245, 242, 236, 0.78) !important;
  border: 1px solid rgba(240, 165, 0, 0.32);
  border-radius: 100px;
  padding: 7px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase;
  transition: all 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pill-link-login::after { display: none !important; }
.pill-link-login .pill-login-icon {
  color: var(--gold);
  font-size: 12px;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.pill-link-login:hover {
  color: var(--gold-light) !important;
  border-color: rgba(240, 165, 0, 0.75);
  background: rgba(240, 165, 0, 0.06);
  box-shadow:
    0 8px 22px -10px rgba(240, 165, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pill-link-login:hover .pill-login-icon {
  transform: rotate(180deg);
}

@media (max-width: 720px) {
  .pill-link-login {
    padding: 6px 10px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.2em !important;
  }
  .pill-link-login .pill-login-icon { font-size: 10px; }
}

/* ============================================================
   V9 — Enhanced tracking visualizations
   StageTrack · ProgressRing · TrackingHero
   ============================================================ */

/* ----- StageTrack: 7-segment compact progress ----- */
.stage-track {
  display: inline-grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 240px;
}
.stage-track-sm  { gap: 3px; max-width: 140px; }
.stage-track-md  { gap: 4px; max-width: 200px; }
.stage-track-lg  { gap: 6px; max-width: 100%; }
.stage-track-seg {
  display: block;
  height: 6px;
  border-radius: 2px;
  background: rgba(245, 242, 236, 0.08);
  border: 1px solid rgba(245, 242, 236, 0.06);
  transition: background 0.5s, box-shadow 0.5s, transform 0.5s;
  position: relative;
}
.stage-track-lg .stage-track-seg {
  height: 14px;
  border-radius: 3px;
}
.stage-track-md .stage-track-seg {
  height: 9px;
  border-radius: 3px;
}
.stage-track-seg.is-done {
  background: linear-gradient(180deg, oklch(78% 0.18 145), oklch(64% 0.18 145));
  border-color: oklch(74% 0.18 145 / 0.5);
  box-shadow: 0 0 8px oklch(74% 0.18 145 / 0.45);
}
.stage-track-seg.is-in_progress {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-color: rgba(240, 165, 0, 0.6);
  box-shadow: 0 0 12px rgba(242, 161, 30, 0.6);
  animation: stageTrackPulse 2.2s ease-in-out infinite;
}
.stage-track-seg.is-blocked {
  background: linear-gradient(180deg, oklch(70% 0.18 30), oklch(54% 0.18 30));
  border-color: oklch(64% 0.18 30 / 0.6);
}
.stage-track-seg.is-pending {
  background: rgba(245, 242, 236, 0.06);
}
@keyframes stageTrackPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(242, 161, 30, 0.6); }
  50%      { box-shadow: 0 0 20px rgba(242, 161, 30, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .stage-track-seg.is-in_progress { animation: none; }
}

/* ----- ProgressRing: radial SVG ----- */
.progress-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
}
.progress-ring svg { display: block; }
.progress-ring-track {
  fill: none;
  stroke: rgba(245, 242, 236, 0.08);
  stroke-width: 8;
}
.progress-ring-fill {
  fill: none;
  stroke: url(#bwayGoldGrad);
  stroke: var(--gold);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(242, 161, 30, 0.55));
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--display-font);
  line-height: 1;
}
.progress-ring-text b {
  font-style: italic;
  font-size: 30px;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(233, 196, 106, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}
.progress-ring-text span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(240, 165, 0, 0.85);
  margin-top: 4px;
  display: inline-block;
}
.progress-ring-text em {
  display: block;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.32em;
  color: rgba(245, 242, 236, 0.55);
  font-style: normal;
  text-transform: uppercase;
}

/* ----- TrackingHero: project detail header card ----- */
.tracking-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(36, 28, 12, 0.42) 0%, transparent 60%),
    linear-gradient(168deg, rgba(14, 12, 10, 0.78) 0%, rgba(8, 8, 10, 0.86) 100%);
  border-radius: 16px;
  border: 1px solid rgba(240, 165, 0, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 -22px 60px -32px rgba(242, 161, 30, 0.25) inset,
    0 30px 80px -36px rgba(0, 0, 0, 0.78);
  position: relative;
  overflow: hidden;
}
.tracking-hero::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(242, 161, 30, 0.16) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.tracking-hero-ring {
  position: relative;
  z-index: 1;
  align-self: start;
  padding: 8px;
  border-radius: 50%;
  background: rgba(8, 8, 8, 0.5);
  box-shadow: 0 0 0 1px rgba(240, 165, 0, 0.22);
}
.tracking-hero-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.tracking-hero-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tracking-hero-stage h2 {
  font-family: var(--display-font);
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.018em;
  margin: 0;
  line-height: 1.05;
}
.tracking-hero-stage h2 i {
  font-style: italic;
  background: linear-gradient(95deg, var(--gold-light), #FFEDC2 50%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 4px;
}
.tracking-hero-stage h2 span {
  color: rgba(245, 242, 236, 0.4);
  font-size: 0.78em;
}
.tracking-hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 14px 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
}
.tracking-hero-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tracking-hero-meta b {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--gold-light);
}
.tracking-hero-meta .is-overdue b { color: oklch(72% 0.18 30); }

@media (max-width: 720px) {
  .tracking-hero { grid-template-columns: 1fr; text-align: center; }
  .tracking-hero-ring { justify-self: center; }
  .tracking-hero-stage h2 { font-size: 24px; }
  .tracking-hero-meta { grid-template-columns: 1fr 1fr; }
}

/* ----- Updated dash-list-row with embedded track ----- */
.dash-list-row-track {
  grid-template-columns: 60px 1.4fr 1fr 70px 24px !important;
  gap: 18px !important;
}
.dash-list-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dash-list-cell .dash-list-name { font-size: 17px; line-height: 1.1; }
.dash-list-cell .dash-list-meta { font-size: 9.5px; }
@media (max-width: 860px) {
  .dash-list-row-track { grid-template-columns: 44px 1.4fr 80px 24px !important; }
  .dash-list-row-track .stage-track { display: none; }
}

/* ----- Updated admin projects table cell ----- */
.dash-table-substage {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: rgba(240, 165, 0, 0.7);
  text-transform: uppercase;
  margin-top: 4px;
}
.dash-table-pct {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-table-pct b {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 20px;
  color: var(--gold-light);
}

/* ============================================================
   V10 — Cinematic camera-dolly tracking animations
   ============================================================ */

/* ----- StageTrack: traveling light wave that dollies to current ----- */
.stage-track { position: relative; }
.stage-track-dolly {
  position: absolute;
  top: -8px; bottom: -8px;
  left: 0;
  width: 36px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 60% 80% at 50% 50%,
    rgba(255, 240, 200, 0.55) 0%,
    rgba(242, 161, 30, 0.35) 30%,
    transparent 70%);
  filter: blur(6px);
  mix-blend-mode: screen;
  transform: translateX(calc(var(--cur-pct, 0%) - 18px));
  animation: stageDollyPulse 2.4s ease-in-out infinite;
}
@keyframes stageDollyPulse {
  0%, 100% { opacity: 0.78; transform: translateX(calc(var(--cur-pct, 0%) - 18px)) scaleX(1); }
  50%      { opacity: 1;    transform: translateX(calc(var(--cur-pct, 0%) - 18px)) scaleX(1.18); }
}

/* ----- PhaseTracker: replace the dot with a film camera SVG ----- */
.phase-step.is-in_progress .phase-step-dot {
  width: 56px; height: 38px;
  background: transparent;
  border: none;
  box-shadow: none;
  margin-top: 0;
  display: grid;
  place-items: center;
  position: relative;
  animation: dollyCameraEntry 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.phase-step.is-in_progress .phase-step-dot::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(ellipse 50% 60% at 50% 50%,
    rgba(242, 161, 30, 0.42) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
  animation: dollyHalo 3s ease-in-out infinite;
}
@keyframes dollyCameraEntry {
  0%   { opacity: 0; transform: translateX(-40px) scale(0.7); filter: blur(8px); }
  60%  { opacity: 1; transform: translateX(4px) scale(1.04); filter: blur(0); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes dollyHalo {
  0%, 100% { opacity: 0.7; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

.phase-dolly-camera {
  width: 52px;
  height: 36px;
  overflow: visible;
}
.dolly-body, .dolly-hump {
  fill: #0E0C08;
  stroke: var(--gold);
  stroke-width: 1.2;
}
.dolly-body { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.dolly-reel-bg, .dolly-reel {
  fill: #0E0C08;
  stroke: var(--gold-light);
  stroke-width: 0.9;
}
.dolly-reel-cross {
  stroke: var(--gold);
  stroke-width: 0.9;
  fill: none;
  stroke-linecap: round;
}
.dolly-reel-spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: dollyReelSpin 1.6s linear infinite;
}
@keyframes dollyReelSpin {
  to { transform: rotate(360deg); }
}
.dolly-lens-outer { fill: #050505; stroke: var(--gold); stroke-width: 0.9; }
.dolly-lens-mid   { fill: rgba(240, 165, 0, 0.6); }
.dolly-lens-inner {
  fill: #FFEDC2;
  animation: dollyLensGlow 2.2s ease-in-out infinite;
}
.dolly-flare {
  fill: rgba(255, 255, 255, 0.95);
  animation: dollyFlare 2.6s ease-in-out infinite;
}
@keyframes dollyLensGlow {
  0%, 100% { fill: #FFEDC2; }
  50%      { fill: #FFFFFF; }
}
@keyframes dollyFlare {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  50%      { transform: translate(-1px, 1px) scale(1.3); opacity: 1; }
}
.dolly-arm {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
}
.dolly-track {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  opacity: 0.55;
  animation: dollyTrackSlide 1.2s linear infinite;
}
@keyframes dollyTrackSlide {
  to { stroke-dashoffset: -14; }
}

/* Scan-line that runs vertically through the rail of the current step */
.phase-step-scan {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px; height: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 240, 200, 0.9) 50%,
    transparent 100%);
  transform: translate(-50%, -50%);
  filter: blur(0.6px);
  animation: phaseScan 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes phaseScan {
  0%   { height: 0;   opacity: 0; }
  20%  { height: 80px; opacity: 1; }
  80%  { height: 80px; opacity: 1; }
  100% { height: 0;   opacity: 0; }
}

/* When stage transitions to done, briefly flash the body with a film-burn */
.phase-step.is-done .phase-step-body {
  animation: phaseDoneBurn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes phaseDoneBurn {
  0%   { box-shadow: 0 0 0 2px oklch(74% 0.18 145 / 0.6), 0 0 24px oklch(74% 0.18 145 / 0.6); }
  100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-track-dolly { animation: none; }
  .phase-step.is-in_progress .phase-step-dot,
  .phase-step.is-in_progress .phase-step-dot::before,
  .dolly-reel-spin, .dolly-lens-inner, .dolly-flare,
  .dolly-track, .phase-step-scan, .phase-step.is-done .phase-step-body {
    animation: none !important;
  }
}

/* ============================================================
   V11 — BWAY logo across dashboards + auth + assignment UI
   ============================================================ */

.bway-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.bway-logo-img {
  height: 38px;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(242, 161, 30, 0.18));
}
.bway-logo-name {
  font-family: var(--display-font);
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1;
}
.bway-logo-name em {
  font-style: italic;
  color: var(--gold-light);
}
.bway-logo-tag {
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(245, 242, 236, 0.4);
  text-transform: uppercase;
}

/* Sidebar logo image (replaces the "B" monogram when image loads) */
.dash-side-logo {
  align-items: center;
  flex-wrap: wrap;
}
.dash-side-logo-img {
  height: 34px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(242, 161, 30, 0.25));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-side-logo:hover .dash-side-logo-img {
  transform: translateY(-1px);
}

/* ----- Assignment dropdown inside the PhaseTracker (admin only) ----- */
.phase-step-assign {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}
.phase-step-assign label { color: rgba(240, 165, 0, 0.85); }
.phase-step-assign select {
  background: rgba(10, 10, 12, 0.7);
  border: 1px solid rgba(245, 242, 236, 0.14);
  color: var(--ink);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  padding: 6px 10px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s;
}
.phase-step-assign select:hover,
.phase-step-assign select:focus {
  border-color: rgba(240, 165, 0, 0.6);
  outline: none;
}
.phase-step-assign .phase-assign-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: oklch(74% 0.18 145);
  opacity: 0;
  transition: opacity 0.4s;
}
.phase-step-assign.is-saving .phase-assign-status { opacity: 1; }

/* ============================================================
   V12 — Phase bitácora composer + regress button
   ============================================================ */

.phase-bitacora-toggle {
  margin-top: 8px;
  width: auto;
}
.phase-bitacora-form {
  margin-top: 10px;
  padding: 12px;
  background: rgba(10, 10, 12, 0.6);
  border: 1px solid rgba(240, 165, 0, 0.22);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phase-bitacora-form .dash-input-area {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  background: rgba(6, 6, 8, 0.7);
}
.phase-bitacora-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* V13 — Rich client + usuario dashboards */
.client-kpi-grid, .usuario-kpi-grid { margin-bottom: 12px; }
.client-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(245, 242, 236, 0.08);
}
.client-section-head h2 {
  font-family: var(--display-font);
  font-size: 26px;
  margin: 0;
}

/* Pulso card */
.client-pulse {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(36, 28, 12, 0.4) 0%, transparent 60%),
    linear-gradient(168deg, rgba(14, 12, 10, 0.78) 0%, rgba(8, 8, 10, 0.86) 100%);
  border: 1px solid rgba(240, 165, 0, 0.22);
}
.client-pulse-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(240, 165, 0, 0.5);
  background: rgba(240, 165, 0, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--gold);
}
.client-pulse-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(242, 161, 30, 0.7);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.client-pulse-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(240, 165, 0, 0.85);
  text-transform: uppercase;
}
.client-pulse-text {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ink);
  margin: 8px 0 14px;
}
.client-pulse-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}

/* Rich card stats */
.client-card-rich .client-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(245, 242, 236, 0.08);
}
.client-card-stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.client-card-stats b {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 18px;
  color: var(--gold-light);
}
.client-card-stats .is-overdue b { color: oklch(72% 0.18 30); }
.client-card-cta {
  display: block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--gold);
  text-transform: uppercase;
  transition: gap 0.4s;
}
.client-card-rich:hover .client-card-cta { color: var(--gold-light); }

/* Usuario urgent list */
.usuario-urgent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.usuario-urgent-list li {
  display: grid;
  grid-template-columns: 50px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(245, 242, 236, 0.06);
  cursor: pointer;
  transition: padding-left 0.4s, background 0.25s;
}
.usuario-urgent-list li:hover {
  padding-left: 14px;
  background: rgba(240, 165, 0, 0.05);
}
.usuario-urgent-stage {
  font-family: var(--display-font);
  font-style: italic;
  font-size: 26px;
  color: var(--gold);
}
.usuario-urgent-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.usuario-urgent-info strong {
  font-family: var(--display-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.usuario-urgent-info span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.55);
  text-transform: uppercase;
}
.usuario-urgent-days {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(245, 242, 236, 0.75);
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  border: 1px solid rgba(245, 242, 236, 0.14);
}
.usuario-urgent-days.is-warn { color: var(--gold); border-color: rgba(240, 165, 0, 0.5); }
.usuario-urgent-days.is-overdue {
  color: oklch(72% 0.18 30);
  border-color: oklch(64% 0.18 30 / 0.5);
  background: oklch(64% 0.18 30 / 0.1);
}

@media (max-width: 720px) {
  .usuario-urgent-list li { grid-template-columns: 38px 1fr; row-gap: 6px; }
  .usuario-urgent-status, .usuario-urgent-days { grid-column: 2; justify-self: start; }
  .client-card-rich .client-card-stats { grid-template-columns: 1fr 1fr; }
}

/* V14 — Executive admin + workspace usuario + cliente comments */

/* Admin BarChart */
.bway-bars {
  display: flex; align-items: flex-end; gap: 12px;
  height: 180px; padding: 12px 4px 0;
}
.bway-bar {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.bway-bar-track {
  flex: 1; width: 100%; position: relative;
  background: rgba(245, 242, 236, 0.05);
  border-radius: 4px 4px 0 0;
  display: flex; align-items: flex-end;
}
.bway-bar-fill {
  width: 100%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px rgba(242, 161, 30, 0.4);
  transition: height 1s cubic-bezier(0.16,1,0.3,1);
  min-height: 2px;
}
.bway-bar-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}
.bway-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.2em;
  color: rgba(245, 242, 236, 0.55);
}

.admin-kpi-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.admin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) { .admin-grid-2 { grid-template-columns: 1fr; } }

/* Team load */
.team-load { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.team-load-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 8px; border-bottom: 1px solid rgba(245, 242, 236, 0.06);
  gap: 12px; flex-wrap: wrap;
}
.team-load-name { display: flex; align-items: center; gap: 10px; }
.team-load-name b {
  font-family: var(--display-font); font-size: 17px;
  letter-spacing: -0.01em; color: var(--ink); display: block;
}
.team-load-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.team-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.18em; padding: 4px 9px;
  border-radius: 100px; border: 1px solid; text-transform: uppercase;
}
.team-pill.is-progress { color: var(--gold); border-color: rgba(240,165,0,0.45); }
.team-pill.is-pending { color: rgba(245,242,236,0.65); border-color: rgba(245,242,236,0.18); }
.team-pill.is-done { color: oklch(74% 0.18 145); border-color: oklch(74% 0.18 145 / 0.45); }

/* Health grid */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.health-card {
  padding: 18px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(168deg, rgba(14,12,10,0.78), rgba(8,8,10,0.86));
  border: 1px solid rgba(245,242,236,0.08);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.health-card:hover { transform: translateY(-3px); border-color: rgba(240,165,0,0.4); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
.health-card.is-overdue { border-color: oklch(64% 0.18 30 / 0.6); }
.health-card.is-urgent  { border-color: rgba(240,165,0,0.55); }
.health-card.is-completed { border-color: oklch(74% 0.18 145 / 0.5); }
.health-head { display: flex; justify-content: space-between; align-items: center; }
.health-num { font-family: var(--display-font); font-style: italic; font-size: 20px; color: var(--gold); }
.health-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.24em; padding: 3px 8px;
  border-radius: 100px; border: 1px solid currentColor;
}
.health-card.is-overdue .health-status   { color: oklch(72% 0.18 30); }
.health-card.is-urgent .health-status    { color: var(--gold); }
.health-card.is-warning .health-status   { color: var(--gold-light); }
.health-card.is-on_track .health-status  { color: rgba(245,242,236,0.6); }
.health-card.is-completed .health-status { color: oklch(74% 0.18 145); }
.health-card h3 {
  font-family: var(--display-font); font-size: 19px;
  letter-spacing: -0.012em; margin: 0; line-height: 1.05;
}
.health-foot { display: flex; justify-content: space-between; align-items: baseline; }
.health-foot b {
  font-family: var(--display-font); font-style: italic;
  font-size: 24px; color: var(--gold-light);
}
.health-foot span { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(245,242,236,0.55); letter-spacing: 0.18em; }

/* Activity feed */
.activity-feed { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.activity-feed li {
  padding: 12px 14px; border-left: 2px solid var(--gold);
  background: rgba(240,165,0,0.04); border-radius: 0 8px 8px 0;
}
.activity-feed p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: rgba(245,242,236,0.85); }
.activity-meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; color: rgba(245,242,236,0.5);
  text-transform: uppercase;
}
.activity-meta b { color: var(--ink); font-family: 'Inter',sans-serif; letter-spacing: 0; }
.activity-meta time { margin-left: auto; }

/* Usuario focus card */
.usuario-focus {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(36,28,12,0.55), transparent 60%),
    linear-gradient(168deg, rgba(20,16,10,0.85), rgba(8,8,10,0.92));
  border: 1px solid rgba(240,165,0,0.4);
  box-shadow: 0 0 0 1px rgba(240,165,0,0.18) inset, 0 30px 70px -30px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 12px;
}
.usuario-focus-tag {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 5px 12px; border-radius: 100px;
  background: rgba(240,165,0,0.1); border: 1px solid rgba(240,165,0,0.5);
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.28em; color: var(--gold);
}
.usuario-focus-title {
  font-family: var(--display-font); font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.018em; margin: 0; line-height: 1.05;
}
.usuario-focus-title i {
  font-style: italic;
  background: linear-gradient(95deg, var(--gold-light), #FFEDC2, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.usuario-focus-project {
  font-family: var(--display-font); font-style: italic;
  font-size: 17px; color: rgba(245,242,236,0.7); margin: 0;
}
.usuario-focus-project b { color: var(--gold-light); }
.usuario-focus-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.2em; color: rgba(245,242,236,0.55); text-transform: uppercase;
}
.usuario-focus-meta .is-warn { color: var(--gold); }
.usuario-focus-meta .is-overdue { color: oklch(72% 0.18 30); }
.usuario-focus-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* V15 — Auth error banner: more visible + shake animation */
.auth-card .dash-banner.is-error {
  background: linear-gradient(168deg, rgba(180, 30, 30, 0.18), rgba(120, 20, 20, 0.22));
  border: 1px solid rgba(255, 100, 80, 0.5);
  color: #ffb3a5;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  padding: 14px 16px;
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
  box-shadow: 0 8px 24px -10px rgba(255, 80, 60, 0.4);
  animation: authErrorShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.auth-card .dash-banner.is-error::before {
  content: "⚠";
  font-size: 18px;
  line-height: 1;
  color: #ff9c8a;
  flex-shrink: 0;
  margin-top: 1px;
}
@keyframes authErrorShake {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card .dash-banner.is-error { animation: none; }
}

/* ============================================================
   V16 — ADMIN BENTO GRID (Apple/Notion bento aesthetic)
   ============================================================ */

.bento-page { padding-bottom: clamp(40px, 6vw, 80px); }

.bento-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "hero hero kpi-a kpi-b"
    "hero hero kpi-c kpi-d"
    "team team activity activity"
    "projects projects projects projects";
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "hero hero"
      "kpi-a kpi-b"
      "kpi-c kpi-d"
      "team team"
      "activity activity"
      "projects projects";
  }
}
@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "kpi-a"
      "kpi-b"
      "kpi-c"
      "kpi-d"
      "team"
      "activity"
      "projects";
  }
}

.bento-cell {
  position: relative;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(214,178,93,0.07), transparent 55%),
    linear-gradient(168deg, rgba(28,24,22,0.92), rgba(16,14,13,0.96));
  border: 1px solid rgba(214,178,93,0.16);
  border-radius: 22px;
  padding: 22px 22px 20px;
  overflow: hidden;
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.bento-cell::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg, rgba(214,178,93,0.32), rgba(214,178,93,0) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.bento-cell:hover { border-color: rgba(214,178,93,0.34); }
.bento-cell[role="button"] { cursor: pointer; }
.bento-cell[role="button"]:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -22px rgba(214,178,93,0.45); }

.bento-hero      { grid-area: hero; min-height: 360px; }
.bento-hero .bento-chart { padding: 6px 6px 0; overflow: visible; }
.bento-hero .bway-bars-3d { overflow: visible; }
.bento-kpi:nth-of-type(2) { grid-area: kpi-a; }
.bento-kpi:nth-of-type(3) { grid-area: kpi-b; }
.bento-kpi:nth-of-type(4) { grid-area: kpi-c; }
.bento-kpi:nth-of-type(5) { grid-area: kpi-d; }
.bento-team      { grid-area: team; min-height: 280px; }
.bento-activity  { grid-area: activity; min-height: 280px; }
.bento-projects  { grid-area: projects; }

.bento-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.bento-kicker {
  display: block;
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(214,178,93,0.78);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.bento-head h2 {
  font: 500 22px/1.15 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.01em;
  margin: 0;
  color: #f2ede2;
}
.bento-link {
  font: 500 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: rgba(214,178,93,0.85);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid rgba(214,178,93,0.25);
  border-radius: 999px;
  transition: background 200ms ease, color 200ms ease;
}
.bento-link:hover { background: rgba(214,178,93,0.12); color: #fff5dc; }

.bento-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bento-chip {
  font: 500 11px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,80,80,0.08);
  border: 1px solid rgba(255,120,100,0.32);
  color: #ffc6b6;
}
.bento-chip b { color: #ffe2d6; margin-right: 4px; }
.bento-chip.is-good {
  background: rgba(120,200,140,0.08);
  border-color: rgba(140,210,160,0.32);
  color: #c6e8cf;
}
.bento-chip.is-good b { color: #def0d8; }

.bento-chart {
  height: calc(100% - 64px);
  min-height: 230px;
  display: flex; align-items: flex-end;
}
.bento-chart .bway-bars {
  height: 100%; width: 100%;
  align-items: flex-end;
}

/* KPI cells — vertical typographic layout */
.bento-kpi {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 168px;
  padding: 22px 22px 20px;
}
.bento-kpi-label {
  font: 600 10px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.62);
  text-transform: uppercase;
}
.bento-kpi-val {
  font: 500 56px/1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.03em;
  color: #f7efdf;
  margin-top: 12px;
  display: block;
}
.bento-kpi-hint {
  font: 400 12px/1 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.5);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
.bento-kpi.is-accent {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(214,178,93,0.22), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.92), rgba(28,22,14,0.96));
  border-color: rgba(214,178,93,0.42);
}
.bento-kpi.is-accent .bento-kpi-val { color: #f4d68a; }
.bento-kpi.is-accent::before {
  background: linear-gradient(155deg, rgba(214,178,93,0.6), rgba(214,178,93,0.08) 60%);
}
.bento-kpi.is-warn .bento-kpi-val { color: #ff9c8a; }
.bento-kpi.is-warn {
  border-color: rgba(255,120,100,0.32);
}

/* Team & activity cells reuse internal layouts, just tweak spacing */
.bento-team .team-load { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.bento-activity .activity-feed { max-height: 320px; overflow-y: auto; padding-right: 6px; }
.bento-activity .activity-feed::-webkit-scrollbar { width: 4px; }
.bento-activity .activity-feed::-webkit-scrollbar-thumb { background: rgba(214,178,93,0.25); border-radius: 4px; }

.bento-projects .health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

/* ============================================================
   V17 — PROJECT BENTO GRID (admin /projects)
   ============================================================ */

.proj-bento-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  margin-top: 28px;
}

.proj-bento-card {
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(214,178,93,0.07), transparent 55%),
    linear-gradient(168deg, rgba(28,24,22,0.92), rgba(16,14,13,0.96));
  border: 1px solid rgba(214,178,93,0.16);
  border-radius: 22px;
  padding: 22px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.proj-bento-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg, rgba(214,178,93,0.32), rgba(214,178,93,0) 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.proj-bento-card:hover {
  border-color: rgba(214,178,93,0.42);
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -28px rgba(214,178,93,0.5);
}

/* Hero card spans 2×2 — top-left */
.proj-bento-card.is-hero {
  grid-column: span 2;
  grid-row: span 2;
  padding: 32px;
}
.proj-bento-card.is-hero .proj-bento-title {
  font-size: clamp(28px, 2.2vw, 38px);
}
.proj-bento-card.is-hero::before {
  background: linear-gradient(155deg, rgba(214,178,93,0.5), rgba(214,178,93,0.04) 60%);
}

/* Wide cards span 2 columns */
.proj-bento-card.is-wide { grid-column: span 2; }

/* Status accents */
.proj-bento-card.is-overdue   { border-color: rgba(255,90,80,0.35); }
.proj-bento-card.is-overdue::before { background: linear-gradient(155deg, rgba(255,120,100,0.5), rgba(255,120,100,0) 60%); }
.proj-bento-card.is-urgent    { border-color: rgba(255,170,80,0.32); }
.proj-bento-card.is-warning   { border-color: rgba(255,210,120,0.26); }
.proj-bento-card.is-completed { border-color: rgba(140,210,160,0.32); opacity: 0.86; }

@media (max-width: 1100px) {
  .proj-bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proj-bento-card.is-hero { grid-column: span 2; grid-row: auto; padding: 26px; }
  .proj-bento-card.is-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .proj-bento-grid { grid-template-columns: 1fr; }
  .proj-bento-card,
  .proj-bento-card.is-hero,
  .proj-bento-card.is-wide { grid-column: auto; grid-row: auto; }
}

.proj-bento-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.proj-bento-num {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(214,178,93,0.78);
}
.proj-bento-status {
  font: 600 9px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(214,178,93,0.12);
  color: rgba(232,224,205,0.82);
  border: 1px solid rgba(214,178,93,0.22);
}
.proj-bento-card.is-overdue   .proj-bento-status { background: rgba(255,90,80,0.16);  color: #ffc6b6; border-color: rgba(255,120,100,0.4); }
.proj-bento-card.is-urgent    .proj-bento-status { background: rgba(255,170,80,0.14);  color: #ffd9a5; border-color: rgba(255,200,120,0.4); }
.proj-bento-card.is-warning   .proj-bento-status { background: rgba(255,220,140,0.12); color: #ffe8b8; }
.proj-bento-card.is-completed .proj-bento-status { background: rgba(140,210,160,0.14); color: #c6e8cf; }

.proj-bento-body { flex: 1 1 auto; margin-bottom: 18px; }
.proj-bento-title {
  font: 500 22px/1.18 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.01em;
  margin: 0 0 6px 0;
  color: #f4ecd9;
}
.proj-bento-client {
  font: 500 11px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: rgba(232,224,205,0.52);
  text-transform: uppercase;
}

.proj-bento-track {
  margin: 6px 0 18px;
  padding: 14px;
  background: rgba(0,0,0,0.32);
  border-radius: 14px;
  border: 1px solid rgba(214,178,93,0.08);
}

.proj-bento-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-top: auto;
}
.proj-bento-team {
  display: flex; align-items: center;
}
.proj-bento-team-empty {
  font: 400 11px/1 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.4);
  letter-spacing: 0.02em;
  font-style: italic;
}
.proj-bento-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(140deg, #3a2d1c, #1e1812);
  border: 2px solid #0f0d0b;
  color: #f4d68a;
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0;
  margin-left: -8px;
  transition: transform 200ms ease;
}
.proj-bento-avatar:first-child { margin-left: 0; }
.proj-bento-avatar.is-rest {
  background: rgba(214,178,93,0.12);
  color: rgba(232,224,205,0.7);
}
.proj-bento-card:hover .proj-bento-avatar { transform: translateY(-1px); }

.proj-bento-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
}
.proj-bento-meta b {
  font: 500 22px/1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
}
.proj-bento-meta span {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.proj-bento-card.is-overdue .proj-bento-meta span { color: #ffb3a5; }
.proj-bento-card.is-urgent  .proj-bento-meta span { color: #ffd0a0; }

/* ============================================================
   V18 — PROJECT DETAIL · NO-SCROLL TRI-PANE DASHBOARD
   ============================================================ */

.proj-detail-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
  max-width: 1480px;
  padding-bottom: 0;
}
/* Shrink shell padding for project detail to maximize usable area */
.dash-main:has(> .proj-detail-page) { padding: 24px clamp(20px, 3vw, 36px) 24px; }

.proj-detail-page .dash-crumb { margin-bottom: 8px; }

.proj-detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(214,178,93,0.12);
  margin-bottom: 16px;
}
.proj-detail-head-left { flex: 1 1 auto; min-width: 0; }
.proj-detail-head-left h1 {
  font: 500 clamp(26px, 2.4vw, 38px)/1.1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
  margin: 8px 0 6px;
}
.proj-detail-desc {
  font: 400 13px/1.5 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.6);
  max-width: 760px;
  margin: 0;
}
.proj-detail-head-right {
  display: flex; align-items: center; gap: 8px;
  padding-top: 6px;
}

/* Tri-pane grid — fills remaining height */
.proj-detail-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  grid-template-areas: "summary workspace rail";
  gap: 16px;
}

.proj-detail-summary  { grid-area: summary; display: flex; flex-direction: column; gap: 18px; padding: 22px; }
.proj-detail-workspace { grid-area: workspace; padding: 26px; overflow-y: auto; }
.proj-detail-rail {
  grid-area: rail;
  display: flex; flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.proj-detail-rail > .bento-cell { padding: 18px; }
.proj-rail-card { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.proj-activity-card { flex: 0 0 auto; max-height: 240px; overflow-y: auto; }

@media (max-width: 1180px) {
  .proj-detail-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "summary rail"
      "workspace workspace";
  }
  .proj-detail-workspace { max-height: none; }
}
@media (max-width: 760px) {
  .proj-detail-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "summary" "rail" "workspace";
  }
}

/* === LEFT summary === */
.proj-summary-ring {
  display: flex; justify-content: center; align-items: center;
  padding: 6px 0 4px;
}
.proj-summary-meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid rgba(214,178,93,0.12);
  padding-top: 14px;
}
.proj-summary-meta li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.proj-summary-meta li span {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: rgba(232,224,205,0.5);
  text-transform: uppercase;
}
.proj-summary-meta li b {
  font: 500 13px/1 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
  letter-spacing: -0.005em;
}
.proj-summary-meta li.is-overdue b { color: #ffb3a5; }
.proj-summary-meta li.is-urgent  b { color: #ffd0a0; }

.proj-summary-pulse {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(214,178,93,0.12);
}
.proj-summary-pulse-row {
  display: flex; align-items: baseline; gap: 8px;
}
.proj-summary-pulse-row b {
  font: 500 22px/1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
  min-width: 32px;
}
.proj-summary-pulse-row span {
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.proj-summary-pulse-row.is-warn b { color: #ff9c8a; }
.proj-summary-pulse-row.is-warn span { color: #ffb3a5; }

/* === CENTER workspace === */
.proj-workspace-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(214,178,93,0.12);
  margin-bottom: 16px;
}
.proj-workspace-head h2 {
  font: 500 26px/1.15 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.015em;
  color: #f7efdf;
  margin: 0;
  flex: 1 1 auto;
}
.proj-workspace-head .bento-kicker {
  flex: 0 0 100%;
  margin-bottom: 0;
}
.proj-workspace-desc {
  font: 400 14px/1.55 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.7);
  margin: 0 0 16px;
}
.proj-workspace-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.32);
  border-radius: 12px;
  border: 1px solid rgba(214,178,93,0.1);
}
.proj-workspace-meta div { display: flex; flex-direction: column; gap: 4px; }
.proj-workspace-meta dt {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: rgba(232,224,205,0.5);
  text-transform: uppercase;
  margin: 0;
}
.proj-workspace-meta dd {
  font: 500 13px/1.3 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
  margin: 0;
}
.proj-workspace-notes {
  font: 400 13px/1.5 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.7);
  background: rgba(214,178,93,0.06);
  border-left: 2px solid rgba(214,178,93,0.4);
  padding: 10px 14px;
  border-radius: 4px;
  margin: 0 0 16px;
}
.proj-workspace-assign {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.proj-workspace-assign label {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.proj-workspace-assign select {
  flex: 1 1 auto;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(214,178,93,0.22);
  border-radius: 8px;
  color: #f4ecd9;
  font: 500 13px/1 "Inter", system-ui, sans-serif;
  padding: 9px 12px;
  transition: border-color 200ms ease;
}
.proj-workspace-assign select:focus {
  outline: none;
  border-color: rgba(214,178,93,0.55);
}
.proj-workspace-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding-top: 12px;
  margin-bottom: 16px;
  border-top: 1px solid rgba(214,178,93,0.08);
}

/* === RIGHT rail === */
.proj-rail-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  position: relative;
}
.proj-rail-item {
  position: relative;
  display: flex; align-items: flex-start;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.proj-rail-item:hover { background: rgba(214,178,93,0.06); }
.proj-rail-item.is-active {
  background: rgba(214,178,93,0.12);
  box-shadow: inset 2px 0 0 #d6b25d;
}
.proj-rail-dot {
  flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(214,178,93,0.2);
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  color: rgba(232,224,205,0.6);
  position: relative;
  z-index: 2;
}
.proj-rail-item.is-done .proj-rail-dot {
  background: #d6b25d; color: #1a1410; border-color: #d6b25d;
}
.proj-rail-item.is-in_progress .proj-rail-dot {
  background: rgba(214,178,93,0.22);
  border-color: #d6b25d;
  color: #f4d68a;
  box-shadow: 0 0 0 4px rgba(214,178,93,0.12);
  animation: railPulse 2s ease-in-out infinite;
}
.proj-rail-item.is-blocked .proj-rail-dot {
  background: rgba(255,90,80,0.15); border-color: rgba(255,90,80,0.5); color: #ffb3a5;
}
@keyframes railPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(214,178,93,0.12); }
  50%      { box-shadow: 0 0 0 8px rgba(214,178,93,0.05); }
}
.proj-rail-body { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.proj-rail-body b {
  display: block;
  font: 500 13px/1.2 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
  margin-bottom: 2px;
}
.proj-rail-body span {
  font: 400 11px/1.3 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.5);
}
.proj-rail-line {
  position: absolute;
  left: 22px; top: 38px;
  width: 1px; height: 22px;
  background: linear-gradient(180deg, rgba(214,178,93,0.3), rgba(214,178,93,0.05));
  z-index: 1;
}
.proj-rail-item.is-done + .proj-rail-item .proj-rail-line,
.proj-rail-item.is-done .proj-rail-line { background: rgba(214,178,93,0.6); }

/* ============================================================
   V19 — 3D ANIMATED CHARTS
   Compositor-friendly: transform + opacity + filter only.
   ============================================================ */

/* === BarChart 3D isometric stage === */
.bway-bars-3d {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  perspective: 1100px;
  perspective-origin: 50% 70%;
}
.bway-bars-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-6deg);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bway-bars-3d:hover .bway-bars-stage {
  transform: rotateX(8deg) rotateY(-2deg);
}
.bway-bars-floor {
  position: absolute;
  left: 0; right: 0; bottom: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,178,93,0.35), transparent);
  transform: translateZ(-1px) rotateX(90deg);
  transform-origin: 50% 100%;
  pointer-events: none;
}
.bway-bars-floor::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 50% 0%, rgba(214,178,93,0.18), transparent 70%);
  filter: blur(8px);
  transform: scaleY(2);
}

.bway-bars {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: flex-end;
  gap: clamp(8px, 1.8vw, 18px);
  padding: 8px 14px 36px;
  transform-style: preserve-3d;
}

.bway-bar {
  position: relative;
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.bway-bar.is-hover {
  transform: translateZ(28px);
  z-index: 5;
}

.bway-bar-track {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  display: flex; align-items: flex-end;
  transform-style: preserve-3d;
}

.bway-bar-fill {
  position: relative;
  width: 100%;
  min-height: 12px;
  border-radius: 6px 6px 1px 1px;
  background: linear-gradient(180deg,
    #f4d68a 0%,
    #d6b25d 38%,
    #b08c3f 78%,
    #6d531e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.45),
    inset 0 -8px 14px rgba(80,55,18,0.45),
    0 6px 14px -6px rgba(0,0,0,0.6);
  transform-style: preserve-3d;
  transition: height 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}
.bway-bar-fill::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  border-radius: 6px 6px 0 0;
  pointer-events: none;
}

/* 3D side face — gives the bar depth */
.bway-bar-face.is-side {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 8px;
  background: linear-gradient(180deg, #8a6a2e, #3b2c14);
  transform-origin: 100% 50%;
  transform: translateX(8px) rotateY(-90deg);
  border-radius: 0 4px 0 0;
  box-shadow: inset 1px 0 0 rgba(255,200,120,0.18);
}
/* Top face — small highlight wedge */
.bway-bar-face.is-top {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  background: linear-gradient(90deg, #f4d68a, #ffdd9a 60%, #c89b48);
  transform: translateY(-8px) rotateX(90deg);
  transform-origin: 50% 100%;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 18px rgba(244,214,138,0.45);
}
/* Animated shine that sweeps across the bar */
.bway-bar-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(255,250,220,0.35) 50%,
    transparent 62%);
  background-size: 220% 100%;
  background-position: 130% 0;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: 0;
}
.bway-bar.is-hover .bway-bar-shine,
.bway-bars-3d:hover .bway-bar-shine {
  animation: barShine 1.4s ease-in-out;
}
@keyframes barShine {
  0%   { background-position: 130% 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}

.bway-bar-val {
  position: absolute;
  top: 4px;
  font: 500 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
  color: rgba(232,224,205,0.55);
  transition: color 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.bway-bar.is-hover .bway-bar-val {
  color: #f4d68a;
  transform: scale(1.12);
}
.bway-bar-label {
  position: absolute;
  bottom: -22px;
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: rgba(232,224,205,0.4);
}

.bway-bar-tip {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translate(-50%, 0) translateZ(40px);
  background: linear-gradient(168deg, rgba(48,38,22,0.96), rgba(20,16,10,0.96));
  border: 1px solid rgba(214,178,93,0.42);
  border-radius: 10px;
  padding: 8px 12px;
  max-width: 180px;
  white-space: normal;
  text-align: center;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(214,178,93,0.1);
  z-index: 10;
  animation: barTipIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Edge-aware positioning so tip never clips card */
.bway-bar:first-child .bway-bar-tip,
.bway-bar:nth-child(2) .bway-bar-tip {
  left: 0;
  transform: translate(0, 0) translateZ(40px);
}
.bway-bar:last-child .bway-bar-tip,
.bway-bar:nth-last-child(2) .bway-bar-tip {
  left: auto;
  right: 0;
  transform: translate(0, 0) translateZ(40px);
}
.bway-bar:first-child .bway-bar-tip { animation-name: barTipInL; }
.bway-bar:last-child  .bway-bar-tip { animation-name: barTipInR; }
@keyframes barTipInL {
  from { opacity: 0; transform: translate(-4px, -6px) translateZ(40px); }
  to   { opacity: 1; transform: translate(0, 0) translateZ(40px); }
}
@keyframes barTipInR {
  from { opacity: 0; transform: translate(4px, -6px) translateZ(40px); }
  to   { opacity: 1; transform: translate(0, 0) translateZ(40px); }
}
.bway-bar-tip b {
  display: block;
  font: 500 18px/1 "Fraunces", "Cormorant Garamond", serif;
  color: #f4d68a;
  letter-spacing: -0.01em;
}
.bway-bar-tip span {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: rgba(232,224,205,0.6);
  text-transform: uppercase;
}
@keyframes barTipIn {
  from { opacity: 0; transform: translate(-50%, -6px) translateZ(40px); }
  to   { opacity: 1; transform: translate(-50%, 0) translateZ(40px); }
}

@media (prefers-reduced-motion: reduce) {
  .bway-bars-stage,
  .bway-bar,
  .bway-bar-fill { transition: none !important; }
  .bway-bars-stage { transform: rotateX(8deg) rotateY(-3deg); }
  .bway-bar-shine { display: none; }
}

/* === ProgressRing 3D with aura + gradient + animation === */
.progress-ring.is-3d {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.progress-ring.is-3d:hover {
  transform: scale(1.04);
}

/* Rotating conic aura behind the ring */
.progress-ring-aura {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(214,178,93,0) 0deg,
    rgba(244,214,138,0.32) 90deg,
    rgba(214,178,93,0.12) 180deg,
    rgba(244,214,138,0.28) 270deg,
    rgba(214,178,93,0) 360deg);
  filter: blur(14px);
  animation: ringAuraSpin 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.progress-ring.is-3d:hover .progress-ring-aura {
  animation-duration: 3.2s;
}
@keyframes ringAuraSpin {
  to { transform: rotate(360deg); }
}

.progress-ring-svg {
  position: relative;
  z-index: 1;
  overflow: visible;
}
.progress-ring-track {
  fill: none;
  stroke: rgba(214,178,93,0.12);
  stroke-width: 8;
}
.progress-ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: stroke-dashoffset;
}

.progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.progress-ring-text b {
  font: 500 clamp(28px, 4vw, 44px)/1 "Fraunces", "Cormorant Garamond", serif;
  color: #f7efdf;
  letter-spacing: -0.03em;
  text-shadow: 0 0 18px rgba(244,214,138,0.35);
}
.progress-ring-text span {
  font: 500 12px/1 "Space Mono", ui-monospace, monospace;
  color: rgba(244,214,138,0.7);
  letter-spacing: 0.1em;
  margin-top: 2px;
}
.progress-ring-text em {
  font: 500 9px/1 "Space Mono", ui-monospace, monospace;
  color: rgba(232,224,205,0.5);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-style: normal;
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .progress-ring-aura { animation: none; opacity: 0.5; }
  .progress-ring-fill { transition: none; }
}

/* ============================================================
   V25 — STAGE ATTACHMENTS (composer + previews)
   ============================================================ */

/* === Composer === */
.bw-composer-row {
  display: flex; gap: 10px;
  margin-top: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.bw-composer-row .dash-input { flex: 1 1 220px; }
.bw-composer-label { flex: 0 1 200px; }

.bw-composer-file {
  background: rgba(214,178,93,0.04);
  border: 1px dashed rgba(214,178,93,0.22);
  border-radius: 10px;
  padding: 10px 12px;
}
.bw-composer-fileinfo {
  display: inline-flex; align-items: baseline; gap: 8px;
  font: 500 12px/1.2 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.78);
}
.bw-composer-fileinfo b { color: #f4ecd9; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-composer-fileinfo span {
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  color: rgba(232,224,205,0.55);
}
.bw-composer-remove {
  background: transparent; border: none;
  color: rgba(232,224,205,0.6);
  font-size: 16px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
  transition: color 200ms ease, background 200ms ease;
}
.bw-composer-remove:hover { color: #ffb3a5; background: rgba(255,90,80,0.1); }

/* === Attachment displays === */
.bw-attachments {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px;
}

.bw-attach-loading {
  font: 400 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: rgba(232,224,205,0.5);
  padding: 12px;
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
  border: 1px dashed rgba(214,178,93,0.18);
}

/* External link pill */
.bw-attach-link {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(168deg, rgba(48,38,22,0.85), rgba(20,16,10,0.95));
  border: 1px solid rgba(214,178,93,0.28);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  width: fit-content;
  max-width: 100%;
}
.bw-attach-link:hover {
  transform: translateY(-1px);
  border-color: rgba(214,178,93,0.6);
  box-shadow: 0 8px 22px -10px rgba(214,178,93,0.4);
}
.bw-attach-link-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(214,178,93,0.16);
  color: #f4d68a;
  font: 600 13px/1 "Inter", system-ui, sans-serif;
  flex-shrink: 0;
}
.bw-attach-link-label {
  font: 600 13px/1.2 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
  letter-spacing: -0.005em;
}
.bw-attach-link-domain {
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: rgba(232,224,205,0.5);
  text-transform: lowercase;
  padding-left: 8px;
  border-left: 1px solid rgba(214,178,93,0.18);
  margin-left: 2px;
}

/* Per-provider tint */
.bw-attach-link.is-frameio { border-color: rgba(110,200,170,0.42); }
.bw-attach-link.is-frameio .bw-attach-link-icon { background: rgba(110,200,170,0.16); color: #8dd9bd; }
.bw-attach-link.is-vimeo   { border-color: rgba(125,180,255,0.38); }
.bw-attach-link.is-vimeo   .bw-attach-link-icon { background: rgba(125,180,255,0.14); color: #99c4ff; }
.bw-attach-link.is-youtube { border-color: rgba(255,120,100,0.38); }
.bw-attach-link.is-youtube .bw-attach-link-icon { background: rgba(255,120,100,0.14); color: #ff9c8a; }
.bw-attach-link.is-drive   { border-color: rgba(255,200,90,0.38); }
.bw-attach-link.is-drive   .bw-attach-link-icon { background: rgba(255,200,90,0.14); color: #ffd76b; }

/* Inline media (video + image) */
.bw-attach-media {
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(214,178,93,0.18);
  border-radius: 12px;
  overflow: hidden;
  max-width: 480px;
}
.bw-attach-media video,
.bw-attach-media img {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  background: #000;
}
.bw-attach-media.is-image img {
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 240ms ease;
}
.bw-attach-media.is-image:hover img { transform: scale(1.015); }

.bw-attach-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(214,178,93,0.1);
  background: rgba(214,178,93,0.04);
}
.bw-attach-meta b {
  font: 500 12px/1.3 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-attach-meta span {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: rgba(232,224,205,0.5);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Document download link */
.bw-attach-doc {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(168deg, rgba(28,24,22,0.92), rgba(16,14,13,0.96));
  border: 1px solid rgba(214,178,93,0.22);
  transition: border-color 220ms ease, transform 220ms ease;
  width: fit-content;
  max-width: 100%;
}
.bw-attach-doc:hover {
  border-color: rgba(214,178,93,0.5);
  transform: translateY(-1px);
}
.bw-attach-doc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: linear-gradient(168deg, #d6b25d, #8a6a2e);
  color: #15110d;
  font: 700 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.bw-attach-doc-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bw-attach-doc-body b {
  font: 500 13px/1.2 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-attach-doc-body span {
  font: 400 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: rgba(232,224,205,0.55);
}

/* === Per-stage feed inside workspace === */
.proj-workspace-feed {
  margin: 16px 0;
  padding-top: 14px;
  border-top: 1px solid rgba(214,178,93,0.12);
}
.proj-workspace-feed-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.proj-workspace-feed-count {
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: rgba(232,224,205,0.5);
  text-transform: uppercase;
}
.proj-workspace-feed-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.proj-feed-item {
  padding: 14px 16px;
  background: rgba(0,0,0,0.28);
  border-radius: 12px;
  border: 1px solid rgba(214,178,93,0.1);
}
.proj-feed-meta {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.proj-feed-meta b {
  font: 500 13px/1 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
}
.proj-feed-meta time {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: rgba(232,224,205,0.45);
  text-transform: uppercase;
  margin-left: auto;
}
.proj-feed-body {
  font: 400 13px/1.55 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.78);
  margin: 0 0 10px;
}

/* ============================================================
   V27 — FEED ITEM EDIT / DELETE
   ============================================================ */

.proj-feed-item { position: relative; }

.proj-feed-actions {
  display: flex; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(214,178,93,0.12);
}
.proj-feed-act {
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid rgba(214,178,93,0.22);
  color: rgba(232,224,205,0.72);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.proj-feed-act:hover {
  border-color: rgba(214,178,93,0.55);
  background: rgba(214,178,93,0.08);
  color: #f4d68a;
}
.proj-feed-act.is-danger {
  border-color: rgba(255,120,100,0.28);
  color: rgba(255,180,165,0.78);
}
.proj-feed-act.is-danger:hover {
  border-color: rgba(255,120,100,0.6);
  background: rgba(255,90,80,0.1);
  color: #ffb3a5;
}
.proj-feed-act:disabled { opacity: 0.5; cursor: not-allowed; }

.proj-feed-item.is-editing {
  background: rgba(214,178,93,0.04);
  border-color: rgba(214,178,93,0.32);
}
.proj-feed-edit {
  display: flex; flex-direction: column; gap: 10px;
}
.proj-feed-edit-note {
  font: 400 11px/1.4 "Space Mono", ui-monospace, monospace;
  color: rgba(232,224,205,0.5);
  font-style: italic;
  padding: 8px 10px;
  background: rgba(255,200,90,0.06);
  border-left: 2px solid rgba(255,200,90,0.4);
  border-radius: 4px;
}

/* ============================================================
   V28 — CINEMATIC POLISH
   Futurist HUD + film grain + viewfinder corners + reveals
   ============================================================ */

/* dash-main becomes the stage */
.dash-main {
  position: relative;
}

/* Film grain layer — animated, subtle, motion-safe */
.dash-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,0.5) 0,
      rgba(255,255,255,0.5) 0.5px,
      transparent 1px,
      transparent 2px
    );
  background-size: 3px 3px;
  animation: dashGrain 1.2s steps(8) infinite;
  will-change: background-position;
}
@keyframes dashGrain {
  0%   { background-position: 0 0; }
  25%  { background-position: -2px 1px; }
  50%  { background-position: 2px -1px; }
  75%  { background-position: -1px -2px; }
  100% { background-position: 0 0; }
}

/* Vignette around viewport edges */
.dash-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 59;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,0.5) 100%),
    radial-gradient(120% 80% at 50% 100%, transparent 60%, rgba(0,0,0,0.6) 100%);
}

/* === Cinema HUD strip === */
.cinema-hud {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px;
  padding: 8px 18px;
  margin: -32px -52px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.78));
  border-bottom: 1px solid rgba(214,178,93,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cinema-hud-left,
.cinema-hud-right {
  display: flex; align-items: center; gap: 14px;
}
.cinema-hud-rec {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: #ff5a4a;
  padding: 4px 8px;
  border: 1px solid rgba(255,90,74,0.5);
  border-radius: 4px;
  background: rgba(255,90,74,0.06);
}
.cinema-hud-rec i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 8px #ff5a4a;
  animation: recBlink 1s ease-in-out infinite;
}
@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.cinema-hud-tc {
  font: 600 13px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: #f4d68a;
  text-shadow: 0 0 8px rgba(244,214,138,0.4);
  min-width: 110px;
}
.cinema-hud-scene,
.cinema-hud-stat {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.cinema-hud-divider {
  width: 1px; height: 14px;
  background: rgba(214,178,93,0.22);
}

@media (max-width: 760px) {
  .cinema-hud { padding: 6px 12px; flex-wrap: wrap; gap: 8px; }
  .cinema-hud-right .cinema-hud-stat { display: none; }
  .cinema-hud-right .cinema-hud-divider { display: none; }
}
@media (max-width: 1100px) {
  .cinema-hud { margin: -24px -32px 20px; }
}

/* === Entrance: bento cells reveal staggered === */
@keyframes cellReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.bento-grid > .bento-cell,
.proj-bento-grid > .proj-bento-card,
.proj-detail-grid > * {
  animation: cellReveal 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bento-grid > .bento-cell:nth-child(1) { animation-delay: 30ms; }
.bento-grid > .bento-cell:nth-child(2) { animation-delay: 80ms; }
.bento-grid > .bento-cell:nth-child(3) { animation-delay: 130ms; }
.bento-grid > .bento-cell:nth-child(4) { animation-delay: 180ms; }
.bento-grid > .bento-cell:nth-child(5) { animation-delay: 230ms; }
.bento-grid > .bento-cell:nth-child(6) { animation-delay: 280ms; }
.bento-grid > .bento-cell:nth-child(7) { animation-delay: 330ms; }
.bento-grid > .bento-cell:nth-child(8) { animation-delay: 380ms; }

.proj-bento-grid > .proj-bento-card:nth-child(1) { animation-delay: 40ms; }
.proj-bento-grid > .proj-bento-card:nth-child(2) { animation-delay: 90ms; }
.proj-bento-grid > .proj-bento-card:nth-child(3) { animation-delay: 140ms; }
.proj-bento-grid > .proj-bento-card:nth-child(4) { animation-delay: 190ms; }
.proj-bento-grid > .proj-bento-card:nth-child(5) { animation-delay: 240ms; }

/* === Viewfinder corners on hover (bento + proj cards) === */
.bento-cell,
.proj-bento-card,
.dash-card {
  position: relative;
}
.bento-cell::after,
.proj-bento-card::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border-radius: 14px;
  background:
    linear-gradient(to right, rgba(244,214,138,0.8) 0, rgba(244,214,138,0.8) 14px, transparent 14px, transparent calc(100% - 14px), rgba(244,214,138,0.8) calc(100% - 14px), rgba(244,214,138,0.8) 100%) top    / 100% 1px no-repeat,
    linear-gradient(to right, rgba(244,214,138,0.8) 0, rgba(244,214,138,0.8) 14px, transparent 14px, transparent calc(100% - 14px), rgba(244,214,138,0.8) calc(100% - 14px), rgba(244,214,138,0.8) 100%) bottom / 100% 1px no-repeat,
    linear-gradient(to bottom, rgba(244,214,138,0.8) 0, rgba(244,214,138,0.8) 14px, transparent 14px, transparent calc(100% - 14px), rgba(244,214,138,0.8) calc(100% - 14px), rgba(244,214,138,0.8) 100%) left   / 1px 100% no-repeat,
    linear-gradient(to bottom, rgba(244,214,138,0.8) 0, rgba(244,214,138,0.8) 14px, transparent 14px, transparent calc(100% - 14px), rgba(244,214,138,0.8) calc(100% - 14px), rgba(244,214,138,0.8) 100%) right  / 1px 100% no-repeat;
  opacity: 0;
  transition: opacity 240ms ease, inset 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-cell:hover::after,
.proj-bento-card:hover::after {
  opacity: 1;
  inset: 4px;
}

/* === KPI hero glow upgrade === */
.bento-kpi-val,
.kpi-card b {
  text-shadow: 0 0 24px rgba(244,214,138,0.25);
}
.bento-kpi.is-accent .bento-kpi-val {
  text-shadow: 0 0 28px rgba(244,214,138,0.55);
}
.bento-kpi.is-warn .bento-kpi-val {
  text-shadow: 0 0 22px rgba(255,90,74,0.35);
}

/* === Section scan line — subtle light pulse left edge === */
.bento-cell::before,
.proj-bento-card::before {
  z-index: 1;
}

/* === Sidebar nav: animated active dot === */
.dash-side-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 60%;
  background: linear-gradient(180deg, #f4d68a, #d6b25d);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(244,214,138,0.6);
}
.dash-side-nav a {
  position: relative;
}

/* === Reduced motion respect === */
@media (prefers-reduced-motion: reduce) {
  .dash-grain { animation: none; opacity: 0.018; }
  .cinema-hud-rec i { animation: none; }
  .bento-grid > .bento-cell,
  .proj-bento-grid > .proj-bento-card,
  .proj-detail-grid > * {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ============================================================
   V29 — GLASS + WARM GOLD ATMOSPHERE
   Brighter base, translucent surfaces, real backdrop blur.
   ============================================================ */

/* Warmer base — luminous dark instead of pure black */
.dash-shell {
  background:
    radial-gradient(60% 60% at 18% 0%,  rgba(244,214,138,0.12) 0%, transparent 55%),
    radial-gradient(50% 50% at 88% 22%, rgba(214,178,93,0.10)  0%, transparent 60%),
    radial-gradient(70% 50% at 50% 100%, rgba(140,98,40,0.08)  0%, transparent 60%),
    linear-gradient(180deg, #1a140c 0%, #0c0905 100%) !important;
}

/* Sidebar — slightly warmer, more luminous border */
.dash-side {
  background:
    linear-gradient(180deg, rgba(28,22,14,0.55) 0%, rgba(14,10,6,0.7) 100%) !important;
  border-right-color: rgba(244,214,138,0.18) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Cinema HUD — REAL glass with strong backdrop blur */
.cinema-hud {
  background: linear-gradient(180deg,
    rgba(28,22,14,0.42) 0%,
    rgba(20,16,10,0.22) 100%) !important;
  border-bottom: 1px solid rgba(244,214,138,0.28) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow:
    0 1px 0 rgba(244,214,138,0.08),
    0 8px 32px -10px rgba(0,0,0,0.55);
  /* Increase bottom margin so it doesn't overlap content kickers */
  margin: -32px -52px 40px !important;
}
@media (max-width: 1100px) {
  .cinema-hud { margin: -24px -32px 32px !important; }
}

/* Bento cells — glass surface with warm gold inside */
.bento-cell {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.10), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.40), rgba(28,22,14,0.32)) !important;
  border: 1px solid rgba(244,214,138,0.22) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.bento-cell:hover {
  border-color: rgba(244,214,138,0.42) !important;
  box-shadow: 0 24px 60px -28px rgba(244,214,138,0.18);
}
.bento-cell::before {
  background: linear-gradient(155deg, rgba(244,214,138,0.5), rgba(244,214,138,0) 55%) !important;
}

/* Accent KPI gets warmer */
.bento-kpi.is-accent {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(244,214,138,0.30), transparent 55%),
    linear-gradient(168deg, rgba(72,56,32,0.65), rgba(38,28,16,0.55)) !important;
  border-color: rgba(244,214,138,0.55) !important;
}
.bento-kpi.is-accent .bento-kpi-val {
  color: #ffe7a3 !important;
  text-shadow: 0 0 32px rgba(244,214,138,0.6) !important;
}

/* Project bento cards — same treatment */
.proj-bento-card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.08), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.42), rgba(28,22,14,0.34)) !important;
  border-color: rgba(244,214,138,0.22) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
}
.proj-bento-card.is-hero {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(244,214,138,0.16), transparent 55%),
    linear-gradient(168deg, rgba(58,46,26,0.55), rgba(32,24,14,0.4)) !important;
  border-color: rgba(244,214,138,0.38) !important;
}

/* Dash card — same glass treatment for non-bento sections */
.dash-card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.07), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.34), rgba(28,22,14,0.28)) !important;
  border: 1px solid rgba(244,214,138,0.20) !important;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  border-radius: 18px;
}

/* Vignette softer so the warmth shows */
.dash-vignette {
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 65%, rgba(0,0,0,0.32) 100%),
    radial-gradient(120% 80% at 50% 100%, transparent 70%, rgba(0,0,0,0.4) 100%) !important;
}

/* Atmospheric drifting light — slow, subtle gold beam */
.dash-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40% 30% at 50% 30%, rgba(244,214,138,0.06), transparent 70%);
  animation: dashBeam 22s ease-in-out infinite alternate;
}
@keyframes dashBeam {
  0%   { transform: translate(-15%, -10%) rotate(-2deg); opacity: 0.4; }
  50%  { transform: translate(10%, 5%) rotate(2deg);    opacity: 0.7; }
  100% { transform: translate(20%, -5%) rotate(0deg);   opacity: 0.5; }
}

/* Project detail glass */
.proj-detail-summary,
.proj-detail-workspace,
.proj-rail-card,
.proj-activity-card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.08), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.40), rgba(28,22,14,0.30)) !important;
  border-color: rgba(244,214,138,0.22) !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

/* Rail item hover — warmer */
.proj-rail-item.is-active {
  background: rgba(244,214,138,0.18) !important;
  box-shadow: inset 2px 0 0 #f4d68a !important;
}

/* Feed item glass */
.proj-feed-item {
  background: rgba(244,214,138,0.04) !important;
  border-color: rgba(244,214,138,0.14) !important;
}
.proj-feed-item.is-editing {
  background: rgba(244,214,138,0.08) !important;
  border-color: rgba(244,214,138,0.36) !important;
}

/* Buttons: ghost / gold get warmer */
.phase-step-btn.is-gold {
  background: linear-gradient(168deg, #f4d68a, #d6b25d 50%, #a07d3b);
  box-shadow: 0 8px 22px -8px rgba(244,214,138,0.45);
}

/* HUD timecode looks brighter */
.cinema-hud-tc {
  color: #ffe7a3 !important;
  text-shadow: 0 0 14px rgba(244,214,138,0.5) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dash-shell::after { animation: none; }
}

/* ============================================================
   V30 — SHOP (admin CRUD + landing public section)
   ============================================================ */

/* ----- ADMIN ----- */

.shop-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.shop-admin-card {
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.10), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.40), rgba(28,22,14,0.32));
  border: 1px solid rgba(244,214,138,0.22);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 240ms ease, transform 240ms ease;
}
.shop-admin-card:hover { border-color: rgba(244,214,138,0.42); transform: translateY(-2px); }
.shop-admin-card.is-inactive { opacity: 0.55; }

.shop-admin-cover {
  position: relative;
  aspect-ratio: 5 / 4;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}
.shop-admin-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-admin-cover-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: rgba(232,224,205,0.4);
  text-transform: uppercase;
}

.shop-admin-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; }
.shop-admin-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.shop-admin-kind {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: #d6b25d;
  text-transform: uppercase;
}
.shop-admin-featured {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: #f4d68a;
  background: rgba(244,214,138,0.12);
  padding: 4px 8px; border-radius: 999px;
}
.shop-admin-card h3 {
  font: 500 18px/1.2 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.01em;
  color: #f4ecd9;
  margin: 0;
}
.shop-admin-tag {
  font: 400 12px/1.5 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.62);
  margin: 0;
}
.shop-admin-price {
  font: 500 16px/1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.01em;
  color: #f4d68a;
}
.shop-admin-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.shop-admin-actions .phase-step-btn { padding: 6px 10px; font-size: 11px; }
.shop-admin-del:hover { background: rgba(255,90,80,0.12); color: #ffb3a5; border-color: rgba(255,90,80,0.4); }

/* ----- MODAL ----- */
.shop-modal-wrap {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.shop-modal-wrap .brand-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.shop-modal {
  position: relative;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 28px 22px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.10), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.92), rgba(20,16,10,0.95));
  border: 1px solid rgba(244,214,138,0.32);
  border-radius: 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.shop-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(244,214,138,0.16);
}
.shop-modal-head h2 {
  margin: 6px 0 0; flex: 1;
  font: 500 26px/1.15 "Fraunces", "Cormorant Garamond", serif;
  color: #f7efdf;
}
.shop-modal-close {
  background: transparent; border: 1px solid rgba(244,214,138,0.25);
  color: rgba(232,224,205,0.7);
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: all 200ms ease;
}
.shop-modal-close:hover { color: #f4d68a; border-color: #f4d68a; background: rgba(244,214,138,0.08); }

.modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dash-field-wide { grid-column: span 2; }
@media (max-width: 640px) {
  .modal-form-grid { grid-template-columns: 1fr; }
  .dash-field-wide { grid-column: auto; }
}

.shop-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(244,214,138,0.16);
}

.shop-cover-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-cover-thumb {
  width: 88px; height: 70px; object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(244,214,138,0.22);
}
.shop-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(232,224,205,0.78);
  cursor: pointer;
}

/* ----- LANDING PUBLIC SECTION ----- */

.bway-shop-section {
  position: relative;
  padding: clamp(70px, 9vw, 130px) 0 clamp(70px, 9vw, 130px);
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(244,214,138,0.10), transparent 55%),
    radial-gradient(40% 40% at 90% 80%, rgba(214,178,93,0.08), transparent 60%);
}
.bway-shop-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.bway-shop-head { margin-bottom: clamp(38px, 5vw, 60px); max-width: 760px; }
.bway-shop-kicker {
  color: #d6b25d;
  font: 600 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.bway-shop-title {
  font: 500 clamp(40px, 6vw, 84px)/1.02 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  margin: 0 0 22px;
}
.bway-shop-title em {
  font-style: italic;
  color: #f4d68a;
  text-shadow: 0 0 32px rgba(244,214,138,0.32);
}
.bway-shop-sub {
  font: 400 17px/1.65 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.7);
  margin: 0;
  max-width: 600px;
}

.bway-shop-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.bway-shop-card {
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.08), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.40), rgba(20,16,10,0.55));
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}
.bway-shop-card:hover {
  border-color: rgba(244,214,138,0.45);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -28px rgba(244,214,138,0.32);
}
.bway-shop-card.is-featured { border-color: rgba(244,214,138,0.36); }
.bway-shop-card.is-hero {
  grid-column: span 2;
}
@media (max-width: 880px) {
  .bway-shop-card.is-hero { grid-column: auto; }
}

.bway-shop-cover {
  position: relative;
  aspect-ratio: 5 / 4;
  background: rgba(0,0,0,0.5);
  overflow: hidden;
}
.bway-shop-card.is-hero .bway-shop-cover { aspect-ratio: 16 / 9; }
.bway-shop-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bway-shop-card:hover .bway-shop-cover img { transform: scale(1.04); }
.bway-shop-cover.is-empty {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, rgba(244,214,138,0.04) 0 8px, transparent 8px 16px),
    rgba(0,0,0,0.4);
}
.bway-shop-kind {
  position: absolute;
  top: 14px; left: 14px;
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: #15110d;
  background: linear-gradient(168deg, #f4d68a, #d6b25d);
  padding: 6px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px -6px rgba(244,214,138,0.5);
}

.bway-shop-body {
  padding: 22px 24px 22px;
  display: flex; flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.bway-shop-name {
  margin: 0;
  font: 500 22px/1.18 "Fraunces", "Cormorant Garamond", serif;
  color: #f4ecd9;
  letter-spacing: -0.01em;
}
.bway-shop-tag {
  margin: 0;
  font: 400 14px/1.55 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.62);
}
.bway-shop-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(244,214,138,0.1);
}
.bway-shop-price {
  font: 500 24px/1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f4d68a;
  text-shadow: 0 0 22px rgba(244,214,138,0.32);
}
.bway-shop-cta {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  font: 600 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #15110d;
  background: linear-gradient(168deg, #f4d68a, #d6b25d 50%, #a07d3b);
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(244,214,138,0.5);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.bway-shop-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(244,214,138,0.65);
}
.bway-shop-cta span { font-size: 14px; }

.bway-shop-preview {
  margin-top: 6px;
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: rgba(232,224,205,0.6);
  text-decoration: none;
  text-transform: uppercase;
}
.bway-shop-preview:hover { color: #f4d68a; }

/* ============================================================
   V31 — LIGHTER DASH SURFACES + SHOP STATES
   ============================================================ */

/* Grain — barely there */
.dash-grain { opacity: 0.012 !important; }

/* Vignette — much softer so the warm gold actually shows */
.dash-vignette {
  background:
    radial-gradient(140% 90% at 50% 0%, transparent 80%, rgba(0,0,0,0.12) 100%),
    radial-gradient(140% 90% at 50% 100%, transparent 85%, rgba(0,0,0,0.18) 100%) !important;
}

/* Shop landing — loading + empty states */
.bway-shop-loading,
.bway-shop-empty {
  text-align: center;
  padding: clamp(40px, 6vw, 64px) 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244,214,138,0.08), transparent 60%);
  border: 1px dashed rgba(244,214,138,0.22);
  border-radius: 22px;
  color: rgba(232,224,205,0.65);
  font: 400 16px/1.6 "Inter", system-ui, sans-serif;
}
.bway-shop-empty p {
  font: 500 22px/1.3 "Fraunces", "Cormorant Garamond", serif;
  color: #f4ecd9;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.bway-shop-empty .bway-shop-cta { display: inline-flex; }

/* ============================================================
   V32 — AMPLIFY GOLD ACROSS DASHBOARDS
   Match landing's warm cinematic atmosphere.
   ============================================================ */

/* Shell: more saturated radials, less black */
.dash-shell {
  background:
    radial-gradient(55% 50% at 18% 0%,  rgba(244,214,138,0.22) 0%, transparent 55%),
    radial-gradient(45% 45% at 88% 22%, rgba(214,178,93,0.18)  0%, transparent 60%),
    radial-gradient(65% 50% at 50% 100%, rgba(180,130,55,0.15) 0%, transparent 60%),
    linear-gradient(180deg, #221810 0%, #100a05 100%) !important;
}

/* Drifting beam stronger */
.dash-shell::after {
  background: radial-gradient(45% 35% at 50% 30%, rgba(244,214,138,0.14), transparent 70%) !important;
}

/* Sidebar warmer + brighter border glow */
.dash-side {
  background:
    linear-gradient(180deg, rgba(48,38,22,0.55) 0%, rgba(28,22,14,0.7) 100%) !important;
  border-right-color: rgba(244,214,138,0.32) !important;
}
.dash-side::before {
  background: linear-gradient(180deg, transparent 0%, rgba(244,214,138,0.65) 50%, transparent 100%) !important;
  width: 2px !important;
}

/* Side nav active link — fuller gold gradient */
.dash-side-nav a[aria-current="page"] {
  color: #ffe7a3 !important;
  background: linear-gradient(90deg, rgba(244,214,138,0.18), transparent 80%);
}
.dash-side-nav a:hover {
  color: #f4d68a !important;
}

/* Side brand / logo / role */
.dash-side-name { color: #f7efdf !important; }
.dash-side-name .em { color: #f4d68a !important; }
.dash-side-role,
.dash-side-mono { color: #d6b25d !important; }

/* Profile chip */
.dash-side-avatar {
  background: linear-gradient(168deg, #f4d68a, #a07d3b) !important;
  color: #15110d !important;
  box-shadow: 0 6px 18px -6px rgba(244,214,138,0.55) !important;
}

/* Cinema HUD — more luminous gold */
.cinema-hud {
  background: linear-gradient(180deg,
    rgba(48,38,22,0.52) 0%,
    rgba(28,22,14,0.32) 100%) !important;
  border-bottom-color: rgba(244,214,138,0.42) !important;
}

/* Bento cells: more saturation in the gold tint */
.bento-cell,
.proj-bento-card,
.dash-card,
.proj-detail-summary,
.proj-detail-workspace,
.proj-rail-card,
.proj-activity-card {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.18), transparent 55%),
    linear-gradient(168deg, rgba(58,46,26,0.52), rgba(36,28,16,0.42)) !important;
  border-color: rgba(244,214,138,0.32) !important;
}
.bento-cell:hover,
.proj-bento-card:hover {
  border-color: rgba(244,214,138,0.55) !important;
}

/* Accent KPI even warmer */
.bento-kpi.is-accent {
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(244,214,138,0.42), transparent 55%),
    linear-gradient(168deg, rgba(88,68,36,0.65), rgba(48,36,18,0.55)) !important;
  border-color: rgba(244,214,138,0.7) !important;
}
.bento-kpi.is-accent .bento-kpi-val {
  color: #ffe7a3 !important;
  text-shadow: 0 0 36px rgba(244,214,138,0.7) !important;
}

/* All headings warmer cream */
.bento-head h2,
.dash-page h1,
.bento-kpi-val,
.proj-workspace-head h2 { color: #f7efdf !important; }
.bento-kicker { color: rgba(244,214,138,0.85) !important; }

/* Kickers + labels more golden */
.kpi-label,
.dash-field-label { color: rgba(244,214,138,0.7) !important; }

/* Btn gold — already strong, just sharper edge */
.btn-gold,
.dash-btn,
.phase-step-btn.is-gold {
  background: linear-gradient(168deg, #f4d68a, #d6b25d 50%, #a07d3b) !important;
  color: #15110d !important;
  box-shadow: 0 12px 30px -10px rgba(244,214,138,0.55) !important;
}

/* Side foot logout */
.dash-side-out {
  border-color: rgba(244,214,138,0.32) !important;
  color: rgba(244,214,138,0.72) !important;
}
.dash-side-out:hover {
  color: #f4d68a !important;
  border-color: #f4d68a !important;
  background: rgba(244,214,138,0.1);
}

/* Shop admin: visible/hidden toggle clarity */
.phase-step-btn.shop-tog {
  border-color: rgba(232,224,205,0.18);
  color: rgba(232,224,205,0.55);
}
.phase-step-btn.shop-tog.is-on {
  border-color: rgba(140,210,160,0.45);
  color: #c6e8cf;
  background: rgba(140,210,160,0.08);
}
.phase-step-btn.shop-tog.is-off {
  border-color: rgba(255,170,80,0.32);
  color: #ffd9a5;
  background: rgba(255,170,80,0.06);
}

/* ============================================================
   V33 — Status pill on admin shop card
   ============================================================ */
.shop-status-pill {
  display: inline-flex; align-items: center;
  font: 700 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  padding: 5px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.shop-status-pill.is-on {
  background: rgba(140,210,160,0.14);
  color: #c6e8cf;
  border: 1px solid rgba(140,210,160,0.42);
}
.shop-status-pill.is-off {
  background: rgba(255,170,80,0.12);
  color: #ffd9a5;
  border: 1px solid rgba(255,170,80,0.4);
}

/* ============================================================
   V34 — LANDING POLISH
   3D cylinder pillars · countup flash · folder showcase active
   ============================================================ */

/* === Pillars 3D cylinder === */
.pillars-3d {
  position: relative;
  padding: clamp(70px, 9vw, 130px) 0 clamp(80px, 10vw, 150px);
  overflow: hidden;
}
.pillars-3d .pillars-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  padding: 0 24px;
}

.pillars-cylinder-stage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: clamp(380px, 50vw, 520px);
  margin: 0 auto;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.pillars-cylinder-stage:active { cursor: grabbing; }
.pillars-cylinder {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 320px;
  height: 380px;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.pillars-cylinder-stage:active .pillars-cylinder {
  transition: none;
}

.pillar-face {
  position: absolute;
  inset: 0;
  width: 320px; height: 380px;
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 24px 22px;
  text-align: left;
  cursor: pointer;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: box-shadow 320ms ease, border-color 320ms ease;
  color: #f4ecd9;
  display: flex; flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.pillar-face::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.18), transparent 55%);
  pointer-events: none;
  border-radius: inherit;
}
.pillar-face:hover {
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(244,214,138,0.4),
    0 0 60px rgba(244,214,138,0.25);
}
.pillar-face-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(40% 40% at 30% 20%, rgba(244,214,138,0.32), transparent 70%);
  filter: blur(20px);
  opacity: 0.7;
  pointer-events: none;
}
.pillar-face-step {
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.9);
}
.pillar-face-process {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.pillar-face-title {
  margin: 12px 0 4px;
  font: 500 36px/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
  text-shadow: 0 0 28px rgba(244,214,138,0.32);
}
.pillar-face-desc {
  margin: 0;
  font: 400 13px/1.55 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.72);
}
.pillar-face-cta {
  margin-top: auto;
  padding-top: 14px;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: #f4d68a;
  text-transform: uppercase;
}

.pillars-cylinder-base {
  position: absolute;
  left: 50%; bottom: 14%;
  transform: translateX(-50%);
  width: 360px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(244,214,138,0.22), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
}
.pillars-cylinder-help {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  color: rgba(244,214,138,0.55);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

/* === Pillars modal === */
.pillars-modal-wrap {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: pillarsFadeIn 220ms ease;
}
@keyframes pillarsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pillars-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,6,4,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pillars-modal {
  position: relative;
  width: min(560px, 100%);
  padding: 36px 32px 30px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.16), transparent 55%),
    linear-gradient(168deg, rgba(48,38,22,0.96), rgba(20,16,10,0.96));
  border: 1px solid rgba(244,214,138,0.4);
  border-radius: 22px;
  box-shadow: 0 50px 90px -20px rgba(0,0,0,0.7), 0 0 70px rgba(244,214,138,0.25);
  color: #f4ecd9;
  animation: pillarsModalIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pillarsModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pillars-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(244,214,138,0.32);
  background: transparent;
  color: rgba(244,214,138,0.78);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: all 200ms ease;
}
.pillars-modal-close:hover {
  color: #f4d68a; border-color: #f4d68a; background: rgba(244,214,138,0.1);
}
.pillars-modal-step {
  display: block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: #d6b25d;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pillars-modal-title {
  margin: 0 0 14px;
  font: 500 42px/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
  text-shadow: 0 0 32px rgba(244,214,138,0.4);
}
.pillars-modal-desc {
  margin: 0 0 22px;
  font: 400 15px/1.6 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.78);
}
.pillars-modal-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pillars-modal-list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(244,214,138,0.14);
  border-radius: 12px;
  font: 400 13px/1.5 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.85);
}
.pillars-modal-num {
  font: 600 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  color: #f4d68a;
  flex-shrink: 0;
}

/* === CountUp flash + center weight === */
.bn-countup {
  display: inline-block;
  transition: text-shadow 320ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.bn-countup.is-flash {
  text-shadow:
    0 0 24px rgba(244,214,138,0.85),
    0 0 60px rgba(244,214,138,0.55),
    0 0 100px rgba(244,214,138,0.3);
  transform: scale(1.04);
}
.bn-monolith-num {
  text-align: center;
  display: flex; align-items: baseline; justify-content: center;
}
.bn-monolith {
  text-align: center;
  align-items: center;
}

/* === Immersive folder strip — active state + autoplaying === */
.musa-folder-clip {
  position: relative;
  transition: transform 300ms cubic-bezier(0.22,1,0.36,1), border-color 300ms ease;
}
.musa-folder-clip:hover { transform: translateY(-4px); }
.musa-folder-clip.is-active {
  outline: 2px solid #f4d68a;
  outline-offset: 2px;
  box-shadow: 0 18px 36px -16px rgba(244,214,138,0.6);
}
.musa-folder-clip.is-active .musa-folder-clip-play {
  animation: clipPlayPulse 1.4s ease-in-out infinite;
}
@keyframes clipPlayPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.7; }
}
.musa-folder-count {
  letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .pillars-cylinder { transition: none; }
  .bn-countup.is-flash { transform: none; }
  .musa-folder-clip.is-active .musa-folder-clip-play { animation: none; }
}

@media (max-width: 720px) {
  .pillars-cylinder { width: 260px; height: 340px; }
  .pillar-face { width: 260px; height: 340px; padding: 20px 18px; }
  .pillar-face-title { font-size: 30px; }
  .pillars-cylinder-stage { height: 380px; }
}

/* ============================================================
   V35 — ARC CYLINDER (in Cinematografía que posiciona marca)
   Drag horizontal · auto-rotation · modal on click
   ============================================================ */

.arc-cyl-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: clamp(440px, 56vw, 620px);
  margin: clamp(50px, 7vw, 90px) auto 30px;
  perspective: 1900px;
  perspective-origin: 50% 55%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.arc-cyl-stage:active { cursor: grabbing; }

.arc-cyl-floor {
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  width: 75%; height: 26px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(244,214,138,0.32), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.arc-cyl-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
}
.arc-cyl-rays span {
  position: absolute;
  left: 50%; bottom: 22%;
  width: 1px; height: 60%;
  background: linear-gradient(to top, rgba(244,214,138,0.4), transparent 80%);
  transform-origin: 50% 100%;
}
.arc-cyl-rays span:nth-child(1) { transform: translateX(-50%) rotate(-26deg); }
.arc-cyl-rays span:nth-child(2) { transform: translateX(-50%) rotate(-13deg); }
.arc-cyl-rays span:nth-child(3) { transform: translateX(-50%) rotate(0deg); }
.arc-cyl-rays span:nth-child(4) { transform: translateX(-50%) rotate(13deg); }
.arc-cyl-rays span:nth-child(5) { transform: translateX(-50%) rotate(26deg); }

.arc-cyl {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 320px; height: 460px;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.arc-cyl-stage:active .arc-cyl { transition: none; }

.arc-cyl-card {
  position: absolute;
  inset: 0;
  width: 320px; height: 460px;
  border: 1px solid rgba(244,214,138,0.24);
  border-radius: 16px;
  background-clip: padding-box;
  cursor: pointer;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: #f4ecd9;
  display: flex; flex-direction: column;
  padding: 0;
  transition: border-color 280ms ease, box-shadow 280ms ease;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.6);
}
.arc-cyl-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.14), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  pointer-events: none;
  border-radius: inherit;
}
.arc-cyl-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.arc-cyl-card:hover .arc-cyl-card-shine { opacity: 1; }
.arc-cyl-card:hover {
  border-color: rgba(244,214,138,0.65);
  box-shadow:
    0 36px 80px -22px rgba(0,0,0,0.75),
    0 0 60px rgba(244,214,138,0.25);
}
.arc-cyl-card.is-center {
  border-color: rgba(244,214,138,0.7);
  box-shadow:
    0 36px 80px -22px rgba(0,0,0,0.75),
    0 0 80px rgba(244,214,138,0.35);
}

.arc-cyl-card-top {
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.arc-cyl-card-code {
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(244,214,138,0.88);
}
.arc-cyl-card-live {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: #f4d68a;
  padding: 5px 9px;
  border: 1px solid rgba(244,214,138,0.45);
  border-radius: 999px;
  background: rgba(244,214,138,0.06);
}
.arc-cyl-card-bottom {
  position: absolute;
  bottom: 22px; left: 22px; right: 22px;
}
.arc-cyl-card-name {
  font: 500 30px/1.1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.015em;
  color: #f7efdf;
  margin-bottom: 8px;
  text-shadow: 0 0 22px rgba(244,214,138,0.4);
}
.arc-cyl-card-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: rgba(232,224,205,0.72);
  text-transform: uppercase;
}

.arc-cyl-help {
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: rgba(244,214,138,0.55);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 720px) {
  .arc-cyl { width: 260px; height: 380px; }
  .arc-cyl-card { width: 260px; height: 380px; }
  .arc-cyl-card-name { font-size: 24px; }
}

/* === Modal === */
.arc-modal-wrap {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: arcFadeIn 220ms ease;
}
@keyframes arcFadeIn { from { opacity: 0; } to { opacity: 1; } }
.arc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,5,4,0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.arc-modal {
  position: relative;
  width: min(520px, 100%);
  padding: 36px 32px 30px;
  border: 1px solid rgba(244,214,138,0.45);
  border-radius: 22px;
  box-shadow: 0 50px 90px -20px rgba(0,0,0,0.7), 0 0 70px rgba(244,214,138,0.25);
  color: #f4ecd9;
  overflow: hidden;
  animation: arcModalIn 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.arc-modal::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(244,214,138,0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
@keyframes arcModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.arc-modal > * { position: relative; z-index: 1; }

.arc-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(244,214,138,0.36);
  background: rgba(0,0,0,0.34);
  color: rgba(244,214,138,0.85);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: all 200ms ease;
  z-index: 2;
}
.arc-modal-close:hover {
  color: #f4d68a; border-color: #f4d68a; background: rgba(244,214,138,0.12);
}

.arc-modal-code {
  display: block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: #f4d68a;
  margin-bottom: 14px;
}
.arc-modal-name {
  margin: 0 0 8px;
  font: 500 44px/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
  text-shadow: 0 0 32px rgba(244,214,138,0.45);
}
.arc-modal-meta {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.72);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.arc-modal-dot { opacity: 0.5; }

.arc-modal-frame {
  position: relative;
  height: 200px;
  margin: 0 0 24px;
  border-radius: 12px;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(244,214,138,0.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 6px);
  border: 1px solid rgba(244,214,138,0.22);
  overflow: hidden;
}
.arc-modal-frame-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(244,214,138,0.7);
}
.arc-modal-frame-corner.tl { top: 8px; left: 8px;  border-top: 1px solid; border-left: 1px solid; }
.arc-modal-frame-corner.tr { top: 8px; right: 8px; border-top: 1px solid; border-right: 1px solid; }
.arc-modal-frame-corner.bl { bottom: 8px; left: 8px; border-bottom: 1px solid; border-left: 1px solid; }
.arc-modal-frame-corner.br { bottom: 8px; right: 8px; border-bottom: 1px solid; border-right: 1px solid; }
.arc-modal-frame-label {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.65);
}

.arc-modal-quote {
  margin: 0 0 22px;
  font: 400 italic 16px/1.55 "Fraunces", "Cormorant Garamond", serif;
  color: rgba(232,224,205,0.84);
  border-left: 2px solid rgba(244,214,138,0.4);
  padding-left: 16px;
}
.arc-modal-cta {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: #15110d;
  background: linear-gradient(168deg, #f4d68a, #d6b25d 50%, #a07d3b);
  padding: 14px 22px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 14px 32px -10px rgba(244,214,138,0.5);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.arc-modal-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px -10px rgba(244,214,138,0.65);
}

/* Pillars: deactivate cylinder styles since we reverted to grid layout */
.pillars-cylinder-stage,
.pillars-cylinder,
.pillar-face,
.pillars-cylinder-base,
.pillars-cylinder-help,
.pillars-modal-wrap,
.pillars-modal,
.pillars-modal-backdrop { display: none !important; }

/* ============================================================
   V36 — NAV CENTRADO · STATS COMPACTO · PILLARS GLASS · GALLERY
   ============================================================ */

/* === NAV MIN === */
.nav-pill-wrap { display: none !important; } /* old nav off */

.nav-min-wrap {
  position: fixed;
  top: 18px; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: center;
  padding: 0 18px;
  pointer-events: none;
}
.nav-min {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
  max-width: 1080px;
  width: 100%;
  padding: 14px 28px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.06), transparent 55%),
    linear-gradient(180deg, rgba(16,12,8,0.62), rgba(8,6,4,0.62));
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 999px;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,0.5);
  transition: padding 280ms ease, border-color 280ms ease;
}
.nav-min-scrolled .nav-min { padding: 10px 24px; }

.nav-min-side {
  display: flex; align-items: center;
  gap: clamp(14px, 2vw, 28px);
}
.nav-min-left { justify-content: flex-end; }
.nav-min-right { justify-content: flex-start; }

.nav-min-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244,214,138,0.35);
  background: rgba(244,214,138,0.06);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1), border-color 200ms ease, box-shadow 280ms ease;
}
.nav-min-logo:hover {
  transform: scale(1.05);
  border-color: rgba(244,214,138,0.7);
  box-shadow: 0 0 24px rgba(244,214,138,0.35);
}
.nav-min-logo img {
  width: 26px; height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(244,214,138,0.45));
}

.nav-min-link {
  font: 500 12px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232,224,205,0.75);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
  position: relative;
  padding: 4px 0;
}
.nav-min-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f4d68a, transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 240ms cubic-bezier(0.16,1,0.3,1);
}
.nav-min-link:hover { color: #f4d68a; }
.nav-min-link:hover::after { transform: scaleX(1); }

.nav-min-login {
  display: inline-flex; align-items: center; gap: 8px;
  color: #f4d68a;
  padding: 8px 16px;
  border: 1px solid rgba(244,214,138,0.45);
  border-radius: 999px;
  background: rgba(244,214,138,0.06);
  transition: all 240ms ease;
}
.nav-min-login::after { display: none; }
.nav-min-login:hover {
  background: rgba(244,214,138,0.16);
  border-color: #f4d68a;
}
.nav-min-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f4d68a;
  box-shadow: 0 0 10px #f4d68a;
  animation: navMinDotPulse 2s ease-in-out infinite;
}
@keyframes navMinDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}

@media (max-width: 900px) {
  .nav-min {
    grid-template-columns: auto auto auto;
    gap: 14px;
    padding: 10px 16px;
  }
  .nav-min-side { gap: 10px; }
  .nav-min-link { font-size: 10px; letter-spacing: 0.12em; }
  .nav-min-login { padding: 6px 12px; }
}
@media (max-width: 640px) {
  .nav-min-link:not(.nav-min-login) { display: none; }
}

/* === STATS COMPACT + CENTERED ANIMATION === */
.bn-arc-monoliths {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: clamp(14px, 1.6vw, 24px) !important;
  max-width: 1100px;
  margin-left: auto; margin-right: auto;
  margin-top: clamp(40px, 5vw, 70px) !important;
  padding: 0 24px;
}
.bn-monolith {
  padding: clamp(22px, 2.4vw, 32px) clamp(18px, 2vw, 26px) !important;
  text-align: center !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: auto !important;
  animation-duration: 14s !important;
  border-radius: 18px !important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244,214,138,0.10), transparent 60%),
    linear-gradient(168deg, rgba(28,22,14,0.62), rgba(14,10,6,0.7)) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.bn-monolith-num {
  font-size: clamp(48px, 5.4vw, 78px) !important;
  margin: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  display: inline-flex !important;
  filter: drop-shadow(0 0 22px rgba(244,214,138,0.35)) !important;
  animation: monolithNumPop 1.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes monolithNumPop {
  0%   { opacity: 0; transform: translateY(18px) scale(0.92); }
  50%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.bn-monolith-num-letters { font-size: clamp(38px, 4.2vw, 62px) !important; }
.bn-monolith-suffix { font-size: 14px !important; margin-top: 2px !important; }
.bn-monolith-label {
  font-size: 14px !important;
  font-family: "Fraunces", "Cormorant Garamond", serif !important;
  font-weight: 500 !important;
  color: #f4ecd9 !important;
  margin: 4px 0 !important;
}
.bn-monolith-desc {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(232,224,205,0.6) !important;
  max-width: 260px;
}

/* === PILLARS GLASS 3D COMPACT === */
.pillars-section { padding: clamp(60px, 8vw, 110px) 0 !important; }
.pillars-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: 1fr !important; max-width: 480px; }
}

/* Override pillar card (the actual rendered Pillar component) */
.pillar {
  max-width: 100% !important;
  min-height: auto !important;
}
.pillar-card {
  padding: clamp(20px, 2.4vw, 28px) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.10), transparent 55%),
    linear-gradient(168deg, rgba(28,22,14,0.55), rgba(14,10,6,0.62)) padding-box,
    linear-gradient(137deg, rgba(244,214,138,0.35), rgba(244,214,138,0.08)) border-box !important;
  border: 1px solid transparent !important;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  min-height: 360px !important;
  max-height: 460px;
  box-shadow: 0 22px 50px -22px rgba(0,0,0,0.5);
  transition: transform 360ms cubic-bezier(0.16,1,0.3,1), box-shadow 360ms ease !important;
}
.pillar-card:hover {
  transform: perspective(1400px) translateY(-6px) rotateX(2deg) rotateY(-2deg) !important;
  box-shadow:
    0 36px 70px -22px rgba(0,0,0,0.6),
    0 0 50px rgba(244,214,138,0.22) !important;
}
.pillar-top { margin-bottom: 14px !important; }
.pillar-icon {
  width: 36px !important; height: 36px !important;
  color: #f4d68a !important;
}
.pillar-icon svg { width: 22px !important; height: 22px !important; }
.pillar-idx {
  font-size: 10px !important;
  color: rgba(244,214,138,0.75) !important;
}
.pillar-bottom { gap: 8px !important; }
.pillar-process {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: rgba(232,224,205,0.55) !important;
}
.pillar-title {
  font-size: clamp(26px, 3vw, 32px) !important;
  margin: 4px 0 6px !important;
  text-shadow: 0 0 22px rgba(244,214,138,0.28);
}
.pillar-desc {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: rgba(232,224,205,0.62) !important;
}
.pillar-steps {
  margin-top: 12px !important;
  gap: 6px !important;
}
.pillar-steps li {
  font-size: 11px !important;
  padding: 6px 0 !important;
}
.pillar-step-num { font-size: 9px !important; }

/* === IMMERSIVE GALLERY active thumb pulse + glow === */
.musa-folder-clip {
  cursor: pointer;
  transition: transform 280ms cubic-bezier(0.22,1,0.36,1), border-color 280ms ease, box-shadow 280ms ease !important;
}
.musa-folder-clip.is-active {
  transform: translateY(-4px) !important;
  outline: 2px solid #f4d68a !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.5),
    0 22px 44px -20px rgba(244,214,138,0.55),
    0 0 60px rgba(244,214,138,0.2) !important;
}
.musa-folder-clip.is-active .musa-folder-clip-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(244,214,138,0.18) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bn-monolith-num { animation: none; }
}

/* ============================================================
   V37 — STATS sin fondo gris · números completos · nav 3D
   ============================================================ */

/* Quitar el fondo gris del wrapper de stats */
.bento-stats {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: none !important;
}

/* Cards más estéticas, más pequeñas */
.bn-arc-monoliths {
  max-width: 960px !important;
  gap: 18px !important;
  padding: 0 24px;
}
.bn-monolith {
  padding: 26px 22px !important;
  border-radius: 16px !important;
  max-width: 320px;
  margin: 0 auto;
  width: 100%;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244,214,138,0.12), transparent 60%),
    linear-gradient(168deg, rgba(28,22,14,0.45), rgba(14,10,6,0.55)) !important;
  border: 1px solid rgba(244,214,138,0.24);
}

/* Numbers: no clipping, allow full glyph including descenders / + */
.bn-monolith-num {
  font-size: clamp(54px, 5vw, 70px) !important;
  line-height: 1.15 !important;
  padding: 6px 8px 0 !important;
  overflow: visible !important;
  white-space: nowrap;
  /* The text gradient was clipping descenders; use full text rendering */
  background: linear-gradient(180deg,
    #f7efdf 0%,
    #f4d68a 60%,
    #c89b48 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 22px rgba(244,214,138,0.45)) !important;
}

/* Letters variant — same treatment, smaller */
.bn-monolith-num.bn-monolith-num-letters {
  font-size: clamp(38px, 4vw, 54px) !important;
}
.bn-mn-arrow {
  font-size: 0.6em !important;
  -webkit-text-fill-color: #f4d68a !important;
}

.bn-monolith-suffix {
  font-size: 13px !important;
  color: #d6b25d !important;
}
.bn-monolith-label {
  font-size: 15px !important;
  margin: 6px 0 4px !important;
}
.bn-monolith-desc {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: rgba(232,224,205,0.65) !important;
  max-width: 280px;
}

/* === NAV 3D futurista with social icons === */
.nav-min {
  /* shorter padding & taller pill for asymmetric grid */
  padding: 12px 24px !important;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(244,214,138,0.14), transparent 60%),
    linear-gradient(180deg, rgba(20,15,10,0.78), rgba(10,7,5,0.78)) !important;
  border: 1px solid rgba(244,214,138,0.32) !important;
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.08) inset,
    0 24px 60px -28px rgba(0,0,0,0.6),
    0 0 50px rgba(244,214,138,0.12) !important;
  transform-style: preserve-3d;
  perspective: 800px;
}

.nav-min-side {
  gap: clamp(22px, 2.4vw, 36px) !important;
}

/* Logo: 3D floating with rotation */
.nav-min-logo {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(244,214,138,0.32), transparent 70%),
    linear-gradient(168deg, rgba(48,38,22,0.85), rgba(20,16,10,0.95)) !important;
  border: 1px solid rgba(244,214,138,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.12) inset,
    0 6px 22px -6px rgba(244,214,138,0.55),
    0 0 30px rgba(244,214,138,0.35) !important;
  position: relative;
  transform-style: preserve-3d;
  animation: navLogoFloat 5s ease-in-out infinite;
}
@keyframes navLogoFloat {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50%      { transform: translateY(-3px) rotateY(10deg); }
}
.nav-min-logo::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(244,214,138,0) 0deg,
    rgba(244,214,138,0.4) 90deg,
    rgba(244,214,138,0) 180deg,
    rgba(244,214,138,0.4) 270deg,
    rgba(244,214,138,0) 360deg);
  filter: blur(6px);
  animation: navLogoSpin 4s linear infinite;
  z-index: -1;
}
@keyframes navLogoSpin { to { transform: rotate(360deg); } }
.nav-min-logo:hover { animation-play-state: paused; transform: scale(1.08) rotateY(0deg); }
.nav-min-logo img { width: 30px !important; height: 30px !important; }

/* Nav links — Inter mono mix, animated underline */
.nav-min-link {
  font: 600 11px/1 "Space Mono", ui-monospace, monospace !important;
  letter-spacing: 0.22em !important;
  color: rgba(244,214,138,0.65) !important;
  position: relative;
  padding: 8px 2px !important;
}
.nav-min-link:hover { color: #ffe7a3 !important; }
.nav-min-link::after {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #f4d68a 30%, #f4d68a 70%, transparent) !important;
}
.nav-min-link:hover::after { transform: scaleX(1.1); }

/* Login + Social icons */
.nav-min-social {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(244,214,138,0.06);
  border: 1px solid rgba(244,214,138,0.32);
  color: rgba(244,214,138,0.85);
  text-decoration: none;
  transition: all 240ms cubic-bezier(0.16,1,0.3,1);
  position: relative;
}
.nav-min-social::after { display: none; }
.nav-min-social svg { width: 16px; height: 16px; }
.nav-min-social:hover {
  background: linear-gradient(168deg, #f4d68a, #d6b25d);
  color: #15110d;
  border-color: #f4d68a;
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 12px 24px -8px rgba(244,214,138,0.6);
}

.nav-min-login {
  padding: 9px 18px !important;
  font-weight: 700 !important;
  border-width: 1.5px !important;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(244,214,138,0.2), transparent 60%),
    rgba(244,214,138,0.06) !important;
}
.nav-min-login:hover {
  background: linear-gradient(168deg, rgba(244,214,138,0.32), rgba(244,214,138,0.18)) !important;
  box-shadow: 0 0 24px rgba(244,214,138,0.35);
}

/* Responsive */
@media (max-width: 900px) {
  .nav-min-side { gap: 14px !important; }
  .nav-min-social { width: 32px; height: 32px; }
}
@media (max-width: 700px) {
  .nav-min-link:not(.nav-min-login):not(.nav-min-social) { display: none; }
  .nav-min-side { gap: 10px !important; }
}

/* V37b — social cluster + tighter spacing for 3v3 symmetry */
.nav-min-socials-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-min-socials-cluster .nav-min-social {
  width: 32px;
  height: 32px;
}
.nav-min-socials-cluster .nav-min-social svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 700px) {
  .nav-min-socials-cluster { display: none; }
}

/* ============================================================
   V38 — STATS GLASS 3D NO BG + PORTFOLIO CREATIVE
   ============================================================ */

/* Kill the gray panel — was coming from .bn-arc-features base gap+bg */
.bn-arc-monoliths,
.bn-arc-features.bn-arc-monoliths {
  background: transparent !important;
  border-top: none !important;
  gap: clamp(16px, 2vw, 26px) !important;
}

/* Make cards real glass 3D */
.bn-monolith {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(244,214,138,0.16), transparent 65%),
    linear-gradient(168deg, rgba(36,28,18,0.32), rgba(14,10,6,0.42)) !important;
  border: 1px solid rgba(244,214,138,0.28) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.06) inset,
    0 30px 60px -28px rgba(0,0,0,0.5),
    0 0 50px -20px rgba(244,214,138,0.18) !important;
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform 480ms cubic-bezier(0.16,1,0.3,1), box-shadow 480ms ease !important;
}

/* 3D card tilt on hover */
.bn-monolith:hover {
  transform: perspective(1200px) translateY(-8px) rotateX(3deg) rotateY(-2deg) !important;
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.14) inset,
    0 44px 80px -28px rgba(0,0,0,0.65),
    0 0 70px rgba(244,214,138,0.32) !important;
  border-color: rgba(244,214,138,0.55) !important;
}
.bn-monolith:hover .bn-monolith-num {
  text-shadow: 0 0 32px rgba(244,214,138,0.5);
}
.bn-monolith:hover .bn-monolith-glow {
  opacity: 1 !important;
}
.bn-monolith-glow {
  position: absolute;
  inset: -2px;
  background: radial-gradient(40% 40% at 50% 0%, rgba(244,214,138,0.28), transparent 70%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 480ms ease;
  pointer-events: none;
  z-index: 0;
}

/* === PORTFOLIO CREATIVE === */
/* Less generic archive: tilt cards in waves, gold film borders, REC dot */
.port-archive-rail {
  perspective: 1800px !important;
}
.port-archive-rail > * {
  transform-style: preserve-3d !important;
}
.port-piece {
  transition: transform 540ms cubic-bezier(0.16,1,0.3,1), box-shadow 540ms ease, border-color 540ms ease !important;
}
.port-piece:hover {
  transform: translateY(-10px) rotateX(4deg) rotateY(-3deg) scale(1.04) !important;
  box-shadow:
    0 50px 90px -28px rgba(0,0,0,0.7),
    0 0 80px rgba(244,214,138,0.32) !important;
  z-index: 30 !important;
}

/* Add a corner viewfinder + REC tag to each portfolio piece */
.port-piece::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 14px; height: 14px;
  border-top: 1.5px solid rgba(244,214,138,0.65);
  border-left: 1.5px solid rgba(244,214,138,0.65);
  z-index: 5;
  pointer-events: none;
}
.port-piece::after {
  content: "";
  position: absolute;
  bottom: 12px; right: 12px;
  width: 14px; height: 14px;
  border-bottom: 1.5px solid rgba(244,214,138,0.65);
  border-right: 1.5px solid rgba(244,214,138,0.65);
  z-index: 5;
  pointer-events: none;
}

/* Mega title glow + animated overlay */
.port-archive-mega-word {
  text-shadow:
    0 0 24px rgba(244,214,138,0.4),
    0 0 60px rgba(244,214,138,0.2) !important;
  animation: portMegaPulse 6s ease-in-out infinite;
}
@keyframes portMegaPulse {
  0%, 100% { text-shadow: 0 0 24px rgba(244,214,138,0.4), 0 0 60px rgba(244,214,138,0.2); }
  50%      { text-shadow: 0 0 38px rgba(244,214,138,0.6), 0 0 90px rgba(244,214,138,0.35); }
}

/* Subtle animated film grain over the portfolio stage */
.port-archive-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.025) 0,
    rgba(255,255,255,0.025) 0.5px,
    transparent 1px,
    transparent 3px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity: 0.4;
  animation: portGrain 0.9s steps(8) infinite;
}
@keyframes portGrain {
  0%   { background-position: 0 0; }
  25%  { background-position: -2px 1px; }
  50%  { background-position: 2px -1px; }
  75%  { background-position: -1px -2px; }
  100% { background-position: 0 0; }
}

/* Side strip "live timecode" on portfolio */
.port-archive-kicker::after {
  content: " · REC ●";
  color: #ff5a4a;
  letter-spacing: 0.18em;
  animation: portRecBlink 1.4s ease-in-out infinite;
}
@keyframes portRecBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .port-archive-mega-word,
  .port-archive-stage::after,
  .port-archive-kicker::after { animation: none; }
}

/* ============================================================
   V39 — PORTFOLIO V2 (sticky-stacking · marquee · editorial)
   ============================================================ */

.pf2 {
  position: relative;
  background: #0a0805;
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px);
  overflow-x: clip;
}
.pf2-shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* === Editorial head === */
.pf2-head {
  text-align: left;
  max-width: 980px;
  margin-bottom: clamp(60px, 8vw, 100px);
}
.pf2-kicker {
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  color: #d6b25d;
  text-transform: uppercase;
  display: block;
  margin-bottom: 22px;
}
.pf2-h {
  font: 400 clamp(56px, 12vw, 180px)/0.9 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.045em;
  color: #f7efdf;
  margin: 0 0 26px;
  text-transform: lowercase;
  text-shadow: 0 0 60px rgba(244,214,138,0.18);
}
.pf2-h em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a 0%, #c89b48 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pf2-sub {
  font: 400 clamp(15px, 1.4vw, 19px)/1.6 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.66);
  max-width: 720px;
  margin: 0;
}

/* === Marquee (scroll-driven horizontal) === */
.pf2-marquee {
  position: relative;
  margin: clamp(40px, 5vw, 80px) calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pf2-marquee-row {
  display: flex; gap: 12px;
  will-change: transform;
  flex-shrink: 0;
}
.pf2-marquee-tile {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 420px);
  height: clamp(140px, 17vw, 270px);
  border-radius: 18px;
  border: 1px solid rgba(244,214,138,0.18);
  position: relative;
  overflow: hidden;
  padding: 18px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: rgba(244,214,138,0.85);
}
.pf2-marquee-tile::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px),
    radial-gradient(60% 60% at 50% 50%, rgba(244,214,138,0.12), transparent 70%);
  pointer-events: none;
}
.pf2-mq-code {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  position: relative; z-index: 1;
}
.pf2-mq-name {
  margin-top: auto;
  font: 400 clamp(22px, 2.4vw, 36px)/1.05 "Fraunces", "Cormorant Garamond", serif;
  color: #f7efdf;
  letter-spacing: -0.015em;
  position: relative; z-index: 1;
}
.pf2-mq-tag {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
  position: relative; z-index: 1;
}

/* === Sticky stack === */
.pf2-stack {
  position: relative;
  margin-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(20px, 4vw, 60px);
}
.pf2-stack-wrap {
  position: sticky;
  top: 100px;
  padding-bottom: clamp(30px, 6vw, 60px);
  will-change: transform;
}
.pf2-stack-card {
  position: relative;
  border-radius: clamp(28px, 3vw, 50px);
  border: 2px solid rgba(244,214,138,0.45);
  padding: clamp(20px, 2.6vw, 36px);
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.08) inset,
    0 40px 100px -30px rgba(0,0,0,0.7);
  transform-origin: 50% 0;
  transition: transform 100ms linear;
  overflow: hidden;
  min-height: clamp(560px, 75vh, 760px);
}
.pf2-stack-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(244,214,138,0.12), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
.pf2-stack-card > * { position: relative; z-index: 1; }

.pf2-stack-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  margin-bottom: clamp(18px, 2.4vw, 32px);
}
.pf2-stack-num {
  font: 800 clamp(48px, 9vw, 130px)/0.9 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.03em;
  color: #f7efdf;
  text-shadow: 0 0 40px rgba(244,214,138,0.35);
}
.pf2-stack-meta { display: flex; flex-direction: column; gap: 6px; }
.pf2-stack-cat {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: #d6b25d;
  text-transform: uppercase;
}
.pf2-stack-name {
  margin: 0;
  font: 500 clamp(24px, 3.2vw, 48px)/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
}
.pf2-stack-cta {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f4d68a;
  padding: 12px 22px;
  border: 1.5px solid rgba(244,214,138,0.55);
  border-radius: 999px;
  background: transparent;
  transition: all 240ms ease;
  white-space: nowrap;
}
.pf2-stack-cta:hover {
  background: linear-gradient(168deg, #f4d68a, #d6b25d);
  color: #15110d;
  border-color: #f4d68a;
  box-shadow: 0 14px 30px -10px rgba(244,214,138,0.5);
}

.pf2-stack-desc {
  font: 400 clamp(14px, 1.4vw, 18px)/1.55 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.72);
  max-width: 760px;
  margin: 0 0 clamp(20px, 3vw, 40px);
}

.pf2-stack-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: clamp(12px, 1.4vw, 22px);
}
.pf2-stack-col-a { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 22px); }
.pf2-stack-col-b { display: flex; }

.pf2-stack-thumb {
  position: relative;
  border-radius: clamp(20px, 2.4vw, 36px);
  border: 1px solid rgba(244,214,138,0.22);
  padding: 18px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  color: rgba(244,214,138,0.85);
}
.pf2-stack-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
.pf2-stack-thumb-a { height: clamp(130px, 16vw, 230px); }
.pf2-stack-thumb-b { height: clamp(160px, 22vw, 340px); }
.pf2-stack-thumb-c { width: 100%; min-height: clamp(310px, 40vw, 600px); }
.pf2-stack-thumb-meta {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
}
.pf2-stack-thumb-tag {
  margin-top: auto;
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.65);
  text-transform: uppercase;
}
.pf2-stack-thumb-num {
  position: absolute;
  bottom: -10px; right: -10px;
  font: 800 clamp(140px, 18vw, 260px)/0.85 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.05em;
  color: rgba(244,214,138,0.10);
  pointer-events: none;
}

@media (max-width: 900px) {
  .pf2-stack-head { grid-template-columns: auto 1fr; }
  .pf2-stack-cta { grid-column: 1 / -1; justify-self: start; }
  .pf2-stack-grid { grid-template-columns: 1fr; }
  .pf2-stack-thumb-c { min-height: 240px; }
}

/* === Grid editorial === */
.pf2-grid {
  margin-top: clamp(80px, 10vw, 140px);
}
.pf2-grid-head { margin-bottom: clamp(28px, 4vw, 56px); }
.pf2-grid-h {
  font: 400 clamp(36px, 6vw, 86px)/0.9 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.03em;
  color: #f7efdf;
  margin: 0;
  text-transform: lowercase;
}
.pf2-grid-h em { color: #d6b25d; font-style: italic; }

.pf2-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2vw, 32px);
}
.pf2-grid-card {
  display: flex; flex-direction: column;
  gap: 18px;
  transition: transform 480ms cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
}
.pf2-grid-card:hover { transform: translateY(-6px); }
.pf2-grid-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(244,214,138,0.22);
  padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: flex-start;
  overflow: hidden;
  transition: border-color 360ms ease, box-shadow 360ms ease;
}
.pf2-grid-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.pf2-grid-card:hover .pf2-grid-thumb {
  border-color: rgba(244,214,138,0.6);
  box-shadow: 0 30px 60px -25px rgba(244,214,138,0.4);
}
.pf2-grid-thumb-code {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.78);
  position: relative; z-index: 1;
}
.pf2-grid-thumb-num {
  font: 400 clamp(80px, 10vw, 140px)/0.85 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.03em;
  color: rgba(244,214,138,0.16);
  position: absolute;
  bottom: -8px; right: -6px;
  pointer-events: none;
}

.pf2-grid-body { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.pf2-grid-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.pf2-grid-name {
  margin: 0;
  font: 500 clamp(22px, 2.4vw, 30px)/1.1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.015em;
  color: #f7efdf;
}
.pf2-grid-tag {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(244,214,138,0.55);
  text-transform: uppercase;
}

/* Hide the old PortfolioArchive completely (kept in code for safety) */
.portfolio-archive { display: none !important; }

/* ============================================================
   V40 — Portfolio popup glass 3D + Pixelated canvas
   ============================================================ */

/* Make stack + grid cards look clickable */
.pf2-stack-card,
.pf2-grid-card { cursor: pointer; }

/* ===== Portfolio Modal ===== */
.pf2-modal-wrap {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: pf2ModalFade 280ms ease;
}
@keyframes pf2ModalFade { from { opacity: 0; } to { opacity: 1; } }

.pf2-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5,4,3,0.82);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.pf2-modal {
  position: relative;
  width: min(960px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1.5px solid rgba(244,214,138,0.45);
  border-radius: clamp(28px, 3vw, 44px);
  color: #f4ecd9;
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.10) inset,
    0 50px 110px -20px rgba(0,0,0,0.7),
    0 0 100px rgba(244,214,138,0.25);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  animation: pf2ModalIn 420ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.pf2-modal::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(244,214,138,0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
.pf2-modal > * { position: relative; z-index: 1; }
@keyframes pf2ModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pf2-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(244,214,138,0.36);
  background: rgba(0,0,0,0.35);
  color: rgba(244,214,138,0.85);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: all 200ms ease;
  z-index: 3;
}
.pf2-modal-close:hover {
  color: #15110d; background: linear-gradient(168deg, #f4d68a, #d6b25d);
  border-color: #f4d68a;
  transform: scale(1.06);
}

.pf2-modal-head {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: clamp(18px, 2vw, 26px);
}
.pf2-modal-code-block {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pf2-modal-code { color: #f4d68a; }
.pf2-modal-role {
  color: rgba(232,224,205,0.55);
  padding: 5px 9px;
  border: 1px solid rgba(244,214,138,0.22);
  border-radius: 999px;
}
.pf2-modal-name {
  margin: 0;
  font: 400 clamp(36px, 6vw, 80px)/0.95 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  text-shadow: 0 0 32px rgba(244,214,138,0.45);
}
.pf2-modal-meta-row {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.62);
  text-transform: uppercase;
}

.pf2-modal-desc {
  font: 400 clamp(14px, 1.4vw, 16px)/1.65 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.78);
  max-width: 740px;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}

/* Frames grid */
.pf2-modal-frames {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: clamp(10px, 1.2vw, 18px);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.pf2-modal-frame {
  position: relative;
  height: clamp(180px, 22vw, 280px);
  border-radius: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(244,214,138,0.22);
  overflow: hidden;
  padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.pf2-modal-frame-wide { grid-column: span 1; height: clamp(220px, 26vw, 330px); }
.pf2-modal-frame::after {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 4px),
    linear-gradient(165deg, rgba(244,214,138,0.06), transparent 50%);
  pointer-events: none;
}
.pf2-modal-frame-num {
  font: 800 clamp(50px, 6vw, 80px)/0.85 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.04em;
  color: rgba(244,214,138,0.32);
  position: relative; z-index: 1;
}
.pf2-modal-frame-num-big {
  font-size: clamp(36px, 4vw, 56px) !important;
  color: rgba(244,214,138,0.6) !important;
  text-shadow: 0 0 22px rgba(244,214,138,0.35);
}
.pf2-modal-frame-tag {
  margin-top: auto;
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(232,224,205,0.65);
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.pf2-modal-frame-scan {
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(244,214,138,0.32) 50%, transparent 70%);
  animation: pf2Scan 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pf2Scan {
  0%   { left: -100%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

@media (max-width: 760px) {
  .pf2-modal-frames { grid-template-columns: 1fr 1fr; }
  .pf2-modal-frame-wide { grid-column: span 2; }
}

/* Specs */
.pf2-modal-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  padding: 18px 0;
  margin-bottom: clamp(18px, 2vw, 26px);
  border-top: 1px solid rgba(244,214,138,0.12);
  border-bottom: 1px solid rgba(244,214,138,0.12);
}
.pf2-modal-specs div { display: flex; flex-direction: column; gap: 4px; }
.pf2-modal-specs dt {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.5);
  text-transform: uppercase;
  margin: 0;
}
.pf2-modal-specs dd {
  margin: 0;
  font: 500 13px/1.3 "Inter", system-ui, sans-serif;
  color: #f4ecd9;
}

.pf2-modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.pf2-modal-quote {
  font: 400 italic clamp(13px, 1.3vw, 16px)/1.5 "Fraunces", "Cormorant Garamond", serif;
  color: rgba(232,224,205,0.7);
  max-width: 520px;
  border-left: 2px solid rgba(244,214,138,0.4);
  padding-left: 14px;
}
.pf2-modal-cta {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font: 600 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #15110d;
  background: linear-gradient(168deg, #f4d68a, #d6b25d 50%, #a07d3b);
  padding: 14px 24px;
  border-radius: 999px;
  box-shadow: 0 14px 32px -10px rgba(244,214,138,0.55);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.pf2-modal-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -10px rgba(244,214,138,0.7);
}

/* ===== Pixelated canvas frame in Founder ===== */
.founder-photo-frame-canvas {
  background: linear-gradient(168deg, rgba(28,22,14,0.6), rgba(10,7,5,0.7)) !important;
  border: 1px solid rgba(244,214,138,0.32) !important;
  border-radius: 22px !important;
  padding: 14px !important;
  position: relative;
  overflow: hidden;
}
.pixel-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 4/5;
  border-radius: 14px;
  cursor: crosshair;
  background: #0a0805;
}
.founder-photo-frame-canvas .founder-photo-corner {
  z-index: 2;
}

/* ============================================================
   V41 — Fix popup overflow clipping content
   ============================================================ */

/* Modal had overflow:hidden which killed scroll. Use flex column + inner scrollable body */
.pf2-modal {
  overflow: visible !important;   /* allow corners, the inner body scrolls */
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
  max-height: 88vh !important;
}

/* The decorative pseudos & close stay attached to the outer modal */
.pf2-modal-close { top: 14px !important; right: 14px !important; }

/* Wrap ALL content children into a scrollable body via a container.
   Since we can't add a wrapper element from CSS, target the direct
   children except ::before and the close button. */
.pf2-modal > .pf2-modal-head,
.pf2-modal > .pf2-modal-desc,
.pf2-modal > .pf2-modal-frames,
.pf2-modal > .pf2-modal-specs,
.pf2-modal > .pf2-modal-foot {
  /* Nothing to scroll yet — we move them into a scroller below */
}

/* Build a scrollable body via padding & a max-height wrapper using
   the modal itself as the scroller — make content margin instead of padding */
.pf2-modal {
  padding: clamp(28px, 3.4vw, 44px) !important;
  overflow-y: auto !important;
}

/* Prevent the gradient ::before from interfering with scroll height */
.pf2-modal::before {
  position: fixed !important;
  inset: auto !important;
  /* attach to the modal box via stickier strategy: keep as pointer-events none, transparent. */
}
/* Simpler: just make ::before relative-positioned to the modal but no influence on layout */
.pf2-modal::before {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  height: auto !important;
  pointer-events: none;
}

/* Custom scrollbar to match brand */
.pf2-modal::-webkit-scrollbar { width: 8px; }
.pf2-modal::-webkit-scrollbar-track { background: transparent; }
.pf2-modal::-webkit-scrollbar-thumb {
  background: rgba(244,214,138,0.35);
  border-radius: 4px;
}
.pf2-modal::-webkit-scrollbar-thumb:hover { background: rgba(244,214,138,0.6); }
.pf2-modal { scrollbar-color: rgba(244,214,138,0.35) transparent; scrollbar-width: thin; }

/* Bottom padding so the gold CTA isn't flush against the rounded corner */
.pf2-modal-foot { padding-bottom: 6px; }

/* Tighten the head if very long content */
.pf2-modal-head { padding-top: 4px; }

/* Allow long quotes to wrap, never overflow */
.pf2-modal-quote {
  max-width: 100% !important;
  word-break: break-word;
}

/* ============================================================
   V44 — MUSA Steps Trail (5 etapas, scroll-driven horizontal)
   ============================================================ */
.musa-steps {
  position: relative;
  background: linear-gradient(180deg, #0a0805 0%, #100b06 50%, #0a0805 100%);
  height: 320vh;
  z-index: 2;
}
.musa-steps-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 6vw, 80px);
  overflow: hidden;
}
.musa-steps-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto clamp(30px, 4vw, 60px);
  padding: 0 24px;
}
.musa-steps-kicker {
  display: inline-block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  color: #d6b25d;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.musa-steps-h {
  margin: 0 0 18px;
  font: 400 clamp(36px, 6vw, 86px)/0.95 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  text-shadow: 0 0 50px rgba(244,214,138,0.18);
}
.musa-steps-h em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.musa-steps-sub {
  font: 400 clamp(14px, 1.4vw, 17px)/1.6 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.65);
  margin: 0;
}

.musa-steps-track {
  flex: 1 1 auto;
  position: relative;
  display: flex; align-items: center;
  overflow: hidden;
  padding: 0 0 24px;
  perspective: 1800px;
}
.musa-steps-rail {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  padding: 0 calc(50vw - 200px);
  transform-style: preserve-3d;
  will-change: transform;
}

.musa-step-card {
  flex: 0 0 auto;
  width: clamp(260px, 28vw, 400px);
  min-height: clamp(360px, 44vh, 480px);
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 22px;
  border: 1px solid rgba(244,214,138,0.24);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.10), transparent 55%),
    linear-gradient(168deg, rgba(36,28,16,0.55), rgba(14,10,6,0.65));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: opacity 320ms ease, transform 320ms cubic-bezier(0.16,1,0.3,1), border-color 320ms ease, box-shadow 320ms ease;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.6);
}
.musa-step-card.is-active {
  border-color: rgba(244,214,138,0.6);
  box-shadow:
    0 36px 80px -22px rgba(0,0,0,0.7),
    0 0 70px rgba(244,214,138,0.32);
}

.musa-step-corner {
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
  border-color: rgba(244,214,138,0.55);
}
.musa-step-corner.tl { top: 10px; left: 10px; border-top: 1.5px solid; border-left: 1.5px solid; }
.musa-step-corner.tr { top: 10px; right: 10px; border-top: 1.5px solid; border-right: 1.5px solid; }
.musa-step-corner.bl { bottom: 10px; left: 10px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.musa-step-corner.br { bottom: 10px; right: 10px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

.musa-step-kicker {
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: rgba(244,214,138,0.82);
}
.musa-step-num {
  font: 800 clamp(72px, 8vw, 110px)/0.85 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.04em;
  color: rgba(244,214,138,0.14);
  position: absolute;
  bottom: 14px; right: 18px;
  pointer-events: none;
}
.musa-step-meta { display: flex; flex-direction: column; gap: 6px; }
.musa-step-sub {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.musa-step-title {
  margin: 0;
  font: 500 clamp(26px, 3vw, 38px)/1.1 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
  text-shadow: 0 0 24px rgba(244,214,138,0.3);
}
.musa-step-desc {
  margin: 0;
  font: 400 13px/1.55 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.7);
  flex: 1 1 auto;
}
.musa-step-line {
  margin-top: auto;
}
.musa-step-line-track {
  display: block;
  height: 2px;
  background: rgba(244,214,138,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.musa-step-line-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f4d68a, #d6b25d);
  transform-origin: 0 50%;
  transition: transform 320ms cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 0 10px rgba(244,214,138,0.55);
}

/* Bottom progress */
.musa-steps-progress {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 56px) 0;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.musa-steps-progress-dots {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  flex: 1 1 auto;
  position: relative;
}
.musa-steps-progress-dots::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: rgba(244,214,138,0.12);
  transform: translateY(-50%);
  z-index: 0;
}
.musa-steps-dot {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 6px;
  z-index: 1;
}
.musa-steps-dot i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(244,214,138,0.18);
  border: 1px solid rgba(244,214,138,0.3);
  transition: all 280ms ease;
}
.musa-steps-dot em {
  font: 500 9px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.5);
  text-transform: uppercase;
  font-style: normal;
}
.musa-steps-dot.is-done i {
  background: linear-gradient(168deg, #f4d68a, #d6b25d);
  border-color: #f4d68a;
  box-shadow: 0 0 12px rgba(244,214,138,0.55);
  transform: scale(1.18);
}
.musa-steps-dot.is-done em {
  color: #f4d68a;
}
.musa-steps-progress-pct {
  font: 600 14px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: #f4d68a;
  text-shadow: 0 0 10px rgba(244,214,138,0.45);
}

@media (max-width: 760px) {
  .musa-steps { height: 280vh; }
  .musa-step-card { width: 260px; min-height: 360px; }
  .musa-steps-rail { padding: 0 calc(50vw - 130px); }
}
@media (prefers-reduced-motion: reduce) {
  .musa-step-card { transition: none; }
}

/* ============================================================
   V45 — BWAY Showroom (boomerang video + liquid glass + now playing)
   ============================================================ */

/* Liquid glass primitive */
.liquid-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(244,214,138,0.55) 0%, rgba(244,214,138,0.18) 20%,
    rgba(244,214,138,0) 40%, rgba(244,214,138,0) 60%,
    rgba(244,214,138,0.18) 80%, rgba(244,214,138,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* fade-up — backwards (NOT both/forwards) so backdrop-filter survives */
@keyframes bw-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.animate-fade-up {
  animation: bw-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.75s; }
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { animation: none; }
}

/* === Section frame === */
.bw-showroom {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

/* Background video / canvas */
.bw-bg-wrap {
  position: absolute; inset: 0;
  z-index: 0;
  transform: scale(1.08);
  transform-origin: center;
  overflow: hidden;
}
.bw-bg-video, .bw-bg-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bw-bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.7) 100%),
    linear-gradient(180deg, rgba(20,14,8,0.32), rgba(8,5,3,0.52));
  pointer-events: none;
}

/* Hero inner content */
.bw-show-inner {
  position: relative;
  z-index: 10;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(110px, 16vw, 200px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 80px);
}

.bw-show-badge {
  display: inline-block;
  background: rgba(255,255,255,0.16) !important;
  padding: 7px 16px;
  border-radius: 12px;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: #ffe7a3;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.bw-show-headline {
  margin: 0;
  font: 400 clamp(40px, 7.5vw, 96px)/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  max-width: 760px;
  text-shadow: 0 0 60px rgba(0,0,0,0.4);
}
.bw-show-headline em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.bw-show-sub {
  margin: clamp(18px, 2vw, 28px) 0 0;
  max-width: 460px;
  font: 400 clamp(14px, 1.3vw, 18px)/1.55 "Inter", system-ui, sans-serif;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.bw-show-ctas {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex; gap: 12px;
}
@media (max-width: 540px) {
  .bw-show-ctas { flex-direction: column; align-items: flex-start; }
}
.bw-show-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  border-radius: 14px;
  font: 600 13px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 220ms ease;
}
.bw-show-cta:hover { transform: scale(1.05); }
.bw-show-cta:active { transform: scale(0.95); }
.bw-show-cta-primary {
  background: linear-gradient(168deg, #f4d68a, #d6b25d 50%, #a07d3b);
  color: #15110d;
  box-shadow: 0 16px 36px -10px rgba(244,214,138,0.5);
}
.bw-show-cta-ghost {
  border-radius: 14px;
  padding: 12px 28px;
  color: #fff;
  background: rgba(255,255,255,0.06) !important;
}

/* Now playing widget */
.bw-now {
  position: absolute;
  bottom: clamp(16px, 2vw, 32px);
  right: clamp(16px, 3vw, 44px);
  width: min(290px, calc(100vw - 32px));
  z-index: 20;
  display: flex; flex-direction: column;
  gap: 8px;
}
.bw-now-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.97);
  padding: 10px 16px 10px 10px;
  border-radius: 18px;
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.55);
  color: #15110d;
}
.bw-now-icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(168deg, #f4d68a, #a07d3b);
  display: flex; align-items: center; justify-content: center;
  color: #15110d;
}
.bw-now-icon svg { width: 22px; height: 22px; }
.bw-now-body {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; flex: 1 1 auto;
}
.bw-now-track {
  font: 500 13px/1.2 "Inter", system-ui, sans-serif;
  color: #15110d;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-now-track em {
  font-style: italic;
  color: #6b4d1a;
}
.bw-now-bar {
  height: 4px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.bw-now-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f4d68a, #a07d3b);
  border-radius: 999px;
}
.bw-now-times {
  display: flex; justify-content: space-between;
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.5);
}
.bw-now-controls {
  display: flex; align-items: center; gap: 8px;
}
.bw-now-btn {
  flex: 1 1 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.97);
  color: #15110d;
  border: none;
  font: 600 12px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,0.45);
  transition: transform 220ms ease;
}
.bw-now-btn:hover { transform: scale(1.04); }
.bw-now-btn:active { transform: scale(0.95); }
.bw-now-heart {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.97);
  border: none;
  color: #a07d3b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,0.45);
  transition: transform 220ms ease, color 220ms ease;
}
.bw-now-heart svg { width: 18px; height: 18px; }
.bw-now-heart:hover { transform: scale(1.1); }
.bw-now-heart:active { transform: scale(0.95); }
.bw-now-heart.is-liked { color: #d63a3a; }

/* ============================================================
   V46 — MUSA RITE · 3D parallax narrative timeline
   Replaces the older musa-steps horizontal rail.
   ============================================================ */
.musa-steps { display: none !important; } /* hide previous variant */

.musa-rite {
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(244,214,138,0.10), transparent 65%),
    linear-gradient(180deg, #0a0805 0%, #0e0907 50%, #0a0805 100%);
  height: 420vh;
  z-index: 2;
  overflow: hidden;
}
.musa-rite-pin {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 56px) 60px;
  perspective: 2000px;
  perspective-origin: 50% 45%;
  overflow: hidden;
}

/* Atmosphere layers */
.musa-rite-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,214,138,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,214,138,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 90%);
  pointer-events: none;
  opacity: 0.6;
}
.musa-rite-beam {
  position: absolute; left: 50%; top: -10%;
  transform: translateX(-50%);
  width: 60vw; height: 130%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(244,214,138,0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  transition: transform 200ms linear;
  z-index: 1;
}
.musa-rite-grain {
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.018) 0 0.5px, transparent 1px 3px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}

/* Head */
.musa-rite-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
  position: relative; z-index: 3;
}
.musa-rite-kicker {
  display: inline-block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  color: #d6b25d;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.musa-rite-h {
  margin: 0;
  font: 400 clamp(36px, 7vw, 96px)/0.95 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.028em;
  color: #f7efdf;
  text-shadow: 0 0 60px rgba(244,214,138,0.22);
}
.musa-rite-h em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Stage — 3D frame field */
.musa-rite-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  perspective: 2000px;
  z-index: 2;
}

.musa-rite-frame {
  position: absolute;
  width: min(720px, 76vw);
  min-height: clamp(320px, 44vh, 480px);
  padding: clamp(28px, 3vw, 44px);
  border-radius: 22px;
  border: 1.5px solid rgba(244,214,138,0.42);
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(244,214,138,0.16), transparent 60%),
    linear-gradient(168deg, rgba(36,28,16,0.62), rgba(14,10,6,0.72));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transform-style: preserve-3d;
  transition: opacity 200ms linear, transform 200ms linear;
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.08) inset,
    0 40px 80px -22px rgba(0,0,0,0.7);
  will-change: transform, opacity;
  overflow: hidden;
}
.musa-rite-frame::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
.musa-rite-frame.is-active {
  border-color: rgba(244,214,138,0.75);
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.18) inset,
    0 50px 100px -22px rgba(0,0,0,0.75),
    0 0 100px rgba(244,214,138,0.4);
}
.musa-rite-frame-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(45% 45% at 50% 30%, rgba(244,214,138,0.35), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  transition: opacity 300ms ease;
}

/* Corners */
.musa-rite-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(244,214,138,0.7);
  pointer-events: none;
}
.musa-rite-corner.tl { top: 12px; left: 12px; border-top: 1.5px solid; border-left: 1.5px solid; }
.musa-rite-corner.tr { top: 12px; right: 12px; border-top: 1.5px solid; border-right: 1.5px solid; }
.musa-rite-corner.bl { bottom: 12px; left: 12px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.musa-rite-corner.br { bottom: 12px; right: 12px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* Frame contents */
.musa-rite-frame-num {
  position: absolute;
  bottom: -18px; right: -8px;
  font: 800 clamp(140px, 18vw, 260px)/0.78 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.05em;
  color: rgba(244,214,138,0.10);
  pointer-events: none;
}
.musa-rite-frame.is-active .musa-rite-frame-num { color: rgba(244,214,138,0.16); }
.musa-rite-frame-kicker {
  display: inline-block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: rgba(244,214,138,0.85);
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.musa-rite-frame-meta { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.musa-rite-frame-sub {
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}
.musa-rite-frame-title {
  margin: 0;
  font: 500 clamp(34px, 4.4vw, 56px)/1.08 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.022em;
  color: #f7efdf;
  text-shadow: 0 0 22px rgba(244,214,138,0.32);
}
.musa-rite-frame-desc {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font: 400 clamp(14px, 1.3vw, 17px)/1.6 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.78);
  max-width: 540px;
  position: relative; z-index: 1;
}
.musa-rite-frame-stamp {
  position: absolute;
  top: 12px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 9px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.7);
  z-index: 2;
}
.musa-rite-frame-stamp .rec {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 8px #ff5a4a;
  animation: musaRiteBlink 1.2s ease-in-out infinite;
}
@keyframes musaRiteBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Side rail timeline */
.musa-rite-rail {
  position: absolute;
  top: 50%; right: clamp(20px, 3vw, 48px);
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 18px;
  z-index: 4;
  padding: 16px 0;
}
.musa-rite-rail-line {
  position: absolute;
  top: 8px; bottom: 8px; left: 9px;
  width: 1px;
  background: rgba(244,214,138,0.18);
  border-radius: 1px;
}
.musa-rite-rail-line i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f4d68a, #d6b25d);
  transform-origin: 0 0;
  transition: transform 200ms linear;
  box-shadow: 0 0 10px rgba(244,214,138,0.45);
}
.musa-rite-rail-node {
  position: relative;
  display: inline-flex; align-items: center;
  gap: 12px;
  padding-left: 0;
  cursor: default;
}
.musa-rite-rail-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(244,214,138,0.16);
  border: 1px solid rgba(244,214,138,0.4);
  transition: all 300ms cubic-bezier(0.16,1,0.3,1);
  z-index: 1;
  flex-shrink: 0;
}
.musa-rite-rail-node.is-reached .musa-rite-rail-dot {
  background: linear-gradient(168deg, #f4d68a, #d6b25d);
  border-color: #f4d68a;
  box-shadow: 0 0 14px rgba(244,214,138,0.7);
  transform: scale(1.2);
}
.musa-rite-rail-node.is-active .musa-rite-rail-dot {
  animation: musaRailPulse 1.6s ease-in-out infinite;
}
@keyframes musaRailPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244,214,138,0.18), 0 0 14px rgba(244,214,138,0.7); }
  50%      { box-shadow: 0 0 0 9px rgba(244,214,138,0.06), 0 0 22px rgba(244,214,138,0.9); }
}
.musa-rite-rail-label {
  display: flex; flex-direction: column; gap: 2px;
  font-style: normal;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.musa-rite-rail-node.is-active .musa-rite-rail-label,
.musa-rite-rail-node.is-reached .musa-rite-rail-label {
  opacity: 1;
  transform: translateX(0);
}
.musa-rite-rail-label em {
  font: 600 9px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.8);
  font-style: normal;
}
.musa-rite-rail-label b {
  font: 500 12px/1 "Inter", system-ui, sans-serif;
  color: rgba(247,239,223,0.92);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .musa-rite-rail { display: none; }
}

/* HUD bottom */
.musa-rite-hud {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(8,5,3,0.55);
  border: 1px solid rgba(244,214,138,0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,214,138,0.85);
  z-index: 5;
}
.musa-rite-hud-tag { color: #ff5a4a; }
.musa-rite-hud-tc { color: #ffe7a3; }
.musa-rite-hud-sep { color: rgba(244,214,138,0.4); }
.musa-rite-hud-step { color: rgba(232,224,205,0.7); }

@media (prefers-reduced-motion: reduce) {
  .musa-rite-frame { transition: none; }
  .musa-rite-rail-node.is-active .musa-rite-rail-dot { animation: none; }
  .musa-rite-frame-stamp .rec { animation: none; }
}

/* ============================================================
   V47 — MUSA Rite (centered card stack · horizontal timeline)
   Replaces V46 layout that was clipping content off-screen.
   ============================================================ */
.musa-rite,        /* old V46 wrapper */
.musa-steps        /* original V44 */
{ display: none !important; }

.mr2 {
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(244,214,138,0.10), transparent 65%),
    linear-gradient(180deg, #0a0805 0%, #0e0907 50%, #0a0805 100%);
  height: 360vh;
  z-index: 2;
  overflow: hidden;
}
.mr2-pin {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  padding: clamp(50px, 6vw, 90px) clamp(20px, 4vw, 60px) clamp(80px, 8vw, 110px);
  perspective: 1800px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}

/* atmosphere */
.mr2-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,214,138,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,214,138,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 90%);
  opacity: 0.55;
  pointer-events: none;
}
.mr2-beam {
  position: absolute; left: 50%; top: -10%;
  width: 56vw; height: 130%;
  background: radial-gradient(50% 50% at 50% 0%, rgba(244,214,138,0.18), transparent 70%);
  filter: blur(40px);
  transition: transform 200ms linear;
  pointer-events: none;
  z-index: 0;
}
.mr2-grain {
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.018) 0 0.5px, transparent 1px 3px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
}

/* Head */
.mr2-head {
  text-align: center;
  max-width: 880px;
  margin: 0 auto clamp(20px, 2vw, 32px);
  position: relative; z-index: 3;
  flex-shrink: 0;
}
.mr2-kicker {
  display: inline-block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  color: #d6b25d;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.mr2-h {
  margin: 0;
  font: 400 clamp(34px, 6vw, 78px)/0.98 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  text-shadow: 0 0 50px rgba(244,214,138,0.2);
}
.mr2-h em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Stage — centered card stack */
.mr2-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  z-index: 2;
}

.mr2-frame {
  position: absolute;
  left: 50%; top: 50%;
  width: min(640px, 92vw);
  margin-left: calc(min(640px, 92vw) / -2);
  margin-top: clamp(-260px, -28vh, -210px);
  padding: clamp(28px, 3vw, 40px);
  border-radius: 22px;
  border: 1.5px solid rgba(244,214,138,0.42);
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(244,214,138,0.16), transparent 60%),
    linear-gradient(168deg, rgba(36,28,16,0.7), rgba(14,10,6,0.78));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transform-style: preserve-3d;
  transition: opacity 250ms linear, transform 250ms cubic-bezier(0.22,1,0.36,1);
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.08) inset,
    0 40px 80px -22px rgba(0,0,0,0.7);
  display: flex; flex-direction: column;
  gap: 12px;
  overflow: hidden;
  will-change: transform, opacity;
}
.mr2-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px);
  pointer-events: none;
}
.mr2-frame.is-active {
  border-color: rgba(244,214,138,0.78);
  box-shadow:
    0 0 0 1px rgba(244,214,138,0.16) inset,
    0 50px 110px -22px rgba(0,0,0,0.78),
    0 0 90px rgba(244,214,138,0.35);
}
.mr2-frame-glow {
  position: absolute; inset: -8%;
  background: radial-gradient(45% 45% at 50% 30%, rgba(244,214,138,0.35), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  transition: opacity 250ms ease;
}
.mr2-corner {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(244,214,138,0.65);
  pointer-events: none;
  z-index: 1;
}
.mr2-corner.tl { top: 10px; left: 10px; border-top: 1.5px solid; border-left: 1.5px solid; }
.mr2-corner.tr { top: 10px; right: 10px; border-top: 1.5px solid; border-right: 1.5px solid; }
.mr2-corner.bl { bottom: 10px; left: 10px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.mr2-corner.br { bottom: 10px; right: 10px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

.mr2-frame-stamp {
  position: absolute;
  top: 14px; right: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 9px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.72);
  z-index: 2;
}
.mr2-frame-stamp .rec {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 8px #ff5a4a;
  animation: mr2Blink 1.2s ease-in-out infinite;
}
@keyframes mr2Blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.mr2-frame-kicker {
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: rgba(244,214,138,0.88);
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.mr2-frame-sub {
  font: 500 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.mr2-frame-title {
  margin: 4px 0 6px;
  font: 500 clamp(36px, 5vw, 62px)/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  text-shadow: 0 0 22px rgba(244,214,138,0.35);
  position: relative; z-index: 1;
}
.mr2-frame-desc {
  margin: 0;
  font: 400 clamp(14px, 1.3vw, 17px)/1.6 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.78);
  position: relative; z-index: 1;
  max-width: 540px;
}
.mr2-frame-num {
  position: absolute;
  bottom: -22px; right: -8px;
  font: 800 clamp(140px, 16vw, 220px)/0.78 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.05em;
  color: rgba(244,214,138,0.10);
  pointer-events: none;
  z-index: 0;
}

/* Rail BELOW the frame */
.mr2-rail {
  position: relative;
  z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 8px;
  margin-top: 14px;
}
.mr2-rail-line {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  height: 1px;
  background: rgba(244,214,138,0.18);
  border-radius: 1px;
  z-index: 0;
}
.mr2-rail-line i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, #f4d68a, #d6b25d);
  transform-origin: 0 50%;
  transition: transform 220ms linear;
  box-shadow: 0 0 8px rgba(244,214,138,0.5);
}
.mr2-rail-node {
  position: relative;
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  z-index: 1;
}
.mr2-rail-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(244,214,138,0.16);
  border: 1px solid rgba(244,214,138,0.4);
  transition: all 280ms ease;
}
.mr2-rail-node.is-reached .mr2-rail-dot {
  background: linear-gradient(168deg, #f4d68a, #d6b25d);
  border-color: #f4d68a;
  box-shadow: 0 0 12px rgba(244,214,138,0.65);
  transform: scale(1.2);
}
.mr2-rail-node.is-active .mr2-rail-dot {
  animation: mr2RailPulse 1.6s ease-in-out infinite;
}
@keyframes mr2RailPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(244,214,138,0.16), 0 0 12px rgba(244,214,138,0.65); }
  50%     { box-shadow: 0 0 0 8px rgba(244,214,138,0.05), 0 0 20px rgba(244,214,138,0.9); }
}
.mr2-rail-label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-style: normal;
  text-align: center;
  opacity: 0.5;
  transition: opacity 280ms ease, transform 280ms ease;
}
.mr2-rail-node.is-reached .mr2-rail-label { opacity: 1; }
.mr2-rail-label em {
  font: 600 9px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(244,214,138,0.78);
  font-style: normal;
}
.mr2-rail-label b {
  font: 500 11px/1.15 "Inter", system-ui, sans-serif;
  color: rgba(232,224,205,0.85);
  font-weight: 500;
  text-align: center;
}

/* HUD bottom */
.mr2-hud {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8,5,3,0.6);
  border: 1px solid rgba(244,214,138,0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,214,138,0.85);
  z-index: 5;
}
.mr2-hud-rec { display: inline-flex; align-items: center; gap: 5px; color: #ff5a4a; }
.mr2-hud-rec i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 8px #ff5a4a;
  animation: mr2Blink 1.2s ease-in-out infinite;
}
.mr2-hud-tc { color: #ffe7a3; }
.mr2-hud-sep { color: rgba(244,214,138,0.4); }
.mr2-hud-step { color: rgba(232,224,205,0.7); }

@media (max-width: 760px) {
  .mr2 { height: 320vh; }
  .mr2-rail-label b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mr2-frame, .mr2-rail-line i { transition: none; }
  .mr2-rail-node.is-active .mr2-rail-dot,
  .mr2-frame-stamp .rec, .mr2-hud-rec i { animation: none; }
}

/* V47b — make transitions overlap so a frame is always visible */
.mr2-frame {
  /* override transition curve for snappier swap */
  transition: opacity 380ms ease-out, transform 380ms cubic-bezier(0.22,1,0.36,1) !important;
}

/* V47c — kill the manual top/left/margin offsets that pushed frames off-screen */
.mr2-frame {
  left: 50% !important;
  top: 50% !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   V48 — MUSA Rite final fix
   - Frame sits in the CENTER of viewport (not pinned to top)
   - Generous internal padding so nothing overflows
   - Rail nodes spread evenly with proper gap
   - Frames never fully fade — minimum opacity for adjacent ones
   ============================================================ */

/* Reset prior MR2 overrides */
.mr2 { height: 380vh; }
.mr2-pin {
  padding-top: clamp(40px, 5vw, 70px) !important;
  padding-bottom: clamp(70px, 8vw, 110px) !important;
}

.mr2-stage {
  margin: clamp(30px, 4vw, 60px) 0 0 !important;
}

/* Frame: explicit absolute center, room around it */
.mr2-frame {
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  width: min(640px, 88vw) !important;
  min-height: clamp(280px, 36vh, 360px);
  padding: clamp(32px, 3vw, 44px) clamp(32px, 3vw, 44px) clamp(40px, 4vw, 52px) !important;
}

/* The transform is set by inline style — make sure base position stays via translate-50 */
.mr2-frame {
  transform-origin: center center !important;
}

/* Make sure huge number doesn't sit ON TOP of text */
.mr2-frame-num {
  bottom: -16px !important;
  right: -6px !important;
  font-size: clamp(110px, 13vw, 180px) !important;
  color: rgba(244,214,138,0.08) !important;
  z-index: 0 !important;
}
.mr2-frame.is-active .mr2-frame-num { color: rgba(244,214,138,0.13) !important; }

/* Title */
.mr2-frame-title {
  font-size: clamp(30px, 4vw, 48px) !important;
  margin: 2px 0 6px !important;
  word-break: break-word;
  hyphens: auto;
}
.mr2-frame-desc {
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.55 !important;
  max-width: 100% !important;
}
.mr2-frame-kicker,
.mr2-frame-sub {
  font-size: 10px !important;
}
.mr2-frame-stamp {
  top: 16px !important;
  right: 20px !important;
}

/* Rail: spread properly, ALWAYS push below frame area */
.mr2-rail {
  max-width: 640px !important;
  margin: 30px auto 0 !important;
  gap: 0 !important;
  padding: 8px 18px !important;
}
.mr2-rail-line { left: 18px !important; right: 18px !important; }

.mr2-rail-node {
  flex: 1 1 0 !important;
  min-width: 0;
  gap: 10px !important;
}
.mr2-rail-label {
  font-style: normal;
  padding: 0 6px;
  text-align: center;
}
.mr2-rail-label b {
  font-size: 10.5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
@media (max-width: 760px) {
  .mr2-rail-label b { display: block !important; font-size: 9px !important; }
}

/* ============================================================
   V49 — Sticky fix: overflow:hidden on .mr2 was killing sticky
   ============================================================ */
.mr2 {
  overflow: visible !important;
  overflow-x: clip !important;  /* clip the horizontal beam without breaking sticky */
}
.mr2-pin {
  overflow: visible !important;
}

/* ==========================================================
   V50 — Camino Vertical (MUSA Method Path)
   Replaces the pinned card-stack with a vertical path/road.
   ========================================================== */
.mr2.mr2-v50 {
  position: relative;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(244,214,138,0.10), transparent 65%),
    linear-gradient(180deg, #0a0805 0%, #0e0907 50%, #0a0805 100%);
  height: auto !important;
  min-height: 100vh;
  padding: clamp(100px, 11vw, 160px) clamp(20px, 4vw, 60px) clamp(120px, 12vw, 200px);
  overflow: visible !important;
  overflow-x: clip !important;
  z-index: 2;
}
/* Remove the old pin/stage/frame layout when V50 is active */
.mr2.mr2-v50 .mr2-pin,
.mr2.mr2-v50 .mr2-stage,
.mr2.mr2-v50 .mr2-rail { display: none !important; }

.mr2-v50 .mr2-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,214,138,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,214,138,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 30%, transparent 95%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.mr2-v50 .mr2-grain {
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.018) 0 0.5px, transparent 1px 3px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Head — title given comfortable top breathing room */
.mr2-v50 .mr2-head {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(70px, 8vw, 120px);
  padding: 0 1rem;
}
.mr2-v50 .mr2-kicker {
  display: inline-block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  color: #d6b25d;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.mr2-v50 .mr2-h {
  margin: 0;
  font: 400 clamp(40px, 7vw, 86px)/1.08 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  text-shadow: 0 0 50px rgba(244,214,138,0.2);
  padding: 0.1em 0;          /* prevent descender clipping */
  overflow: visible;
}
.mr2-v50 .mr2-h em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding: 0 0.04em;          /* avoid italic descender clipping */
}
.mr2-v50 .mr2-sub {
  margin: 22px auto 0;
  max-width: 520px;
  font: 300 15px/1.65 "Inter", sans-serif;
  color: rgba(232,224,205,0.6);
}

/* The path container */
.mr2-v50 .mr2-path {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: clamp(60px, 8vw, 100px);
  z-index: 2;
}
@media (min-width: 920px) {
  .mr2-v50 .mr2-path {
    padding-left: 0;
  }
}

/* Vertical rail (dim) */
.mr2-v50 .mr2-path-rail {
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(29px, 4vw, 49px);
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(244,214,138,0.14) 6%,
    rgba(244,214,138,0.14) 94%,
    transparent 100%);
  pointer-events: none;
}
@media (min-width: 920px) {
  .mr2-v50 .mr2-path-rail { left: 50%; transform: translateX(-50%); }
}

/* Vertical rail (filled glowing portion) */
.mr2-v50 .mr2-path-fill {
  position: absolute;
  top: 0;
  left: clamp(29px, 4vw, 49px);
  width: 2px;
  background: linear-gradient(180deg, #f4d68a 0%, #c89b48 100%);
  box-shadow:
    0 0 12px rgba(244,214,138,0.7),
    0 0 28px rgba(244,214,138,0.35);
  pointer-events: none;
  transition: height 220ms linear;
}
@media (min-width: 920px) {
  .mr2-v50 .mr2-path-fill { left: 50%; transform: translateX(-50%); }
}

/* Traveling glow head at the tip of the fill */
.mr2-v50 .mr2-path-head {
  position: absolute;
  left: clamp(29px, 4vw, 49px);
  width: 14px; height: 14px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff5d6, #f4d68a 40%, transparent 70%);
  box-shadow: 0 0 24px rgba(244,214,138,0.9), 0 0 60px rgba(244,214,138,0.5);
  transform: translateY(-50%);
  transition: top 220ms linear, opacity 300ms;
  pointer-events: none;
}
@media (min-width: 920px) {
  .mr2-v50 .mr2-path-head { left: 50%; margin-left: -7px; }
}

/* Stations */
.mr2-v50 .mr2-station {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(90px, 14vh, 180px);
  padding-left: clamp(40px, 5vw, 70px);
}
.mr2-v50 .mr2-station:last-child { margin-bottom: 0; }

/* Wide screens: alternate sides */
@media (min-width: 920px) {
  .mr2-v50 .mr2-station {
    padding-left: 0;
    width: 100%;
  }
  .mr2-v50 .mr2-station--right {
    justify-content: flex-end;
    padding-left: calc(50% + 56px);
  }
  .mr2-v50 .mr2-station--left {
    justify-content: flex-start;
    padding-right: calc(50% + 56px);
  }
}

/* Station node (the dot on the rail) */
.mr2-v50 .mr2-station-node {
  position: absolute;
  top: 32px;
  left: calc(clamp(29px, 4vw, 49px) - 22px);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
@media (min-width: 920px) {
  .mr2-v50 .mr2-station-node {
    left: 50%;
    transform: translateX(-50%);
  }
}

.mr2-v50 .mr2-station-dot {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #1a1308;
  border: 2px solid rgba(244,214,138,0.3);
  transition: background 500ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 500ms,
              box-shadow 500ms,
              transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mr2-v50 .mr2-station.is-reached .mr2-station-dot {
  background: radial-gradient(circle, #fff5d6 0%, #f4d68a 40%, #c89b48 100%);
  border-color: #f4d68a;
  box-shadow: 0 0 18px rgba(244,214,138,0.8), 0 0 40px rgba(244,214,138,0.35);
  transform: scale(1.05);
}
.mr2-v50 .mr2-station.is-active .mr2-station-dot {
  transform: scale(1.25);
}

.mr2-v50 .mr2-station-pulse {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 2px solid rgba(244,214,138,0.6);
  opacity: 0;
  pointer-events: none;
}
.mr2-v50 .mr2-station.is-active .mr2-station-pulse {
  animation: mr2v50-pulse 2.2s ease-out infinite;
}
@keyframes mr2v50-pulse {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(2.6); opacity: 0; }
}

.mr2-v50 .mr2-station-num {
  position: relative;
  z-index: 2;
  font: 700 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
  color: #0a0805;
  opacity: 0;
  transition: opacity 500ms 200ms;
  pointer-events: none;
}
.mr2-v50 .mr2-station.is-reached .mr2-station-num { opacity: 0.85; }

/* Station card — fades + slides in based on --reveal */
.mr2-v50 .mr2-station-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: 22px;
  border: 1.5px solid rgba(244,214,138,0.22);
  background:
    radial-gradient(140% 80% at 0% 0%, rgba(244,214,138,0.10), transparent 60%),
    linear-gradient(168deg, rgba(28,22,14,0.85), rgba(10,8,5,0.85));
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.08),
    0 30px 80px -30px rgba(0,0,0,0.7);
  opacity: calc(0.12 + var(--reveal, 0) * 0.88);
  transform: translate3d(calc((1 - var(--reveal, 0)) * 40px), calc((1 - var(--reveal, 0)) * 20px), 0);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 500ms,
              box-shadow 500ms;
  overflow: hidden;
}
.mr2-v50 .mr2-station--left .mr2-station-card {
  transform: translate3d(calc((1 - var(--reveal, 0)) * -40px), calc((1 - var(--reveal, 0)) * 20px), 0);
}
.mr2-v50 .mr2-station.is-active .mr2-station-card {
  border-color: rgba(244,214,138,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.14),
    0 30px 80px -20px rgba(0,0,0,0.8),
    0 0 80px -20px rgba(244,214,138,0.3);
}

/* Card internals reuse old class names */
.mr2-v50 .mr2-frame-stamp {
  position: absolute;
  top: 18px; right: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(244,214,138,0.7);
  text-transform: uppercase;
}
.mr2-v50 .mr2-frame-stamp .rec {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 10px #ff5a4a;
  animation: mr2v50-rec 1.6s ease-in-out infinite;
}
@keyframes mr2v50-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.mr2-v50 .mr2-frame-kicker {
  display: block;
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.22em;
  color: rgba(244,214,138,0.65);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mr2-v50 .mr2-frame-sub {
  display: block;
  font: 400 12px/1.4 "Inter", sans-serif;
  letter-spacing: 0.06em;
  color: rgba(232,224,205,0.55);
  margin-bottom: 16px;
}
.mr2-v50 .mr2-frame-title {
  margin: 0 0 14px;
  font: 400 clamp(28px, 3.2vw, 46px)/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.02em;
  color: #f7efdf;
}
.mr2-v50 .mr2-frame-desc {
  margin: 0;
  font: 300 14.5px/1.65 "Inter", sans-serif;
  color: rgba(232,224,205,0.78);
  max-width: 46ch;
}
.mr2-v50 .mr2-frame-num {
  position: absolute;
  right: -10px; bottom: -30px;
  font: 600 clamp(90px, 11vw, 150px)/1 "Fraunces", serif;
  color: rgba(244,214,138,0.06);
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
}

.mr2-v50 .mr2-corner {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(244,214,138,0.5);
  pointer-events: none;
}
.mr2-v50 .mr2-corner.tl { top: 10px; left: 10px;     border-top: 1.5px solid; border-left: 1.5px solid; }
.mr2-v50 .mr2-corner.tr { top: 10px; right: 10px;    border-top: 1.5px solid; border-right: 1.5px solid; }
.mr2-v50 .mr2-corner.bl { bottom: 10px; left: 10px;  border-bottom: 1.5px solid; border-left: 1.5px solid; }
.mr2-v50 .mr2-corner.br { bottom: 10px; right: 10px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* HUD — floats at bottom of viewport while section is in view */
.mr2-v50 .mr2-hud {
  position: sticky;
  bottom: 24px;
  margin: 30px auto 0;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid rgba(244,214,138,0.3);
  border-radius: 999px;
  background: rgba(10,8,5,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font: 600 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  z-index: 5;
  left: 0;
  right: 0;
}
.mr2-v50 .mr2-hud-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff5a4a; }
.mr2-v50 .mr2-hud-rec i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff5a4a; box-shadow: 0 0 10px #ff5a4a;
  animation: mr2v50-rec 1.6s ease-in-out infinite;
}
.mr2-v50 .mr2-hud-tc { color: #ffe7a3; }
.mr2-v50 .mr2-hud-sep { color: rgba(244,214,138,0.4); }
.mr2-v50 .mr2-hud-step { color: rgba(232,224,205,0.7); }

@media (prefers-reduced-motion: reduce) {
  .mr2-v50 .mr2-station-card,
  .mr2-v50 .mr2-station-dot,
  .mr2-v50 .mr2-path-fill,
  .mr2-v50 .mr2-path-head { transition: none; }
  .mr2-v50 .mr2-station-pulse,
  .mr2-v50 .mr2-frame-stamp .rec,
  .mr2-v50 .mr2-hud-rec i { animation: none; }
}

/* ==========================================================
   V51 — Continuity Pass (Una sola historia)
   Make every section bleed into the next: shared atmosphere,
   no hard background seams, soft fade bridges between sections.
   ========================================================== */

/* Single dark canvas behind everything. Each section's own background
   becomes an accent on top of this — never a hard wall of color. */
html, body {
  background: #08060a;
}
body {
  position: relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(244,214,138,0.04), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, rgba(244,214,138,0.04), transparent 60%),
    linear-gradient(180deg, #08060a 0%, #0a0805 25%, #0a0807 50%, #0a0805 75%, #08060a 100%);
}

/* Persistent atmospheric grain across the whole page so seams disappear */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.012) 0 0.5px, transparent 1px 3px);
  background-size: 6px 6px;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
}

/* Soft vignette that wraps the entire scroll — makes content feel held in one space */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

/* Every <section> should sit on the body canvas, not punch through with its own slab.
   Soften the most obvious section walls. */
section {
  position: relative;
  z-index: 3;
}

/* Top + bottom fade bridges. Each section gets gradient masks that blur into the next.
   This kills the "card / wall" feeling between sections. */
section::before,
section::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(60px, 8vw, 120px);
  pointer-events: none;
  z-index: 1;
}
section::before {
  top: 0;
  background: linear-gradient(180deg, rgba(8,6,10,0.85) 0%, transparent 100%);
}
section::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(8,6,10,0.85) 0%, transparent 100%);
}

/* Opt-out for sections that must stay opaque (modals, hero video, dashboards) */
.bn-hero::before, .bn-hero::after,
.bway-showroom::before, .bway-showroom::after,
.bw-shop::before, .bw-shop::after,
.dash::before, .dash::after,
nav::before, nav::after,
header.nav::before, header.nav::after,
footer::before, footer::after,
.pf2-modal::before, .pf2-modal::after,
.pf2-modal-backdrop::before, .pf2-modal-backdrop::after {
  display: none;
}

/* Soften any section with a flat dark backdrop so the body shows through.
   These are the most common "hard wall" backgrounds in the landing. */
.bn-arc-features,
.bn-arc-stage,
.musa-method,
.pillars,
.mr2 {
  background-color: transparent !important;
}

/* The mr2 still keeps its radial atmosphere on top of the body */
.mr2.mr2-v50 {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(244,214,138,0.08), transparent 65%),
    radial-gradient(40% 30% at 50% 100%, rgba(244,214,138,0.06), transparent 65%) !important;
}

/* Smooth global motion — entrance reveals feel like one camera move */
.reveal, .bn-reveal, .reveal-up, .reveal-fade, .arc-reveal {
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  section::before, section::after { display: none; }
}

/* V51.1 — Soften additional opaque sections */
.pillars-section, .pf2 {
  background-color: transparent !important;
}
.footer {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.7) 100%) !important;
}
.footer::before { display: none !important; }

/* ==========================================================
   V52 — Restore background video
   V51 covered .page-bg-video with body bg + grain + vignette.
   Strip those overlays. Keep section transparency, bridges, Lenis.
   ========================================================== */
html, body {
  background: transparent !important;
}
body {
  background: transparent !important;
  position: static !important;
}
/* Kill the V51 grain & vignette overlays — the page-bg-video already provides atmosphere */
body::before {
  content: none !important;
  display: none !important;
}
/* Don't touch the original film grain body::after defined earlier in this file —
   only neutralize the V51 vignette by zeroing the radial we added */
body::after {
  background: none !important;
  mix-blend-mode: normal !important;
}

/* Section bridges still apply — these were on section::before/::after, not body,
   so the video is unaffected. But weaken them slightly so the video bleeds through. */
section::before {
  background: linear-gradient(180deg, rgba(8,6,10,0.55) 0%, transparent 100%) !important;
}
section::after {
  background: linear-gradient(0deg, rgba(8,6,10,0.55) 0%, transparent 100%) !important;
}

/* ==========================================================
   V53 — Quote Builder (admin + client view)
   ========================================================== */

/* List filters */
.qb-list-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px;
}
.qb-filter {
  padding: 7px 16px;
  border: 1px solid rgba(244,214,138,0.22);
  border-radius: 999px;
  background: rgba(20,16,10,0.5);
  color: rgba(232,224,205,0.7);
  font: 500 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
}
.qb-filter:hover { color: #f7efdf; border-color: rgba(244,214,138,0.5); }
.qb-filter.is-active {
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  border-color: transparent;
}

/* Status badges */
.qb-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font: 600 9.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
}
.qb-st-draft { background: rgba(120,120,120,0.18); color: #aaa; }
.qb-st-sent  { background: rgba(244,214,138,0.2); color: #f4d68a; }
.qb-st-ok    { background: rgba(110,210,140,0.18); color: #7ed99a; }
.qb-st-no    { background: rgba(220,90,90,0.18); color: #ff8a8a; }
.qb-st-exp   { background: rgba(180,140,60,0.16); color: #c89b48; }

.qb-muted { color: rgba(232,224,205,0.45); font-size: 12px; }

.qb-table th { font-size: 11px; letter-spacing: 0.12em; }

/* Editor — meta grid */
.qb-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
  padding: 18px;
  background: rgba(14,11,7,0.4);
  border: 1px solid rgba(244,214,138,0.12);
  border-radius: 14px;
}
.qb-field {
  display: flex; flex-direction: column; gap: 6px;
}
.qb-field > span {
  font: 600 10.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.16em;
  color: rgba(244,214,138,0.7);
  text-transform: uppercase;
}
.qb-field input, .qb-field select, .qb-field textarea {
  padding: 11px 14px;
  background: rgba(8,6,4,0.6);
  border: 1px solid rgba(244,214,138,0.2);
  border-radius: 10px;
  color: #f7efdf;
  font: 400 14px/1.4 "Inter", sans-serif;
  transition: border-color 180ms;
}
.qb-field input:focus, .qb-field select:focus, .qb-field textarea:focus {
  outline: none;
  border-color: rgba(244,214,138,0.5);
  background: rgba(8,6,4,0.85);
}

/* Two-pane grid */
.qb-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px) {
  .qb-grid { grid-template-columns: 1fr; }
}

/* Catalog pane */
.qb-catalog {
  background: rgba(14,11,7,0.4);
  border: 1px solid rgba(244,214,138,0.12);
  border-radius: 14px;
  overflow: hidden;
}
.qb-cats {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px;
  background: rgba(8,6,4,0.55);
  border-bottom: 1px solid rgba(244,214,138,0.1);
  max-height: 145px; overflow-y: auto;
}
.qb-cat {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(244,214,138,0.16);
  border-radius: 999px;
  color: rgba(232,224,205,0.65);
  font: 500 10.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: all 200ms;
}
.qb-cat:hover { color: #f7efdf; border-color: rgba(244,214,138,0.4); }
.qb-cat.is-active {
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  border-color: transparent;
  font-weight: 600;
}
.qb-cat-head { padding: 18px 18px 12px; }
.qb-cat-head h4 {
  margin: 0 0 6px;
  font: 500 16px/1.2 "Fraunces", serif;
  color: #f7efdf;
}
.qb-cat-head p {
  margin: 0;
  font: 300 12.5px/1.5 "Inter", sans-serif;
  color: rgba(232,224,205,0.55);
}

.qb-items { padding: 8px 12px 18px; max-height: 540px; overflow-y: auto; }
.qb-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  margin: 6px 0;
  background: rgba(20,16,10,0.4);
  border: 1px solid rgba(244,214,138,0.08);
  border-radius: 10px;
  transition: border-color 180ms, background 180ms, transform 180ms;
}
.qb-item:hover {
  border-color: rgba(244,214,138,0.3);
  background: rgba(28,22,14,0.6);
}
.qb-item.is-disabled { opacity: 0.4; }
.qb-item-info { flex: 1; min-width: 0; }
.qb-item-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 13.5px/1.3 "Inter", sans-serif;
  color: #f7efdf;
  margin-bottom: 4px;
}
.qb-tag {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(244,214,138,0.16);
  color: #f4d68a;
  border-radius: 999px;
  font: 700 9px/1 "Space Mono", monospace;
  letter-spacing: 0.1em;
}
.qb-item-price {
  font: 400 12px/1.2 "Space Mono", monospace;
  color: rgba(244,214,138,0.7);
  font-variant-numeric: tabular-nums;
}
.qb-add {
  flex-shrink: 0;
  padding: 8px 14px;
  background: rgba(244,214,138,0.12);
  border: 1px solid rgba(244,214,138,0.3);
  border-radius: 999px;
  color: #f4d68a;
  font: 600 11px/1 "Space Mono", monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 180ms;
}
.qb-add:hover:not(:disabled) {
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  transform: translateY(-1px);
}
.qb-add:disabled { cursor: not-allowed; opacity: 0.4; }

/* Cart pane */
.qb-cart {
  position: sticky; top: 24px;
  background: rgba(14,11,7,0.55);
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}
.qb-cart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244,214,138,0.12);
}
.qb-cart-head h4 {
  margin: 0;
  font: 500 18px/1 "Fraunces", serif;
  color: #f7efdf;
}
.qb-empty {
  padding: 32px 20px;
  text-align: center;
  color: rgba(232,224,205,0.45);
  font: 300 13px/1.5 "Inter", sans-serif;
  border: 1px dashed rgba(244,214,138,0.18);
  border-radius: 10px;
}

.qb-cart-items { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.qb-li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(244,214,138,0.08);
}
.qb-li-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.qb-li-name {
  font: 500 13px/1.3 "Inter", sans-serif;
  color: #f7efdf;
  flex: 1; min-width: 0;
}
.qb-li-x {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(244,214,138,0.2);
  color: rgba(232,224,205,0.6);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px; line-height: 1;
  transition: all 180ms;
}
.qb-li-x:hover { background: rgba(220,90,90,0.2); color: #ff8a8a; border-color: rgba(220,90,90,0.4); }
.qb-li-row { display: grid; grid-template-columns: 64px auto 1fr auto; gap: 6px; align-items: center; }
.qb-li-qty, .qb-li-price {
  padding: 6px 8px;
  background: rgba(8,6,4,0.6);
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 6px;
  color: #f7efdf;
  font: 500 12px/1 "Space Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.qb-li-qty { width: 100%; }
.qb-li-mul { color: rgba(244,214,138,0.5); font-size: 11px; }
.qb-li-sub {
  text-align: right;
  font: 600 13px/1 "Space Mono", monospace;
  font-variant-numeric: tabular-nums;
  color: #f4d68a;
}

.qb-totals { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(244,214,138,0.12); }
.qb-tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0;
  font: 400 13px/1 "Inter", sans-serif;
  color: rgba(232,224,205,0.75);
}
.qb-tot-row b { font: 600 13.5px/1 "Space Mono", monospace; color: #f7efdf; font-variant-numeric: tabular-nums; }
.qb-tot-input { gap: 10px; }
.qb-tot-input input {
  width: 64px;
  padding: 5px 8px;
  background: rgba(8,6,4,0.6);
  border: 1px solid rgba(244,214,138,0.16);
  border-radius: 6px;
  color: #f7efdf;
  font: 500 12px/1 "Space Mono", monospace;
  text-align: right;
}
.qb-tot-final {
  margin-top: 8px; padding-top: 14px;
  border-top: 1px solid rgba(244,214,138,0.2);
  font-size: 15px;
}
.qb-tot-final span { color: #f4d68a; letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; font-family: "Space Mono", monospace; font-size: 12px; }
.qb-tot-final b {
  font: 600 22px/1 "Fraunces", serif;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Client view */
.qb-client-card {
  padding: 22px;
  background: rgba(14,11,7,0.5);
  border: 1px solid rgba(244,214,138,0.2);
  border-radius: 14px;
  margin-bottom: 14px;
}
.qb-client-actions { display: flex; gap: 10px; margin-top: 16px; }
.qb-approve, .qb-reject {
  padding: 10px 22px;
  border-radius: 999px;
  font: 600 11px/1 "Space Mono", monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 180ms, box-shadow 180ms;
}
.qb-approve {
  background: linear-gradient(180deg, #7ed99a, #4caf72);
  color: #0c2114;
}
.qb-approve:hover { transform: translateY(-1px); box-shadow: 0 10px 25px -8px rgba(110,210,140,0.5); }
.qb-reject {
  background: transparent;
  border-color: rgba(220,90,90,0.4);
  color: #ff8a8a;
}
.qb-reject:hover { background: rgba(220,90,90,0.15); }


/* ==========================================================
   V53 — Scroll-driven reveals + dynamic motion
   Every section/element with [data-reveal] animates in.
   Children with [data-stagger] sequence with --stagger-i.
   ========================================================== */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition:
    opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Variants — opt-in via data-reveal="left|right|scale|tilt" */
[data-reveal="left"]  { transform: translate3d(-46px, 0, 0); }
[data-reveal="right"] { transform: translate3d( 46px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="tilt"]  { transform: perspective(900px) rotateX(8deg) translate3d(0, 30px, 0); }
[data-reveal].is-in[data-reveal="left"],
[data-reveal].is-in[data-reveal="right"]  { transform: translate3d(0, 0, 0); }
[data-reveal].is-in[data-reveal="scale"]  { transform: scale(1); }
[data-reveal].is-in[data-reveal="tilt"]   { transform: perspective(900px) rotateX(0) translate3d(0, 0, 0); }

/* Auto-tagged sections — softer entry */
section[data-reveal="auto"] {
  transform: translate3d(0, 24px, 0);
}

/* Stagger children */
[data-stagger] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
}
[data-stagger].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Fast scroll subtle blur — makes the page feel kinetic without being distracting */
body.is-scrolling-fast .pf2-card,
body.is-scrolling-fast .bn-card,
body.is-scrolling-fast .bw-product {
  filter: blur(0.5px);
  transition: filter 200ms ease-out;
}
body:not(.is-scrolling-fast) .pf2-card,
body:not(.is-scrolling-fast) .bn-card,
body:not(.is-scrolling-fast) .bw-product {
  filter: blur(0);
  transition: filter 400ms ease-out;
}

/* Scroll-linked parallax for any element with --parallax (set inline via JS, or static) */
[data-parallax] {
  will-change: transform;
  transition: transform 120ms linear;
}

/* Card hover micro-interactions feel "dynamic" — subtle scale + glow lift on hover */
.pf2-card, .bn-card, .bw-product, .bento-cell, .qb-item {
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal — clip-path wipe variant for headings */
[data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 100% 0 0);
}
[data-reveal="wipe"].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  body.is-scrolling-fast * { filter: none !important; }
}

/* ==========================================================
   V54 — Request-quote modal (CTA del landing)
   ========================================================== */
.rq-backdrop {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(8,6,4,0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  animation: rqFadeIn 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rqFadeIn { from { opacity: 0; } to { opacity: 1; } }

.rq-modal {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 22px;
  border: 1.5px solid rgba(244,214,138,0.32);
  background:
    radial-gradient(140% 80% at 0% 0%, rgba(244,214,138,0.12), transparent 60%),
    linear-gradient(168deg, rgba(28,22,14,0.94), rgba(10,8,5,0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.1),
    0 50px 120px -30px rgba(0,0,0,0.8),
    0 0 100px -20px rgba(244,214,138,0.18);
  animation: rqSlideIn 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rqSlideIn {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(0, 0, 0)   scale(1); }
}

.rq-close {
  position: absolute; top: 16px; right: 18px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,214,138,0.08);
  border: 1px solid rgba(244,214,138,0.2);
  color: rgba(232,224,205,0.7);
  border-radius: 50%;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: all 200ms;
  z-index: 2;
}
.rq-close:hover { background: rgba(244,214,138,0.18); color: #f7efdf; transform: rotate(90deg); }

.rq-head { margin-bottom: 24px; }
.rq-kicker {
  display: inline-block; margin-bottom: 12px;
  font: 600 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.22em; color: #d6b25d; text-transform: uppercase;
}
.rq-head h3 {
  margin: 0 0 8px;
  font: 400 clamp(26px, 3.5vw, 36px)/1.1 "Fraunces", serif;
  color: #f7efdf;
  letter-spacing: -0.02em;
}
.rq-head h3 .em,
.rq-head h3 em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rq-head p {
  margin: 0;
  font: 300 14px/1.55 "Inter", sans-serif;
  color: rgba(232,224,205,0.65);
  max-width: 56ch;
}

.rq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.rq-field { display: flex; flex-direction: column; gap: 6px; }
.rq-field-full { grid-column: 1 / -1; }
.rq-field > span {
  font: 600 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.14em; color: rgba(244,214,138,0.7);
  text-transform: uppercase;
}
.rq-field input,
.rq-field select,
.rq-field textarea {
  padding: 12px 14px;
  background: rgba(8,6,4,0.55);
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 11px;
  color: #f7efdf;
  font: 400 14px/1.4 "Inter", sans-serif;
  transition: border-color 200ms, background 200ms;
  resize: vertical;
}
.rq-field input:focus,
.rq-field select:focus,
.rq-field textarea:focus {
  outline: none;
  border-color: rgba(244,214,138,0.55);
  background: rgba(8,6,4,0.85);
  box-shadow: 0 0 0 3px rgba(244,214,138,0.08);
}
.rq-field textarea { min-height: 96px; }

.rq-err {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid rgba(220,90,90,0.4);
  background: rgba(220,90,90,0.1);
  color: #ff8a8a;
  border-radius: 10px;
  font: 400 13px/1.4 "Inter", sans-serif;
}

.rq-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(244,214,138,0.12);
}
.rq-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rq-fine {
  margin: 16px 0 0;
  font: 300 11.5px/1.5 "Inter", sans-serif;
  color: rgba(232,224,205,0.4);
  text-align: center;
}

/* Success state */
.rq-success {
  text-align: center;
  padding: 24px 8px 8px;
}
.rq-success-mark {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #7ed99a, #4caf72);
  color: #0c2114;
  border-radius: 50%;
  font-size: 36px; font-weight: 700;
  box-shadow: 0 0 40px rgba(110,210,140,0.4);
  animation: rqPop 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rqPop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.rq-success h3 {
  margin: 0 0 12px;
  font: 400 26px/1.2 "Fraunces", serif;
  color: #f7efdf;
}
.rq-success p {
  margin: 0 0 24px;
  font: 300 14.5px/1.6 "Inter", sans-serif;
  color: rgba(232,224,205,0.7);
  max-width: 44ch;
  margin-left: auto; margin-right: auto;
}

@media (max-width: 640px) {
  .rq-grid { grid-template-columns: 1fr; }
  .rq-actions { flex-direction: column-reverse; }
  .rq-actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .rq-backdrop, .rq-modal, .rq-success-mark { animation: none; }
}

/* ==========================================================
   V56 — QuoteBuilder cinematográfico (qb2-*)
   Galería tipo cinta de film + slate + factura editorial
   ========================================================== */

.qb2-screen {
  padding: 0;
}

/* ---------- HERO ---------- */
.qb2-hero {
  position: relative;
  padding: clamp(34px, 4vw, 56px) clamp(28px, 3vw, 48px) clamp(28px, 3vw, 40px);
  border-radius: 22px;
  border: 1px solid rgba(244,214,138,0.22);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.13), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(244,214,138,0.07), transparent 60%),
    linear-gradient(168deg, rgba(28,22,14,0.78), rgba(10,8,5,0.92));
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.08),
    0 30px 80px -30px rgba(0,0,0,0.6);
  overflow: hidden;
  margin-bottom: 22px;
}
.qb2-hero-grain {
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.015) 0 0.5px, transparent 1px 3px);
  background-size: 4px 4px;
  mix-blend-mode: overlay; opacity: 0.6;
  pointer-events: none;
}
.qb2-hero-beam {
  position: absolute; top: -40%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(244,214,138,0.18), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: qb2BeamFloat 18s ease-in-out infinite alternate;
}
@keyframes qb2BeamFloat {
  from { transform: translateY(-20px); }
  to   { transform: translateY(40px); }
}

.qb2-slate {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: rgba(8,6,4,0.6);
  border: 1px solid rgba(244,214,138,0.22);
  border-radius: 999px;
  font: 600 10.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em; color: rgba(232,224,205,0.85);
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qb2-slate-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff5a4a; }
.qb2-slate-rec i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 12px #ff5a4a;
  animation: qb2Rec 1.6s ease-in-out infinite;
}
@keyframes qb2Rec { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.qb2-slate-sep { color: rgba(244,214,138,0.4); }

.qb2-hero-title {
  position: relative;
  margin: 0 0 14px;
  font: 400 clamp(36px, 5vw, 60px)/1.05 "Fraunces", "Cormorant Garamond", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
  text-shadow: 0 0 50px rgba(244,214,138,0.18);
}
.qb2-hero-title em {
  font-style: italic;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding: 0 0.04em;
}
.qb2-hero-sub {
  position: relative;
  margin: 0 0 28px;
  max-width: 62ch;
  font: 300 14.5px/1.65 "Inter", sans-serif;
  color: rgba(232,224,205,0.62);
}

.qb2-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.qb2-stat {
  padding: 18px 18px 16px;
  background: rgba(14,11,7,0.6);
  border: 1px solid rgba(244,214,138,0.12);
  border-radius: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 280ms, transform 280ms, box-shadow 280ms;
}
.qb2-stat:hover {
  border-color: rgba(244,214,138,0.35);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.4);
}
.qb2-stat-accent {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.16), transparent 60%),
    rgba(14,11,7,0.6);
  border-color: rgba(244,214,138,0.32);
}
.qb2-stat-kicker {
  display: block;
  font: 600 10px/1 "Space Mono", monospace;
  letter-spacing: 0.18em;
  color: rgba(244,214,138,0.7);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.qb2-stat b {
  display: block;
  font: 500 26px/1 "Fraunces", serif;
  color: #f7efdf;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.qb2-stat-accent b {
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.qb2-stat-hint {
  display: block;
  font: 300 11.5px/1.4 "Inter", sans-serif;
  color: rgba(232,224,205,0.45);
}

.qb2-hero-actions {
  position: relative;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.qb2-cta-new {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  border: none; border-radius: 999px;
  font: 600 12.5px/1 "Space Mono", monospace;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 10px 30px -10px rgba(244,214,138,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms;
}
.qb2-cta-new:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px -10px rgba(244,214,138,0.55),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.qb2-cta-icon { font-size: 14px; }
.qb2-cta-arrow {
  display: inline-block;
  transition: transform 280ms;
}
.qb2-cta-new:hover .qb2-cta-arrow { transform: translateX(4px); }

/* ---------- TOOLBAR ---------- */
.qb2-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: rgba(14,11,7,0.5);
  border: 1px solid rgba(244,214,138,0.12);
  border-radius: 14px;
}
.qb2-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.qb2-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 999px;
  color: rgba(232,224,205,0.65);
  font: 500 11.5px/1 "Space Mono", monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 220ms;
}
.qb2-filter i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(244,214,138,0.4);
}
.qb2-filter-draft     i { background: rgba(160,160,160,0.7); }
.qb2-filter-sent      i { background: #f4d68a; box-shadow: 0 0 8px rgba(244,214,138,0.6); }
.qb2-filter-approved  i { background: #7ed99a; box-shadow: 0 0 8px rgba(110,210,140,0.5); }
.qb2-filter-rejected  i { background: #ff8a8a; box-shadow: 0 0 8px rgba(220,90,90,0.5); }
.qb2-filter b {
  padding: 2px 7px;
  background: rgba(244,214,138,0.1);
  border-radius: 999px;
  font: 700 10px/1 "Space Mono", monospace;
  color: rgba(244,214,138,0.7);
  font-variant-numeric: tabular-nums;
}
.qb2-filter:hover { color: #f7efdf; border-color: rgba(244,214,138,0.45); transform: translateY(-1px); }
.qb2-filter.is-active {
  background: rgba(244,214,138,0.14);
  color: #f7efdf;
  border-color: rgba(244,214,138,0.55);
}
.qb2-filter.is-active b { background: rgba(244,214,138,0.3); color: #1a1308; }

.qb2-search {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: rgba(8,6,4,0.6);
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 999px;
  min-width: 240px; flex: 1; max-width: 380px;
  color: rgba(232,224,205,0.5);
  transition: border-color 220ms;
}
.qb2-search:focus-within { border-color: rgba(244,214,138,0.5); }
.qb2-search input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: #f7efdf;
  font: 400 13.5px/1 "Inter", sans-serif;
}
.qb2-search input::placeholder { color: rgba(232,224,205,0.4); }

/* ---------- GRID DE CARDS (cinta de film) ---------- */
.qb2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}

.qb2-card {
  position: relative;
  padding: 22px 24px 18px;
  background:
    linear-gradient(168deg, rgba(28,22,14,0.85), rgba(10,8,5,0.95));
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 16px;
  cursor: pointer;
  transition:
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 380ms,
    box-shadow 380ms;
  overflow: hidden;
}
.qb2-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(244,214,138,0.06), transparent 60%);
  opacity: 0; transition: opacity 380ms;
  pointer-events: none;
}
.qb2-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244,214,138,0.45);
  box-shadow:
    0 28px 60px -20px rgba(0,0,0,0.55),
    0 0 60px -20px rgba(244,214,138,0.2);
}
.qb2-card:hover::before { opacity: 1; }
.qb2-card:focus-visible { outline: 2px solid #f4d68a; outline-offset: 3px; }

/* Sprocket holes a los lados — efecto cinta de film */
.qb2-card-perf {
  position: absolute; top: 14px; bottom: 14px;
  width: 6px;
  background-image:
    radial-gradient(circle at 50% 8px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 28px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 48px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 68px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 88px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 108px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 128px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 148px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 168px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 188px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 208px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 228px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 248px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 268px, rgba(0,0,0,0.6) 2.5px, transparent 3px),
    radial-gradient(circle at 50% 288px, rgba(0,0,0,0.6) 2.5px, transparent 3px);
  opacity: 0.35;
  pointer-events: none;
}
.qb2-card-perf-l { left: 4px; }
.qb2-card-perf-r { right: 4px; }

.qb2-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.qb2-card-meta { display: flex; align-items: center; gap: 8px; }
.qb2-card-num {
  font: 700 10px/1 "Space Mono", monospace;
  letter-spacing: 0.12em;
  color: rgba(244,214,138,0.6);
}
.qb2-card-curr {
  padding: 2px 7px;
  background: rgba(244,214,138,0.1);
  border-radius: 4px;
  font: 700 9px/1 "Space Mono", monospace;
  letter-spacing: 0.08em;
  color: #f4d68a;
}

.qb2-card-title {
  margin: 0 0 14px;
  font: 500 17px/1.25 "Fraunces", serif;
  color: #f7efdf;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.qb2-card-client {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(244,214,138,0.12);
}
.qb2-avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(244,214,138,0.3), rgba(200,155,72,0.5));
  color: #1a1308;
  font: 600 14px/1 "Fraunces", serif;
}
.qb2-card-client-name {
  font: 500 13px/1.2 "Inter", sans-serif;
  color: #f7efdf;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qb2-card-client-email {
  font: 300 11.5px/1.2 "Inter", sans-serif;
  color: rgba(232,224,205,0.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px;
}

.qb2-card-items { margin-bottom: 14px; }
.qb2-card-li {
  display: flex; align-items: center; gap: 9px;
  font: 300 12px/1.4 "Inter", sans-serif;
  color: rgba(232,224,205,0.7);
  padding: 3px 0;
  white-space: nowrap; overflow: hidden;
}
.qb2-card-li-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(244,214,138,0.5);
  flex-shrink: 0;
}
.qb2-card-li-name {
  overflow: hidden; text-overflow: ellipsis;
}
.qb2-card-li-more {
  margin-top: 4px;
  font: 600 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.1em;
  color: rgba(244,214,138,0.5);
}

.qb2-card-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 14px;
  border-top: 1px solid rgba(244,214,138,0.1);
}
.qb2-card-total-label {
  display: block;
  font: 600 9px/1 "Space Mono", monospace;
  letter-spacing: 0.16em;
  color: rgba(244,214,138,0.6);
  margin-bottom: 4px;
}
.qb2-card-total b {
  font: 600 22px/1 "Fraunces", serif;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.qb2-card-date {
  font: 400 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.08em;
  color: rgba(232,224,205,0.4);
  text-align: right;
}

/* Corner marks decorativos */
.qb2-corner {
  position: absolute;
  width: 12px; height: 12px;
  border-color: rgba(244,214,138,0.5);
  opacity: 0;
  transition: opacity 280ms;
  pointer-events: none;
}
.qb2-card:hover .qb2-corner { opacity: 1; }
.qb2-corner-tl { top: 8px; left: 8px; border-top: 1.5px solid; border-left: 1.5px solid; }
.qb2-corner-tr { top: 8px; right: 8px; border-top: 1.5px solid; border-right: 1.5px solid; }
.qb2-corner-bl { bottom: 8px; left: 8px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.qb2-corner-br { bottom: 8px; right: 8px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* Status accent strip — barra sutil arriba según status */
.qb2-card-draft    { border-top: 3px solid rgba(160,160,160,0.6); }
.qb2-card-sent     { border-top: 3px solid #f4d68a; }
.qb2-card-approved { border-top: 3px solid #7ed99a; }
.qb2-card-rejected { border-top: 3px solid #ff8a8a; }

/* ---------- SKELETON ---------- */
.qb2-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: 18px; }
.qb2-skel-card {
  height: 260px;
  background: linear-gradient(110deg, rgba(28,22,14,0.7) 30%, rgba(244,214,138,0.05) 50%, rgba(28,22,14,0.7) 70%);
  background-size: 200% 100%;
  border: 1px solid rgba(244,214,138,0.1);
  border-radius: 16px;
  animation: qb2Shimmer 1.4s ease-in-out infinite;
}
@keyframes qb2Shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---------- EMPTY ---------- */
.qb2-empty {
  padding: 60px 30px;
  text-align: center;
  border: 1.5px dashed rgba(244,214,138,0.22);
  border-radius: 18px;
  background: rgba(14,11,7,0.3);
}
.qb2-empty-mark {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,214,138,0.1);
  border: 1.5px solid rgba(244,214,138,0.25);
  border-radius: 50%;
  font: 400 26px/1 "Fraunces", serif;
  color: #f4d68a;
}
.qb2-empty h3 {
  margin: 0 0 10px;
  font: 400 22px/1.2 "Fraunces", serif;
  color: #f7efdf;
}
.qb2-empty p {
  margin: 0 auto 22px;
  max-width: 42ch;
  font: 300 14px/1.55 "Inter", sans-serif;
  color: rgba(232,224,205,0.55);
}

/* ==========================================================
   EDITOR cinematográfico
   ========================================================== */
.qb2-editor { padding: 0; }

.qb2-edit-head {
  position: relative;
  padding: clamp(30px, 4vw, 48px) clamp(28px, 3vw, 44px) clamp(24px, 3vw, 32px);
  border-radius: 22px;
  border: 1px solid rgba(244,214,138,0.22);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(244,214,138,0.12), transparent 60%),
    linear-gradient(168deg, rgba(28,22,14,0.85), rgba(10,8,5,0.95));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
  margin-bottom: 22px;
  overflow: hidden;
}
.qb2-edit-grain {
  position: absolute; inset: 0;
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.015) 0 0.5px, transparent 1px 3px);
  background-size: 4px 4px;
  mix-blend-mode: overlay; opacity: 0.5;
  pointer-events: none;
}

.qb2-edit-slate {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.qb2-edit-slate-l, .qb2-edit-slate-r {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: rgba(8,6,4,0.65);
  border: 1px solid rgba(244,214,138,0.22);
  border-radius: 999px;
  font: 600 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.16em;
  color: rgba(232,224,205,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qb2-edit-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff5a4a; }
.qb2-edit-rec i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 12px #ff5a4a;
  animation: qb2Rec 1.6s ease-in-out infinite;
}
.qb2-edit-slate-sep { color: rgba(244,214,138,0.4); }
.qb2-edit-tag {
  padding: 2px 8px;
  background: rgba(244,214,138,0.14);
  border-radius: 4px;
  color: #f4d68a;
}
.qb2-edit-slate-r b {
  padding: 2px 8px;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  border-radius: 6px;
  font: 700 11px/1 "Space Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.qb2-edit-title {
  position: relative;
  margin: 0 0 12px;
  font: 400 clamp(28px, 4vw, 44px)/1.1 "Fraunces", serif;
  letter-spacing: -0.025em;
  color: #f7efdf;
}
.qb2-edit-sub {
  position: relative;
  margin: 0 0 24px;
  max-width: 60ch;
  font: 300 14px/1.6 "Inter", sans-serif;
  color: rgba(232,224,205,0.6);
}

.qb2-edit-actions {
  position: relative;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.qb2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font: 600 11.5px/1 "Space Mono", monospace;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms, background 240ms;
}
.qb2-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.qb2-btn-ghost {
  background: transparent;
  border-color: rgba(244,214,138,0.25);
  color: rgba(232,224,205,0.75);
}
.qb2-btn-ghost:hover { background: rgba(244,214,138,0.08); color: #f7efdf; border-color: rgba(244,214,138,0.5); }
.qb2-btn-gold {
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  box-shadow: 0 8px 24px -8px rgba(244,214,138,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.qb2-btn-gold:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(244,214,138,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}
.qb2-btn-accent {
  background: linear-gradient(180deg, #7ed99a, #4caf72);
  color: #0c2114;
  box-shadow: 0 8px 24px -8px rgba(110,210,140,0.4);
}
.qb2-btn-accent:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(110,210,140,0.6);
}
.qb2-btn-danger {
  background: transparent;
  border-color: rgba(220,90,90,0.35);
  color: #ff8a8a;
}
.qb2-btn-danger:hover { background: rgba(220,90,90,0.12); border-color: rgba(220,90,90,0.6); }

/* Si los estilos viejos qb-* siguen aplicando para meta/grid/cart/catalog,
   solo agregamos overrides livianos para suavizar el look con el nuevo header. */
.qb2-editor .qb-meta-grid {
  border-radius: 18px;
  border-color: rgba(244,214,138,0.15);
  background: linear-gradient(168deg, rgba(14,11,7,0.65), rgba(10,8,5,0.85));
}
.qb2-editor .qb-catalog, .qb2-editor .qb-cart {
  border-radius: 18px;
  border-color: rgba(244,214,138,0.18);
  background: linear-gradient(168deg, rgba(14,11,7,0.6), rgba(10,8,5,0.85));
}

@media (prefers-reduced-motion: reduce) {
  .qb2-hero-beam, .qb2-skel-card { animation: none; }
  .qb2-slate-rec i, .qb2-edit-rec i { animation: none; }
  .qb2-cta-new:hover, .qb2-card:hover, .qb2-btn:hover { transform: none; }
}

/* ==========================================================
   V57 — Quote editor 3D (qb3-*)
   Floating header card, tilted panes, animated bars + count-up
   ========================================================== */

.qb2-editor { perspective: 1800px; perspective-origin: 50% 0%; }
.qb3-err { margin-bottom: 16px; }

/* ── META — flotante 3D ── */
.qb3-meta {
  margin-bottom: 24px;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(135deg,
    rgba(244,214,138,0.45),
    rgba(244,214,138,0.06) 30%,
    rgba(244,214,138,0.04) 60%,
    rgba(244,214,138,0.32));
  box-shadow:
    0 30px 70px -30px rgba(0,0,0,0.7),
    0 0 70px -20px rgba(244,214,138,0.18);
  transform: translateZ(0);
  animation: qb3MetaIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes qb3MetaIn {
  from { opacity: 0; transform: translate3d(0, 16px, -40px) rotateX(6deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); }
}
.qb3-meta-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 20px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(244,214,138,0.08), transparent 60%),
    linear-gradient(168deg, rgba(18,14,9,0.95), rgba(8,6,4,0.97));
}
.qb3-field { display: flex; flex-direction: column; gap: 7px; }
.qb3-field-wide { grid-column: span 2; }
.qb3-field > span {
  font: 600 9.5px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(244,214,138,0.55);
  text-transform: uppercase;
}
.qb3-field input,
.qb3-field select,
.qb3-field textarea {
  padding: 13px 14px;
  background: rgba(8,6,4,0.55);
  border: 1px solid rgba(244,214,138,0.16);
  border-radius: 11px;
  color: #f7efdf;
  font: 400 14px/1.4 "Inter", sans-serif;
  transition:
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    background 240ms,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms;
}
.qb3-field input:focus,
.qb3-field select:focus,
.qb3-field textarea:focus {
  outline: none;
  border-color: rgba(244,214,138,0.55);
  background: rgba(8,6,4,0.85);
  box-shadow: 0 0 0 3px rgba(244,214,138,0.08), 0 6px 18px -6px rgba(244,214,138,0.25);
  transform: translateY(-1px);
}

/* ── GRID 3D ── */
.qb3-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 22px;
  align-items: start;
  transform-style: preserve-3d;
}
@media (max-width: 980px) { .qb3-grid { grid-template-columns: 1fr; } }

/* ── CATALOG (tilted slab) ── */
.qb3-catalog {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(244,214,138,0.18);
  background:
    radial-gradient(140% 60% at 0% 0%, rgba(244,214,138,0.07), transparent 65%),
    linear-gradient(168deg, rgba(18,14,9,0.85), rgba(8,6,4,0.95));
  box-shadow:
    0 30px 70px -30px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,235,180,0.06);
  overflow: hidden;
  transform-style: preserve-3d;
  animation: qb3PanelInL 700ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes qb3PanelInL {
  from { opacity: 0; transform: translate3d(-30px, 14px, -50px) rotateY(8deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
}

.qb3-cats-wrap {
  padding: 16px 18px 14px;
  background: rgba(8,6,4,0.5);
  border-bottom: 1px solid rgba(244,214,138,0.12);
}
.qb3-cats-label {
  font: 600 9.5px/1 "Space Mono", monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.5);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.qb3-cats { display: flex; flex-wrap: wrap; gap: 6px; max-height: 122px; overflow-y: auto; }
.qb3-cat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: transparent;
  border: 1px solid rgba(244,214,138,0.16);
  border-radius: 999px;
  color: rgba(232,224,205,0.6);
  font: 500 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    background 240ms, color 240ms, border-color 240ms,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qb3-cat:hover { color: #f7efdf; border-color: rgba(244,214,138,0.4); transform: translateY(-1px); }
.qb3-cat.is-active {
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(244,214,138,0.5);
}
.qb3-cat-count {
  padding: 1.5px 6px;
  background: rgba(244,214,138,0.15);
  border-radius: 999px;
  font: 700 9px/1 "Space Mono", monospace;
  color: rgba(244,214,138,0.75);
}
.qb3-cat.is-active .qb3-cat-count { background: rgba(26,19,8,0.4); color: #1a1308; }

.qb3-cat-head { padding: 18px 20px 12px; }
.qb3-cat-head h4 {
  margin: 0 0 5px;
  font: 500 17px/1.2 "Fraunces", serif;
  color: #f7efdf;
}
.qb3-cat-head p {
  margin: 0;
  font: 300 12.5px/1.5 "Inter", sans-serif;
  color: rgba(232,224,205,0.5);
}

.qb3-items { padding: 6px 14px 18px; max-height: 540px; overflow-y: auto; }
.qb3-items::-webkit-scrollbar { width: 6px; }
.qb3-items::-webkit-scrollbar-thumb { background: rgba(244,214,138,0.25); border-radius: 3px; }

.qb3-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin: 6px 0;
  background: rgba(20,16,10,0.42);
  border: 1px solid rgba(244,214,138,0.08);
  border-radius: 12px;
  transform: translate3d(0, 10px, 0);
  opacity: 0;
  animation: qb3ItemIn 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--enter-i, 0) * 28ms);
  transition:
    border-color 220ms,
    background 220ms,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 360ms;
}
@keyframes qb3ItemIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.qb3-item:hover:not(.is-disabled) {
  border-color: rgba(244,214,138,0.35);
  background: rgba(28,22,14,0.7);
  transform: translate3d(0, -2px, 6px);
  box-shadow: 0 10px 22px -8px rgba(0,0,0,0.35), 0 0 22px -6px rgba(244,214,138,0.12);
}
.qb3-item.is-disabled { opacity: 0.4; }
.qb3-item-info { flex: 1; min-width: 0; }
.qb3-item-name {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 13.5px/1.3 "Inter", sans-serif;
  color: #f7efdf;
  margin-bottom: 4px;
}
.qb3-tag {
  padding: 2px 7px;
  background: rgba(244,214,138,0.16);
  color: #f4d68a;
  border-radius: 999px;
  font: 700 9px/1 "Space Mono", monospace;
  letter-spacing: 0.1em;
}
.qb3-item-price {
  font: 500 12px/1.2 "Space Mono", monospace;
  color: rgba(244,214,138,0.75);
  font-variant-numeric: tabular-nums;
}

.qb3-add {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 12px;
  background: rgba(244,214,138,0.1);
  border: 1px solid rgba(244,214,138,0.3);
  border-radius: 999px;
  color: #f4d68a;
  font: 600 11px/1 "Space Mono", monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition:
    background 240ms, color 240ms, border-color 240ms,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms;
}
.qb3-add-plus {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(244,214,138,0.2);
  font: 700 14px/1 monospace;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qb3-add:hover:not(:disabled) {
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  border-color: transparent;
  transform: translateY(-2px) translateZ(8px);
  box-shadow: 0 12px 24px -8px rgba(244,214,138,0.55);
}
.qb3-add:hover:not(:disabled) .qb3-add-plus { background: rgba(26,19,8,0.4); transform: rotate(90deg); }
.qb3-add:disabled { cursor: not-allowed; opacity: 0.4; }

/* ── CART (3D invoice slab) ── */
.qb3-cart {
  position: sticky; top: 24px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(244,214,138,0.22);
  background:
    radial-gradient(140% 60% at 100% 0%, rgba(244,214,138,0.12), transparent 60%),
    linear-gradient(168deg, rgba(18,14,9,0.92), rgba(8,6,4,0.98));
  box-shadow:
    0 40px 90px -30px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,235,180,0.08),
    0 0 80px -20px rgba(244,214,138,0.18);
  animation: qb3PanelInR 700ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-style: preserve-3d;
}
@keyframes qb3PanelInR {
  from { opacity: 0; transform: translate3d(30px, 14px, -50px) rotateY(-8deg); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotateY(0); }
}

.qb3-cart-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244,214,138,0.12);
}
.qb3-cart-kicker {
  font: 600 9.5px/1 "Space Mono", monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.55);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.qb3-cart-head h4 {
  margin: 0;
  font: 500 22px/1 "Fraunces", serif;
  color: #f7efdf;
  letter-spacing: -0.01em;
}
.qb3-count-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px;
  background: rgba(244,214,138,0.1);
  border: 1px solid rgba(244,214,138,0.28);
  border-radius: 999px;
}
.qb3-count-pill b {
  font: 700 16px/1 "Fraunces", serif;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.qb3-count-pill span {
  font: 500 10px/1 "Space Mono", monospace;
  letter-spacing: 0.16em;
  color: rgba(232,224,205,0.55);
  text-transform: uppercase;
}

/* ── Chart de distribución ── */
.qb3-chart {
  margin-bottom: 18px;
  padding: 16px;
  background: rgba(8,6,4,0.45);
  border: 1px solid rgba(244,214,138,0.1);
  border-radius: 12px;
}
.qb3-bar {
  margin: 10px 0;
  opacity: 0;
  animation: qb3BarIn 540ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--bar-i, 0) * 80ms);
}
@keyframes qb3BarIn { to { opacity: 1; } }
.qb3-bar:first-child { margin-top: 0; }
.qb3-bar:last-child  { margin-bottom: 0; }
.qb3-bar-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
  font: 400 11.5px/1.2 "Inter", sans-serif;
  color: rgba(232,224,205,0.75);
}
.qb3-bar-label b {
  font: 600 11.5px/1 "Space Mono", monospace;
  color: #f4d68a;
  font-variant-numeric: tabular-nums;
}
.qb3-bar-track {
  height: 6px;
  background: rgba(244,214,138,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.qb3-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89b48, #f4d68a);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(244,214,138,0.4);
  width: 0;
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--bar-i, 0) * 80ms + 200ms);
}

/* ── Empty state ── */
.qb3-cart-empty {
  padding: 30px 18px;
  text-align: center;
  border: 1.5px dashed rgba(244,214,138,0.2);
  border-radius: 12px;
  margin-bottom: 18px;
}
.qb3-cart-empty-mark {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,214,138,0.1);
  border: 1px solid rgba(244,214,138,0.22);
  border-radius: 50%;
  color: #f4d68a;
  font-size: 18px;
  animation: qb3Spin 6s linear infinite;
}
@keyframes qb3Spin { to { transform: rotate(360deg); } }
.qb3-cart-empty > div {
  font: 500 14px/1.3 "Inter", sans-serif;
  color: #f7efdf;
  margin-bottom: 6px;
}
.qb3-cart-empty p {
  margin: 0;
  font: 300 12.5px/1.5 "Inter", sans-serif;
  color: rgba(232,224,205,0.45);
}

/* ── Line items ── */
.qb3-cart-items {
  max-height: 320px;
  overflow-y: auto;
  margin: 0 -6px 16px;
  padding: 0 6px;
}
.qb3-li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(244,214,138,0.08);
  opacity: 0;
  transform: translate3d(20px, 0, 0);
  animation: qb3LiIn 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--li-i, 0) * 35ms);
}
@keyframes qb3LiIn { to { opacity: 1; transform: translate3d(0,0,0); } }
.qb3-li:last-child { border-bottom: none; }
.qb3-li-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.qb3-li-name {
  flex: 1; min-width: 0;
  font: 500 13px/1.3 "Inter", sans-serif;
  color: #f7efdf;
}
.qb3-li-x {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(244,214,138,0.2);
  color: rgba(232,224,205,0.55);
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px; line-height: 1;
  transition: all 220ms;
}
.qb3-li-x:hover {
  background: rgba(220,90,90,0.18);
  color: #ff8a8a;
  border-color: rgba(220,90,90,0.4);
  transform: rotate(90deg);
}
.qb3-li-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px; align-items: center; }
.qb3-li-qty-wrap {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(8,6,4,0.6);
}
.qb3-stepper {
  width: 24px;
  background: transparent;
  border: none;
  color: rgba(244,214,138,0.7);
  cursor: pointer;
  font: 600 13px/1 "Space Mono", monospace;
  transition: background 180ms, color 180ms;
}
.qb3-stepper:hover { background: rgba(244,214,138,0.12); color: #f7efdf; }
.qb3-li-qty {
  width: 42px;
  padding: 6px 0;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(244,214,138,0.12);
  border-right: 1px solid rgba(244,214,138,0.12);
  color: #f7efdf;
  font: 500 12px/1 "Space Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.qb3-li-qty:focus { outline: none; }
.qb3-li-mul { color: rgba(244,214,138,0.45); font-size: 11px; padding: 0 2px; }
.qb3-li-price {
  width: 100%;
  padding: 7px 9px;
  background: rgba(8,6,4,0.6);
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 8px;
  color: #f7efdf;
  font: 500 12px/1 "Space Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: border-color 200ms;
}
.qb3-li-price:focus { outline: none; border-color: rgba(244,214,138,0.5); }
.qb3-li-sub {
  text-align: right;
  min-width: 80px;
  font: 600 13px/1 "Space Mono", monospace;
  color: #f4d68a;
  font-variant-numeric: tabular-nums;
}

/* ── Totals ── */
.qb3-totals {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(244,214,138,0.14);
}
.qb3-tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font: 400 13px/1 "Inter", sans-serif;
  color: rgba(232,224,205,0.7);
}
.qb3-tot-row b {
  font: 600 13.5px/1 "Space Mono", monospace;
  color: #f7efdf;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.qb3-tot-input { gap: 10px; }
.qb3-pct-wrap {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(244,214,138,0.18);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(8,6,4,0.6);
  transition: border-color 200ms;
}
.qb3-pct-wrap:focus-within { border-color: rgba(244,214,138,0.5); }
.qb3-pct-wrap input {
  width: 50px;
  padding: 6px 8px;
  background: transparent;
  border: none; outline: none;
  color: #f7efdf;
  font: 500 12px/1 "Space Mono", monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.qb3-pct-sign {
  padding: 6px 9px;
  background: rgba(244,214,138,0.08);
  font: 600 11px/1 "Space Mono", monospace;
  color: rgba(244,214,138,0.65);
  border-left: 1px solid rgba(244,214,138,0.12);
}
.qb3-neg { color: rgba(255,138,138,0.85) !important; }
.qb3-pos { color: rgba(126,217,154,0.85) !important; }

/* Final TOTAL — big animated */
.qb3-tot-final {
  margin-top: 16px;
  padding: 18px 18px 16px;
  background:
    linear-gradient(180deg, rgba(244,214,138,0.12), rgba(244,214,138,0.04));
  border: 1px solid rgba(244,214,138,0.35);
  border-radius: 14px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.1),
    0 0 40px -10px rgba(244,214,138,0.25);
  position: relative;
  overflow: hidden;
}
.qb3-tot-final::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(244,214,138,0.15) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: qb3TotShine 6s linear infinite;
  pointer-events: none;
}
@keyframes qb3TotShine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.qb3-tot-final-label {
  position: relative;
  font: 700 12px/1 "Space Mono", monospace;
  letter-spacing: 0.22em;
  color: #f4d68a;
  text-transform: uppercase;
}
.qb3-tot-final-amount {
  position: relative;
  font-variant-numeric: tabular-nums;
}
.qb3-money.is-big {
  font: 600 28px/1 "Fraunces", serif !important;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}

.qb3-notes { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .qb3-meta, .qb3-catalog, .qb3-cart,
  .qb3-item, .qb3-li, .qb3-bar { animation: none; }
  .qb3-cart-empty-mark, .qb3-tot-final::before { animation: none; }
}

/* ==========================================================
   V59 — Quote templates modal
   ========================================================== */
.qb-tpl-backdrop {
  position: fixed; inset: 0;
  z-index: 9000;
  background: rgba(8,6,4,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  animation: rqFadeIn 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qb-tpl-modal {
  position: relative;
  width: 100%; max-width: 600px; max-height: 88vh;
  padding: clamp(28px, 4vw, 40px);
  border-radius: 20px;
  border: 1.5px solid rgba(244,214,138,0.32);
  background: linear-gradient(168deg, rgba(28,22,14,0.95), rgba(10,8,5,0.98));
  box-shadow: 0 50px 120px -30px rgba(0,0,0,0.8);
  overflow-y: auto;
  animation: rqSlideIn 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qb-tpl-close {
  position: absolute; top: 16px; right: 18px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,214,138,0.08);
  border: 1px solid rgba(244,214,138,0.2);
  border-radius: 50%;
  color: rgba(232,224,205,0.7);
  font-size: 22px; cursor: pointer;
  transition: all 200ms;
}
.qb-tpl-close:hover { background: rgba(244,214,138,0.18); color: #f7efdf; transform: rotate(90deg); }

.qb-tpl-head { margin-bottom: 22px; }
.qb-tpl-kicker {
  font: 600 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.22em; color: #d6b25d;
  text-transform: uppercase;
}
.qb-tpl-head h3 {
  margin: 12px 0 8px;
  font: 400 26px/1.2 "Fraunces", serif;
  color: #f7efdf;
}
.qb-tpl-head p {
  margin: 0;
  font: 300 13.5px/1.55 "Inter", sans-serif;
  color: rgba(232,224,205,0.55);
}

.qb-tpl-empty {
  padding: 40px 20px;
  text-align: center;
  border: 1.5px dashed rgba(244,214,138,0.22);
  border-radius: 12px;
  font: 300 14px/1.6 "Inter", sans-serif;
  color: rgba(232,224,205,0.6);
}

.qb-tpl-list { display: flex; flex-direction: column; gap: 10px; }
.qb-tpl-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(14,11,7,0.55);
  border: 1px solid rgba(244,214,138,0.14);
  border-radius: 12px;
  transition: all 220ms;
}
.qb-tpl-item:hover {
  border-color: rgba(244,214,138,0.4);
  background: rgba(20,16,10,0.75);
  transform: translateY(-1px);
}
.qb-tpl-info { flex: 1; min-width: 0; }
.qb-tpl-name {
  font: 500 14.5px/1.3 "Inter", sans-serif;
  color: #f7efdf;
  margin-bottom: 3px;
}
.qb-tpl-desc {
  font: 300 12.5px/1.45 "Inter", sans-serif;
  color: rgba(232,224,205,0.55);
  margin-bottom: 6px;
}
.qb-tpl-meta {
  display: flex; gap: 6px;
  font: 500 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.08em;
  color: rgba(244,214,138,0.65);
}
.qb-tpl-actions { display: flex; gap: 8px; flex-shrink: 0; }
.qb-tpl-apply {
  padding: 9px 18px;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  color: #1a1308;
  border: none; border-radius: 999px;
  font: 600 11px/1 "Space Mono", monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 220ms, box-shadow 220ms;
}
.qb-tpl-apply:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(244,214,138,0.5); }
.qb-tpl-arch {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid rgba(244,214,138,0.2);
  border-radius: 50%;
  color: rgba(232,224,205,0.55);
  cursor: pointer;
  font-size: 15px;
  transition: all 220ms;
}
.qb-tpl-arch:hover { background: rgba(220,90,90,0.16); color: #ff8a8a; border-color: rgba(220,90,90,0.4); }

/* ==========================================================
   V59 — Stats / Métricas dashboard
   ========================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 880px) { .stats-grid { grid-template-columns: 1fr; } }

.stats-card {
  padding: 22px;
  background: linear-gradient(168deg, rgba(18,14,9,0.8), rgba(8,6,4,0.95));
  border: 1px solid rgba(244,214,138,0.16);
  border-radius: 16px;
  margin-bottom: 18px;
}
.stats-card-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244,214,138,0.12);
}
.stats-kicker {
  display: block;
  font: 600 10.5px/1 "Space Mono", monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.6);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stats-card-head h3 {
  margin: 0;
  font: 500 18px/1.2 "Fraunces", serif;
  color: #f7efdf;
}

/* Funnel */
.stats-funnel { display: flex; flex-direction: column; gap: 12px; }
.stats-funnel-row {
  display: grid;
  grid-template-columns: 110px 1fr 50px;
  gap: 12px;
  align-items: center;
}
.stats-funnel-label {
  font: 400 12.5px/1 "Inter", sans-serif;
  color: rgba(232,224,205,0.75);
}
.stats-funnel-track {
  height: 14px;
  background: rgba(244,214,138,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.stats-funnel-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(244,214,138,0.2);
}
.stats-funnel-row b {
  text-align: right;
  font: 600 14px/1 "Space Mono", monospace;
  color: #f7efdf;
  font-variant-numeric: tabular-nums;
}
.stats-extra {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(244,214,138,0.12);
  font: 400 12.5px/1.4 "Inter", sans-serif;
  color: rgba(232,224,205,0.55);
}
.stats-extra b { color: #f4d68a; font-weight: 600; }

/* Monthly bars */
.stats-bars {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  height: 220px;
  padding: 0 8px;
}
.stats-bar-col {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
}
.stats-bar-val {
  font: 500 9.5px/1 "Space Mono", monospace;
  letter-spacing: 0.05em;
  color: rgba(244,214,138,0.65);
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.stats-bar-track {
  flex: 1; width: 100%;
  background: rgba(244,214,138,0.06);
  border-radius: 8px 8px 0 0;
  display: flex; flex-direction: column-reverse;
  overflow: hidden;
  min-height: 0;
}
.stats-bar-fill {
  width: 100%;
  background: linear-gradient(0deg, #c89b48, #f4d68a);
  border-radius: 8px 8px 0 0;
  transition: height 900ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 18px rgba(244,214,138,0.35);
  min-height: 4px;
}
.stats-bar-label {
  font: 600 11px/1 "Space Mono", monospace;
  letter-spacing: 0.1em;
  color: rgba(232,224,205,0.7);
  text-transform: uppercase;
}

/* Top categories */
.stats-cats { display: flex; flex-direction: column; gap: 12px; }
.stats-cat {
  display: flex; flex-direction: column; gap: 6px;
}
.stats-cat-label {
  display: flex; justify-content: space-between; align-items: center;
  font: 400 13px/1.3 "Inter", sans-serif;
  color: rgba(232,224,205,0.85);
}
.stats-cat-label b {
  font: 600 13px/1 "Space Mono", monospace;
  color: #f4d68a;
  font-variant-numeric: tabular-nums;
}
.stats-cat-track {
  height: 8px;
  background: rgba(244,214,138,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.stats-cat-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89b48, #f4d68a);
  border-radius: 999px;
  transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 12px rgba(244,214,138,0.3);
}

/* ==========================================================
   V59 — Public quote view (/#/q/<token>)
   ========================================================== */
.pq-screen {
  position: relative;
  min-height: 100vh;
  padding: clamp(20px, 4vw, 60px);
  background: linear-gradient(180deg, #08060a 0%, #0a0805 50%, #08060a 100%);
  display: flex; align-items: flex-start; justify-content: center;
}
.pq-grain {
  position: fixed; inset: 0;
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.012) 0 0.5px, transparent 1px 3px);
  background-size: 6px 6px;
  mix-blend-mode: overlay; opacity: 0.4; pointer-events: none;
}
.pq-card {
  position: relative;
  width: 100%; max-width: 760px;
  padding: clamp(28px, 5vw, 56px);
  background: linear-gradient(168deg, rgba(18,14,9,0.85), rgba(10,8,5,0.95));
  border: 1px solid rgba(244,214,138,0.22);
  border-radius: 18px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
  z-index: 1;
}
.pq-error h2 { color: #ff8a8a; font: 400 22px/1.2 "Fraunces",serif; margin: 0 0 12px; }
.pq-error p { color: rgba(232,224,205,0.65); font: 300 14px/1.55 "Inter",sans-serif; margin: 0 0 20px; }
.pq-loading {
  padding: 60px 20px; text-align: center;
  font: 400 14px/1 "Space Mono",monospace; letter-spacing: 0.16em;
  color: rgba(244,214,138,0.55);
}

.pq-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 24px; margin-bottom: 28px;
  border-bottom: 1px solid rgba(244,214,138,0.16);
}
.pq-brand .pq-kicker {
  display: block;
  font: 600 10.5px/1 "Space Mono",monospace;
  letter-spacing: 0.22em;
  color: #d6b25d; text-transform: uppercase;
  margin-bottom: 14px;
}
.pq-brand h1 {
  margin: 0 0 6px;
  font: 600 24px/1 "Fraunces",serif;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pq-brand p {
  margin: 0;
  font: 300 12px/1.4 "Inter",sans-serif;
  color: rgba(232,224,205,0.55);
}
.pq-status {
  padding: 7px 16px;
  border-radius: 999px;
  font: 700 10px/1 "Space Mono",monospace;
  letter-spacing: 0.18em;
}
.pq-status-sent     { background: rgba(244,214,138,0.18); color: #f4d68a; }
.pq-status-approved { background: rgba(110,210,140,0.18); color: #7ed99a; }
.pq-status-rejected { background: rgba(220,90,90,0.18); color: #ff8a8a; }

.pq-title {
  margin: 0 0 18px;
  font: 400 clamp(26px,3.5vw,38px)/1.15 "Fraunces",serif;
  color: #f7efdf; letter-spacing: -0.015em;
}
.pq-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 18px;
  margin-bottom: 30px;
  padding: 18px;
  background: rgba(244,214,138,0.05);
  border: 1px solid rgba(244,214,138,0.12);
  border-radius: 12px;
}
.pq-meta-k {
  display: block;
  font: 600 9.5px/1 "Space Mono",monospace;
  letter-spacing: 0.2em;
  color: rgba(244,214,138,0.6);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pq-meta b { font: 500 14px/1.3 "Inter",sans-serif; color: #f7efdf; }

.pq-items {
  margin-bottom: 24px;
  border: 1px solid rgba(244,214,138,0.12);
  border-radius: 12px;
  overflow: hidden;
}
.pq-items-head {
  display: grid;
  grid-template-columns: 1fr 60px 100px 110px;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(244,214,138,0.1);
  font: 600 10px/1 "Space Mono",monospace;
  letter-spacing: 0.16em;
  color: #f4d68a;
  text-transform: uppercase;
}
.pq-th-qty,.pq-th-price,.pq-th-sub { text-align: right; }
.pq-line {
  display: grid;
  grid-template-columns: 1fr 60px 100px 110px;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(244,214,138,0.06);
  font: 400 13.5px/1.4 "Inter",sans-serif;
  color: rgba(232,224,205,0.85);
}
.pq-line:last-child { border-bottom: none; }
.pq-line:nth-child(even) { background: rgba(244,214,138,0.025); }
.pq-line-name { min-width: 0; }
.pq-line-qty,.pq-line-price,.pq-line-sub {
  text-align: right;
  font: 500 13px/1 "Space Mono",monospace;
  font-variant-numeric: tabular-nums;
}
.pq-line-sub { color: #f4d68a; font-weight: 600; }

.pq-totals { margin-bottom: 24px; }
.pq-tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font: 400 13.5px/1 "Inter",sans-serif;
  color: rgba(232,224,205,0.75);
}
.pq-tot-row b { font: 600 14px/1 "Space Mono",monospace; color: #f7efdf; font-variant-numeric: tabular-nums; }
.pq-neg { color: rgba(255,138,138,0.85) !important; }
.pq-tot-final {
  margin-top: 14px; padding: 18px;
  background: linear-gradient(180deg, rgba(244,214,138,0.14), rgba(244,214,138,0.04));
  border: 1px solid rgba(244,214,138,0.4);
  border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.pq-tot-final span {
  font: 700 11.5px/1 "Space Mono",monospace;
  letter-spacing: 0.22em;
  color: #f4d68a;
}
.pq-tot-final b {
  font: 600 28px/1 "Fraunces",serif;
  background: linear-gradient(180deg, #f4d68a, #c89b48);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}

.pq-notes {
  padding: 18px;
  background: rgba(8,6,4,0.45);
  border-left: 3px solid #d6b25d;
  border-radius: 8px;
  margin-bottom: 24px;
}
.pq-notes h3 {
  margin: 0 0 8px;
  font: 600 10px/1 "Space Mono",monospace;
  letter-spacing: 0.2em;
  color: #d6b25d;
  text-transform: uppercase;
}
.pq-notes p {
  margin: 0;
  font: 300 13.5px/1.6 "Inter",sans-serif;
  color: rgba(232,224,205,0.85);
}

.pq-footer {
  padding-top: 22px;
  border-top: 1px solid rgba(244,214,138,0.12);
  text-align: center;
}
.pq-quote {
  margin: 0 0 8px;
  font: 300 13px/1.5 "Fraunces",serif;
  color: rgba(232,224,205,0.55);
  font-style: italic;
}
.pq-link {
  font: 600 11px/1 "Space Mono",monospace;
  letter-spacing: 0.18em;
  color: #d6b25d; text-decoration: none;
}
.pq-link:hover { color: #f4d68a; }