/* ============================================================
   FRAMETY — Cinematic audiovisual portfolio
   Glassy / futuristic / neon-red accent
   ============================================================ */

:root {
  --bg: #050507;
  --bg-elev: #0b0b0f;
  --bg-card: #101015;
  --ink: #f5f5f7;
  --ink-dim: #9a9aa3;
  --ink-mute: #5b5b66;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --accent: #E63946;
  --accent-glow: rgba(230, 57, 70, 0.55);
  --accent-glow-soft: rgba(230, 57, 70, 0.22);
  --accent-soft: rgba(230, 57, 70, 0.12);
  --accent-deep: #A6202C;
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  --font-display: 'gibson', 'canada-type-gibson', 'Canada Type Gibson', 'Outfit', system-ui, sans-serif;
  --font-body: 'gibson', 'canada-type-gibson', 'Canada Type Gibson', 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg);
}
body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: auto;
}

/* Custom cursor — disabled */
.cursor-dot, .cursor-ring {
  display: none !important;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, transform 0.1s ease-out;
}
.cursor-ring.hover { width: 64px; height: 64px; border-color: var(--accent); }
.cursor-dot.hover { width: 0; height: 0; }
.cursor-ring.text { width: 4px; height: 24px; border-radius: 1px; background: #fff; border: none; }

/* For touch / mobile, disable custom cursor */
@media (hover: none) {
  html, body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

a, button { cursor: pointer; color: inherit; text-decoration: none; background: none; border: none; font: inherit; }

img, video { max-width: 100%; display: block; }

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

/* ---------- Typography ---------- */
.font-display { font-family: var(--font-display); letter-spacing: -0.02em; }
.font-mono { font-family: var(--font-mono); }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1; }

/* Gibson web font (Canada Type) — load via CDN with fallback. If license missing, falls back to system stack above. */
@font-face {
  font-family: 'gibson';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('Canada Type Gibson'), local('Gibson'), local('CanadaType-Gibson');
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- Glass primitive ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  position: relative;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%, transparent 60%, rgba(255,255,255,0.04));
  pointer-events: none;
}
.glass-strong {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn-ghost {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border-strong);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255,255,255,0.10); }
.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 30px var(--accent-glow);
}
.btn-accent:hover { transform: translateY(-1px); }
.btn-arrow { width: 14px; height: 14px; }

/* ---------- Layout helpers ---------- */
/* Chip hint text — desktop vs mobile */
.chip-hint-mobile { display: none; }
.chip-hint-desktop { display: block; }

.container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.section { padding: 140px 0; position: relative; }
@media (max-width: 720px) { .section { padding: 80px 0; } }

/* App scaffold */
.app { position: relative; min-height: 100vh; background: transparent; }

/* ---------- Navbar ---------- */
.logo-img-dual {
  height: 48px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  user-select: none;
  pointer-events: none;
}

.nav {
  position: fixed; top: 10px; left: 50%;
  transform: translateX(-50%) translateY(0);
  width: calc(100% - 32px);
  max-width: 1400px;
  z-index: 100;
  border-radius: 100px;
  padding: 0 32px 0 60px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 94px;
  transition: min-height 0.3s ease, padding 0.3s ease, transform 0.45s cubic-bezier(.4,0,.2,1), opacity 0.45s ease;
  overflow: visible;
}
.nav--hidden {
  transform: translateX(-50%) translateY(-130%);
  opacity: 0;
  pointer-events: none;
}

/* ── Cat-mode mini logo bar (bottom-right) ── */
.cat-mini-bar {
  position: fixed;
  bottom: 20px;
  right: 24px;
  transform: translateY(20px);
  z-index: 100;
  border-radius: 18px;
  padding: 16px 48px 16px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.4,0,.2,1);
}
.cat-mini-bar--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cat-mini-bar:hover { opacity: 0.85; }
.cat-mini-bar-logo  { height: 52px; width: auto; transform: translateY(10px); }
.cat-mini-bar-sep   { height: 32px; width: auto; opacity: 0.4; }
.cat-mini-bar-skyline { height: 32px; width: auto; }

/* Hero watermark — main brand presence */
.hero-watermark {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(72vw, 1100px);
  pointer-events: none;
  user-select: none;
}
.hero-watermark img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0) invert(1) drop-shadow(0 0 60px rgba(0,0,0,0.6));
  opacity: 0.97;
  animation: watermarkIn 1.4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes watermarkIn {
  from { opacity: 0; transform: scale(0.96); filter: brightness(0) invert(1) blur(12px); }
  to   { opacity: 0.97; transform: scale(1); filter: brightness(0) invert(1) blur(0); }
}
@media (max-width: 720px) {
  .hero-watermark { width: 86vw; top: 36%; }
}
.nav-logo .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
.nav-menu { display: flex; gap: 32px; align-items: center; }
.nav-menu a {
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 500;
  position: relative;
  transition: color 0.2s ease;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--ink); }
.nav-menu a.active::after {
  content: "";
  position: absolute; left: 50%; bottom: -8px;
  width: 4px; height: 4px;
  background: var(--accent); border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--accent);
}
.nav-cta {
  padding: 9px 18px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .nav-menu { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end;
  padding: 120px 0 80px;
  overflow: hidden;
  background: var(--bg);
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,7,0.3) 0%, rgba(5,5,7,0.55) 60%, var(--bg) 100%);
}
.hero-bg-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='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 60px;
}
.hero-title {
  /* Visually hidden but accessible to screen readers and search engines */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
  max-width: 1100px;
}
.hero-title em {
  font-style: italic;
  font-family: 'Space Grotesk', serif;
  font-weight: 400;
  color: var(--accent);
}
.hero-meta {
  grid-column: 2;
  text-align: right;
  display: flex; flex-direction: column; gap: 18px;
  min-width: 240px;
}
.hero-meta-row { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.hero-meta-row .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.hero-meta-row .value { font-size: 13px; color: var(--ink); }

.hero-bar {
  position: absolute; bottom: 24px; left: 0; right: 0; width: 100%;
  z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-bar .reel-time { display: flex; align-items: center; gap: 12px; }
.hero-bar .rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
}
.hero-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--ink-dim), transparent);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ---------- Hero reel video / placeholder ---------- */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.6) contrast(1.05) saturate(1.1);
}
.hero-video-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(5,5,7,0.55) 80%),
    linear-gradient(180deg, rgba(5,5,7,0.25) 0%, rgba(5,5,7,0.55) 60%, var(--bg) 100%);
  pointer-events: none;
}

/* Animated placeholder loop \u2014 layered cinematic frames with smooth crossfade */
.hero-placeholder-reel {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #050507;
}
.hero-placeholder-frame {
  position: absolute; inset: 0;
  opacity: 0;
  animation: heroReelCycle 24s infinite;
}
.hero-placeholder-frame:nth-child(1) { animation-delay: 0s;  background: radial-gradient(circle at 28% 38%, #131520 0%, #050308 70%); }
.hero-placeholder-frame:nth-child(2) { animation-delay: 6s;  background: radial-gradient(ellipse at 70% 55%, #1c2840 0%, #04060a 70%); }
.hero-placeholder-frame:nth-child(3) { animation-delay: 12s; background: radial-gradient(circle at 55% 45%, #1d1822 0%, #06040a 70%); }
.hero-placeholder-frame:nth-child(4) { animation-delay: 18s; background: radial-gradient(circle at 30% 70%, #1a1418 0%, #0a0509 75%); }
@keyframes heroReelCycle {
  0%, 25% { opacity: 1; transform: scale(1.04); }
  30%, 95% { opacity: 0; }
  100% { opacity: 0; transform: scale(1); }
}

/* Slow zoom \u201cken burns\u201d on placeholder */
/* Admin placeholder text removed \u2014 was visible to public visitors */
.reel-frames {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #000;
}
.reel-frame {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.reel-frame.active { opacity: 1; }
.reel-frame.f1 { background: radial-gradient(circle at 30% 40%, #3a1010 0%, #0a0205 70%); }
.reel-frame.f2 { background: radial-gradient(circle at 70% 30%, #1a2a3a 0%, #04060a 70%); }
.reel-frame.f3 { background: radial-gradient(circle at 50% 60%, #2a1a3a 0%, #060409 70%); }
.reel-frame.f4 { background: radial-gradient(circle at 20% 70%, #3a2010 0%, #08050a 70%); }
.reel-frame .label {
  position: absolute; bottom: 12%; left: 6%;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.reel-frame .placeholder-mark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.3em;
  border: 1px dashed rgba(255,255,255,0.18);
  padding: 24px 36px;
  white-space: nowrap;
}

/* Scanline / film overlay */
.reel-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.0) 0px,
    rgba(255,255,255,0.0) 2px,
    rgba(0,0,0,0.04) 3px,
    rgba(0,0,0,0.0) 4px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ---------- Section header ---------- */
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 64px;
  gap: 40px;
}
.section-head h2 {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 800px;
}
.section-head p {
  color: var(--ink-dim);
  max-width: 360px;
  font-size: 14px;
  line-height: 1.6;
}
.section-head .num {
  font-family: var(--font-mono);
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.section-head .num::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--accent);
}

/* ---------- Categories grid ---------- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.cat-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  isolation: isolate;
}
.cat-card.size-lg { grid-column: span 7; min-height: 460px; }
.cat-card.size-md { grid-column: span 5; min-height: 460px; }
.cat-card.size-sm { grid-column: span 4; min-height: 320px; }
@media (max-width: 900px) {
  .cat-card.size-lg, .cat-card.size-md, .cat-card.size-sm { grid-column: span 12; min-height: 280px; }
}
.cat-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1), filter 0.6s ease;
  z-index: 0;
}
.cat-card:hover .cat-card-bg { transform: scale(1.05); filter: brightness(1.1) saturate(1.2); }
.cat-card {
  box-shadow: 0 0 0 1px transparent, 0 0 0 transparent;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}
.cat-card:hover {
  box-shadow:
    0 0 0 1px var(--accent-glow-soft),
    0 18px 60px -12px var(--accent-glow),
    0 0 80px -20px var(--accent-glow-soft);
}
.cat-card-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.75) 100%);
}
.cat-card-content {
  position: absolute; inset: 0;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 2;
}
.cat-card-top { display: flex; justify-content: space-between; align-items: start; }
.cat-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.2em;
}
.cat-card-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.1em;
}
.cat-card-bottom { }
.cat-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}
.cat-card-desc {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  max-width: 360px;
  line-height: 1.5;
}
.cat-card-arrow {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s cubic-bezier(.2,.8,.2,1);
}
.cat-card:hover .cat-card-arrow { opacity: 1; transform: translateY(0); }

/* Liquid glass refraction overlay */
.cat-card-glass {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.04) 100%);
  pointer-events: none;
  z-index: 1;
}
.cat-card:hover .cat-card-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%, rgba(255,45,45,0.05) 70%, rgba(255,255,255,0.06) 100%);
}

/* category card synthetic backgrounds */
.bg-comm  { background: linear-gradient(135deg, #2a0e0e, #0a0205 70%), radial-gradient(circle at 30% 30%, rgba(255,45,45,0.4), transparent 50%); }
.bg-music { background: radial-gradient(ellipse at 70% 50%, #2c1c4e 0%, #050410 70%); }
.bg-doc   { background: linear-gradient(160deg, #2a2a18, #08070d 80%); }
.bg-brand { background: radial-gradient(circle at 30% 70%, #1c2a44, #04060a 70%); }
.bg-after { background: linear-gradient(45deg, #3b0d27, #08040a 80%); }
.bg-corp  { background: linear-gradient(180deg, #1a1c1f, #050507 70%); }

/* ---------- Featured stack ---------- */
.featured { position: relative; }
.feat-list { display: flex; flex-direction: column; gap: 10px; }
.feat-item {
  position: relative;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(10,10,15,0.42);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  display: grid;
  grid-template-columns: 56px 1fr 340px;
  gap: 28px;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
@media (max-width: 900px) {
  .feat-item { grid-template-columns: 1fr; gap: 16px; }
}
.feat-item:hover { background: rgba(14,14,22,0.65); border-color: rgba(255,255,255,0.13); }
.feat-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.2em;
}
.feat-info { }
.feat-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color 0.3s ease;
}
.feat-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px;
}
.feat-meta span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.feat-meta .tag {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.feat-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0a0a0d;
}
.feat-thumb-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
  filter: grayscale(0.4) brightness(0.85);
}
.feat-item:hover .feat-thumb-bg { transform: scale(1.04); filter: grayscale(0) brightness(1); }
.feat-thumb {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.feat-item:hover .feat-thumb {
  box-shadow:
    0 0 0 1px var(--accent-glow-soft),
    0 16px 50px -12px var(--accent-glow),
    0 0 60px -16px var(--accent-glow-soft);
}
.feat-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feat-item:hover .feat-play { opacity: 1; }
.feat-play-btn {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border-strong);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.feat-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--accent);
  width: 0;
  transition: width 0.6s cubic-bezier(.2,.8,.2,1);
}
.feat-item:hover .feat-progress { width: 100%; }

/* ── Featured Gallery — 3D card stack (matches reference exactly) ─ */

/*
 * Two-layer clip system — mirrors the reference exactly:
 *
 *  feat-gal-wrap  ← outer overflow:hidden, ~200px tall
 *                   clips the bottom 200px of the stage so cards are
 *                   mostly hidden at rest and emerge upward on hover
 *
 *  feat-gal-stage ← inner h-[400px] -mb-[200px] overflow:hidden
 *                   400px physical height; -200px margin makes the wrap
 *                   clip at 200px; inner overflow hides the entrance
 *                   starting position (translateY 200px below)
 */
.feat-gal-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;   /* ← THE key clip: shows only top ~200px of stage */
}

/* Soft gradient at wrap's bottom edge — the "barrinha invisível"       */
.feat-gal-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: 10;
}

.feat-gal-stage {
  width: 100%;
  height: 400px;
  overflow: hidden;   /* hides entrance start position below stage      */
  margin-bottom: -200px; /* shrinks wrap to ~200px · rest = mostly hidden */
  display: block;
}

/* Row: reference pt-40 pb-8 items-end justify-center                   */
.feat-gal-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 160px;  /* pt-40 — room for cards to rise on hover      */
  padding-bottom: 32px; /* pb-8                                         */
}

/* Items: reference -space-x-72 md:-space-x-80 (288-320px negative gap) */
/* Adjusted for 4-6 videos to spread nicely across 1280px               */
.feat-gal-item {
  cursor: pointer;
  flex-shrink: 0;
  /* margin-left set inline by computeLayout() — scales with card count */
}
.feat-gal-item:first-child { margin-left: 0; }

/* Card: width & height set inline by computeLayout() — always 16:9     */
.feat-gal-card {
  position: relative;
  /* width & height injected inline */
  border-radius: 10px;
  overflow: hidden;
  /* Reference box-shadow — directional, right-side only */
  box-shadow:
    rgba(0,0,0,0.01) 0.796px 0px 0.796px 0px,
    rgba(0,0,0,0.03) 2.41px  0px 2.41px  0px,
    rgba(0,0,0,0.08) 6.38px  0px 6.38px  0px,
    rgba(0,0,0,0.25) 20px    0px 20px    0px;
  /* Card-level scale on hover — reference group-hover:scale-105        */
  transition: transform 0.2s cubic-bezier(0.25,0.1,0.25,1);
}
.feat-gal-item--hov .feat-gal-card {
  transform: scale(1.05);
}

/* Thumbnail — centered crop, fills card exactly                        */
.feat-gal-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.feat-gal-thumb--ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Dark gradient overlay — readable text + depth                        */
.feat-gal-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.10) 55%,
    transparent 100%
  );
  pointer-events: none;
}

/* Card text info */
.feat-gal-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
}
.feat-gal-cat {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: 3px;
}
.feat-gal-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

/* Play icon — top-right, appears on hover                              */
.feat-gal-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.25,0.1,0.25,1);
}
.feat-gal-item--hov .feat-gal-play { opacity: 1; }

/* Hover label row — title + badges, fades in above the 3D card */
.feat-gal-hover-label-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-bottom: 8px;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.25,0.1,0.25,1);
  pointer-events: none;
}
.feat-gal-item--hov .feat-gal-hover-label-wrap { opacity: 1; }
/* Badges inside the hover label: static icon only — no expand, no interaction */
.feat-gal-hover-label-wrap .ia-pill,
.feat-gal-hover-label-wrap .badge-360-pill {
  pointer-events: none;
  cursor: default;
  transition: none;
}
.feat-gal-hover-label-wrap .ia-pill:hover,
.feat-gal-hover-label-wrap .badge-360-pill:hover {
  width: 34px;
  max-height: 34px;
  border-color: rgba(255,255,255,0.12);
}

.feat-gal-hover-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mobile: horizontal scroll strip ──────────────────────── */
.feat-gal-mobile {
  display: none;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 20px 24px 48px;
  gap: 14px;
}
.feat-gal-mobile::-webkit-scrollbar { display: none; }
.feat-gal-mobile-item { cursor: pointer; flex-shrink: 0; }
.feat-gal-mobile-item .feat-gal-card { /* 240×135 set inline */ }

@media (max-width: 900px) {
  .feat-gal-stage  { display: none; }
  .feat-gal-mobile { display: flex; }
}

/* ---------- About marquee ---------- */
.about-section {
  position: relative;
}
.about-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 1200px;
}
.about-quote em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.about-quote .strike {
  color: var(--ink-mute);
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 100px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px) { .about-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.stat .num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 12px;
}

.marquee {
  margin-top: 80px;
  white-space: nowrap;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  display: flex;
}
.marquee-track {
  display: inline-flex; gap: 64px;
  animation: scroll 35s linear infinite;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  will-change: transform;
  padding-right: 64px;
}
.marquee-track .star {
  color: var(--accent);
  font-size: 24px;
  vertical-align: middle;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Contact ---------- */
.contact-section {
  padding: 140px 0 100px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-headline {
  font-size: clamp(48px, 7vw, 120px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.contact-headline em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.contact-card {
  padding: 32px;
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 24px;
}
.contact-row { display: flex; flex-direction: column; gap: 4px; }
.contact-row .lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.contact-row .val { font-family: var(--font-display); font-size: 22px; font-weight: 500; }

.footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.footer-left { display: flex; gap: 28px; }
.footer a:hover { color: var(--ink); }

/* ---------- Page transitions ---------- */
.page-enter {
  animation: pageIn 0.7s cubic-bezier(.2,.8,.2,1);
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Modal (video) ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 24px 40px;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-frame {
  width: 100%; max-width: 1200px;
  flex-shrink: 0;
  margin: auto;
  animation: scaleIn 0.35s cubic-bezier(.2,.8,.2,1);
}
@keyframes scaleIn {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* sticky top bar */
.modal-top {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 24px;
  position: sticky; top: 0; z-index: 10;
  border-radius: 20px 20px 0 0;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.modal-logo {
  height: 60px; width: auto; display: block; flex-shrink: 0;
  filter: brightness(0) invert(1); opacity: 0.95;
  transform: translateY(5px);
}
.modal-divider { width: 1px; height: 56px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
.modal-client-logo { flex-shrink: 0; display: flex; align-items: center; transform: translateY(-5px); }
.modal-top-meta {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; }
.modal-meta { display: flex; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.modal-close {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background 0.2s, transform 0.2s;
}
.modal-close:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.modal-share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.modal-share-btn:hover {
  background: rgba(255,255,255,0.12);
  color: var(--ink);
  border-color: rgba(255,255,255,0.25);
}
.modal-share-btn.copied {
  border-color: var(--accent);
  background: rgba(230,57,70,0.1);
}
@media (max-width: 600px) {
  .modal-share-btn .share-label { display: none; }
}
/* body below player — fully transparent so frame glass shows through */
.modal-body {
  padding: 28px 32px 36px;
  background: transparent;
}
.modal-desc-content {
  color: var(--ink-dim); line-height: 1.75; font-size: 14px; max-width: 680px;
  margin-top: 16px;
}
.modal-desc-content img { max-width: 100%; border-radius: 10px; margin: 12px 0; display: block; }
.modal-cta-bar { display: flex; justify-content: flex-start; margin-bottom: 20px; }
/* before/after images in public modal */
.modal-ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin-top: 20px;
}
.modal-ba-img {
  aspect-ratio: 1; border-radius: 8px;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
}
/* suggested single-row with nav */
.modal-sug-nav-row {
  display: flex; align-items: center; gap: 10px;
}
.modal-sug-scroll {
  flex: 1; overflow: hidden;
}
.modal-sug-track {
  display: flex; gap: 10px;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.modal-sug-track .modal-sug-card {
  flex: 0 0 calc(25% - 8px); min-width: 0;
}
.modal-sug-arrow {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.modal-sug-arrow:hover { background: rgba(255,255,255,0.14); }
.modal-sug-arrow:disabled { opacity: 0.25; cursor: default; }
/* ── Custom YouTube player ─────────────────────────── */
.cplayer {
  position: absolute; inset: 0;
  background: #000;
  overflow: hidden;
}
/* The iframe fills the player and keeps native YouTube controls: quality/resolution
   menu, fullscreen, and 360° drag-to-look. It MUST receive pointer events (no
   overlay, no pointer-events:none) or the controls and 360 panning won't work. */
.cplayer { overflow: hidden; }
.cplayer-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cplayer-video iframe {
  position: absolute; inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}
/* ── 360° video: full-cover drag-to-look + our own control bar. Native 360 drag
   doesn't work in embeds, so we hide YouTube's controls (controls:0) and drive
   playback + panning ourselves. Only spherical videos get this. ── */
.cplayer-look {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 48px;   /* leave room for our control bar */
  z-index: 6;
  cursor: grab;
  touch-action: none;
}
.cplayer-look:active { cursor: grabbing; }

/* "arraste para olhar" hint (non-interactive), top-left */
.cplayer-360hint {
  position: absolute; top: 14px; left: 14px; z-index: 8;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; color: #fff;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 0.25s ease;
}
.cplayer-360dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid currentColor; position: relative; flex-shrink: 0;
}
.cplayer-360dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid currentColor; opacity: 0.4;
}

/* our control bar (play / time / seek / mute / fullscreen) */
.cbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  height: 48px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.30) 72%, transparent 100%);
  transition: opacity 0.25s ease;
}
.cbar-btn {
  color: #fff; opacity: 0.92;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.cbar-btn:hover { opacity: 1; background: rgba(255,255,255,0.14); }
.cbar-btn.muted { position: relative; opacity: 0.6; }
.cbar-btn.muted::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%;
  height: 2px; margin-top: -1px; background: currentColor;
  transform: rotate(-45deg); border-radius: 2px;
}
.cbar-time {
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.9);
  flex-shrink: 0; min-width: 34px; text-align: center;
}
.cbar-dim { color: rgba(255,255,255,0.5); }
.cbar-prog {
  flex: 1; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.22);
  position: relative; cursor: pointer;
}
.cbar-prog::before {   /* larger click/hit area */
  content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
}
.cbar-prog-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent); border-radius: 999px;
}
.cbar-prog-fill::after {
  content: ""; position: absolute; right: -5px; top: 50%;
  width: 11px; height: 11px; margin-top: -5.5px;
  background: #fff; border-radius: 50%;
  opacity: 0; transition: opacity 0.15s;
}
.cbar-prog:hover .cbar-prog-fill::after { opacity: 1; }

/* auto-hide the bar + hint while playing (reappear on mouse move) */
.cplayer-360.ui-off .cbar,
.cplayer-360.ui-off .cplayer-360hint { opacity: 0; }

/* our own fullscreen: the whole player (iframe + drag overlay + bar) fills the
   screen, so drag-to-look keeps working in fullscreen. */
.cplayer:fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000; }
.cplayer:-webkit-full-screen { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000; }
.cplayer-capture {
  position: absolute; inset: 0;
  z-index: 5;
  background: transparent;
  cursor: pointer;
}
.cplayer-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 44px 18px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 12;
}
.cplayer:hover .cplayer-controls { opacity: 1; }
.cp-btn {
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: background 0.2s;
  flex-shrink: 0;
}
.cp-btn:hover { background: rgba(255,255,255,0.18); }
.cp-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  min-width: 36px;
  flex-shrink: 0;
}
.cp-dim { color: rgba(255,255,255,0.4); }
.cp-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}
.cp-progress:hover { height: 5px; }
.cp-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s linear;
}
.cp-progress-dot {
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px; margin-left: -5px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s;
}
.cp-progress:hover .cp-progress-dot { opacity: 1; }
.cp-volume {
  width: 70px; height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.cp-volume-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
}

/* Smaller filter chips for empreendimento row */
.cat-cf-sm { padding: 5px 10px !important; font-size: 10px !important; }

/* Cat card hover preview: hide play btn while iframe is showing */
.cat-card:has(iframe) .cat-card-play { opacity: 0 !important; }

.modal-player {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 0;
  overflow: hidden;
  border: none;
}
/* Placeholder styling for contenteditable description field */
[contenteditable][data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-mute);
  pointer-events: none;
}
.modal-player-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.7);
}
.modal-player-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 18px 24px;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}
.modal-player-controls button { color: #fff; }
.modal-progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  position: relative;
}
.modal-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 35%;
  background: var(--accent);
  border-radius: 999px;
}
.modal-progress-fill::after {
  content: "";
  position: absolute; right: -5px; top: 50%;
  width: 11px; height: 11px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 12px var(--accent);
}
.modal-time { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; }
.modal-bottom {
  display: none; /* replaced by .modal-body + .modal-cta-bar */
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.modal-desc { color: var(--ink-dim); max-width: 600px; line-height: 1.6; font-size: 14px; }
.modal-cta { display: flex; gap: 12px; }
.modal-bigplay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border-strong);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform 0.3s ease, background 0.3s ease;
}
.modal-bigplay:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); border-color: var(--accent); }

/* ---------- Category page ---------- */
.cat-page {
  padding: 100px 0 60px;
  min-height: 100vh;
  transition: padding-top 0.45s cubic-bezier(.4,0,.2,1);
}
body.in-cat-page {
  background: transparent;
}
body.in-cat-page .cat-page {
  padding-top: 32px;
}
body.in-cat-page.cat-peek .cat-page {
  padding-top: 116px;
}
.cat-page-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.cat-page-title {
  font-size: clamp(28px, 3.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.cat-page-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 24px;
}
.cat-page-back:hover { color: var(--accent); background: rgba(230,57,70,0.06); border-color: rgba(230,57,70,0.25); }
.cat-page-meta {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.cat-page-meta .row { display: flex; gap: 18px; align-items: center; }
.cat-page-meta .pill {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  letter-spacing: 0.12em;
}
.cat-page-meta .pill.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.cat-page-meta .row { color: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; }

.cat-list { display: flex; flex-direction: column; }
.cat-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 200px 160px 80px;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}
@media (max-width: 900px) {
  .cat-list-item { grid-template-columns: 40px 1fr 80px; }
  .cat-list-item .meta-client, .cat-list-item .meta-tags { display: none; }
}
.cat-list-item:hover { background: rgba(255,255,255,0.02); padding-left: 16px; padding-right: 16px; }
.cat-list-item .num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.16em; }
.cat-list-item .title { font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 38px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; transition: color 0.3s ease; }
.cat-list-item:hover .title { color: var(--accent); }
.cat-list-item .meta-client { color: var(--ink-dim); font-size: 13px; }
.cat-list-item .meta-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-list-item .meta-tags span { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 999px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.cat-list-item .arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.cat-list-item:hover .arrow { background: var(--accent); border-color: var(--accent); transform: rotate(-45deg); }

/* ── Client filter strip + view toggle ─────────────── */
.cat-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.cat-client-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cat-client-filters::-webkit-scrollbar { display: none; }
.cat-cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.cat-cf-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--ink); }
.cat-cf-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.cat-cf-btn.active .cat-cf-count { background: rgba(255,255,255,0.25); color: #fff; }
.cat-cf-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--font-mono);
}
.cat-view-toggle {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.cat-view-toggle button {
  width: 36px; height: 36px;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.cat-view-toggle button:hover { color: var(--ink); background: rgba(255,255,255,0.04); }
.cat-view-toggle button.active { background: rgba(255,255,255,0.08); color: var(--ink); }
.cat-view-toggle button + button { border-left: 1px solid var(--line-strong); }

/* ── Video grid ─────────────────────────────────────── */
:root { --stack-overlap: 38px; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 14px;
  row-gap: 0;
  padding-bottom: calc(80px + var(--stack-overlap));
  margin-bottom: 0;
}
@media (max-width: 1200px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
  cursor: pointer;
  border-radius: 12px;
  overflow: visible;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  position: relative;
  z-index: 1;
  margin-bottom: calc(-1 * var(--stack-overlap));
  transition: transform 0.42s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.42s cubic-bezier(.2,.8,.2,1),
              z-index 0s, border-color 0.3s;
}
.cat-card:hover {
  transform: translateY(calc(-1 * var(--stack-overlap) - 4px));
  z-index: 40;
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 24px 56px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
}
.cat-card-thumb {
  position: relative;
  aspect-ratio: 16/8;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.cat-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);
  transition: opacity 0.3s ease;
}
.cat-card:hover .cat-card-overlay { opacity: 0.8; }

/* Duration pill — bottom-left */
.cat-card-duration {
  position: absolute; bottom: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}

/* Draft badge */
.cat-card-draft-badge {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.6);
  border: 1px dashed rgba(255,255,255,0.2);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}

/* Play button — center, reveals on hover */
.cat-card-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
  color: #fff;
}
.cat-card-play svg {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 14px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.cat-card:hover .cat-card-play { opacity: 1; }
.cat-card:hover .cat-card-play svg { background: rgba(230,57,70,0.7); transform: scale(1.05); }

/* Card text section */
.cat-card-info {
  padding: 7px 12px 8px;
  border-radius: 0 0 12px 12px;
  background: inherit;
}
.cat-card-meta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 3px;
}
.cat-card-year {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.cat-card-tags {
  display: flex; gap: 4px;
}
.cat-card-tags span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
}
.cat-card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}
.cat-card:hover .cat-card-title { color: var(--accent); }
.cat-card-client-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 2px;
}
.cat-empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
}

/* ── Client filter dropdown ─────────────────────────── */
.cat-client-dropdown { position: relative; flex-shrink: 0; }
.cat-client-dropdown-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  white-space: nowrap;
}
.cat-client-dropdown-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--ink); }
.cat-client-dropdown-btn.has-filter { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cat-client-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px;
  border-radius: 14px;
  background: rgba(12,12,18,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07);
  overflow: hidden;
  z-index: 50;
  animation: fadeIn 0.15s ease;
}
.cat-client-dropdown-menu button {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.cat-client-dropdown-menu button:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.cat-client-dropdown-menu button.active { color: var(--accent); background: var(--accent-soft); }
.cat-client-dropdown-menu .dd-count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
  background: rgba(255,255,255,0.06);
  padding: 2px 7px; border-radius: 999px;
}

/* ── VideoModal — liquid glass frame (matches site nav) ─── */
.modal-frame-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 48px 120px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}

/* ── Suggested videos row ──────────────────────────── */
.modal-suggested {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.modal-suggested-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.modal-suggested-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .modal-suggested-row { grid-template-columns: repeat(2,1fr); } }
.modal-sug-card {
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  transition: border-color 0.25s, transform 0.25s;
}
.modal-sug-card:hover { border-color: rgba(255,255,255,0.12); transform: translateY(-2px); }
.modal-sug-thumb {
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
}
.modal-sug-info { padding: 8px 10px; }
.modal-sug-title {
  font-size: 11px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-sug-meta {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--ink-mute); letter-spacing: 0.1em;
  margin-top: 3px;
}

/* ── Before/After images grid (admin) ──────────────── */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.ba-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
}
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-remove {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
}
.ba-add {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px dashed var(--line-strong);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  color: var(--ink-mute); font-size: 11px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.ba-add:hover { border-color: var(--accent); color: var(--accent); }

/* list view: meta-client gets flex */
.cat-list-item .meta-client { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 13px; }

/* hover preview thumbnail (peek) */
.cat-list-preview {
  position: absolute; right: 80px; top: 50%;
  transform: translate(20px, -50%) scale(0.95);
  width: 320px; aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.2,.8,.2,1);
  z-index: 5;
  border: 1px solid var(--line-strong);
  background-size: cover; background-position: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.cat-list-item:hover .cat-list-preview { opacity: 1; transform: translate(0, -50%) scale(1); }
@media (max-width: 1100px) { .cat-list-preview { display: none; } }

/* ---------- Admin login ---------- */
.admin-login {
  position: fixed; inset: 0;
  z-index: 300;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  animation: fadeIn 0.5s ease;
}
.admin-login-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,45,45,0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(80,80,255,0.05), transparent 50%);
}
.admin-login-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}
.admin-login-card {
  position: relative; z-index: 2;
  width: 440px; max-width: calc(100% - 40px);
  padding: 40px;
  border-radius: var(--radius);
}
.admin-login-card .crest {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.admin-login-card .crest .dot { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); }
.admin-login-card h1 {
  font-size: 32px;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
}
.admin-login-card .sub {
  color: var(--ink-dim);
  margin-bottom: 32px;
  font-size: 13px;
}
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); }
.field input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  font: inherit; font-size: 14px;
  outline: none;
  transition: border 0.2s ease, background 0.2s ease;
}
.field input:focus { border-color: var(--accent); background: rgba(255,45,45,0.04); }
.admin-login-card button[type=submit] {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}
.admin-login-foot {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-login-foot .blink {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.5s ease-in-out infinite;
  margin-right: 8px;
  display: inline-block;
}

/* ---------- Admin dashboard ---------- */
.admin-shell {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 250;
  display: grid;
  grid-template-columns: 240px 1fr;
  animation: fadeIn 0.4s ease;
}
.admin-side {
  border-right: 1px solid var(--line);
  background: transparent;
  padding: 28px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.admin-side .crest {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin-bottom: 24px;
}
.admin-side .crest .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.admin-side .crest .name { font-family: var(--font-display); font-weight: 600; }
.admin-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-dim);
  transition: all 0.2s ease;
}
.admin-nav-item:hover { background: rgba(255,255,255,0.03); color: var(--ink); }
.admin-nav-item.active { background: rgba(255,45,45,0.1); color: var(--accent); }
.admin-nav-item .ico {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
}
.admin-side .group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px;
  margin-top: 18px;
}
.admin-side .exit {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-dim);
  border: 1px solid var(--line);
}
.admin-side .exit:hover { color: var(--accent); border-color: var(--accent); }

.admin-main {
  overflow-y: auto;
  padding: 28px 36px 60px;
  background: transparent;
}
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.admin-topbar h2 {
  font-size: 28px;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 12px;
}
.admin-topbar h2 .count {
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.18em;
}
.admin-topbar-right { display: flex; gap: 10px; align-items: center; }
.admin-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
}
.admin-search input { background: none; border: none; outline: none; color: var(--ink); font: inherit; font-size: 13px; width: 200px; }
.admin-search svg { color: var(--ink-mute); }

.admin-rows {
  display: flex; flex-direction: column; gap: 8px;
}
.admin-grid-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  overflow: hidden;
  transition: all 0.25s ease;
}
.admin-row {
  display: grid;
  grid-template-columns: 24px 80px 60px 1fr 200px 140px 100px 60px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  transition: all 0.2s ease;
}
.admin-row:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.03); }
.admin-row.dragging { opacity: 0.5; transform: scale(0.98); }
.admin-row .grip {
  color: var(--ink-mute);
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
}
.admin-row .grip:active { cursor: grabbing; }
.admin-row .num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.16em; }
.admin-row .thumb {
  width: 64px; height: 40px;
  border-radius: 6px;
  background-size: cover; background-position: center;
  position: relative;
  overflow: hidden;
}
.admin-row .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, rgba(0,0,0,0.4));
}
.admin-row .title { font-weight: 500; }
.admin-row .title .meta { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.1em; }
.admin-row .cat-pill {
  font-family: var(--font-mono); font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-row .views { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); letter-spacing: 0.1em; }
.admin-row .status { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.admin-row .status .dot { width: 7px; height: 7px; border-radius: 50%; }
.admin-row .status.live .dot { background: #22e07c; box-shadow: 0 0 8px rgba(34,224,124,0.6); }
.admin-row .status.draft .dot { background: var(--ink-mute); }
.admin-row .actions { display: flex; gap: 4px; justify-content: flex-end; }
.admin-row .actions button {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  transition: all 0.2s ease;
}
.admin-row .actions button:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.admin-row .actions button.del:hover { background: rgba(255,45,45,0.12); color: var(--accent); }

@media (max-width: 1100px) {
  .admin-row { grid-template-columns: 24px 64px 1fr 60px; gap: 12px; }
  .admin-row .num, .admin-row .cat-pill, .admin-row .views, .admin-row .status { display: none; }
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.admin-stat {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.admin-stat .lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.admin-stat .num { font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; }
.admin-stat .delta { font-family: var(--font-mono); font-size: 10px; color: #22e07c; margin-top: 6px; letter-spacing: 0.1em; }
.admin-stat .delta.down { color: var(--accent); }

/* Add video modal */
.admin-modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 350;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  animation: fadeIn 0.25s ease;
}
.admin-modal {
  width: 100%; max-width: 640px;
  border-radius: 18px;
  padding: 32px;
  animation: scaleIn 0.3s cubic-bezier(.2,.8,.2,1);
}
.admin-modal h3 {
  font-size: 22px;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.admin-modal .sub { color: var(--ink-dim); font-size: 13px; margin-bottom: 24px; }
.admin-modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* Toggle switch */
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.toggle .switch {
  width: 36px; height: 20px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
}
.toggle .switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s ease;
}
.toggle.on .switch { background: var(--toggle-accent, var(--accent)); }
.toggle.on .switch::after { left: 18px; }

/* Hidden admin trigger hint (debug, off by default) */
.dev-hint {
  position: fixed; bottom: 10px; right: 14px; z-index: 50;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute);
  letter-spacing: 0.15em;
}

/* Triple-click ripple */
.logo-ripple {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: ripple 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple {
  from { opacity: 1; transform: scale(0.5); }
  to { opacity: 0; transform: scale(2.2); }
}

/* ---------- Utility ---------- */
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-12 { gap: 12px; }
.gap-24 { gap: 24px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* ---------- Iris transition (presentation open) ---------- */
/* Preloader */
.preloader-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  pointer-events: none;
  animation: fadeIn 0.5s ease;
}
.preloader-overlay dotlottie-player {
  background: transparent !important;
}
/* Força transparência no container interno do Web Component */
dotlottie-player::part(container) {
  background: transparent !important;
}

.preloader-overlay.fade-out {
  animation: fadeOut 0.8s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

.iris-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: #000;
  clip-path: circle(0% at 50% 50%);
  animation: irisOpen 1.1s cubic-bezier(.7,.05,.4,1) forwards;
}
.iris-overlay.closing {
  clip-path: circle(150% at 50% 50%);
  animation: irisClose 0.9s cubic-bezier(.6,0,.4,1) forwards;
}
@keyframes irisOpen {
  0%   { clip-path: circle(0% at 50% 50%); }
  45%  { clip-path: circle(75% at 50% 50%); background: #000; }
  100% { clip-path: circle(150% at 50% 50%); background: #000; }
}
@keyframes irisClose {
  0%   { clip-path: circle(150% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}
.iris-flash {
  position: fixed; inset: 0;
  z-index: 9001;
  background: radial-gradient(circle at 50% 50%, rgba(230,57,70,0.5) 0%, transparent 50%);
  opacity: 0;
  pointer-events: none;
  animation: irisFlash 1.1s ease-out forwards;
}
@keyframes irisFlash {
  0%, 30% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Presentation page entry zoom */
.pres-shell.iris-enter { animation: presZoomIn 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes presZoomIn {
  from { transform: scale(1.08); opacity: 0; filter: blur(8px); }
  to   { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* ---------- Chip categories grid ---------- */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  gap: 8px;
  grid-auto-flow: dense;
}
@media (max-width: 900px) { .chip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .chip-grid { grid-template-columns: repeat(2, 1fr); } }

.chip-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  cursor: pointer;
  transition: opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* chip-active: expands downward only (same column width, double height) */
.chip-card.chip-active {
  grid-column: span 1;
  grid-row: span 2;
  z-index: 10;
  border-color: rgba(230,57,70,0.45);
  box-shadow: 0 0 0 1px var(--accent-glow-soft), 0 20px 60px -12px var(--accent-glow);
  animation: chipPop 0.28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chipPop {
  from { transform: scale(0.97); }
  to   { transform: scale(1); }
}
.chip-card.chip-dim { opacity: 0.4; }
/* Label stays visible and pinned to the top section */
.chip-card.chip-active .chip-label {
  opacity: 1;
  align-items: flex-start;
  padding-top: 20px;
  z-index: 13;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
}
/* Expand fills the full chip from behind, body sits at bottom */
.chip-card.chip-active .chip-expand { opacity: 1; pointer-events: none; }
.chip-card.chip-active .chip-expand-name { display: none; } /* label already shows name */
.chip-card.chip-active .chip-cover  { transform: scale(1.04); }
.chip-card.chip-empty { opacity: 0.28; }

/* Compact label */
.chip-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  z-index: 2;
  transition: opacity 0.3s ease;
}
.chip-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.chip-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  background: rgba(255,255,255,0.05);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

/* Expanded reveal layer — fills the chip (which is now 2×2 grid cells when active) */
.chip-expand {
  position: absolute;
  inset: 0;
  opacity: 0;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.chip-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
  filter: brightness(0.7) saturate(1.1);
}
.chip-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.75) 100%);
}
.chip-expand-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 22px;
  z-index: 3;
}
.chip-expand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.chip-expand-desc {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  line-height: 1.5;
  margin-bottom: 14px;
  max-width: 320px;
}
.chip-expand-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(230,57,70,0.12);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(230,57,70,0.35);
}
.exp-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  cursor: pointer;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.32s ease,
              flex 0.32s ease;
  isolation: isolate;
}
.exp-card.exp-active {
  transform: scale(1.04);
  z-index: 10;
  box-shadow:
    0 0 0 1px var(--accent-glow-soft),
    0 24px 70px -12px var(--accent-glow),
    0 0 90px -20px var(--accent-glow-soft);
}
.exp-card.exp-shrink {
  transform: scale(0.97);
  opacity: 0.8;
}
.exp-card-cover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
  filter: brightness(0.75) saturate(1.1);
  z-index: 0;
}
.exp-card.exp-active .exp-card-cover {
  transform: scale(1.06);
  filter: brightness(0.9) saturate(1.3);
}
.exp-card-glass {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.72) 100%);
  z-index: 1;
  transition: background 0.4s ease;
}
.exp-card.exp-active .exp-card-glass {
  background: linear-gradient(180deg, rgba(230,57,70,0.06) 0%, rgba(0,0,0,0.82) 100%);
}
.exp-card-content {
  position: absolute; inset: 0;
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 2;
}
.exp-card-top { display: flex; justify-content: space-between; align-items: start; }
.exp-card-bottom {}
.exp-card-desc {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  max-width: 340px;
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
  margin-top: 0;
}
.exp-card.exp-active .exp-card-desc {
  max-height: 80px;
  opacity: 1;
  margin-top: 8px;
}
.exp-card-glow {
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 0.35s ease;
  z-index: 3;
  pointer-events: none;
}
.exp-card.exp-active .exp-card-glow {
  border-color: rgba(230,57,70,0.35);
}

/* ---------- Clients marquee ---------- */
.mq-stage {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}
.mq-row {
  overflow: hidden;
  padding: 12px 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.mq-row.mq-paused .mq-track { animation-play-state: paused; }
.mq-track {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
  animation: mqScroll 40s linear infinite;
  will-change: transform;
  padding-right: 6px;
}
@keyframes mqScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.mq-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 80px;
  padding: 0 16px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.mq-item:hover { opacity: 1; }
.mq-logo {
  max-height: 44px;
  max-width: 140px;
  width: auto;
  filter: brightness(0) invert(1);
  object-fit: contain;
}
.mq-initials {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 9px;
  padding: 10px 14px;
  white-space: nowrap;
}

/* ── Client page (liquid glass full-screen overlay) ── */
.client-page-overlay {
  position: fixed; inset: 0;
  z-index: 450;
  background: rgba(5,5,7,0.7);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  overflow-y: auto;
  animation: fadeIn 0.3s ease;
}
.client-page-inner {
  min-height: 100%;
  padding: 0 0 80px;
  background: radial-gradient(ellipse at 50% 0, rgba(230,57,70,0.05) 0%, transparent 55%);
}
.client-page-accent-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(230,57,70,0.3) 55%, transparent 100%);
  position: sticky; top: 0; z-index: 11;
}
.client-page-header {
  position: sticky; top: 2px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px;
  background: linear-gradient(180deg, rgba(4,4,6,0.99) 0%, rgba(6,6,10,0.95) 100%);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(230,57,70,0.1);
}
.client-page-logo {
  display: flex; align-items: center; gap: 20px;
}
.client-page-logo-mark {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.client-page-logo-mark img {
  height: 36px; width: auto; object-fit: contain;
  filter: brightness(1.15);
}
.client-page-logo-text {
  display: flex; flex-direction: column; gap: 9px;
}
.client-page-client-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.client-page-logo-initials {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.client-page-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.client-page-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(230,57,70,0.12);
  padding: 4px 12px;
  border: 1px solid rgba(230,57,70,0.28);
  border-radius: 999px;
  display: inline-block;
}
.cph-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.05);
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  display: inline-block;
}
.client-page-close {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background 0.2s, border-color 0.2s, transform 0.3s;
  cursor: pointer;
  flex-shrink: 0;
}
.client-page-close:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }

.client-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 36px 48px 0;
}
@media (max-width: 1300px) { .client-page-grid { grid-template-columns: repeat(3,1fr); padding: 24px 24px 0; } }
@media (max-width: 800px)  { .client-page-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px)  { .client-page-grid { grid-template-columns: 1fr !important; padding: 16px 16px 0; } }

/* transparent sections so wave shows through */
.section, .about-section, .contact-section, .cat-page,
main, .feat-list, .categories-grid, .exp-grid { background: transparent; }

/* Keep presentation and modal backgrounds solid; let admin use wave-bg */
.pres-shell, .admin-modal-back { background: var(--bg); }
.admin-shell { background: transparent; }
.admin-login { background: transparent; }
.pres-shell  { background: rgba(10,10,13,0.92); }
/* Video modal backdrop — semi-transparent to show wave-bg canvas */
.modal-backdrop {
  background: rgba(5,5,7,0.72) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.015);
}
.admin-toolbar-group {
  display: flex; align-items: center; gap: 8px;
}
.admin-toolbar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.admin-toolbar select, .admin-toolbar .filter-pill {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font: inherit; font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  outline: none;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  cursor: pointer;
}
.admin-toolbar select:hover { border-color: var(--accent); }
.admin-toolbar select option { background: #0b0b0f; }
.admin-toolbar .filter-pill { display: inline-flex; align-items: center; gap: 6px; }
.admin-toolbar .filter-pill.active {
  background: rgba(230,57,70,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.admin-toolbar .view-toggle {
  margin-left: auto;
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  padding: 3px;
  gap: 0;
}
.admin-toolbar .view-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-radius: 999px;
  transition: all 0.2s ease;
}
.admin-toolbar .view-toggle button.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 14px var(--accent-glow-soft);
}

/* Admin grid view */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.admin-grid-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  overflow: hidden;
  transition: all 0.25s ease;
  cursor: pointer;
  display: flex; flex-direction: column;
}
.admin-grid-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow-soft), 0 16px 50px -12px var(--accent-glow);
  transform: translateY(-3px);
}
.admin-grid-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover; background-position: center;
}
.admin-grid-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5));
}
.admin-grid-status {
  position: absolute; top: 10px; left: 10px;
  z-index: 2;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 6px;
}
.admin-grid-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.admin-grid-status.live .dot { background: #22e07c; box-shadow: 0 0 6px rgba(34,224,124,0.6); }
.admin-grid-status.draft .dot { background: var(--ink-mute); }
.admin-grid-duration {
  position: absolute; bottom: 10px; right: 10px;
  z-index: 2;
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 7px;
  background: rgba(0,0,0,0.75);
  border-radius: 4px;
  letter-spacing: 0.1em;
}
.admin-grid-feat {
  position: absolute; top: 10px; right: 10px;
  z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 0 12px var(--accent-glow);
}
.admin-grid-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.admin-grid-body .title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.admin-grid-body .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.admin-grid-body .meta .sep { color: var(--ink-mute); }
.admin-grid-actions {
  display: flex; gap: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.01);
  justify-content: flex-end;
}
.admin-grid-actions button {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  transition: all 0.2s ease;
}
.admin-grid-actions button:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.admin-grid-actions button.del:hover { background: rgba(230,57,70,0.12); color: var(--accent); }

/* ---------- Client cards ---------- */
.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.client-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex; flex-direction: column; gap: 14px;
  transition: all 0.25s ease;
  position: relative;
}
.client-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow-soft), 0 12px 40px -16px var(--accent-glow);
  transform: translateY(-2px);
}
.client-card-mark {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-glow-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.client-card-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.client-card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px;
}
.client-card-count {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}
.client-card-actions {
  display: flex; gap: 4px; margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  justify-content: flex-end;
}
.client-card-actions button {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); transition: all 0.2s ease;
}
.client-card-actions button:hover { background: rgba(255,255,255,0.06); color: var(--ink); }
.client-card-actions button.del:hover { background: rgba(230,57,70,0.12); color: var(--accent); }
.client-card-add {
  border: 1.5px dashed var(--line-strong);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px;
  color: var(--ink-mute);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  min-height: 180px;
  transition: all 0.25s ease;
}
.client-card-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(230,57,70,0.04);
}

/* ---------- Inline editable categorias ---------- */
.cat-edit-row {
  display: grid;
  grid-template-columns: 24px 80px 1fr 200px 140px 80px;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.015);
  transition: all 0.2s ease;
}
.cat-edit-row:hover { border-color: var(--line-strong); background: rgba(255,255,255,0.025); }
.cat-edit-row.dragging { opacity: 0.5; }
.cat-edit-row .grip { color: var(--ink-mute); cursor: grab; display: flex; align-items: center; justify-content: center; }
.cat-edit-row .grip:active { cursor: grabbing; }
.cat-edit-thumb {
  width: 64px; height: 44px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line-strong)
  overflow: hidden;
}
.cat-edit-thumb:hover::after {
  content: "TROCAR";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; color: #fff;
}
.cat-edit-fields {
  display: flex; flex-direction: column; gap: 4px;
}
.cat-edit-input {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 8px;
  margin-left: -8px;
  color: var(--ink);
  outline: none;
  transition: all 0.2s ease;
  width: 100%;
}
.cat-edit-input:hover { border-color: var(--line); background: rgba(255,255,255,0.02); }
.cat-edit-input:focus { border-color: var(--accent); background: rgba(230,57,70,0.05); }
.cat-edit-input.desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-dim);
}
.cat-edit-input.desc:focus { color: var(--ink); }

.cat-edit-slug-row {
  display: flex; align-items: center; gap: 0;
  margin-top: 3px;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.cat-edit-row:hover .cat-edit-slug-row { opacity: 0.8; }
.cat-edit-slug-prefix,
.cat-edit-slug-value {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-dim); white-space: nowrap; line-height: 1;
  letter-spacing: 0.04em;
}
.cat-edit-slug-value { color: var(--accent); }

/* Category background-picker popover */
.bg-picker {
  position: absolute;
  z-index: 200;
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15,15,20,0.96);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.bg-picker-swatch {
  width: 56px; height: 40px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bg-picker-swatch:hover, .bg-picker-swatch.active {
  border-color: var(--accent);
  transform: scale(1.06);
}

/* Tab bar */
.admin-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.015);
  width: fit-content;
}
.admin-tab-bar button {
  padding: 9px 18px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: all 0.2s ease;
}
.admin-tab-bar button:hover { color: var(--ink); }
.admin-tab-bar button.active {
  background: var(--accent);
  color: #fff;
}
.reel-drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
  padding: 48px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: rgba(255,255,255,0.015);
  transition: all 0.25s ease;
  min-height: 240px;
}
.reel-drop:hover { border-color: var(--accent); background: rgba(255,45,45,0.04); }
.reel-drop.filled { border-style: solid; border-color: rgba(34,224,124,0.3); background: rgba(34,224,124,0.03); }
.reel-drop.filled:hover { border-color: var(--accent); }
.reel-drop-info { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.reel-drop-info .name { font-size: 13px; font-weight: 500; word-break: break-all; text-align: center; max-width: 100%; }
.reel-drop-info .sub { font-size: 12px; color: var(--ink-dim); }
.reel-drop-remove { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); border: none; border-radius: 6px; padding: 6px; color: var(--ink-dim); cursor: pointer; }
.reel-drop-remove:hover { color: var(--accent); }
.reel-drop-ico {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: var(--ink-dim);
}
.reel-drop:hover .reel-drop-ico { color: var(--accent); }
.reel-drop-title { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.reel-drop-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Process section ─────────────────────────────── */
.process-section { padding: 0 0 80px; }
.process-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.process-title { margin-bottom: 52px; }
.process-steps { display: flex; flex-direction: column; }
.process-step-wrap { display: flex; flex-direction: column; }
.process-step {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: center;
  padding: 36px 44px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
}
.process-step-indent { margin-left: 8%; }
.process-step-left { display: flex; flex-direction: column; gap: 8px; }
.process-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.process-step-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
}
.process-step-desc {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.65;
}
.process-step-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.process-step-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--ink-dim);
}
.process-arrow-row {
  height: 52px;
  display: flex;
  align-items: center;
}
.process-arrow-row.process-arrow-right { justify-content: flex-end; padding-right: 6%; }
.process-arrow-row.process-arrow-left  { justify-content: flex-start; padding-left: 6%; }
.process-arrow-svg { width: 120px; height: 44px; color: var(--accent); opacity: 0.65; }
@media (max-width: 700px) {
  .process-step { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
  .process-step-indent { margin-left: 0; }
}

/* ── Site footer ─────────────────────────────────── */
.site-footer {
  background: #000;
  padding: 56px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
}
.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}
.site-footer-logo {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.site-footer-vdiv {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.22);
}
.site-footer-grupo-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.site-footer-grupo-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 3px;
}
.site-footer-grupo-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: #fff;
}
.site-footer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}
.site-footer-info span,
.site-footer-info a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.65);
  line-height: 1.9;
  display: block;
}
.site-footer-info a:hover { color: var(--accent); }
.site-footer-spacer { height: 10px; }
.site-footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 16px;
}
.site-footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.32);
  line-height: 1.75;
}
.site-footer-socials {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.site-footer-social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: border-color 0.2s, color 0.2s;
}
.site-footer-social:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Presentation mode ---------- */
/* ── Presentation Mode ──────────────────────────────────────── */
.pres-shell {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 240;
  display: flex; flex-direction: column;
  animation: fadeIn 0.4s ease;
}

.pres-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 13px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: rgba(7,7,10,0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.pres-top-left { display: flex; align-items: center; gap: 16px; }
.pres-mode-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--accent);
  padding: 5px 12px;
  border: 1px solid rgba(230,57,70,0.3);
  border-radius: 999px;
  background: rgba(230,57,70,0.07);
}
.pres-search {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  max-width: 540px; width: 100%; margin: 0 auto;
  transition: border-color 0.2s;
}
.pres-search:focus-within { border-color: rgba(255,255,255,0.16); }
.pres-search input { background: none; border: none; outline: none; color: var(--ink); font: inherit; font-size: 14px; flex: 1; }
.pres-search svg { color: rgba(255,255,255,0.28); flex-shrink: 0; }

.pres-body {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
}
@media (max-width: 900px) { .pres-body { grid-template-columns: 1fr; } .pres-side { display: none; } }

.pres-side {
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 28px 10px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 28px;
  background: rgba(5,5,8,0.5);
}
.pres-side-group { display: flex; flex-direction: column; gap: 2px; }
.pres-side-label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  padding: 4px 14px 10px;
}
.pres-side-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,0.38);
  text-align: left;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pres-side-item.compact { grid-template-columns: 1fr; padding-left: 16px; }
.pres-side-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.72); border-left-color: rgba(255,255,255,0.1); }
.pres-side-item.active { background: rgba(230,57,70,0.1); color: #fff; border-left-color: var(--accent); font-weight: 500; }
.pres-side-item .num { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.18); letter-spacing: 0.08em; }
.pres-side-item.active .num { color: rgba(230,57,70,0.65); }
.pres-side-item .ico-thumb { width: 20px; height: 15px; border-radius: 4px; background-size: cover; opacity: 0.75; }
.pres-side-item.active .ico-thumb { opacity: 1; }
.pres-side-item .ico { display: flex; align-items: center; justify-content: center; opacity: 0.55; }
.pres-side-item.active .ico { opacity: 1; }

.pres-main { overflow-y: auto; padding: 32px 40px 80px; }

.pres-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 54px;
  cursor: pointer;
  min-height: 380px;
  box-shadow: 0 24px 80px -16px rgba(0,0,0,0.55);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.pres-hero:hover {
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 32px 100px -20px rgba(0,0,0,0.65);
  transform: translateY(-2px);
}
@media (max-width: 900px) { .pres-hero { grid-template-columns: 1fr; } }

.pres-hero-thumb {
  position: relative;
  background-size: cover; background-position: center;
}
.pres-hero-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(7,5,10,0.88));
  pointer-events: none;
}

.pres-hero-info {
  padding: 44px 44px 44px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: linear-gradient(135deg, rgba(8,6,12,0.1) 0%, rgba(10,5,9,0.97) 100%);
  position: relative; z-index: 1;
}
.pres-hero-tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.pres-hero-tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  box-shadow: 0 0 8px 2px rgba(230,57,70,0.55);
}
.pres-hero-info h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 50px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.05;
  color: #ffffff;
}
.pres-hero-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  color: rgba(255,255,255,0.48); font-size: 13px;
}
.pres-hero-meta span { display: inline-flex; align-items: center; }
.pres-hero-meta .dot-sep { color: rgba(255,255,255,0.2); margin: 0 1px; }
.pres-hero-cta { margin-top: 6px; }

.pres-row { margin-bottom: 50px; }
.pres-row-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pres-row-head h2 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.025em; color: #fff;
}
.pres-row-count {
  font-family: var(--font-mono);
  font-size: 10px; color: rgba(255,255,255,0.22); letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(255,255,255,0.05); padding: 3px 9px; border-radius: 999px;
}
.pres-row-more {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px; color: rgba(255,255,255,0.28); letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.15s;
}
.pres-row-more:hover { color: var(--accent); }

.pres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.pres-card {
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 10px;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.pres-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 20px 56px -10px rgba(0,0,0,0.5);
}
.pres-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 9px; overflow: hidden;
  background-size: cover; background-position: center;
  transition: box-shadow 0.22s ease;
}
.pres-card:hover .pres-card-thumb { box-shadow: 0 0 0 1px rgba(230,57,70,0.35); }
.pres-card-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.55));
}
.pres-card-duration {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(6px);
  letter-spacing: 0.08em; color: rgba(255,255,255,0.9);
}
.pres-card-play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
  background: rgba(0,0,0,0.35); color: #fff;
}
.pres-card:hover .pres-card-play { opacity: 1; }
.pres-card-info { padding: 2px 4px 6px; }
.pres-card-info h3 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35;
  color: rgba(255,255,255,0.88);
}
.pres-card-meta {
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 5px;
}
.pres-card-meta .dot-sep { color: rgba(255,255,255,0.14); }

.pres-placeholder {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.18); letter-spacing: 0.22em;
  border: 1px dashed rgba(255,255,255,0.1);
  padding: 8px 16px; border-radius: 6px; white-space: nowrap; z-index: 1;
}
.pres-placeholder.small { font-size: 9px; padding: 5px 10px; letter-spacing: 0.18em; }

/* ── Global Search overlay (Ctrl+Space) ──────────────────── */
.gsearch-overlay {
  position: fixed; inset: 0;
  z-index: 800;
  background: rgba(4, 4, 8, 0.72);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  animation: gsearchOverlayIn 0.22s ease;
}
@keyframes gsearchOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Subtle ambient glow in center — no aggressive red burst */
.gsearch-overlay::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
  top: calc(50% - 350px); left: calc(50% - 350px);
  animation: gsearchBurst 0.5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes gsearchBurst {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
/* Unified glass card wrapping input + results */
.gsearch-box {
  width: 100%; max-width: 660px;
  margin: 0 24px;
  z-index: 1;
  border-radius: 22px;
  backdrop-filter: blur(48px) saturate(180%);
  -webkit-backdrop-filter: blur(48px) saturate(180%);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.06);
  animation: gsearchIn 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes gsearchIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.gsearch-input-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  width: auto;
  max-width: none;
  background: none;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  border-top: none; border-left: none; border-right: none;
}
/* Results panel — now sits inside the glass card */
.gsearch-results-panel {
  width: 100%; max-width: none;
  margin: 0;
  border-radius: 0;
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: hidden;
  position: relative; z-index: 1;
  animation: none;
}
.gsearch-input {
  flex: 1;
  background: none; border: none; outline: none;
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--ink);
  caret-color: var(--accent);
}
.gsearch-input::placeholder { color: var(--ink-mute); }
.gsearch-input:focus,
.gsearch-input:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; }
.gsearch-box :focus-visible  { outline: none !important; }
.gsearch-clear {
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  transition: background 0.2s;
  flex-shrink: 0;
}
.gsearch-clear:hover { background: rgba(255,255,255,0.14); color: var(--ink); }
.gsearch-kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.gsearch-empty {
  padding: 28px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-align: center;
}
.gsearch-results {
  max-height: 500px;
  overflow-y: auto;
  padding-bottom: 10px;
}
.gsearch-results::-webkit-scrollbar { width: 3px; }
.gsearch-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 999px; }
.gsearch-group { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.gsearch-group:last-child { border-bottom: none; }
.gsearch-group-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 8px 22px 4px;
}
.gsearch-item {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 22px;
  background: transparent; border: none;
  cursor: pointer; text-align: left;
  transition: background 0.15s ease;
}
.gsearch-item:hover { background: rgba(255,255,255,0.05); }
.gsearch-item-icon {
  color: var(--ink-mute);
  display: flex; align-items: center;
  flex-shrink: 0;
}
.gsearch-item-title {
  font-size: 14px; color: var(--ink);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gsearch-item-sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-mute);
  flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 180px;
}
.gsearch-item-video { align-items: center; gap: 14px; }
.gsearch-video-thumb {
  width: 80px; height: 45px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  background-size: cover; background-position: center;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.gsearch-video-info { flex: 1; min-width: 0; }
.gsearch-video-info .gsearch-item-title { font-weight: 500; }
.gsearch-video-info .gsearch-item-sub { display: block; margin-top: 3px; max-width: none; }
.gsearch-edit-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--ink-mute);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gsearch-edit-btn:hover {
  background: rgba(230,57,70,0.18);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Partner form (public page) ─────────────────────────────── */
.partner-shell {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.partner-card {
  width: 100%;
  max-width: 720px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.7);
}
.partner-header {
  padding: 40px 48px 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.partner-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.partner-header h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.partner-header p {
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.6;
}
.partner-form { padding: 36px 48px 40px; }
.partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pf-field { display: flex; flex-direction: column; gap: 6px; }
.pf-full { grid-column: 1 / -1; }
.pf-field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pf-req { color: var(--accent); }
.pf-field input,
.pf-field select,
.pf-field textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pf-field select option { background: #0b0b0f; }
.pf-error {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(230,57,70,0.1);
  border: 1px solid rgba(230,57,70,0.4);
  border-radius: 10px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.pf-actions { margin-top: 28px; }
.pf-submit {
  padding: 14px 28px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pf-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}
.partner-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
  text-align: center;
  gap: 16px;
}
.partner-success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(34,224,124,0.12);
  border: 1px solid rgba(34,224,124,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #22e07c;
  margin-bottom: 8px;
}
.partner-success h2 {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
}
.partner-success p { color: var(--ink-dim); font-size: 14px; line-height: 1.7; }

/* ── Partner rows in admin ─────────────────────────────────── */
.partner-card-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  transition: border-color 0.2s;
}
.partner-card-row:hover { border-color: var(--line-strong); }
.partner-row-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.partner-row-head:hover { background: rgba(255,255,255,0.02); }
.partner-row-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(230,57,70,0.15);
  border: 1px solid rgba(230,57,70,0.3);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.partner-row-info { flex: 1; min-width: 0; }
.partner-row-name {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.partner-row-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--ink-dim);
  overflow: hidden;
}
.partner-row-date {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; color: var(--ink-mute);
  white-space: nowrap; flex-shrink: 0;
}
.partner-row-del {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--ink-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.partner-row-del:hover { background: rgba(255,45,45,0.12); color: var(--accent); }
.partner-row-body {
  padding: 0 18px 18px 68px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  border-top: 1px solid var(--line);
}
.pi-item { display: flex; flex-direction: column; gap: 3px; }
.pi-label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pi-value { font-size: 13px; color: var(--ink); line-height: 1.4; }
.pi-link { color: var(--accent); text-decoration: none; }
.pi-link:hover { text-decoration: underline; }

/* ============================================================
   MICRO-INTERACTIONS — hover effects & smooth transitions
   ============================================================ */

/* ── Buttons — press state ────────────────────────────────── */
.btn { will-change: transform; }
.btn:active { transform: scale(0.96) !important; transition: transform 0.08s ease !important; }
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 14px 40px var(--accent-glow); }
.btn-ghost:hover { transform: translateY(-1px); }

/* ── Nav logo — subtle feedback ──────────────────────────── */
.nav-logo { transition: opacity 0.2s ease; }
.nav-logo:hover { opacity: 0.88; }

/* ── Nav links — sweep underline on hover ────────────────── */
.nav-menu a::before {
  content: "";
  position: absolute;
  bottom: -5px; left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
}
.nav-menu a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.nav-menu a.active::before { display: none; }

/* ── Marquee item — scale on hover ───────────────────────── */
.mq-item { transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2,.8,.2,1); }
.mq-item:hover { opacity: 1; transform: scale(1.08); }
.mq-item:hover .mq-initials { border-color: rgba(255,255,255,0.4); color: var(--accent); }

/* ── Chip expand button — arrow nudge on hover ───────────── */
.chip-expand-btn { transition: background 0.25s ease, border-color 0.25s ease, gap 0.3s ease; }
.chip-expand-btn:hover, .chip-card.chip-active .chip-expand-btn:hover {
  background: rgba(230,57,70,0.22);
  border-color: rgba(230,57,70,0.6);
  gap: 14px;
}

/* ── About stats — lift + accent color on hover ──────────── */
.stat { transition: transform 0.3s ease; cursor: default; }
.stat:hover { transform: translateY(-4px); }
.stat .num { transition: color 0.3s ease; }
.stat:hover .num { color: var(--accent); }

/* ── Admin stat cards — lift on hover ────────────────────── */
.admin-stat { transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.admin-stat:hover {
  border-color: var(--line-strong);
  background: rgba(255,255,255,0.04);
  transform: translateY(-3px);
}

/* ── Admin nav — active accent bar ───────────────────────── */
.admin-nav-item { position: relative; }
.admin-nav-item::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 2px;
  background: var(--accent);
  border-radius: 999px;
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.admin-nav-item.active::before { opacity: 1; transform: scaleY(1); }

/* ── Cat list item — left accent reveal on hover ─────────── */
.cat-list-item { position: relative; }
.cat-list-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
}
.cat-list-item:hover::before { transform: scaleY(1); transform-origin: top; }

/* ── Featured item — left accent bar on hover ────────────── */
.feat-item { position: relative; }
.feat-item::after {
  content: "";
  position: absolute;
  left: 0; top: 30%; bottom: 30%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.25s ease, top 0.3s ease, bottom 0.3s ease;
}
.feat-item:hover::after { opacity: 1; top: 15%; bottom: 15%; }

/* ── Cat card — stronger accent glow ─────────────────────── */
.cat-card:hover {
  border-color: rgba(230,57,70,0.18);
}

/* ── Suggested video card — thumb zoom ───────────────────── */
.modal-sug-thumb { overflow: hidden; }
.modal-sug-thumb > * { transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.modal-sug-card:hover .modal-sug-thumb > * { transform: scale(1.05); }

/* ── Partner card row — lift on hover ────────────────────── */
.partner-card-row {
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.partner-card-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(0,0,0,0.4);
}

/* ── Input / select hover ────────────────────────────────── */
.field input:hover, .field select:hover, .field textarea:hover,
.pf-field input:hover, .pf-field select:hover, .pf-field textarea:hover {
  border-color: rgba(255,255,255,0.2);
}
.field input, .field select, .field textarea,
.pf-field input, .pf-field select, .pf-field textarea {
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* ── Focus visible — accessibility ───────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* ── Scrollbar hover ──────────────────────────────────────── */
::-webkit-scrollbar-thumb { transition: background 0.2s ease; }

/* ── Smooth global link transitions ──────────────────────── */
.footer a { transition: color 0.2s ease; }
.admin-side .exit { transition: color 0.2s ease, border-color 0.2s ease; }

/* ── Cat page back — smoother ────────────────────────────── */
.cat-page-back { transition: all 0.25s cubic-bezier(.2,.8,.2,1); }

/* ── Client page close — smoother ───────────────────────── */
.client-page-close { transition: background 0.2s ease, border-color 0.2s ease, transform 0.3s cubic-bezier(.2,.8,.2,1); }

/* ============================================================
   MOBILE NAV — Hamburger + Full-screen overlay menu
   ============================================================ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 101;
  position: relative;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); }
.nav-hamburger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--ink);
  border-radius: 999px;
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease, width 0.3s ease;
}
.nav-hamburger.open { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); width: 18px; }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 18px; }

@media (max-width: 720px) {
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }
  .nav { padding: 0 20px; min-height: 72px; }
  .nav-logo { gap: 14px !important; }
  .nav-logo img:first-child { height: 56px !important; transform: translateY(10px) !important; }
  .nav-logo img:nth-child(2) { height: 32px !important; }
  .nav-logo img:nth-of-type(3) { height: 32px !important; transform: translateY(-20px) !important; }
}

/* Mobile menu full-screen overlay */
.mobile-menu {
  position: fixed; inset: 0;
  z-index: 99;
  background: rgba(5,5,7,0.97);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  display: flex; flex-direction: column;
  padding: 96px 32px 48px;
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
}
.mobile-menu-link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 9vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink-dim);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, padding-left 0.25s ease;
  animation: mobileMenuIn 0.4s cubic-bezier(.2,.8,.2,1) both;
  text-align: left;
  cursor: pointer;
}
.mobile-menu-link:hover, .mobile-menu-link.active { color: var(--ink); padding-left: 10px; }
.mobile-menu-link:nth-child(1) { animation-delay: 0.04s; }
.mobile-menu-link:nth-child(2) { animation-delay: 0.08s; }
.mobile-menu-link:nth-child(3) { animation-delay: 0.12s; }
.mobile-menu-link:nth-child(4) { animation-delay: 0.16s; }
.mobile-menu-link:nth-child(5) { animation-delay: 0.20s; }
.mobile-menu-cta {
  margin-top: 36px;
  align-self: flex-start;
  animation: mobileMenuIn 0.4s 0.22s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE LAYOUT FIXES
   ============================================================ */

/* Hero mobile */
@media (max-width: 720px) {
  .hero { padding: 100px 0 60px; min-height: 100svh; }
  .hero-content { grid-template-columns: 1fr; gap: 32px; }
  .hero-meta { grid-column: 1; text-align: left; align-items: flex-start; min-width: 0; }
  .hero-bar { display: none; }
}

/* Section head mobile */
@media (max-width: 720px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 36px;
  }
  .section-head p { max-width: none; }
}

/* Modal — bottom sheet on mobile */
@media (max-width: 720px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal-frame {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    margin: 0;
    width: 100%;
    max-width: none;
  }
  .modal-top {
    border-radius: 20px 20px 0 0;
    padding: 14px 16px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .modal-logo { height: 36px; }
  .modal-divider { display: none; }
  .modal-title { font-size: 15px; }
  .modal-meta { font-size: 9px; }
  .modal-body { padding: 16px 16px 32px; }
  .modal-sug-track .modal-sug-card { flex: 0 0 calc(50% - 6px); }
}

/* Category page mobile */
@media (max-width: 720px) {
  .cat-page { padding: 90px 0 60px; }
  .cat-page-head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 32px; margin-bottom: 32px; }
  .cat-page-title { font-size: clamp(44px, 13vw, 72px); }
  .cat-page-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
}

/* Cat-mode nav & mini bar — disable auto-hide on touch/mobile */
@media (max-width: 720px) {
  .nav--hidden {
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.in-cat-page .cat-page,
  body.in-cat-page.cat-peek .cat-page {
    padding-top: 90px !important;
  }
  .cat-mini-bar { display: none !important; }
}

/* Cat list mobile */
@media (max-width: 720px) {
  .cat-list-item { grid-template-columns: 40px 1fr 50px; gap: 16px; padding: 20px 0; }
  .cat-list-item .title { font-size: clamp(18px, 5vw, 26px); }
}

/* Client overlay mobile */
@media (max-width: 720px) {
  .client-page-header { padding: 14px 20px; align-items: flex-start; }
  .client-page-logo-initials { font-size: 22px; }
  .client-page-logo-mark { padding: 8px 10px; border-radius: 8px; }
  .client-page-logo-mark img { height: 28px; }
  .client-page-client-name { font-size: 16px; }
  .client-page-close { margin-top: 1px; }
  .client-page-grid { padding: 20px 16px 0; gap: 12px; }
}

/* Footer mobile */
@media (max-width: 720px) {
  .footer { flex-direction: column; gap: 16px; align-items: flex-start; }
  .footer-left { flex-wrap: wrap; gap: 16px; }
}

/* Contact mobile */
@media (max-width: 600px) {
  .contact-section { padding: 60px 0 40px; }
  .contact-row .val { font-size: 18px; }
}

/* Admin mobile */
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { display: none; }
  .admin-main { padding: 20px 16px 40px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-row { grid-template-columns: 24px 64px 1fr 60px; gap: 12px; }
  .admin-row .num, .admin-row .cat-pill, .admin-row .views, .admin-row .status { display: none; }
}

/* Partner form mobile */
@media (max-width: 600px) {
  .partner-grid { grid-template-columns: 1fr !important; }
  .partner-card { padding: 28px 20px; }
  .partner-logos img:first-child { height: 36px !important; }
}

/* About stats mobile */
@media (max-width: 480px) {
  .stat .num { font-size: 40px; }
  .about-stats { gap: 20px; margin-top: 60px; }
}

/* Chip grid mobile */
@media (max-width: 600px) {
  .chip-name { font-size: 13px; }
  .chip-grid { grid-auto-rows: 68px; }
}

/* Marquee mobile */
@media (max-width: 720px) {
  .mq-item { height: 48px; min-width: 64px; }
  .mq-logo { max-height: 34px; max-width: 100px; }
}

/* Presentation mobile */
@media (max-width: 900px) {
  .pres-body { flex-direction: column !important; overflow: auto; }
  .pres-side { display: none !important; }
  .pres-main { overflow: auto; }
}
@media (max-width: 600px) {
  .pres-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .pres-hero { display: none !important; }
}

/* ============================================================
   MOBILE OVERHAUL — Phase 2
   Comprehensive touch/mobile adaptation for all screens
   ============================================================ */

/* ── Touch devices: always show play overlays ─────────────── */
@media (hover: none) {
  .cat-card-play        { opacity: 1 !important; }
  .cat-card-play svg    { background: rgba(230,57,70,0.55) !important; }
  .feat-item .feat-play { opacity: 1 !important; }
  .feat-item .feat-play-btn { background: rgba(255,255,255,0.12); }
  .mq-item:hover        { transform: none; } /* no scale on touch */
}

/* ── Site footer mobile ───────────────────────────────────── */
@media (max-width: 720px) {
  .site-footer { padding: 40px 0 28px; }
  .site-footer-inner { padding: 0 20px; }
  .site-footer-brand { gap: 14px; margin-bottom: 24px; }
  .site-footer-info { gap: 0; }
  .site-footer-info span,
  .site-footer-info a  { font-size: 12px; line-height: 2; }
  .site-footer-spacer  { height: 6px; }
  .site-footer-bottom  {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 16px;
    margin-top: 12px;
  }
  .site-footer-copy { font-size: 11px; }
}

/* ── Marquee (About section) mobile ──────────────────────── */
@media (max-width: 720px) {
  .marquee-track {
    font-size: 22px;
    gap: 36px;
    padding-right: 36px;
  }
  .marquee-track .star { font-size: 16px; }
  .about-section .marquee { padding: 20px 0; }
}
@media (max-width: 480px) {
  .marquee-track { font-size: 18px; gap: 24px; padding-right: 24px; }
}

/* ── About section mobile ─────────────────────────────────── */
@media (max-width: 720px) {
  .about-quote { padding-right: 0; margin-bottom: 36px; }
  /* .about-stats already has repeat(2,1fr) grid at this breakpoint (line 722) */
  .about-stats { margin-top: 40px; gap: 20px; }
}

/* ── Featured section (feat-item) mobile ─────────────────── */
@media (max-width: 720px) {
  .feat-num { display: none; }
  .feat-item { padding: 18px 16px; gap: 14px; }
  .feat-thumb { aspect-ratio: 16/8; }
  .feat-title { font-size: clamp(16px, 5vw, 22px); }
  .feat-meta  { gap: 10px; margin-top: 8px; }
}

/* ── Categories chip grid mobile ─────────────────────────── */
@media (max-width: 480px) {
  .chip-grid { grid-auto-rows: 56px; }
  .chip-name { font-size: 12px; }
  .chip-count { font-size: 10px; }
}

/* ── Process section mobile ───────────────────────────────── */
@media (max-width: 480px) {
  .process-title { font-size: clamp(32px, 10vw, 56px); }
  .process-step  { padding: 20px 16px; }
  .process-step-name { font-size: clamp(22px, 7vw, 38px); }
  .process-step-desc { font-size: 13px; }
  .process-arrow-row { display: none; } /* arrows too wide on tiny screens */
}

/* ── Contact section mobile ───────────────────────────────── */
@media (max-width: 720px) {
  .contact-section { padding: 80px 0 60px; }
  .contact-headline { font-size: clamp(40px, 11vw, 80px); }
  .contact-card { padding: 22px 18px; gap: 16px; }
  .contact-row .val { font-size: 16px; word-break: break-word; }
}

/* ── Category page controls mobile ───────────────────────── */
@media (max-width: 720px) {
  .cat-controls { gap: 12px; margin-bottom: 24px; }
  .cat-client-dropdown-btn { font-size: 11px; padding: 7px 12px; }
  .cat-cf-btn { padding: 5px 10px; font-size: 10px; }
  .cat-cf-sm  { padding: 4px 9px; font-size: 9px; }
}
@media (max-width: 480px) {
  .cat-controls { flex-direction: column; align-items: stretch; }
  .cat-view-toggle { align-self: flex-end; }
}

/* ── Category grid card mobile ────────────────────────────── */
@media (max-width: 600px) {
  .cat-card-info { padding: 12px 14px 14px; }
  .cat-card-title { font-size: 15px; }
  /* Reduce oversized client badge inside cards */
  .cat-card-client-row img,
  .cat-card-client-row span[style] { width: 40px !important; height: 40px !important; min-width: 40px !important; }
}

/* ── Video modal mobile ────────────────────────────────────── */
@media (max-width: 720px) {
  /* Shrink client badge in modal header */
  .modal-client-logo img,
  .modal-client-logo span { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  .modal-share-btn .share-label { display: none; } /* show icon only */
  .modal-top { column-gap: 10px; }

  /* Player controls: bigger touch targets */
  .cplayer-controls { padding: 10px 14px; gap: 10px; }
  .cp-btn { width: 34px; height: 34px; }
  .cp-volume { display: none; } /* hide volume on mobile — use device controls */
  .cp-time.cp-dim { display: none; }
  .modal-sug-track .modal-sug-card { flex: 0 0 calc(50% - 6px); }
}
@media (max-width: 480px) {
  .modal-sug-track .modal-sug-card { flex: 0 0 calc(80% - 6px); }
  .modal-cta-bar .btn { width: 100%; justify-content: center; }
}

/* ── Presentation mode mobile ──────────────────────────────── */
@media (max-width: 720px) {
  /* Override inline paddingLeft: 60 */
  .pres-top { padding-left: 16px !important; padding-right: 16px !important; gap: 12px !important; }
  .pres-top-left { gap: 10px !important; }
  /* Shrink logos in pres header (imgs inside inner flex div) */
  .pres-top-left > div > img:first-child { height: 44px !important; transform: translateY(8px) !important; }
  .pres-top-left > div > img:nth-child(2) { height: 26px !important; }
  .pres-top-left > div > img:nth-child(3) { display: none; } /* hide Skyline on small */
  .pres-mode-tag { display: none; } /* too long on mobile */
  .pres-search { max-width: none !important; }
  .pres-main { padding: 16px 12px !important; }
  .pres-row-head h2 { font-size: clamp(18px, 5vw, 26px); }
}
@media (max-width: 480px) {
  .pres-top { grid-template-columns: auto 1fr !important; }
  .pres-top-right { display: none; }
}

/* ── Client overlay mobile ─────────────────────────────────── */
@media (max-width: 480px) {
  .client-page-header { gap: 10px; }
  .client-page-close { flex-shrink: 0; }
  .client-page-grid { grid-template-columns: 1fr !important; padding: 16px 16px 0; }
  .pi-grid { grid-template-columns: 1fr; }
}

/* ── Navigation logo mobile ────────────────────────────────── */
@media (max-width: 480px) {
  .nav-logo img:nth-child(3) { display: none; } /* hide Skyline logo on tiny phones */
  .nav { padding: 0 16px; }
}

/* ── Tablet tweaks (601–900px) ─────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .site-footer-inner { padding: 0 32px; }
  .container { padding: 0 40px; }
}

/* ── General touch padding ─────────────────────────────────── */
@media (max-width: 720px) {
  /* Bigger touch targets for interactive elements */
  .cat-cf-btn, .cat-client-dropdown-btn, .cat-view-toggle button { min-height: 38px; }
  .modal-close, .cp-btn { min-width: 38px; min-height: 38px; }
  /* Prevent horizontal overflow */
  .section, .about-section, .contact-section, .cat-page { overflow-x: hidden; }
  /* Reduce section padding */
  .section { padding: 64px 0; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 48px 0; }
}

/* ── Horizontal scroll areas on mobile ────────────────────── */
@media (max-width: 720px) {
  .process-steps { gap: 16px; }
  .cat-client-dropdown-menu {
    max-height: 50vh;
    overflow-y: auto;
  }
  .modal-sug-track { gap: 10px; }
}

/* ── Admin mobile supplemental ─────────────────────────────── */

/* Mobile tab bar — replaces hidden sidebar */
.admin-mobile-nav {
  display: none; /* shown only on mobile via media query */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 4px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.admin-mobile-nav::-webkit-scrollbar { display: none; }
.admin-mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color: var(--ink-dim);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-mobile-nav a span { margin-top: 2px; }
.admin-mobile-nav a:hover { background: rgba(255,255,255,0.05); border-color: var(--line-strong); color: var(--ink); }
.admin-mobile-nav a.active { background: rgba(230,57,70,0.1); border-color: rgba(230,57,70,0.4); color: var(--ink); }
.admin-mobile-nav a.exit-mobile { color: var(--accent); border-color: rgba(230,57,70,0.2); }

@media (max-width: 900px) {
  .admin-mobile-nav { display: flex; }
  /* topbar: wrap title + buttons on narrow screens */
  .admin-topbar { flex-wrap: wrap; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; }
  .admin-topbar h2 { font-size: 22px; }
  .admin-topbar-right { gap: 8px; }
  /* Hide desktop "Apresentação" button (it's in mobile nav now) */
  .admin-pres-btn { display: none; }
  /* Shorten "Adicionar vídeo" label */
  .admin-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .admin-stat  { padding: 16px; }
  .admin-main  { padding: 16px 16px 80px; } /* extra bottom for mobile nav */
  /* Admin row — keep 4 visible cols: grip + thumb + title + actions */
  .admin-row { grid-template-columns: 24px 56px 1fr 60px; gap: 10px; padding: 10px 12px; }
  /* Fix toolbar wrapping */
  .admin-toolbar { flex-wrap: wrap; gap: 8px; }
  .admin-search { flex: 1 1 100%; }
  .admin-search input { width: 100%; }
  .view-toggle { margin-left: auto; }
}

@media (max-width: 600px) {
  .admin-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-add-label { display: none; } /* show only "+" icon on mobile */
  .admin-main  { padding: 12px 12px 80px; }
  /* Grid card: 1 col on mobile */
  .admin-grid { grid-template-columns: 1fr !important; }
  /* Client grid: 1 col */
  .client-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* 2×2 stats so labels like "Total de vídeos" fit without truncating */
  .admin-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .admin-stat .val, .admin-stat .num { font-size: 22px !important; }
  .admin-stat .lab { white-space: nowrap; }
  .admin-topbar h2 { font-size: 20px; }
}

/* Reel panel 2-col grid → 1-col on mobile */
.reel-panel-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 780px) {
  .reel-panel-grid { grid-template-columns: 1fr; }
}

/* Category edit header: description + "Nova categoria" button */
.cat-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
}
@media (max-width: 600px) {
  .cat-edit-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cat-edit-header .btn { width: 100%; justify-content: center; }
}

/* ── Partner page mobile supplemental ─────────────────────── */
@media (max-width: 480px) {
  .partner-card  { padding: 22px 16px; }
  .partner-form  { padding: 24px 16px; }
  .pf-section    { padding: 20px 0 0; }
  .partner-logos { gap: 12px !important; flex-wrap: wrap; }
}

/* ============================================================
   TOUCH INTERACTION — chip cards & hover-only elements
   ============================================================ */

/* Chip tap feedback on touch devices */
@media (hover: none) {
  /* Chips: active (tapped/expanded) state shows expand body */
  .chip-card { touch-action: manipulation; cursor: pointer; }
  /* Faster tap response — remove 300ms delay */
  .chip-grid, .chip-card, .cat-card, .feat-item, .btn { touch-action: manipulation; }
  /* Remove scale on non-active chips when another is active (too jumpy on mobile) */
  .chip-dim { opacity: 1 !important; filter: none !important; }
}

/* ── Chip grid: tap-hint on mobile ───────────────────────── */
@media (max-width: 720px) {
  /* Show a subtle hint that tapping expands */
  .chip-grid { gap: 8px; }
  .chip-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .chip-card:active { transform: scale(0.97); }
  /* Swap desktop ↔ mobile hint text */
  .chip-hint-desktop { display: none; }
  .chip-hint-mobile { display: block; }
}

/* ============================================================
   PRESENTATION MODE — mobile supplemental
   ============================================================ */

/* Pres grid cards: play always visible on touch */
@media (hover: none) {
  .pres-card-play { opacity: 1 !important; }
}

/* Pres header search — full width on mobile */
@media (max-width: 720px) {
  .pres-search { width: 100%; max-width: none; }
  .pres-top {
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto;
  }
  .pres-top-right { display: none; }
  .pres-row { margin-bottom: 32px; }
  .pres-row-head { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .pres-card-info h3 { font-size: 13px; }
  .pres-card-meta { font-size: 10px; }
}

@media (max-width: 480px) {
  .pres-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .pres-card-thumb { aspect-ratio: 16/10; }
}

/* ============================================================
   VIDEO FORM MODAL — mobile fixes
   ============================================================ */
@media (max-width: 720px) {
  .admin-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px 20px 40px;
    width: 100% !important;
    max-width: none !important;
  }
  .admin-modal-back {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  /* Two-col field grids → 1 col on mobile */
  .vf-grid-2 { grid-template-columns: 1fr !important; }
  .admin-modal .row { grid-template-columns: 1fr !important; }
  .admin-modal-actions { flex-direction: column-reverse; gap: 8px; }
  .admin-modal-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   CATEGORIES PANEL (admin) — mobile clean redesign
   ============================================================ */
@media (max-width: 720px) {
  /* The admin rows container becomes 2-col grid for categories */
  .admin-rows:has(.cat-edit-row) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Each card: VERTICAL stack — thumb on top, info below, actions at bottom */
  .cat-edit-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  /* Hide the grip on mobile (drag is awkward on touch anyway) */
  .cat-edit-row .grip {
    display: none !important;
  }

  /* Thumbnail wrapper: full width, 16:9 */
  .cat-edit-row .cat-edit-thumb-wrap {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    margin: 0 !important;
    overflow: hidden;
  }
  .cat-edit-row .cat-edit-thumb {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
  /* Upload button overlay */
  .cat-edit-row .cat-edit-thumb-wrap > label {
    bottom: 8px !important;
    right: 8px !important;
    width: 26px !important;
    height: 26px !important;
  }

  /* Name input only — description and status hidden for clean look */
  .cat-edit-row > div:nth-of-type(2) {
    padding: 12px 12px 8px !important;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cat-edit-row .cat-edit-input {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--ink) !important;
    line-height: 1.2 !important;
    width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* HIDE description input and status (per user request — clean look) */
  .cat-edit-row .cat-edit-input.desc {
    display: none !important;
  }
  .cat-edit-row .status {
    display: none !important;
  }

  /* Count: only metric showing — refined pill */
  .cat-edit-row .cat-pill {
    order: 3;
    margin: 0 12px 12px !important;
    padding: 4px 9px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--ink-dim) !important;
    display: inline-block;
    width: fit-content;
  }
  .cat-edit-row .actions {
    order: 5;
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.6);
    border-radius: 6px;
  }
  .cat-edit-row .actions button {
    width: 30px;
    height: 30px;
  }
  .cat-edit-row { position: relative; }

  /* BG picker dropdown — keep above */
  .cat-edit-row .bg-picker {
    z-index: 50;
  }
}

/* On desktop, use the original layout */
@media (min-width: 721px) {
  .admin-rows:has(.cat-edit-row) {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ============================================================
   CLIENT CARDS (admin) — mobile
   ============================================================ */
@media (max-width: 600px) {
  .client-card { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .client-card-mark { width: 44px !important; height: 44px !important; flex-shrink: 0; }
}

/* ============================================================
   REEL PANEL — mobile
   ============================================================ */
@media (max-width: 720px) {
  .reel-panel { padding: 0; }
  .reel-upload-zone { padding: 32px 16px; }
}

/* ============================================================
   SECURITY PANEL — mobile
   ============================================================ */
@media (max-width: 720px) {
  .security-panel { max-width: 100%; }
  .security-section { padding: 20px 16px; }
}

/* ============================================================
   PARTNERS PANEL — mobile
   ============================================================ */
@media (max-width: 720px) {
  .partner-card-row { flex-wrap: wrap; gap: 10px; padding: 14px 12px; }
  .partner-card-row .partner-row-actions { margin-left: auto; }
}

/* ============================================================
   ════════════ MOBILE POLISH PASS — v3 ════════════
   Comprehensive aesthetic improvements for all mobile views.
   Wrapped strictly inside @media queries to NOT affect desktop.
   ============================================================ */

/* ─────────────────────────────────────────────
   ADMIN CONSOLE — better margins & spacing
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Consistent outer padding */
  .admin-main { padding: 18px 16px 96px !important; }
  /* Mobile nav: cleaner spacing & sticky behavior */
  .admin-mobile-nav {
    margin: 0 -16px 22px;
    padding: 0 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, rgba(5,5,7,0.35) 80%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .admin-mobile-nav a {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    min-width: 64px;
  }
  .admin-mobile-nav a .icon,
  .admin-mobile-nav a svg { opacity: 0.85; }
  .admin-mobile-nav a.active { box-shadow: 0 0 0 1px rgba(230,57,70,0.18) inset; }

  /* Admin topbar: title + actions polish */
  .admin-topbar {
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .admin-topbar h2 {
    font-size: 22px !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .admin-topbar h2 .count {
    font-size: 9px !important;
    letter-spacing: 0.18em;
    margin-left: 8px;
    opacity: 0.55;
  }
  .admin-topbar-right .btn-accent {
    padding: 10px 14px !important;
    border-radius: 999px;
    font-size: 12px !important;
  }
}

/* ─────────────────────────────────────────────
   ADMIN OVERVIEW — 2×2 stats on mobile (labels fit in full)
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .admin-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }
  .admin-stat {
    padding: 14px 14px !important;
    border-radius: 12px !important;
    text-align: left;
    overflow: hidden;
  }
  .admin-stat .lab {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    opacity: 0.55;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .admin-stat .num,
  .admin-stat .val {
    font-size: 26px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em;
    line-height: 1;
  }
  /* Section heading polish */
  .admin-main h3 {
    font-size: 13px !important;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
  }
}

/* ─────────────────────────────────────────────
   ADMIN VIDEO ROWS — proper alignment & polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .admin-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .admin-row {
    grid-template-columns: 20px 64px 1fr !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding: 12px !important;
    align-items: center !important;
    border-radius: 12px !important;
  }
  .admin-row .grip {
    opacity: 0.35;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .admin-row .thumb {
    width: 64px !important;
    height: 44px !important;
    border-radius: 7px !important;
    flex-shrink: 0;
  }
  /* Title block: stack title + meta neatly */
  .admin-row .title {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    min-width: 0;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.005em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .admin-row .title .meta {
    display: block !important;
    margin: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.06em !important;
    color: var(--ink-mute) !important;
    text-transform: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Actions drop to a full-width second row so the title/meta get the whole
     first row (no more truncated "Vídeo tes…" / "EBM · …"). */
  .admin-row .actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-left: 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 8px;
  }
  .admin-row .actions button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--ink-dim);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .admin-row .actions button:hover,
  .admin-row .actions button:active {
    background: rgba(255,255,255,0.05);
    color: var(--ink);
  }
  .admin-row .actions .del:active { color: var(--accent); }
}

/* ─────────────────────────────────────────────
   ADMIN TOOLBAR — combined dropdown filter on mobile
   ───────────────────────────────────────────── */

/* Mobile-only: filter bar with search + Filtros dropdown trigger */
.admin-mobile-filter-bar { display: none; }

@media (max-width: 720px) {
  .admin-mobile-filter-bar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
  }
  .admin-mobile-filter-bar .admin-search {
    flex: 1 1 auto !important;
    margin: 0 !important;
    min-width: 0;
  }
  .admin-mobile-filter-bar .admin-search input {
    font-size: 13px !important;
    padding: 8px 12px 8px 32px !important;
    border-radius: 999px !important;
    height: 36px;
    width: 100%;
  }
  .admin-mobile-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }
  .admin-mobile-filter-btn.open {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
  }
  .admin-mobile-filter-btn.has-active {
    border-color: rgba(230,57,70,0.4);
    color: var(--accent);
  }
  .admin-mobile-filter-bar .view-toggle {
    flex-shrink: 0;
    margin: 0 !important;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
  }
  .admin-mobile-filter-bar .view-toggle button {
    width: 32px !important;
    height: 36px !important;
    padding: 0 !important;
  }

  /* Hide the original toolbar by default — show only when mobile filters open */
  .admin-toolbar {
    display: none !important;
  }
  .admin-toolbar.mobile-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
    gap: 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    opacity: 1 !important;
  }
  /* Inside the open panel: hide the duplicate search (we already have it above) */
  .admin-toolbar.mobile-open .admin-search { display: none !important; }
  /* Hide the in-toolbar view toggle (already in filter bar above) */
  .admin-toolbar.mobile-open .view-toggle { display: none !important; }

  /* Filter groups stack vertically when expanded */
  .admin-toolbar.mobile-open .admin-toolbar-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100%;
  }
  .admin-toolbar.mobile-open .admin-toolbar-label {
    display: inline-block !important;
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--ink-dim);
    flex-shrink: 0;
    width: 80px;
  }
  .admin-toolbar.mobile-open select {
    flex: 1;
    font-size: 13px !important;
    padding: 8px 28px 8px 12px !important;
    height: 36px;
    border-radius: 10px !important;
    background-position: right 10px center !important;
    background-size: 11px !important;
    max-width: none;
  }
  .admin-toolbar.mobile-open .filter-pill {
    font-size: 11px !important;
    padding: 7px 12px !important;
    height: 32px;
    border-radius: 999px !important;
  }
  /* "Limpar" button — full width below the groups */
  .admin-toolbar.mobile-open > .filter-pill {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/* ─────────────────────────────────────────────
   ADMIN GRID CARDS — polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .admin-grid { gap: 12px !important; }
  .admin-grid-card {
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden;
  }
  .admin-grid-thumb {
    aspect-ratio: 16/9 !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .admin-grid-info { padding: 12px !important; }
  .admin-grid-title { font-size: 14px !important; line-height: 1.25 !important; }
  .admin-grid-meta { font-size: 10.5px !important; letter-spacing: 0.06em; }
}

/* ─────────────────────────────────────────────
   ADMIN CLIENT LIST — polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .client-card-mark {
    width: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  .client-card { padding: 12px !important; gap: 12px !important; border-radius: 12px !important; }
  .client-card .client-name { font-size: 14px !important; }
  .client-card .client-count { font-size: 10px !important; letter-spacing: 0.14em; }
}

/* ─────────────────────────────────────────────
   ADMIN LOGIN — cleaner mobile layout
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  /* The card is .admin-login-card; .admin-login is the fullscreen wrapper */
  .admin-login-card {
    padding: 28px 22px !important;
    border-radius: 18px !important;
    margin: 0 16px;
    max-width: 360px !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center;
  }
  .admin-login-card h1 { font-size: 22px !important; }
  .admin-login-card p { font-size: 13px !important; }
  .admin-login-card input[type="password"] {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 12px 14px !important;
  }
  .admin-login-card .btn { width: 100%; justify-content: center; padding: 12px !important; }
  .admin-login-foot { font-size: 11px !important; }
}

/* ─────────────────────────────────────────────
   HOME — chip cards mobile polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .chip-grid {
    gap: 10px !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .chip-card {
    border-radius: 14px !important;
    min-height: 64px;
    transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s ease, background 0.18s ease;
  }
  .chip-card:active { transform: scale(0.96); }
  /* Active (expanded) chip */
  .chip-card.chip-active {
    grid-column: span 2; /* fills full row when expanded */
    min-height: 220px;
  }
  .chip-card.chip-active .chip-expand-body {
    padding: 16px !important;
  }
  .chip-card.chip-active .chip-expand-name {
    font-size: 18px !important;
    margin-bottom: 4px;
  }
  .chip-card.chip-active .chip-expand-desc {
    font-size: 12px !important;
    line-height: 1.5;
    margin-bottom: 12px;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .chip-card.chip-active .chip-expand-btn {
    font-size: 11px !important;
    padding: 8px 14px !important;
    border-radius: 999px;
    letter-spacing: 0.14em;
  }
  .chip-label { padding: 14px 14px !important; }
  .chip-name { font-size: 13.5px !important; font-weight: 500 !important; }
  .chip-count {
    font-size: 9.5px !important;
    width: 22px; height: 22px;
    border-radius: 6px;
  }
}

/* Disable any hover effect on touch devices for chips */
@media (hover: none) {
  .chip-card:hover { transform: none !important; }
  .chip-card:hover .chip-expand { opacity: 0; visibility: hidden; }
  /* Only show expand when chip-active class is set (via tap) */
  .chip-card.chip-active .chip-expand { opacity: 1 !important; visibility: visible !important; }
}

/* ─────────────────────────────────────────────
   HOME — section spacing & typography polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .section { padding: 56px 0 !important; }
  .section-title {
    font-size: 30px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }
  .section-num,
  .section-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  .section-sub { font-size: 14px !important; }
  .section-hint { font-size: 12px !important; line-height: 1.5; }
  /* About stats clean polish */
  .feat-num,
  .num-big { font-size: 32px !important; letter-spacing: -0.02em; }
  /* Process step cards */
  .process-step {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  .process-step-num {
    font-size: 11px !important;
    letter-spacing: 0.16em;
  }
  .process-step-name {
    font-size: 17px !important;
    letter-spacing: -0.015em;
  }
  .process-step-desc { font-size: 12.5px !important; line-height: 1.55; }
  .process-step-tags span {
    font-size: 10px !important;
    padding: 4px 9px !important;
    border-radius: 999px;
  }
}

/* ─────────────────────────────────────────────
   HOME — featured videos polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .feat-list { gap: 14px !important; }
  .feat-item {
    border-radius: 16px !important;
    padding: 14px !important;
  }
  .feat-num {
    font-size: 10px !important;
    letter-spacing: 0.16em;
    opacity: 0.45;
  }
  .feat-title {
    font-size: 17px !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 6px 0 !important;
  }
  .feat-meta {
    font-size: 10px !important;
    letter-spacing: 0.1em;
    gap: 8px;
  }
  .feat-thumb {
    border-radius: 12px !important;
    aspect-ratio: 16/9 !important;
    margin-top: 12px;
  }
}

/* ─────────────────────────────────────────────
   HOME — nav polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav {
    margin: 12px 16px 0 !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
  }
  .nav-logo { font-size: 18px !important; }
  .nav-hamburger {
    width: 38px; height: 38px;
    border-radius: 10px;
  }
}

/* ─────────────────────────────────────────────
   PRESENTATION MODE — polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .pres-top {
    padding: 14px 16px !important;
    gap: 12px;
  }
  .pres-search input {
    padding: 10px 14px 10px 36px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
  .pres-row-head h2 {
    font-size: 18px !important;
    letter-spacing: -0.015em;
  }
  .pres-row-meta { font-size: 10px !important; letter-spacing: 0.14em; }
  .pres-row-more { font-size: 10px !important; letter-spacing: 0.14em; }
  .pres-card-info {
    padding: 10px 12px !important;
  }
  .pres-card-info h3 {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }
  .pres-card-meta {
    font-size: 9.5px !important;
    letter-spacing: 0.08em;
    gap: 4px;
  }
  .pres-card-thumb { border-radius: 10px 10px 0 0 !important; }
}

/* ─────────────────────────────────────────────
   CATEGORY PAGE — polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .cat-page-back {
    font-size: 11px !important;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
  }
  .cat-page-title h1 {
    font-size: 36px !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
  }
  .cat-page-sub { font-size: 13px !important; line-height: 1.5; }
  .cat-page-meta {
    font-size: 9.5px !important;
    letter-spacing: 0.16em;
    margin-top: 14px;
    margin-bottom: 24px;
  }
  .cat-controls {
    margin-bottom: 18px !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  .cat-card { border-radius: 14px !important; }
  .cat-card-info { padding: 12px 14px !important; }
  .cat-card-title { font-size: 14px !important; line-height: 1.3 !important; }
  .cat-card-meta { font-size: 10px !important; letter-spacing: 0.06em; }
}

/* ─────────────────────────────────────────────
   VIDEO MODAL (cplayer) — polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .modal-frame {
    border-radius: 0 !important;
    width: 100vw !important;
    max-height: 100vh !important;
  }
  .modal-frame-glass {
    padding: 0 !important;
  }
  .modal-header {
    padding: 12px 14px !important;
    gap: 10px;
  }
  .modal-title { font-size: 14px !important; }
  .modal-meta { font-size: 9.5px !important; letter-spacing: 0.14em; }
  .modal-cta {
    padding: 11px 16px !important;
    font-size: 12.5px !important;
    border-radius: 999px;
  }
  .modal-desc { font-size: 13px !important; line-height: 1.55; padding: 0 14px !important; }
  .modal-gallery { padding: 0 14px !important; gap: 8px !important; }
}

/* ─────────────────────────────────────────────
   VIDEO FORM MODAL (admin) — extra polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .admin-modal h2 { font-size: 20px !important; letter-spacing: -0.015em; }
  .admin-modal label,
  .admin-modal .label {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    opacity: 0.55;
  }
  .admin-modal input[type="text"],
  .admin-modal input[type="url"],
  .admin-modal input[type="number"],
  .admin-modal select,
  .admin-modal textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  .admin-modal-actions { padding-top: 12px; }
}

/* ─────────────────────────────────────────────
   SCROLLBARS — invisible on mobile for cleaner look
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  *::-webkit-scrollbar { width: 0; height: 0; }
}

/* ============================================================
   TABLET FIXES — keep stats inline at 4-col on tablet too
   ============================================================ */
@media (min-width: 721px) and (max-width: 1024px) {
  .admin-stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
  .admin-stat .num,
  .admin-stat .val { font-size: 24px !important; }
}

/* ============================================================
   SECTION ANCHORS — avoid floating nav overlap
   ============================================================ */
@media (max-width: 720px) {
  section[id], .section[id], [data-section] {
    scroll-margin-top: 110px;
  }
}

/* ============================================================
   ADMIN — Floating "Voltar ao site" button (all console pages)
   ============================================================ */
.admin-exit-fab {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 16px;
  z-index: 90;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  background: rgba(20, 20, 24, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.admin-exit-fab:hover {
  background: rgba(230,57,70,0.15);
  border-color: rgba(230,57,70,0.4);
  color: var(--accent);
  transform: translateY(-1px);
}
.admin-exit-fab:active { transform: scale(0.97); }

@media (max-width: 768px) {
  .admin-exit-fab { display: inline-flex; }
}

/* ── Admin toast notifications ───────────────────────────────────────────────── */
.admin-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.admin-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: toastIn 0.25s ease;
}
.admin-toast-error { background: rgba(230,57,70,0.18); border: 1px solid rgba(230,57,70,0.35); color: #f87171; }
.admin-toast-warn  { background: rgba(251,191,36,0.15); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; }
.admin-toast-ok    { background: rgba(34,197,94,0.14);  border: 1px solid rgba(34,197,94,0.28); color: #4ade80; }
.admin-toast-close {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: 0.6; font-size: 16px; line-height: 1; padding: 0 2px;
}
.admin-toast-close:hover { opacity: 1; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Admin confirm dialog ──────────────────────────────────────────────────── */
.admin-confirm-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.admin-confirm-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.admin-confirm-msg {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 24px;
}
.admin-confirm-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================================
   TUTORIAL PAGE — public help / support page
   ============================================================ */
.tutorial-shell {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 40px;
  position: relative;
}
.tutorial-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(230,57,70,0.08), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(255,45,45,0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tutorial-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  width: 100%;
}
.tutorial-loading {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
  gap: 20px;
}
.tutorial-logos {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tutorial-logo-framety {
  height: 38px;
  width: auto;
  display: block;
}
.tutorial-logo-divider {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0.4;
}
.tutorial-logo-skyline {
  height: 24px;
  width: auto;
  display: block;
  opacity: 0.85;
}
.tutorial-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.tutorial-title-block {
  margin-bottom: 36px;
}
.tutorial-title {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 800px;
}
.tutorial-subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: var(--accent);
  font-weight: 500;
  margin: 0;
  max-width: 800px;
}
.tutorial-video-wrap {
  margin-bottom: 40px;
}
.tutorial-video-frame {
  aspect-ratio: 16/9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 48px rgba(0,0,0,0.4);
  position: relative;
}
.tutorial-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.tutorial-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 48px;
  max-width: 760px;
}
.tutorial-text h2,
.tutorial-text h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 32px;
  margin-bottom: 14px;
}
.tutorial-text h2 { font-size: 28px; }
.tutorial-text h3 { font-size: 20px; }
.tutorial-text p { margin: 0 0 16px; color: var(--ink-dim); }
.tutorial-text ul,
.tutorial-text ol {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--ink-dim);
}
.tutorial-text li { margin-bottom: 8px; }
.tutorial-text strong {
  color: var(--ink);
  font-weight: 600;
}
.tutorial-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tutorial-footer {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}
.tutorial-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tutorial-back-btn:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.22);
}
.tutorial-help {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  flex-wrap: wrap;
}
.tutorial-help a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  transition: border-color 0.15s ease;
}
.tutorial-help a:hover { border-bottom-color: var(--accent); }

/* Tutorial page mobile */
@media (max-width: 720px) {
  .tutorial-shell { padding: 32px 18px 48px; }
  .tutorial-header {
    padding-bottom: 24px;
    margin-bottom: 26px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .tutorial-logo-framety { height: 32px; }
  .tutorial-logo-divider { height: 22px; }
  .tutorial-logo-skyline { height: 20px; }
  .tutorial-title { font-size: 26px; line-height: 1.12; }
  .tutorial-subtitle { font-size: 14px; }
  .tutorial-title-block { margin-bottom: 24px; }
  .tutorial-video-wrap { margin-bottom: 28px; }
  .tutorial-video-frame { border-radius: 14px; }
  .tutorial-text { font-size: 14.5px; line-height: 1.65; margin-bottom: 32px; }
  .tutorial-text h2 { font-size: 22px; }
  .tutorial-text h3 { font-size: 17px; }
  .tutorial-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .tutorial-back-btn {
    justify-content: center;
    padding: 12px 18px;
  }
  .tutorial-help {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .tutorial-help span:nth-of-type(2) { display: none; }
}

/* Tutorial admin panel */
.tutorial-panel-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
.tutorial-panel-form .vf-field {
  margin-bottom: 16px;
}
.tutorial-panel-form .vf-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.tutorial-panel-form input,
.tutorial-panel-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tutorial-panel-form input:focus,
.tutorial-panel-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
}
.tutorial-panel-form textarea { resize: vertical; min-height: 200px; }
@media (max-width: 780px) {
  .tutorial-panel-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   FOOTER — polish
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .site-footer {
    padding: 32px 20px 24px !important;
    text-align: left;
  }
  .site-footer .footer-grid {
    gap: 16px !important;
  }
}

/* ============================================================
   ════════════ MOBILE POLISH PASS — v4 ════════════
   Category page cleanup + Modal player redesign +
   Landscape fullscreen + Description toggle.
   ============================================================ */

/* ─────────────────────────────────────────────
   CATEGORY PAGE — visual-first, less text
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Top spacing — respects the floating nav at top:14px + height:78px = ~92px */
  .cat-page { padding-top: 0 !important; }
  .cat-page .container { padding: 110px 16px 60px !important; }

  /* Back button — compact, inline with title */
  .cat-page-back {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    opacity: 0.55;
  }

  /* Header: tight, title + meta only */
  .cat-page-head {
    display: block !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }
  .cat-page-title {
    font-size: 32px !important;
    line-height: 1 !important;
    letter-spacing: -0.028em !important;
    margin: 0 !important;
    font-weight: 600 !important;
  }
  /* Hide the long description paragraph on mobile — visual focus */
  .cat-page-head > div:first-child > p { display: none !important; }
  .cat-page-meta {
    margin-top: 6px !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
    opacity: 0.45;
  }
  .cat-page-meta .row { gap: 6px !important; }

  /* Compact filter bar — single row, no top divider */
  .cat-controls {
    margin: 14px 0 14px !important;
    padding: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cat-controls::-webkit-scrollbar { display: none; }
  .cat-controls > div:first-child { gap: 8px !important; flex-wrap: nowrap !important; }
  .cat-client-dropdown-btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    height: 30px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }
  .cat-client-dropdown-menu {
    font-size: 12px !important;
    border-radius: 12px !important;
  }
  .cat-cf-btn,
  .cat-cf-sm {
    font-size: 10.5px !important;
    padding: 5px 10px !important;
    height: 28px !important;
    border-radius: 999px !important;
  }
  .cat-controls span[style*="EMPREEND"],
  .cat-controls span[style*="font-mono"]:first-child { display: none !important; }

  /* View toggle: compact, square buttons */
  .cat-view-toggle {
    flex-shrink: 0;
    border-radius: 8px;
  }
  .cat-view-toggle button {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
  }

  /* GRID — single column for HUGE thumbnails (visual impact) */
  .cat-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cat-card {
    border-radius: 14px !important;
    padding: 0 !important;
    overflow: hidden;
  }
  /* BIG 16:9 thumbnails — like before, focus on the video */
  .cat-card-thumb {
    aspect-ratio: 16/9 !important;
    border-radius: 14px 14px 0 0 !important;
    width: 100% !important;
  }
  .cat-card-overlay {
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75) 100%) !important;
  }
  .cat-card-duration {
    font-size: 10px !important;
    padding: 4px 9px !important;
    bottom: 10px !important;
    right: 10px !important;
    border-radius: 6px;
    font-weight: 500;
  }
  .cat-card-info {
    padding: 14px 16px 16px !important;
  }
  .cat-card-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 6px !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cat-card-meta {
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    gap: 6px !important;
    opacity: 0.55;
  }
  .cat-card-client-row {
    margin-top: 10px !important;
    gap: 7px !important;
    align-items: center;
  }
  .cat-card-client-row img,
  .cat-card-client-row > span:first-child {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
    border-radius: 5px;
  }
  .cat-card-client-row span:last-child {
    font-size: 11px !important;
    letter-spacing: 0.04em;
  }
}

/* Tablet: 2 columns (preview large enough at 600+) */
@media (min-width: 540px) and (max-width: 720px) {
  .cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
}

/* ─────────────────────────────────────────────
   VIDEO MODAL — focus: Logo / Title / Player / Suggestions
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .modal-frame.modal-frame-glass {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    overflow-y: auto;
    border: none !important;
    background: var(--bg) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* YouTube-style order: header → player at top → title/meta → body */
  .modal-top          { order: 0; }
  .modal-player       { order: 1; }
  .modal-mobile-title { order: 2; }
  .modal-body         { order: 3; }

  /* TOP HEADER: Just the Framety logo + close button (minimal) */
  .modal-top {
    display: flex !important;
    grid-template-columns: none !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 18px 18px 10px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    position: relative;
    z-index: 5;
  }
  /* BIGGER logo at top */
  .modal-logo {
    height: 32px !important;
    width: auto !important;
  }
  /* Hide everything except logo and close on mobile */
  .modal-divider,
  .modal-client-logo,
  .modal-top-meta,
  .modal-share-btn { display: none !important; }
  .modal-close {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05) !important;
  }

  /* MOBILE TITLE BLOCK: sits directly BELOW the player (YouTube-style) */
  .modal-mobile-title {
    display: block !important;
    padding: 16px 20px 6px !important;
    transition: opacity 0.4s ease;
  }
  .modal-mobile-title h2 {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .modal-mobile-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
    flex-wrap: wrap;
  }
  /* Hide client logo in mobile meta — user request */
  .modal-mobile-meta img,
  .modal-mobile-meta > span:first-child {
    display: none !important;
  }

  /* PLAYER: edge-to-edge 16:9 at the TOP of the screen (YouTube-style) */
  .modal-player {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    background: #000;
    position: relative;
    z-index: 2;
  }
  .modal-bigplay {
    width: 64px !important;
    height: 64px !important;
  }

  /* FIX YouTube cropping on mobile */
  .modal-player .cplayer-video {
    top: 0 !important;
    bottom: 0 !important;
  }

  /* BODY: suggestions are the main content below — always fully visible */
  .modal-body {
    padding: 4px 16px 80px !important;
  }

  /* CTA bar: less prominent */
  .modal-cta-bar {
    margin-bottom: 16px !important;
  }
  .modal-cta-bar .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
  }

  /* Description toggle: subtle, secondary */
  .modal-desc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin-bottom: 16px;
  }
  .modal-desc-toggle:active {
    background: rgba(255,255,255,0.04);
    color: var(--ink);
    border-color: rgba(255,255,255,0.14);
  }
  .modal-desc-content {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    padding: 14px 16px !important;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
  }

  /* HIDE before/after grid completely on mobile (user request) */
  .modal-ba-grid { display: none !important; }

  /* SUGGESTIONS: main focus below player */
  .modal-suggested {
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .modal-suggested-label {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 14px !important;
  }
  .modal-sug-arrow {
    width: 30px !important;
    height: 30px !important;
  }
}

/* Hide desktop description toggle (only relevant on mobile) */
@media (min-width: 721px) {
  .modal-desc-toggle { display: none !important; }
  .modal-mobile-title { display: none !important; }
  /* Desktop: always show description */
  .modal-frame .modal-body .modal-desc-content { display: block !important; }
}

/* ─────────────────────────────────────────────
   LANDSCAPE FULLSCREEN — auto-fullscreen video
   when phone is rotated horizontally
   ───────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  /* Hide everything except the player when in landscape */
  .modal-landscape .modal-frame {
    border-radius: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #000 !important;
  }
  .modal-landscape .modal-top {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent) !important;
    border-bottom: none !important;
    padding: 8px 14px !important;
    z-index: 10;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .modal-landscape .modal-top .modal-title,
  .modal-landscape .modal-top .modal-meta,
  .modal-landscape .modal-logo,
  .modal-landscape .modal-share-btn { display: none !important; }
  .modal-landscape .modal-top-meta { display: none !important; }
  .modal-landscape .modal-close {
    margin-left: auto;
    background: rgba(0,0,0,0.5) !important;
  }
  .modal-landscape .modal-player {
    width: 100vw !important;
    height: 100vh !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .modal-landscape .modal-body { display: none !important; }
}

/* ─────────────────────────────────────────────
   HOME — refined alignment v5
   ───────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Liquid glass nav: SYMMETRIC pill, centered via translateX */
  .nav {
    top: 14px !important;
    margin: 0 !important;
    padding: 8px 10px 8px 22px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: calc(100% - 36px) !important;
    height: 78px !important; /* Taller nav to fit bigger logos */
    min-height: 78px !important;
  }
  .nav-logo {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0;
    height: 100%;
  }
  /* Framety logo — BIGGER + lower position */
  .nav-logo img:first-child {
    height: 48px !important;
    width: auto !important;
    display: block !important;
    transform: translateY(8px) !important; /* lowered more */
  }
  /* Divider bar — bigger */
  .nav-logo img:nth-child(2),
  .nav-logo img[alt="|"],
  .nav-logo img[src*="vector_bar"] {
    display: block !important;
    height: 34px !important;
    width: auto !important;
    opacity: 0.4 !important;
    transform: translateY(4px) !important;
  }
  /* Skyline logo — bigger */
  .nav-logo img:nth-child(3),
  .nav-logo img[src*="vector_skyline"],
  .nav-logo img[alt*="Skyline"],
  .nav-logo img[alt*="Grupo"] {
    display: block !important;
    height: 30px !important;
    width: auto !important;
    opacity: 0.85 !important;
    transform: translateY(0px) !important;
  }
  .nav-skyline-divider { display: none !important; }
  .nav-skyline { display: none !important; }
  /* Hide desktop nav links that overflow */
  .nav-links { display: none !important; }
  .nav-menu { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-hamburger {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* HERO content: aligned to bottom-left with consistent spacing */
  .hero-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto !important;
    align-content: end !important;
    padding: 0 18px 90px !important;
    gap: 0 !important;
  }
  .hero-title {
    display: none !important; /* hidden, used hero-meta only */
  }
  .hero-meta {
    margin-left: 0 !important;
    text-align: left !important;
    grid-column: 1 / -1 !important;
    align-self: end !important;
  }
  .hero-meta > div {
    margin-bottom: 4px !important;
  }
  .hero-meta-label,
  .hero-meta > div > span:first-child {
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
    opacity: 0.5;
  }
  .hero-meta-value,
  .hero-meta > div > span:last-child {
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 8px;
    display: block;
  }
  .hero-meta .btn,
  .hero-meta button {
    margin-top: 14px !important;
    padding: 11px 18px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
  }

  /* HERO bottom bar: cleaner spacing */
  .hero-bar {
    padding: 14px 18px !important;
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
  }
  .hero-bar .scroll {
    letter-spacing: 0.18em !important;
  }

  /* CATEGORIES section — better spacing & alignment */
  .chip-section,
  .categories-section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }
  .chip-grid {
    margin-top: 22px !important;
    gap: 12px !important; /* more breathing room between chips */
  }
  /* Section heading — left-aligned, properly spaced */
  .section-num,
  .num {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    opacity: 0.5;
    margin-bottom: 14px !important;
    display: block;
  }
  .section-title,
  .chip-section h2 {
    font-size: 32px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
  }
  /* Hint text aligned with title */
  .chip-hint-mobile {
    font-size: 11.5px !important;
    letter-spacing: 0.04em !important;
    color: var(--ink-dim) !important;
    margin: 0 0 6px !important;
    line-height: 1.5;
  }

  /* CLIENTS marquee: more breathing room */
  .marquee-section {
    padding: 50px 0 !important;
  }
  .marquee-track,
  .marquee {
    padding: 10px 0 !important;
  }

  /* About / process / contact — consistent spacing */
  .about-section,
  .process-section,
  .contact-section,
  .feat-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Container padding consistent — matches nav margins */
  .container {
    padding: 0 18px !important;
  }
  .hero-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Disable hover-triggered chip expansion on touch — clarify */
@media (hover: none) {
  /* Do NOT show chip expand body via hover; only via .chip-active class */
  .chip-card:not(.chip-active) .chip-expand,
  .chip-card:not(.chip-active) .chip-overlay,
  .chip-card:not(.chip-active) .chip-cover {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .chip-card.chip-active .chip-expand,
  .chip-card.chip-active .chip-overlay,
  .chip-card.chip-active .chip-cover {
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Smooth dim effect for non-active chips on touch */
  .chip-dim:not(.chip-active) {
    opacity: 0.7 !important;
  }
}

/* ─────────────────────────────────────────────
   YouTube/Vimeo iframes — fill landscape player
   ───────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  .modal-landscape .modal-player iframe,
  .modal-landscape .modal-player .yt-iframe-wrapper,
  .modal-landscape .modal-player .ytcustom-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    inset: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   HIGH-RESOLUTION SCALING — 2K · 4K · 8K
   Mantém o mesmo design e alinhamento em telas grandes.
   O bg (wave, dark) sempre preenche a tela inteira.
   O conteúdo cresce dentro de containers maiores.
══════════════════════════════════════════════════════════════ */

/* 2K  (≥ 2560px) */
@media (min-width: 2560px) {
  .container { max-width: 2000px; padding: 0 80px; }
  .nav { max-width: 2000px; }
  .client-page-header,
  .client-page-hero  { padding-left: 80px; padding-right: 80px; }
  .client-page-grid  { padding-left: 80px; padding-right: 80px; }
  .cat-grid          { grid-template-columns: repeat(5, 1fr); }
  .client-page-grid  { grid-template-columns: repeat(5, 1fr); }
  .modal-frame       { max-width: 1600px; }
}

/* 4K  (≥ 3840px) */
@media (min-width: 3840px) {
  .container { max-width: 3000px; padding: 0 120px; }
  .nav { max-width: 3000px; }
  .client-page-header,
  .client-page-hero  { padding-left: 120px; padding-right: 120px; }
  .client-page-grid  { padding-left: 120px; padding-right: 120px; }
  .cat-grid          { grid-template-columns: repeat(6, 1fr); }
  .client-page-grid  { grid-template-columns: repeat(6, 1fr); }
  .modal-frame       { max-width: 2400px; }
  /* Scale up base elements proportionally */
  .nav-logo img:first-child { height: 120px !important; }
  .nav-logo img:nth-child(2) { height: 68px !important; }
  .nav-logo img:last-child   { height: 68px !important; }
  .btn { font-size: 16px; padding: 14px 28px; }
  .chip-card { min-height: 80px; }
}

/* 8K  (≥ 7680px) */
@media (min-width: 7680px) {
  .container { max-width: 5600px; padding: 0 200px; }
  .nav { max-width: 5600px; }
  .client-page-header,
  .client-page-hero  { padding-left: 200px; padding-right: 200px; }
  .client-page-grid  { padding-left: 200px; padding-right: 200px; padding-top: 60px; gap: 28px; }
  .cat-grid          { grid-template-columns: repeat(8, 1fr); gap: 24px; }
  .client-page-grid  { grid-template-columns: repeat(8, 1fr); }
  .modal-frame       { max-width: 4800px; }
}

/* ============================================================
   AI SECTION
   ============================================================ */

/* Shimmer keyframe: sweep left-to-right, then pause */
@keyframes ai-shimmer {
  0%   { background-position-x: -100%; }
  50%  { background-position-x: 250%; }
  100% { background-position-x: 250%; }
}

.ai-shimmer-title {
  font-size: clamp(28px, 4.5vw, 62px);
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.1;
  padding-bottom: 0.08em;
  margin-bottom: 20px;
  /* Base dimmed so the bright shimmer peak stands out clearly */
  -webkit-text-fill-color: transparent;
  background-color: rgba(245, 245, 247, 0.55);
  background-image: linear-gradient(
    to right,
    rgba(245, 245, 247, 0.55)  0%,
    rgba(255, 255, 255, 1.0)  38%,
    rgba(255, 255, 255, 1.0)  62%,
    rgba(245, 245, 247, 0.55) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 50% 100%;
  background-position-x: 250%;
  animation: ai-shimmer 3s linear 1.5s infinite;
}

/* Two-column layout */
.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.ai-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}

.ai-body {
  font-size: 14px;
  color: rgba(245, 245, 247, 0.72);
  line-height: 1.72;
  margin-bottom: 28px;
}

.ai-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ai-feature-item {
  font-size: 13px;
  color: var(--ink-dim);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.ai-feature-dot {
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 5px;
  box-shadow: 0 0 6px var(--accent-glow);
}

/* Image accordion */
.ai-accordion {
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 480px;
  /* Own compositor layer — keeps animation off the main layout tree */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.ai-acc-item {
  position: relative;
  border-radius: 16px;
  cursor: pointer;
  /* Explicit pixel width animated — no flex-grow reflow */
  flex: none;
  width: 58px;
  min-width: 0;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
  /* Scope reflow to this element only */
  contain: layout style;
  /* GPU layer per item */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
}

.ai-acc-item.active {
  /* width is set via inline style by JS — no CSS override needed */
}

.ai-acc-item:hover {
  border-color: var(--glass-border-strong);
}

.ai-acc-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
}
/* Glow border above clip layer */
.ai-acc-item[data-glow]::before,
.ai-acc-item[data-glow]::after {
  z-index: 1;
}
.ai-acc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.ai-acc-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--bg-card), var(--bg-elev));
}

.ai-acc-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.28) 50%,
    rgba(0,0,0,0.12) 100%
  );
}

.ai-acc-label {
  position: absolute;
  pointer-events: none;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

.ai-acc-item.active .ai-acc-label {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.ai-acc-item:not(.active) .ai-acc-label {
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: center center;
}

/* ── Admin AI Panel ── */
.ai-admin-panel { max-width: 820px; }

.ai-admin-form-section {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 18px;
}

.ai-admin-form-section h3 {
  font-size: 15px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  color: var(--ink);
  font-weight: 600;
}

.ai-acc-editor {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.ai-acc-editor:last-child { border-bottom: none; padding-bottom: 0; }

.ai-acc-preview {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-acc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-acc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  flex-shrink: 0;
  width: 20px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ai-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ai-accordion { height: 360px; }
  .ai-acc-item  { width: 48px; border-radius: 12px; }
  .ai-acc-label { font-size: 11px; }
  .ai-acc-item:not(.active) .ai-acc-label { bottom: 60px; }
  .ai-shimmer-title { font-size: clamp(28px, 8vw, 44px); }
}

@media (max-width: 480px) {
  .ai-acc-editor { flex-wrap: wrap; gap: 10px; }
  .ai-acc-preview { width: 56px; height: 56px; }
}

/* ── Mobile: VERTICAL accordion so the active image gets real prominence.
   Tap expands one (tall), the others collapse to slim tappable bars. ── */
@media (max-width: 720px) {
  .ai-accordion {
    flex-direction: column;
    height: auto !important;
    gap: 8px;
  }
  .ai-acc-item {
    width: 100% !important;      /* override the JS-set inline pixel width */
    height: 58px;
    border-radius: 14px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: height;
  }
  .ai-acc-item.active {
    height: 300px;
  }
  /* Collapsed bars: horizontal label on the left (no 90° rotation) */
  .ai-acc-item:not(.active) .ai-acc-label {
    bottom: 50%;
    left: 18px;
    transform: translateY(50%);
    font-size: 12.5px;
  }
  .ai-acc-item.active .ai-acc-label {
    bottom: 18px;
    left: 18px;
    transform: none;
    font-size: 14px;
  }
}

/* ============================================================
   IA BADGE
   ============================================================ */

/* Decorative static badge — used in AI section header */
.ia-badge-decor {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 13px 7px;
  gap: 3px;
  background: rgba(8, 8, 14, 0.62);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  vertical-align: middle;
  flex-shrink: 0;
}
.ia-badge-decor .ia-main { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: 0.06em; color: #00d4ff; line-height: 1; }
.ia-badge-decor .ia-sub  { font-family: var(--font-mono); font-size: 7px; letter-spacing: 0.22em; color: rgba(255,255,255,0.45); line-height: 1; text-transform: uppercase; }

/* Expandable pill badge — corners of video cards / player */
.ia-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  width: 34px;
  max-height: 34px;
  min-height: 34px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  text-decoration: none;
  z-index: 6;
  transition: width 0.38s cubic-bezier(.2,.8,.2,1), max-height 0.42s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
  pointer-events: all;
  cursor: pointer;
}
.ia-pill:hover {
  width: clamp(160px, 28vw, 240px);
  max-height: 72px;
  border-color: rgba(0, 212, 255, 0.3);
}
.ia-pill-icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
  flex-shrink: 0;
}
.ia-pill-icon .ia-main { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: #00d4ff; line-height: 1; }
.ia-pill-icon .ia-sub  { font-family: var(--font-mono); font-size: 5px; letter-spacing: 0.18em; color: rgba(255,255,255,0.4); line-height: 1; text-transform: uppercase; }
.ia-pill-text {
  white-space: normal;
  padding: 10px 12px 10px 0;
  font-size: 11px;
  line-height: 1.45;
  font-family: var(--font-body);
  color: rgba(255,255,255,0.88);
  opacity: 0;
  transition: opacity 0.18s 0.22s;
  pointer-events: none;
}
.ia-pill:hover .ia-pill-text { opacity: 1; }
.ia-pill .ia-pill-icon { padding-top: 8px; }

/* Header inline variant — no absolute positioning */
.ia-pill--header {
  position: static;
  height: 30px;
  flex-shrink: 0;
}
.ia-pill--header:hover {
  width: clamp(180px, 30vw, 290px);
}

/* ══════════════════════════════════════════════════════════════
   Badge stack — positions IA + 360 badges side-by-side at the
   top-right corner of a card. Children become static flex items.
   ══════════════════════════════════════════════════════════════ */
.badge-stack {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: row-reverse; /* IA stays rightmost, 360 to its left */
  align-items: flex-start;
  gap: 6px;
  z-index: 6;
  pointer-events: all;
}
/* Override individual pill positioning when inside the stack */
.badge-stack .ia-pill,
.badge-stack .badge-360-pill {
  position: static;
}

/* ══════════════════════════════════════════════════════════════
   Badge 360° — same anatomy as ia-pill but in pink
   ══════════════════════════════════════════════════════════════ */
.badge-360-pill {
  position: absolute; /* standalone fallback; overridden inside badge-stack */
  top: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  width: 34px;
  max-height: 34px;
  min-height: 34px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  z-index: 6;
  transition: width 0.38s cubic-bezier(.2,.8,.2,1), max-height 0.42s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
  pointer-events: all;
  cursor: default;
}
.badge-360-pill:hover {
  width: clamp(180px, 28vw, 270px);
  max-height: 72px;
  border-color: rgba(255, 59, 138, 0.35);
}
.badge-360-icon {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-top: 8px;
  pointer-events: none;
  flex-shrink: 0;
}
.b360-main {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FF3B8A;
  line-height: 1;
}
.b360-sub {
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.4);
  line-height: 1;
  text-transform: uppercase;
}
.badge-360-text {
  white-space: normal;
  padding: 10px 12px 10px 0;
  font-size: 11px;
  line-height: 1.45;
  font-family: var(--font-body);
  color: rgba(255,255,255,0.88);
  opacity: 0;
  transition: opacity 0.18s 0.22s;
  pointer-events: none;
}
.badge-360-pill:hover .badge-360-text { opacity: 1; }

/* Header inline variant — no absolute positioning */
.badge-360-pill--header {
  position: static;
  height: 30px;
  flex-shrink: 0;
}
.badge-360-pill--header:hover {
  width: clamp(180px, 30vw, 300px);
}

/* =========================== Locuções — OS document full-viewport view =========================== */
.os-view-shell {
  position: fixed;
  inset: 0;
  z-index: 360;
  background: rgba(10, 11, 15, 0.97);
  overflow-y: auto;
}
.os-view-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  background: rgba(16, 18, 24, 0.85);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.os-desk {
  min-height: calc(100vh - 60px);
  padding: 36px 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
/* The fixed-width (820px) document is scaled to fit the viewport so it always
   appears complete; the scale is a CSS transform on an absolutely-positioned
   doc inside a .os-stage whose box is sized (via inline styles) to the scaled
   footprint, so the scroll area is correct. On wide screens the scale is 1, so
   desktop renders exactly as before. The document (and its PDF) are unchanged —
   only the on-screen presentation is scaled. */
.os-stage { position: relative; margin: 0 auto; }
.os-doc {
  width: 820px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  background: #fff;
  color: #111;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  padding: 26px 30px 30px;
}
.os-doc textarea, .os-doc input { font-family: inherit; }
.os-zoom-hint { display: none; }
/* Double-tap to zoom / drag to pan is a touch affordance — show the hint and
   switch the desk to an internal scroll container only on narrow screens. */
@media (max-width: 900px) {
  .os-view-shell { display: flex; flex-direction: column; overflow: hidden; }
  .os-view-toolbar { flex: 0 0 auto; }
  .os-desk {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    padding: 12px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
  }
  .os-zoom-hint {
    display: block;
    position: sticky;
    top: 0;
    z-index: 3;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(16, 18, 24, 0.9);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
  }
}

/* =========================== Category share button =========================== */
.cat-share-btn {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.cat-share-btn:hover { background: rgba(255,255,255,0.09); border-color: var(--accent); color: var(--accent); }

/* =========================== Category Playlist (public watch-only) =========================== */
.playlist-shell {
  position: fixed; inset: 0; z-index: 260;
  background: #08080c;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.playlist-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 3;
  background: rgba(8,8,12,0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.playlist-cat { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.playlist-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.playlist-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px var(--accent-glow);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.playlist-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* Produções table native dropdowns — dark popup so options stay readable */
.loc-table select option { background: #0b0b0f; color: #e8e9ee; }
.loc-card select option { background: #0b0b0f; color: #e8e9ee; }

/* Produções mobile card list — hidden on desktop, shown ≤720px */
.loc-cards { display: none; }

@media (max-width: 720px) {
  /* Swap wide table for stacked cards */
  .loc-table-wrap { display: none !important; }
  .loc-cards { display: flex; flex-direction: column; gap: 14px; }

  .loc-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 14px 12px;
    background: rgba(255,255,255,0.015);
  }
  .loc-card.done { opacity: 0.6; }

  .loc-card-head {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer;
  }
  .loc-card.expanded .loc-card-head {
    padding-bottom: 10px; margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .loc-card-check { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-mute); }
  input.loc-card-check { accent-color: var(--accent); }
  .loc-card-headmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .loc-card-id { min-width: 0; }
  .loc-card-id input { font-size: 15px !important; font-weight: 700 !important; padding: 0 !important; }
  .loc-card-summary {
    font-size: 11.5px; color: var(--ink-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Summary hidden once the card is expanded (full data shown below) */
  .loc-card.expanded .loc-card-summary { display: none; }
  .loc-card-status { flex-shrink: 0; }
  .loc-card-toggle {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: var(--ink-mute); display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    transition: transform 0.25s ease;
  }
  .loc-card.expanded .loc-card-toggle { transform: rotate(180deg); }
  .loc-card-status select {
    padding: 5px 8px !important; border-radius: 999px !important;
    border: 1px solid var(--line) !important; background: rgba(255,255,255,0.04) !important;
    font-size: 11px !important; font-weight: 700 !important; width: auto !important;
  }

  .loc-card-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  }
  .loc-card-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .loc-card-label {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-mute);
  }
  .loc-card-value input,
  .loc-card-value select {
    padding: 3px 0 !important; font-size: 13.5px !important; width: 100%;
    border: none !important; background: transparent !important;
  }
  /* Long free-text fields span the full width */
  .loc-card-grid .loc-card-field:nth-child(9) { grid-column: 1 / -1; }

  .loc-card-foot {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .loc-card-valor { display: flex; flex-direction: column; gap: 2px; }
  .loc-card-valor input {
    font-size: 18px !important; font-weight: 800 !important; color: var(--ink) !important;
    padding: 0 !important; border: none !important; background: transparent !important; width: 130px;
  }
  .loc-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .loc-card-del {
    background: none; border: 1px solid var(--line); border-radius: 10px;
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-mute); cursor: pointer;
  }

  /* Tidy the Produções toolbar: page tabs on their own row, actions full-width thirds */
  .loc-toolbar-actions {
    margin-left: 0 !important; width: 100%;
    flex: 1 1 100%; gap: 6px !important;
  }
  .loc-toolbar-actions .filter-pill { flex: 1 1 0; justify-content: center; }
}
.playlist-body {
  display: flex; gap: 28px;
  padding: 28px;
  align-items: flex-start;
  flex: 1;
}
.playlist-main { flex: 1 1 auto; min-width: 0; }
.playlist-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.playlist-noembed {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  color: rgba(255,255,255,0.7);
}
.playlist-main-info { margin-top: 20px; }
.playlist-main-info h1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 8px; }
.playlist-main-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); text-transform: uppercase; }
.playlist-sidebar {
  flex: 0 0 380px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  padding-right: 4px;
}
.playlist-item {
  display: flex; gap: 12px; align-items: center;
  padding: 8px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.playlist-item:hover { background: rgba(255,255,255,0.05); }
.playlist-item.active { background: rgba(255,45,45,0.08); border-color: rgba(255,45,45,0.35); }
.playlist-item-thumb {
  position: relative; flex: 0 0 132px; height: 74px;
  border-radius: 8px; overflow: hidden;
  background: #16161c center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.35);
}
.playlist-item-dur {
  position: absolute; bottom: 5px; right: 5px;
  background: rgba(0,0,0,0.8); color: #fff;
  font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 4px;
}
.playlist-item-playing {
  position: absolute; top: 5px; left: 5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.playlist-item-info { min-width: 0; }
.playlist-item-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.playlist-item-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute); }
@media (max-width: 900px) {
  .playlist-body { flex-direction: column; padding: 16px; gap: 18px; align-items: stretch; }
  .playlist-main { width: 100%; }
  .playlist-sidebar { flex: 1 1 auto; width: 100%; max-height: none; }
  .playlist-topbar { flex-wrap: wrap; row-gap: 10px; padding: 14px 18px; }
  .playlist-cta { flex: 1 1 100%; justify-content: center; }
}

/* Playlist: rotate phone → player fills the screen */
@media (max-width: 900px) and (orientation: landscape) {
  .playlist-landscape .playlist-topbar,
  .playlist-landscape .playlist-main-info,
  .playlist-landscape .playlist-sidebar { display: none !important; }
  .playlist-landscape .playlist-body { padding: 0 !important; }
  .playlist-landscape .playlist-player {
    position: fixed; inset: 0; z-index: 600;
    width: 100vw !important; height: 100vh !important; aspect-ratio: auto !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
}