/* Cinema direction - immersive image-led interface. */

:root {
  --bg-primary: #050506;
  --bg-secondary: #0a0b0d;
  --bg-card: #0f1114;
  --card-bg: #0f1114;
  --bg-hover: #171a1e;
  --border: #262a30;
  --border-light: #434a53;
  --accent: #5ce1ff;
  --accent-hover: #a4f0ff;
  --accent-light: rgba(92, 225, 255, 0.1);
  --accent2: #ff7048;
  --accent2-light: rgba(255, 112, 72, 0.1);
  --success: #7dffbd;
  --warning: #ffc85e;
  --danger: #ff625f;
  --info: #5ce1ff;
  --text-primary: #f4f6f8;
  --text-secondary: #b7bec6;
  --text-muted: #6c747e;
  --director-mint: #5ce1ff;
  --director-ice: #f4f6f8;
  --director-gold: #ff7048;
}

html,
body { background: #050506; }

body:not(.landing-page) {
  background-color: #050506;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
}

::selection { color: #071014; background: #79e8ff; }

.app-layout::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 72px 72px;
}

.main-content::before {
  content: "";
  position: fixed;
  right: 0;
  left: var(--director-offset);
  top: -18%;
  z-index: 0;
  height: 12%;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(92, 225, 255, 0.025), rgba(255, 112, 72, 0.018), transparent);
  animation: cinema-workspace-scan 15s linear infinite;
}

/* Black cinema navigation */
.sidebar {
  background: rgba(5, 6, 8, 0.98);
  border-color: #252930;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.sidebar:hover { border-color: #444b54; }
.sidebar::before { background: linear-gradient(90deg, transparent, #ffffff, #5ce1ff, transparent); }
.sidebar::after {
  background: linear-gradient(to bottom, transparent, #5ce1ff, #ffffff, #ff7048, transparent);
  box-shadow: 0 0 16px rgba(92, 225, 255, 0.26);
}
.sidebar-logo .logo-icon,
.mobile-header-logo .logo-icon,
.mobile-header .logo-icon,
.auth-logo .logo-icon,
.landing-brand-mark {
  background: #f4f6f8 !important;
  color: #07090c !important;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.62), 0 0 24px rgba(92, 225, 255, 0.08);
}
.sidebar-logo .logo-text span { color: #5ce1ff; }
.nav-item { color: #6f7781; }
.nav-item:hover { color: #f4f6f8; background: #12151a; border-color: #2d323a; }
.nav-item.active {
  color: #ffffff;
  background: linear-gradient(100deg, rgba(92, 225, 255, 0.12), rgba(255, 112, 72, 0.035));
  border-color: rgba(92, 225, 255, 0.22);
  box-shadow: inset 3px 0 0 #5ce1ff;
}
.nav-item::after { background: linear-gradient(90deg, #5ce1ff, #ffffff, #ff7048); }

.main-content::after { background: linear-gradient(to bottom, transparent, rgba(92, 225, 255, 0.24), rgba(255, 112, 72, 0.12), transparent); }

/* Film-title page header */
.page-header {
  min-height: 104px;
  padding: 28px 34px 16px;
  background: rgba(5, 6, 8, 0.84);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(120%);
}
.page-header::after {
  left: 34px;
  width: 128px;
  background: linear-gradient(90deg, #5ce1ff, #ffffff 52%, #ff7048);
  box-shadow: 0 0 18px rgba(92, 225, 255, 0.18);
}
.page-title { color: #f7f8fa; font-size: 28px; font-weight: 680; }
.page-title::before { width: 24px; background: linear-gradient(90deg, #5ce1ff, #ff7048); box-shadow: none; }
.page-title i[data-lucide] { color: #5ce1ff; }
.page-subtitle { color: #747d87; }
.page-body { z-index: 1; padding: 30px 34px 54px; }
.page-body > * { animation: cinema-cut-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Matte cinematic surfaces */
.card,
.pricing-card,
.chart-container,
.table-container {
  background: rgba(14, 16, 20, 0.96);
  border-color: #292e35;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 22px 58px rgba(0, 0, 0, 0.22);
}
.card:hover { border-color: #464d57; }
.card-title { color: #eef1f4; }

.btn { border-radius: 3px; }
.btn-primary {
  color: #080a0d;
  background: #f4f6f8;
  border-color: #ffffff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3), inset 0 1px 0 #ffffff;
}
.btn-primary::before {
  background: linear-gradient(90deg, transparent 8%, #5ce1ff 28%, #ffffff 50%, #ff7048 72%, transparent 92%);
  background-size: 240% 100%;
}
.btn-primary:hover {
  color: #030405;
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(92, 225, 255, 0.38), 0 0 26px rgba(92, 225, 255, 0.16), 0 14px 36px rgba(0, 0, 0, 0.42);
}
.btn-secondary,
.tool-btn,
.icon-btn {
  color: #c1c7ce;
  background: rgba(17, 20, 24, 0.92);
  border-color: #303640;
}
.btn-secondary:hover,
.tool-btn:hover,
.icon-btn:hover { color: #ffffff; background: #1b1f25; border-color: #59626e; }
#genBtn,
.dashboard-header .btn-primary,
.landing-hero .btn-primary { animation: cinema-command-pulse 3.4s ease-in-out infinite; }

.form-control,
.form-control-static {
  background: #090b0e;
  border-color: #343a43;
  color: #edf0f3;
}
.form-control:hover { border-color: #4b535e; }
.form-control:focus { border-color: #5ce1ff; box-shadow: 0 0 0 2px rgba(92, 225, 255, 0.09); }

/* Dashboard as an opening sequence */
.dashboard-stats { background: #272c33; border-color: #272c33; }
.dashboard-stats .stat-card,
.dashboard-stats .stat-card[style] { background: #0d0f13 !important; }
.dashboard-stats .stat-card:first-child {
  background: linear-gradient(118deg, rgba(92, 225, 255, 0.13), rgba(13, 15, 19, 0.98) 52%, rgba(255, 112, 72, 0.05)) !important;
}
.dashboard-stats .stat-card:nth-child(1) { color: #5ce1ff; }
.dashboard-stats .stat-card:nth-child(2) { color: #ffc85e; }
.dashboard-stats .stat-card:nth-child(3) { color: #7dffbd; }
.dashboard-stats .stat-card:nth-child(4) { color: #ff7048; }
.dashboard-stats .stat-card:hover { background: #151920 !important; }
.dashboard-grid { gap: 48px; }
.dashboard-gallery > .task-grid { gap: 8px; }
.dashboard-gallery > .task-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 218px;
}
.dashboard-gallery > .task-grid > .task-card { grid-column: span 4; }
.dashboard-gallery > .task-grid > .task-card:first-child {
  grid-column: span 8;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}
.dashboard-gallery > .task-grid > .task-card:first-child .task-card-thumb {
  min-height: 0;
  flex: 1;
  aspect-ratio: auto;
}
.task-card {
  overflow: hidden;
  background: #0d0f12;
  border-color: #292e35;
  border-radius: 2px;
}
.task-card-thumb img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease; }
.task-card:hover { transform: translateY(-4px); border-color: rgba(92, 225, 255, 0.36); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.42); }
.task-card:hover .task-card-thumb img { transform: scale(1.045); filter: contrast(1.04); }
.quick-action-icon { background: rgba(92, 225, 255, 0.08); color: #5ce1ff; }
.quick-action-icon-warm { background: rgba(255, 112, 72, 0.08); color: #ff7048; }
.quick-action-icon-blue { background: rgba(255, 200, 94, 0.08); color: #ffc85e; }
.quick-action:hover { border-color: rgba(92, 225, 255, 0.18); }

/* The result canvas is the main screen */
.gen-layout { grid-template-columns: 318px minmax(0, 1fr) !important; gap: 12px; }
.gen-panel > .card {
  background: rgba(11, 13, 16, 0.96);
  border-color: #2b3038;
  border-left-color: #5ce1ff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}
.gen-result > .card:first-child {
  min-height: 680px !important;
  background-color: #060709;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  border-color: #303640;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.46), inset 0 0 80px rgba(92, 225, 255, 0.018);
}
.gen-result > .card:first-child::before {
  background:
    linear-gradient(#5ce1ff, #5ce1ff) left 18px top 18px / 42px 1px no-repeat,
    linear-gradient(#5ce1ff, #5ce1ff) left 18px top 18px / 1px 42px no-repeat,
    linear-gradient(#ff7048, #ff7048) right 18px bottom 18px / 42px 1px no-repeat,
    linear-gradient(#ff7048, #ff7048) right 18px bottom 18px / 1px 42px no-repeat;
  animation: cinema-frame-breathe 4.8s ease-in-out infinite;
}
.gen-result-img { overflow: hidden; background: #07090c; border-color: #333943; }
.gen-result-img img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.gen-result-img:hover img { transform: scale(1.018); }
.upload-zone { background: #080a0d; border-color: #3a414b; }
.upload-zone:hover { border-color: #5ce1ff; box-shadow: inset 0 0 30px rgba(92, 225, 255, 0.035); }
.gen-action-bar { background: rgba(10, 12, 15, 0.96); border-top-color: rgba(92, 225, 255, 0.18); }
.history-card:hover { border-color: rgba(255, 112, 72, 0.34) !important; }
.progress-bar { background: linear-gradient(90deg, #5ce1ff, #ffffff, #ff7048); }

/* Timeline-like operational pages */
.tab-bar,
.admin-tabs { background: #090b0e; border-color: #2c3139; }
.tab-btn.active {
  color: #ffffff;
  background: linear-gradient(110deg, rgba(92, 225, 255, 0.1), rgba(255, 112, 72, 0.035));
  border-color: #5ce1ff;
  box-shadow: inset 0 -1px 0 #5ce1ff;
}
table thead { background: #090b0e; }
table th { color: #717a84; }
table td { border-color: rgba(255, 255, 255, 0.07); }
table tbody tr:hover { background: linear-gradient(90deg, rgba(92, 225, 255, 0.04), transparent 72%); }
.pricing-card:nth-of-type(3n + 1) { border-left-color: #5ce1ff; }
.pricing-card:nth-of-type(3n + 2) { border-left-color: #ff7048; }
.pricing-card:nth-of-type(3n) { border-left-color: #ffc85e; }
#balanceDisplay { color: #5ce1ff !important; text-shadow: 0 0 24px rgba(92, 225, 255, 0.14); }
.card[style*="rgba(124,58,237"] {
  background: linear-gradient(112deg, rgba(92, 225, 255, 0.08), rgba(14, 16, 20, 0.98) 52%, rgba(255, 112, 72, 0.05)) !important;
  border-color: #353b44 !important;
}

/* Cinematic authentication frame */
.auth-page {
  position: relative;
  background: #050506;
}
.auth-page::before {
  background: linear-gradient(90deg, rgba(5, 5, 6, 0.96), rgba(5, 5, 6, 0.7) 46%, rgba(5, 5, 6, 0.26));
  animation: none;
}
.auth-page::after {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("/static/images/cinema-studio.png") center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.auth-card {
  background: rgba(9, 11, 14, 0.94);
  border-color: #303640;
  border-left-color: #5ce1ff;
  box-shadow: 0 44px 120px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
}
.auth-card::after { background: linear-gradient(90deg, transparent, #5ce1ff, #ffffff, #ff7048, transparent); }

/* Full-screen landing built from the live infinite-canvas interface. */
body.landing-page { background: #030405; }
.landing-nav {
  height: 72px;
  background: rgba(3, 4, 6, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(20px) saturate(120%);
}
.landing-nav-inner { width: min(1480px, calc(100% - 64px)); }
.landing-brand span { color: #5ce1ff; }
.landing-nav-links a { color: #8e969f; }
.landing-nav-links a:hover { color: #f4f7fa; }
.landing-nav-links a::after { background: linear-gradient(90deg, #5ce1ff, #ff7048); }

.landing-hero {
  height: 100svh;
  min-height: 680px;
  max-height: none;
  isolation: isolate;
  background: #050608;
  border-bottom-color: #252a31;
  animation: none;
}
.landing-hero::before {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(2, 3, 5, 0.96) 0%, rgba(2, 3, 5, 0.86) 27%, rgba(2, 3, 5, 0.45) 50%, rgba(2, 3, 5, 0.12) 78%),
    linear-gradient(to top, rgba(2, 3, 5, 0.82) 0%, rgba(2, 3, 5, 0.14) 38%, rgba(2, 3, 5, 0.26) 100%);
}
.landing-hero::after {
  top: 72px;
  bottom: 52px;
  z-index: 3;
  width: 20%;
  background: linear-gradient(100deg, transparent, rgba(92, 225, 255, 0.09), rgba(255, 255, 255, 0.06), rgba(255, 112, 72, 0.035), transparent);
  animation: cinema-hero-scan 9.5s ease-in-out infinite;
}
.cinema-product-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  transform: none;
  filter: contrast(1.08) saturate(0.92);
  mask-image: none;
  animation: none;
}
.cinema-product-stage::after {
  content: "";
  position: absolute;
  inset: 86px 26px 68px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 70px rgba(92, 225, 255, 0.018);
}
.cinema-product-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: cinema-canvas-breathe 18s ease-in-out infinite alternate;
}
.cinema-product-stage figcaption {
  position: absolute;
  right: 42px;
  bottom: 76px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  letter-spacing: 0;
}
.cinema-product-stage figcaption span {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, #5ce1ff, #ff7048);
  box-shadow: 0 0 12px rgba(92, 225, 255, 0.28);
}
.landing-hero-inner {
  z-index: 4;
  width: min(1480px, calc(100% - 64px));
  display: flex;
  align-items: center;
  padding-top: 108px;
  padding-bottom: 92px;
}
.landing-hero-copy { max-width: 590px; }
.landing-hero-copy::before {
  left: -28px;
  background: linear-gradient(to bottom, transparent, #5ce1ff 22%, #ffffff 54%, #ff7048 82%, transparent);
  box-shadow: 0 0 18px rgba(92, 225, 255, 0.14);
}
.landing-kicker {
  margin-bottom: 17px;
  color: #c2c9d0;
  font-size: 11px;
  letter-spacing: 0;
}
.landing-kicker-dot { background: #ff7048; box-shadow: 0 0 0 4px rgba(255, 112, 72, 0.1), 0 0 20px rgba(255, 112, 72, 0.42); }
.landing-hero h1 {
  max-width: 590px;
  color: #f8f9fb;
  font-size: 76px;
  font-weight: 680;
  line-height: 0.96;
  letter-spacing: 0;
  text-shadow: 0 22px 64px rgba(0, 0, 0, 0.82);
}
.landing-hero h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(120, 231, 255, 0.92);
  text-shadow: 0 0 32px rgba(92, 225, 255, 0.09);
}
.landing-hero-lead {
  max-width: 510px;
  margin-top: 22px;
  color: #aeb6bf;
  font-size: 15px;
  line-height: 1.8;
}
.landing-hero-actions { margin-top: 28px; }
.landing-hero-actions .btn {
  min-width: 138px;
  min-height: 48px;
  padding: 12px 18px;
}
.landing-hero-actions .btn-secondary {
  background: rgba(7, 9, 12, 0.72);
  border-color: rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(14px);
}
.landing-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 470px);
  margin-top: 34px;
  padding-top: 17px;
  border-top-color: rgba(255, 255, 255, 0.16);
}
.landing-proof-item { min-width: 0; padding: 0 20px; }
.landing-proof-item:first-child { padding-left: 0; }
.landing-proof-item strong { font-size: 15px; }
.landing-model-ticker {
  z-index: 5;
  height: 52px;
  background: rgba(3, 4, 6, 0.88);
  border-top-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}
.landing-model-ticker-track { animation-duration: 24s; }
.landing-model-ticker span { color: #949ca5; }
.landing-model-ticker .ticker-signal { background: #ff7048; box-shadow: 0 0 12px rgba(255, 112, 72, 0.56); }

/* Large visual chapters */
.landing-section { padding: 108px 0; background: #eeefed; color: #101215; }
.landing-section-inner { width: min(1400px, calc(100% - 72px)); }
.landing-eyebrow { color: #087f9b; }
.landing-section h2 { color: #101215; font-size: 46px; }
.landing-section-header p { color: #5d636a; }
.capability-grid {
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 8px;
  overflow: visible;
  background: transparent;
  border: 0;
}
.capability-card {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  overflow: hidden;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background-position: center;
  background-size: cover;
  box-shadow: 0 28px 70px rgba(11, 15, 20, 0.18);
}
.capability-card:nth-child(1) {
  min-height: 470px;
  background-image: linear-gradient(to top, rgba(4, 5, 7, 0.98), rgba(4, 5, 7, 0.18) 72%), url("/static/images/cinema-studio.png");
}
.capability-card:nth-child(2) {
  background-image: linear-gradient(to top, rgba(4, 5, 7, 0.98), rgba(4, 5, 7, 0.18) 72%), url("/static/images/cinema-mobile.png");
}
.capability-card:nth-child(3) {
  background-image: linear-gradient(to top, rgba(4, 5, 7, 0.98), rgba(4, 5, 7, 0.18) 72%), url("/static/images/studio-preview.png");
  background-position: 68% center;
}
.capability-card::before { top: 22px; right: 24px; color: rgba(255, 255, 255, 0.34); }
.capability-card::after { height: 1px; background: linear-gradient(90deg, #5ce1ff, #ffffff, #ff7048); }
.capability-card:hover { transform: translateY(-8px); filter: contrast(1.04); box-shadow: 0 38px 90px rgba(11, 15, 20, 0.26); }
.capability-icon { margin-bottom: auto; color: #ffffff; background: rgba(6, 8, 11, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); }
.capability-card h3 { color: #ffffff; font-size: 18px; }
.capability-card p { color: #b9c0c7; }

.model-section { padding: 100px 0; background: #07080a; }
.model-section .landing-section-inner { width: min(1400px, calc(100% - 72px)); grid-template-columns: 380px minmax(0, 1fr); }
.model-section h2 { font-size: 38px; }
.model-row { min-height: 80px; border-color: #292e35; }
.model-row:hover { background: linear-gradient(90deg, rgba(92, 225, 255, 0.045), rgba(255, 112, 72, 0.018), transparent); }
.model-name { font-size: 16px; }
.landing-cta { padding: 86px 0; background: #e9eae7; }
.landing-footer { background: #050506; }

@keyframes cinema-cut-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes cinema-command-pulse {
  0%, 100% { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 0 0 1px rgba(92, 225, 255, 0.32), 0 0 26px rgba(92, 225, 255, 0.13), 0 12px 36px rgba(0, 0, 0, 0.36); }
}
@keyframes cinema-workspace-scan { from { transform: translateY(0); } to { transform: translateY(980%); } }
@keyframes cinema-frame-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes cinema-hero-scan { 0%, 58% { left: -24%; opacity: 0; } 68% { opacity: 1; } 92%, 100% { left: 106%; opacity: 0; } }
@keyframes cinema-canvas-breathe {
  from { transform: scale(1); filter: brightness(0.98); }
  to { transform: scale(1.018); filter: brightness(1.05); }
}

@media (max-width: 1200px) {
  .landing-hero h1 { font-size: 66px; }
  .gen-result > .card:first-child { min-height: 590px !important; }
}

@media (max-width: 900px) {
  .landing-hero h1 { font-size: 56px; }
  .landing-hero-copy { max-width: 520px; }
  .landing-hero::before {
    background:
      linear-gradient(90deg, rgba(2, 3, 5, 0.94), rgba(2, 3, 5, 0.7) 54%, rgba(2, 3, 5, 0.24)),
      linear-gradient(to top, rgba(2, 3, 5, 0.82), rgba(2, 3, 5, 0.08) 56%);
  }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability-card:nth-child(1) { grid-column: 1 / -1; }
  .capability-card:nth-child(3) { grid-column: auto; }
}

@media (max-width: 768px) {
  .main-content::before { left: 0; }
  .page-header { min-height: 82px; padding: 18px 16px 12px; }
  .page-header::after { left: 16px; width: 92px; }
  .page-title { font-size: 21px; }
  .page-body { padding: 20px 16px 38px; }
  .dashboard-gallery > .task-grid { grid-auto-rows: auto; }
  .dashboard-gallery > .task-grid > .task-card,
  .dashboard-gallery > .task-grid > .task-card:first-child {
    grid-column: auto;
    grid-row: auto;
    display: block;
  }
  .dashboard-gallery > .task-grid > .task-card:first-child .task-card-thumb { aspect-ratio: 16 / 9; }
  .gen-result > .card:first-child { min-height: 440px !important; }
  .landing-nav { height: 64px; }
  .landing-nav-inner,
  .landing-hero-inner,
  .landing-section-inner,
  .model-section .landing-section-inner { width: min(100% - 32px, 1400px); }
  .landing-hero { height: 100svh; min-height: 640px; max-height: none; }
  .landing-hero-inner { padding-top: 104px; padding-bottom: 86px; }
  .landing-hero-copy::before { display: none; }
  .landing-hero h1 { font-size: 48px; }
  .cinema-product-stage {
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: none;
    mask-image: none;
    animation: none;
  }
  .cinema-product-stage img { object-position: 54% center; }
  .cinema-product-stage::after { inset: 76px 14px 58px; }
  .cinema-product-stage figcaption { display: none; }
  .landing-section { padding: 70px 0; }
  .landing-section h2 { font-size: 33px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card,
  .capability-card:nth-child(1) { grid-column: auto; min-height: 310px; padding: 24px; }
  .model-section { padding: 72px 0; }
}

@media (max-width: 430px) {
  .landing-hero h1 { font-size: 40px; }
  .landing-hero-lead { max-width: 350px; font-size: 13px; line-height: 1.72; }
  .landing-hero-actions { gap: 8px; }
  .landing-hero-actions .btn { width: 100%; min-height: 44px; }
  .landing-proof { width: 100%; margin-top: 26px; }
  .landing-proof-item { padding: 0 10px; }
  .landing-proof-item strong { font-size: 13px; }
  .landing-model-ticker { height: 46px; }
}

@media (max-height: 700px) {
  .landing-hero { height: 100svh; min-height: 520px; max-height: none; }
  .landing-hero-inner { padding-top: 84px; padding-bottom: 66px; }
  .landing-hero h1 { font-size: 52px; }
  .landing-hero-lead { margin-top: 16px; }
  .landing-hero-actions { margin-top: 18px; }
  .landing-proof { margin-top: 20px; }
}

@media (max-width: 430px) and (max-height: 700px) {
  .landing-hero-inner { padding-top: 78px; padding-bottom: 58px; }
  .landing-hero h1 { font-size: 36px; }
  .landing-proof { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .main-content::before,
  .landing-hero,
  .landing-hero::after,
  .cinema-product-stage img,
  .gen-result > .card:first-child::before { animation: none; }
}

/* Single-screen landing and image-workspace light stage. */
body.landing-page,
body.landing-page main { min-height: 100svh; }
body.landing-page .landing-hero {
  height: 100svh;
  min-height: 620px;
  max-height: none;
}

body.cinema-workspace-page .main-content {
  background-color: #050608;
  background-image:
    linear-gradient(105deg, rgba(5, 6, 8, 0.99) 0%, rgba(5, 6, 8, 0.94) 38%, rgba(5, 6, 8, 0.78) 68%, rgba(5, 6, 8, 0.9) 100%),
    linear-gradient(to bottom, rgba(5, 6, 8, 0.52), rgba(5, 6, 8, 0.96)),
    url("/static/images/cinema-studio.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
body.cinema-workspace-page .page-header {
  background: rgba(5, 6, 8, 0.7);
  border-bottom-color: rgba(92, 225, 255, 0.15);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}
body.cinema-workspace-page .page-header::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -28%;
  width: 24%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #5ce1ff, #ffffff, #ff7048, transparent);
  box-shadow: 0 0 16px rgba(92, 225, 255, 0.32);
  animation: cinema-header-light 7s ease-in-out infinite;
}
body.cinema-workspace-page .page-body {
  isolation: isolate;
  overflow: hidden;
}
body.cinema-workspace-page .page-body::before,
body.cinema-workspace-page .page-body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
}
body.cinema-workspace-page .page-body::before {
  top: 4%;
  right: -24%;
  width: 72%;
  height: 76%;
  background: linear-gradient(118deg, transparent 34%, rgba(92, 225, 255, 0.075) 49%, rgba(255, 255, 255, 0.018) 55%, transparent 69%);
  transform: skewX(-10deg);
  animation: cinema-cool-beam 12s ease-in-out infinite alternate;
}
body.cinema-workspace-page .page-body::after {
  bottom: -18%;
  left: -22%;
  width: 66%;
  height: 64%;
  background: linear-gradient(62deg, transparent 36%, rgba(255, 112, 72, 0.055) 49%, transparent 64%);
  transform: skewX(8deg);
  animation: cinema-warm-beam 14s ease-in-out infinite alternate;
}
body.cinema-workspace-page .page-body > * { position: relative; z-index: 1; }
body.cinema-workspace-page .expiry-notice {
  background: rgba(255, 200, 94, 0.055);
  border-color: rgba(255, 200, 94, 0.2);
  backdrop-filter: blur(12px);
}
body.cinema-workspace-page .gen-panel > .card {
  position: relative;
  background: rgba(9, 11, 14, 0.88);
  border-color: rgba(92, 225, 255, 0.22);
  backdrop-filter: blur(18px) saturate(120%);
}
body.cinema-workspace-page .gen-panel > .card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 7%, rgba(92, 225, 255, 0.9) 28%, rgba(255, 255, 255, 0.75) 48%, rgba(255, 112, 72, 0.72) 68%, transparent 91%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cinema-panel-outline 5.2s linear infinite;
}
body.cinema-workspace-page .gen-panel > .card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -42%;
  z-index: 3;
  width: 38%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff, #5ce1ff, transparent);
  box-shadow: 0 0 14px rgba(92, 225, 255, 0.38);
  animation: cinema-panel-sweep 6.4s ease-in-out infinite;
}
body.cinema-workspace-page .gen-result > .card:first-child {
  background-color: rgba(5, 7, 9, 0.9);
  border-color: rgba(92, 225, 255, 0.24);
  backdrop-filter: blur(12px);
}
body.cinema-workspace-page .gen-result > .card:first-child::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 8%;
  left: 8%;
  z-index: 4;
  height: 1px;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(90deg, transparent, #5ce1ff 20%, #ffffff 52%, #ff7048 82%, transparent);
  box-shadow: 0 0 12px rgba(92, 225, 255, 0.28);
  animation: cinema-canvas-scan 6.8s ease-in-out infinite;
}
body.cinema-workspace-page .gen-result > .card:first-child:hover {
  border-color: rgba(92, 225, 255, 0.42);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.52), 0 0 40px rgba(92, 225, 255, 0.045);
}
body.cinema-workspace-page .upload-zone { backdrop-filter: blur(10px); }
body.cinema-workspace-page #genBtn {
  box-shadow: 0 0 0 1px rgba(92, 225, 255, 0.22), 0 0 24px rgba(92, 225, 255, 0.1), 0 12px 34px rgba(0, 0, 0, 0.38);
}

@keyframes cinema-header-light {
  0%, 100% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 0.9; }
  92% { transform: translateX(620%); opacity: 0; }
}
@keyframes cinema-cool-beam {
  from { transform: translateX(-8%) skewX(-10deg); opacity: 0.55; }
  to { transform: translateX(12%) skewX(-10deg); opacity: 1; }
}
@keyframes cinema-warm-beam {
  from { transform: translateX(4%) skewX(8deg); opacity: 0.5; }
  to { transform: translateX(18%) skewX(8deg); opacity: 0.9; }
}
@keyframes cinema-panel-outline { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes cinema-panel-sweep {
  0%, 56% { transform: translateX(0); opacity: 0; }
  68% { opacity: 1; }
  94%, 100% { transform: translateX(390%); opacity: 0; }
}
@keyframes cinema-canvas-scan {
  0%, 100% { transform: translateY(0); opacity: 0; }
  16% { opacity: 0.45; }
  76% { opacity: 0.45; }
  92% { transform: translateY(520px); opacity: 0; }
}

@media (max-width: 768px) {
  body.landing-page .landing-hero { min-height: 600px; }
  body.cinema-workspace-page .main-content { background-attachment: scroll; }
  body.cinema-workspace-page .page-body::before { right: -48%; width: 110%; opacity: 0.68; }
  body.cinema-workspace-page .page-body::after { left: -56%; width: 110%; opacity: 0.62; }
}

@media (max-height: 700px) {
  body.landing-page .landing-hero { height: 100svh; min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  body.cinema-workspace-page .page-header::before,
  body.cinema-workspace-page .page-body::before,
  body.cinema-workspace-page .page-body::after,
  body.cinema-workspace-page .gen-panel > .card::before,
  body.cinema-workspace-page .gen-panel > .card::after,
  body.cinema-workspace-page .gen-result > .card:first-child::after { animation: none; }
}