body.is-app { overflow: auto; }
body.is-app .portal-shell { overflow: visible; }

.app-view {
  position: relative;
  display: block;
  min-height: 100svh;
  padding: 0;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 74% 13%, rgba(215,25,11,.075), transparent 25%),
    var(--color-bg);
  background-size: 6rem 6rem, 6rem 6rem, auto, auto;
}

.home-view { min-height: 100svh; }

.home-header,
.home-content,
.home-footer {
  width: min(calc(100% - clamp(2rem, 8vw, 8rem)), var(--content-max));
  margin-inline: auto;
}

.home-header {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 7rem;
  border-bottom: 1px solid var(--color-border);
}

.home-brand {
  color: var(--color-white);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: var(--tracking-brand);
  text-indent: var(--tracking-brand);
}

.home-nav { display: flex; align-items: center; gap: clamp(1.4rem, 4vw, 3rem); }
.home-nav__link { position: relative; padding: .5rem 0; border: 0; background: transparent; color: var(--color-muted); cursor: pointer; font-size: var(--font-xs); font-weight: 650; letter-spacing: .13em; text-transform: uppercase; transition: color var(--duration-fast); }
.home-nav__link::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ""; background: var(--color-red); transform: scaleX(0); transform-origin: right; transition: transform var(--duration-normal) var(--ease-out); }
.home-nav__link:hover, .home-nav__link.is-current { color: var(--color-white); }
.home-nav__link:hover::after, .home-nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }

.home-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  align-items: end;
  min-height: min(47rem, calc(100svh - 7rem));
  padding: clamp(5rem, 11vh, 9rem) 0 clamp(4rem, 9vh, 7rem);
  border-bottom: 1px solid var(--color-border);
}

.home-eyebrow { color: var(--color-red-bright); font-size: var(--font-xs); font-weight: 650; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.home-hero h2 { max-width: 10ch; margin-top: var(--space-4); color: var(--color-white); font-size: clamp(3.5rem, 7.3vw, 7rem); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: .9; }
.home-hero__intro { margin-top: var(--space-5); color: var(--color-muted); font-size: clamp(.95rem, 1.5vw, 1.15rem); line-height: 1.65; }
.home-hero__intro strong { color: var(--color-text); font-weight: 500; }

.home-hero__orbit { position: absolute; top: 14%; right: 3%; width: min(27vw, 23rem); aspect-ratio: 1; border: 1px solid rgba(215,25,11,.13); border-radius: 50%; opacity: .75; pointer-events: none; }
.home-hero__orbit::before, .home-hero__orbit::after { position: absolute; inset: 13%; content: ""; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; }
.home-hero__orbit::after { inset: 34%; border-color: rgba(215,25,11,.24); box-shadow: 0 0 36px rgba(215,25,11,.08); }
.home-hero__orbit span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--color-red-bright); box-shadow: 0 0 13px rgba(255,50,32,.8); }
.home-hero__orbit span:nth-child(1) { top: 8%; left: 58%; }.home-hero__orbit span:nth-child(2) { top: 48%; left: 12%; opacity: .45; }.home-hero__orbit span:nth-child(3) { right: 20%; bottom: 18%; opacity: .25; }

.home-search { position: relative; z-index: 2; align-self: end; width: 100%; }
.home-search label { display: block; margin-bottom: var(--space-2); color: #666; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.home-search__field { display: flex; align-items: center; min-height: 4.25rem; padding: 0 var(--space-4); border: 1px solid var(--color-border); background: rgba(5,5,5,.76); transition: border-color var(--duration-fast), box-shadow var(--duration-normal); }
.home-search__field:focus-within { border-color: var(--color-border-hover); box-shadow: var(--portal-glow-soft); }
.home-search__icon { color: var(--color-red-bright); font-size: 1.55rem; }
.home-search input { flex: 1; min-width: 0; padding: 0 var(--space-3); border: 0; outline: 0; background: transparent; color: var(--color-white); }
.home-search input::placeholder { color: #777; }
.home-search__status { color: #555; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }

.questions-section { padding: clamp(5rem, 10vw, 9rem) 0 var(--space-8); }
.questions-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-5); margin-bottom: var(--space-7); }
.questions-heading h2 { margin-top: var(--space-2); color: var(--color-white); font-size: var(--font-lg); font-weight: 520; letter-spacing: var(--tracking-tight); }
.questions-heading > p { color: #676767; font-size: var(--font-xs); letter-spacing: .12em; text-transform: uppercase; }
.questions-heading > p span { color: var(--color-red-bright); }

.home-question-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.home-question-card { position: relative; grid-column: span 6; display: flex; flex-direction: column; min-width: 0; min-height: 31rem; padding: clamp(1.5rem, 3vw, 2.5rem); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: linear-gradient(145deg, rgba(255,255,255,.024), transparent 42%), var(--color-surface); color: inherit; cursor: pointer; text-align: left; transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal), box-shadow var(--duration-normal), background var(--duration-normal); }
.home-question-card:first-child { grid-column: span 12; min-height: 36rem; padding: clamp(2rem, 4vw, 3.75rem); }
.home-question-card:hover, .home-question-card:focus-visible { transform: translateY(-4px); border-color: var(--color-border-hover); background: linear-gradient(145deg, rgba(215,25,11,.06), transparent 45%), var(--color-surface); box-shadow: var(--shadow-card), var(--portal-glow-soft); }
.home-question-card__number { position: absolute; top: clamp(1.5rem, 3vw, 2.5rem); right: clamp(1.5rem, 3vw, 2.5rem); color: #444; font-size: .62rem; letter-spacing: .16em; }
.home-question-card:first-child .home-question-card__number { top: clamp(2rem, 4vw, 3.75rem); right: clamp(2rem, 4vw, 3.75rem); }
.home-question-card__category { color: var(--color-red-bright); font-size: var(--font-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.home-question-card h3 { position: relative; z-index: 2; max-width: 20ch; margin-top: var(--space-5); color: var(--color-white); font-size: clamp(1.75rem, 3.1vw, 3rem); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.06; }
.home-question-card:first-child h3 { max-width: 22ch; font-size: clamp(2.4rem, 4.5vw, 4.6rem); line-height: .98; }

.home-posters { position: relative; z-index: 1; display: flex; align-items: flex-end; min-height: 10rem; margin: auto 0 var(--space-5); padding-top: var(--space-6); }
.home-question-card:first-child .home-posters { position: absolute; right: clamp(2rem, 5vw, 5rem); bottom: 5.8rem; width: min(41%, 31rem); min-height: 14rem; justify-content: flex-end; }
.home-mini-poster { position: relative; display: flex; align-items: flex-end; width: clamp(5rem, 9vw, 7rem); aspect-ratio: 2 / 3; margin-right: clamp(-1.8rem, -2vw, -1rem); padding: .75rem .6rem; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: var(--poster-bg, linear-gradient(145deg,#35100d,#080403)); color: rgba(255,255,255,.78); box-shadow: 10px 0 28px rgba(0,0,0,.45); transform: translateY(var(--poster-offset, 0)) rotate(var(--poster-rotation, -2deg)); transition: transform var(--duration-normal) var(--ease-out); }
.home-mini-poster:nth-child(2) { --poster-offset: .45rem; --poster-rotation: 1deg; }.home-mini-poster:nth-child(3) { --poster-offset: -.2rem; --poster-rotation: 2.5deg; }.home-mini-poster:nth-child(4) { --poster-offset: .2rem; --poster-rotation: 4deg; }
.home-question-card:hover .home-mini-poster:nth-child(1) { transform: translate(-4px, var(--poster-offset)) rotate(-3deg); }.home-question-card:hover .home-mini-poster:nth-child(2) { transform: translate(-1px, var(--poster-offset)) rotate(.5deg); }.home-question-card:hover .home-mini-poster:nth-child(3) { transform: translate(2px, var(--poster-offset)) rotate(3deg); }.home-question-card:hover .home-mini-poster:nth-child(4) { transform: translate(5px, var(--poster-offset)) rotate(5deg); }
.home-mini-poster::before { position: absolute; inset: 10%; content: ""; border: 1px solid rgba(255,255,255,.08); }
.home-mini-poster span { position: relative; z-index: 1; overflow: hidden; font-size: .55rem; font-weight: 650; letter-spacing: .08em; line-height: 1.15; text-transform: uppercase; text-overflow: ellipsis; }
.tone-crimson { --poster-bg: radial-gradient(circle at 50% 35%,#8f1d13,#160504 65%); }.tone-emerald { --poster-bg: repeating-linear-gradient(90deg,transparent 0 9px,rgba(67,255,177,.035) 10px),linear-gradient(150deg,#0b4d39,#030906 70%); }.tone-silver { --poster-bg: linear-gradient(145deg,#777,#101010 64%); }.tone-sky { --poster-bg: linear-gradient(155deg,#367f9e,#101d25 64%); }.tone-amber,.tone-sand,.tone-bronze { --poster-bg: linear-gradient(145deg,#775a2b,#120c05 68%); }.tone-violet { --poster-bg: linear-gradient(145deg,#4c2a61,#08050c 68%); }.tone-rust,.tone-ember { --poster-bg: linear-gradient(145deg,#7b2d16,#100503 70%); }.tone-azure { --poster-bg: linear-gradient(145deg,#15547b,#05101a 68%); }.tone-steel { --poster-bg: linear-gradient(145deg,#485762,#090c0e 68%); }.tone-olive,.tone-moss { --poster-bg: linear-gradient(145deg,#44502d,#090b05 68%); }.tone-midnight { --poster-bg: radial-gradient(circle at 45% 35%,#273657,#040509 65%); }.tone-teal { --poster-bg: linear-gradient(145deg,#1f625f,#05100f 68%); }

.home-question-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: .62rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.home-question-card__action { color: var(--color-white); }
.home-question-card__action span { display: inline-block; margin-left: .4rem; color: var(--color-red-bright); transition: transform var(--duration-fast); }
.home-question-card:hover .home-question-card__action span { transform: translateX(4px); }
.data-status { grid-column: 1 / -1; padding: var(--space-6); border: 1px solid var(--color-border); color: var(--color-muted); text-align: center; }
.data-status.is-error { border-color: var(--color-border-hover); color: var(--color-text); }
.questions-end { margin-top: var(--space-7); color: #454545; font-size: .6rem; letter-spacing: .16em; text-align: center; text-transform: uppercase; }

.home-footer { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0 var(--space-7); border-top: 1px solid var(--color-border); color: #555; font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; }
.home-footer button { padding: 0; background: transparent; color: #666; cursor: pointer; font-size: inherit; letter-spacing: inherit; text-transform: inherit; transition: color var(--duration-fast); }.home-footer button:hover { color: var(--color-white); }

.selected-view { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; min-height: 100svh; padding: clamp(1.5rem, 5vw, 5rem); background: radial-gradient(circle at 50% 42%, rgba(215,25,11,.09), transparent 30%), var(--color-bg); }
.selected-view[hidden] { display: none; }
.selected-view__back { position: absolute; top: clamp(1.5rem, 5vw, 3.5rem); left: clamp(1.5rem, 6vw, 6rem); padding: .7rem 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-muted); cursor: pointer; font-size: var(--font-xs); letter-spacing: .12em; text-transform: uppercase; transition: color var(--duration-fast), border-color var(--duration-fast); }
.selected-view__back:hover { color: var(--color-white); border-color: var(--color-border-hover); }
.selected-view__content { width: min(100%, 66rem); text-align: center; }
.selected-view__category { margin-top: var(--space-5); color: var(--color-muted); font-size: var(--font-xs); letter-spacing: .22em; text-transform: uppercase; }
.selected-view h2 { margin-top: var(--space-3); color: var(--color-white); font-size: clamp(2.3rem, 6vw, 6rem); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: .98; }
.selected-view__line { display: block; width: 1px; height: 4rem; margin: var(--space-6) auto var(--space-4); background: linear-gradient(to bottom,var(--color-red),transparent); }
.selected-view__content > p:last-child { color: var(--color-muted); font-size: var(--font-xs); letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 1024px) {
  .home-hero { grid-template-columns: 1fr; align-content: center; gap: var(--space-7); }
  .home-hero__copy { position: relative; z-index: 2; }
  .home-search { width: min(100%, 38rem); }
  .home-hero__orbit { top: 13%; right: 0; width: 37vw; }
  .home-question-card:first-child .home-posters { position: relative; right: auto; bottom: auto; width: 100%; justify-content: flex-start; }
}

@media (max-width: 768px) {
  .home-header { min-height: 5.5rem; }
  .home-nav { gap: 1.25rem; }
  .home-hero { min-height: calc(100svh - 5.5rem); padding-block: var(--space-7); }
  .home-hero h2 { font-size: clamp(3.1rem, 12vw, 5.2rem); }
  .home-hero__orbit { top: 15%; right: -17%; width: 60vw; }
  .home-search__status { display: none; }
  .questions-heading { grid-template-columns: 1fr; }
  .home-question-card, .home-question-card:first-child { grid-column: span 12; min-height: 29rem; padding: clamp(1.5rem, 6vw, 2.4rem); }
  .home-question-card:first-child h3 { font-size: clamp(2rem, 8vw, 3.1rem); }
  .home-question-card__number, .home-question-card:first-child .home-question-card__number { top: clamp(1.5rem, 6vw, 2.4rem); right: clamp(1.5rem, 6vw, 2.4rem); }
  .home-mini-poster { width: clamp(4.8rem, 21vw, 6.5rem); }
}

@media (max-width: 430px) {
  .home-brand { font-size: .8rem; }
  .home-nav__link { font-size: .58rem; }
  .home-hero { gap: var(--space-6); }
  .home-hero h2 { font-size: clamp(3rem, 14vw, 4.2rem); }
  .home-search__field { min-height: 3.8rem; padding-inline: var(--space-3); }
  .home-question-card, .home-question-card:first-child { min-height: 28rem; }
  .home-mini-poster:nth-child(4) { display: none; }
  .home-footer { flex-direction: column; }
  .selected-view h2 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-question-card, .home-mini-poster, .home-question-card__action span { transform: none !important; }
}
.cinema-image { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 420ms var(--ease-out); }
.cinema-image.is-loaded { opacity:1; }
.home-mini-poster { overflow:hidden; }
.home-mini-poster .cinema-image { z-index:2; }
.home-mini-poster.has-cinema-image > span { opacity:0; }