@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root {
  --bg: #0a0b10;
  --bg-soft: #101118;
  --panel: #161821;
  --panel-2: #1d1f2a;
  --text: #f7f5f0;
  --muted: #9294a1;
  --line: rgba(255, 255, 255, 0.1);
  --accent: #bf9aff;
  --accent-2: #8b68ff;
  --green: #90d7b1;
  --yellow: #f0c76c;
  --radius-lg: 26px;
  --radius-md: 16px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  min-width: 320px;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
  inset: 0;
  opacity: .12;
  pointer-events: none;
  position: fixed;
  z-index: 20;
}

.site-header {
  align-items: center;
  display: flex;
  gap: 42px;
  height: 82px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 48px;
  position: relative;
  z-index: 2;
}

.brand { align-items: center; display: flex; font-size: 16px; font-weight: 800; gap: 10px; letter-spacing: -0.04em; white-space: nowrap; }
.brand-mark { align-items: center; background: var(--accent); border-radius: 10px; color: #17111f; display: inline-flex; font-family: Georgia, serif; font-size: 20px; height: 31px; justify-content: center; transform: rotate(-8deg); width: 31px; }
.demo-badge { border: 1px solid rgba(191,154,255,.35); border-radius: 5px; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em; padding: 4px 5px; }

.main-nav { display: flex; gap: 28px; margin-right: auto; }
.main-nav a { color: var(--muted); font-size: 12px; font-weight: 700; transition: color .2s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }
.main-nav a.active::after { background: var(--accent); border-radius: 99px; content: ''; display: block; height: 2px; margin: 7px auto -9px; width: 15px; }

.header-actions { align-items: center; display: flex; gap: 15px; }
.search-box { align-items: center; background: var(--panel); border: 1px solid transparent; border-radius: 11px; color: var(--muted); display: flex; gap: 8px; padding: 8px 10px; transition: border-color .2s ease, background .2s ease; width: 222px; }
.search-box:focus-within { background: var(--panel-2); border-color: rgba(191,154,255,.45); }
.search-box .icon { font-size: 23px; line-height: 0; transform: rotate(-20deg); }
.search-box input { background: none; border: 0; color: var(--text); font-size: 11px; min-width: 0; outline: 0; width: 100%; }
.search-box input::placeholder { color: #777985; }
.search-box kbd { border: 1px solid var(--line); border-radius: 4px; color: #777985; font-family: 'DM Mono', monospace; font-size: 9px; padding: 2px 5px; }
.icon-button, .avatar-button { align-items: center; background: none; border: 0; color: var(--text); display: inline-flex; justify-content: center; }
.icon-button { font-size: 23px; position: relative; width: 29px; }
.watchlist-count { align-items: center; background: var(--accent); border-radius: 20px; color: #1a1320; display: none; font-size: 8px; font-weight: 800; height: 14px; justify-content: center; position: absolute; right: -3px; top: -1px; width: 14px; }
.watchlist-count.visible { display: inline-flex; }
.avatar-button { background: #f1b85b; border-radius: 50%; color: #31241a; font-size: 11px; font-weight: 800; height: 29px; width: 29px; }

main { margin: 0 auto; max-width: 1440px; padding: 0 48px 60px; }

.hero { align-items: center; display: grid; gap: 50px; grid-template-columns: 1.06fr .94fr; min-height: 540px; padding: 56px 0 74px; }
.hero-copy { max-width: 620px; padding: 0 20px 0 50px; }
.eyebrow, .section-kicker { color: var(--accent); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .13em; margin: 0 0 18px; text-transform: uppercase; }
.eyebrow { align-items: center; display: flex; gap: 8px; }
.eyebrow-dot { background: var(--accent); border-radius: 50%; box-shadow: 0 0 18px var(--accent); height: 6px; width: 6px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(48px, 6vw, 85px); letter-spacing: -0.075em; line-height: .95; margin-bottom: 28px; }
h1 em { color: var(--accent); font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -0.06em; }
.hero-description { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 460px; }
.hero-actions { align-items: center; display: flex; gap: 23px; margin: 29px 0 42px; }
.primary-button, .secondary-button, .quiet-button, .text-button { align-items: center; border: 0; display: inline-flex; gap: 9px; justify-content: center; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.primary-button { background: var(--accent); border-radius: 10px; color: #17111f; font-size: 11px; font-weight: 800; padding: 13px 18px; }
.primary-button:hover { background: #d4bcff; transform: translateY(-2px); }
.secondary-button { background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 11px; font-weight: 700; padding: 12px 16px; }
.secondary-button:hover { background: var(--panel-2); border-color: rgba(255,255,255,.25); }
.text-button { background: none; color: var(--text); font-size: 11px; font-weight: 700; padding: 10px 0; }
.text-button:hover { color: var(--accent); }
.hero-meta { align-items: center; color: #72747e; display: flex; font-family: 'DM Mono', monospace; font-size: 9px; gap: 13px; text-transform: uppercase; }
.hero-meta strong { color: var(--text); font-size: 11px; }
.meta-divider { background: var(--line); height: 14px; width: 1px; }

.hero-art { min-height: 410px; position: relative; }
.hero-art::before { background: radial-gradient(circle, rgba(143,105,255,.34), rgba(143,105,255,0) 67%); content: ''; inset: 5% 12% 0; position: absolute; }
.hero-orbit { border: 1px solid rgba(191,154,255,.27); border-radius: 50%; left: 17%; position: absolute; top: 17%; transform: rotate(-28deg); }
.orbit-one { height: 74%; width: 60%; }
.orbit-two { border-color: rgba(241,185,91,.22); height: 63%; left: 28%; top: 22%; transform: rotate(47deg); width: 52%; }
.hero-poster { background: linear-gradient(145deg, #29254b, #111220 58%, #542d56); border: 8px solid rgba(255,255,255,.08); border-radius: 22px; box-shadow: 0 32px 70px rgba(0,0,0,.55), inset 0 0 60px rgba(255,255,255,.08); height: 365px; left: 25%; overflow: hidden; position: absolute; top: 5%; transform: rotate(6deg); width: 250px; }
.hero-poster::after { background: linear-gradient(transparent 62%, rgba(6,6,12,.85)); content: ''; inset: 0; position: absolute; }
.poster-topline, .poster-footer { color: rgba(255,255,255,.75); display: flex; font-family: 'DM Mono', monospace; font-size: 7px; justify-content: space-between; left: 16px; letter-spacing: .14em; position: absolute; right: 16px; z-index: 1; }
.poster-topline { top: 15px; }
.poster-footer { bottom: 14px; color: rgba(255,255,255,.65); }
.poster-glow { background: radial-gradient(ellipse at 40% 30%, rgba(226,199,255,.93) 0%, rgba(143,96,255,.55) 17%, rgba(16,18,33,0) 52%); filter: blur(2px); height: 100%; position: absolute; transform: scale(1.5); width: 100%; }
.poster-glow::after { background: linear-gradient(130deg, transparent 37%, rgba(244,188,98,.55) 44%, transparent 48%); content: ''; inset: 0; position: absolute; transform: rotate(-20deg); }
.poster-title { bottom: 65px; display: flex; flex-direction: column; font-size: 28px; left: 17px; letter-spacing: -.07em; line-height: .88; position: absolute; z-index: 1; }
.poster-title strong { color: var(--accent); font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 40px; font-weight: 700; }
.poster-caption { bottom: 46px; color: rgba(255,255,255,.62); font-family: 'DM Mono', monospace; font-size: 6px; left: 18px; letter-spacing: .05em; position: absolute; z-index: 1; }
.floating-note { align-items: center; backdrop-filter: blur(10px); background: rgba(28,27,45,.76); border: 1px solid rgba(255,255,255,.1); border-radius: 11px; box-shadow: 0 12px 24px rgba(0,0,0,.3); display: flex; gap: 7px; padding: 8px 10px; position: absolute; z-index: 2; }
.floating-note span { color: var(--yellow); font-size: 16px; }
.floating-note strong { font-size: 13px; }
.floating-note small { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 7px; text-transform: uppercase; }
.note-rating { left: 7%; top: 25%; }
.note-quality { bottom: 17%; right: 11%; }
.note-quality strong { color: var(--green); font-family: 'DM Mono', monospace; font-size: 11px; }

.section-block { padding: 26px 50px 10px; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 27px; }
.section-kicker { color: #8881aa; margin-bottom: 10px; }
h2 { font-size: 26px; letter-spacing: -.06em; line-height: 1; margin-bottom: 0; }
.quiet-button { background: none; color: var(--muted); font-size: 11px; font-weight: 700; padding: 8px 0; }
.quiet-button:hover { color: var(--text); }

.genre-row { display: grid; gap: 13px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.genre-card { align-items: center; background: var(--panel); border: 1px solid transparent; border-radius: 13px; color: var(--text); display: grid; gap: 8px; grid-template-columns: 32px 1fr auto; padding: 14px 13px; text-align: left; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.genre-card:hover, .genre-card.selected { background: var(--panel-2); border-color: rgba(255,255,255,.16); transform: translateY(-3px); }
.genre-symbol { align-items: center; border-radius: 10px; display: inline-flex; font-size: 16px; height: 32px; justify-content: center; width: 32px; }
.genre-violet .genre-symbol { background: rgba(191,154,255,.17); color: var(--accent); }
.genre-blue .genre-symbol { background: rgba(113,174,255,.17); color: #8fc0ff; }
.genre-orange .genre-symbol { background: rgba(241,185,91,.17); color: #f1b95b; }
.genre-green .genre-symbol { background: rgba(144,215,177,.17); color: var(--green); }
.genre-pink .genre-symbol { background: rgba(246,136,193,.17); color: #f688c1; }
.genre-card span:not(.genre-symbol) { font-size: 11px; font-weight: 700; }
.genre-card small { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; }

.catalog-section { padding-top: 72px; }
.catalog-heading { margin-bottom: 23px; }
.catalog-controls { align-items: center; display: flex; gap: 8px; }
.select-wrap select { appearance: none; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%239294a1' d='m2 3 3 3 3-3 .8.8-3.8 3.8L1.2 3.8z'/%3E%3C/svg%3E") no-repeat right 11px center; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; outline: 0; padding: 9px 30px 9px 11px; }
.view-toggle { background: transparent; border: 1px solid transparent; border-radius: 7px; color: #5d606d; font-size: 18px; height: 34px; width: 34px; }
.view-toggle.active, .view-toggle:hover { background: var(--panel); border-color: var(--line); color: var(--text); }
.active-filters { display: flex; gap: 7px; margin: -7px 0 18px; }
.filter-pill { align-items: center; background: rgba(191,154,255,.13); border: 1px solid rgba(191,154,255,.25); border-radius: 99px; color: var(--accent); display: inline-flex; font-size: 9px; gap: 6px; padding: 6px 9px; }
.filter-pill button { background: none; border: 0; color: inherit; line-height: 1; padding: 0; }
.movie-grid { display: grid; gap: 18px 13px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.movie-card { min-width: 0; }
.movie-art { aspect-ratio: .72; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.26); overflow: hidden; position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.movie-card:hover .movie-art { box-shadow: 0 18px 35px rgba(0,0,0,.45); transform: translateY(-6px); }
.movie-art::after { background: linear-gradient(transparent 45%, rgba(6,7,12,.92)); content: ''; inset: 0; position: absolute; }
.art-purple { background: radial-gradient(circle at 67% 24%, #ddbaef 0 5%, transparent 22%), linear-gradient(135deg, #39245e, #101221 65%, #8b315c); }
.art-blue { background: radial-gradient(circle at 34% 26%, #bdedff 0 3%, transparent 20%), linear-gradient(150deg, #102f5c, #0b1726 55%, #317c8e); }
.art-orange { background: radial-gradient(circle at 68% 28%, #ffe4ac 0 6%, transparent 21%), linear-gradient(150deg, #773a24, #19131c 58%, #c27837); }
.art-green { background: radial-gradient(circle at 36% 28%, #c2f4ce 0 5%, transparent 23%), linear-gradient(135deg, #173c3b, #0d1b25 62%, #426c54); }
.art-pink { background: radial-gradient(circle at 60% 25%, #ffe1e7 0 4%, transparent 20%), linear-gradient(140deg, #592b52, #171527 60%, #cb4b72); }
.art-yellow { background: radial-gradient(circle at 42% 28%, #fff2aa 0 6%, transparent 22%), linear-gradient(140deg, #5d4617, #1b1510 60%, #b05a2d); }
.art-rust { background: radial-gradient(circle at 70% 30%, #ffc7a8 0 5%, transparent 22%), linear-gradient(140deg, #6f2f2b, #17141d 62%, #9b7145); }
.art-teal { background: radial-gradient(circle at 38% 22%, #b6fff0 0 5%, transparent 21%), linear-gradient(140deg, #163d46, #10151e 62%, #307d85); }
.movie-art::before { color: rgba(255,255,255,.82); content: attr(data-mark); font-family: 'Playfair Display', Georgia, serif; font-size: 49px; font-style: italic; left: 17px; position: absolute; top: 21px; z-index: 1; }
.movie-card-info { padding: 11px 2px 0; }
.movie-card-title { font-size: 12px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.movie-card-meta { align-items: center; color: var(--muted); display: flex; font-family: 'DM Mono', monospace; font-size: 8px; gap: 7px; text-transform: uppercase; }
.movie-card-meta .rating { color: var(--yellow); }
.movie-hover-actions { bottom: 13px; display: flex; gap: 6px; left: 12px; opacity: 0; position: absolute; right: 12px; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; z-index: 2; }
.movie-card:hover .movie-hover-actions, .movie-card:focus-within .movie-hover-actions { opacity: 1; transform: translateY(0); }
.movie-hover-actions button { align-items: center; background: rgba(15,15,24,.8); border: 1px solid rgba(255,255,255,.2); border-radius: 7px; color: var(--text); display: inline-flex; font-size: 10px; height: 30px; justify-content: center; width: 31px; }
.movie-hover-actions button:first-child { background: var(--accent); border-color: var(--accent); color: #16101f; flex: 1; font-weight: 800; gap: 5px; }
.movie-hover-actions button:hover { border-color: var(--accent); }
.empty-state { color: var(--muted); padding: 70px 20px; text-align: center; }
.empty-icon { color: var(--accent); font-size: 35px; }
.empty-state h3 { color: var(--text); margin: 15px 0 8px; }
.empty-state p { font-size: 12px; }

.about-panel { align-items: center; background: linear-gradient(110deg, rgba(49,40,73,.7), rgba(21,23,35,.7)); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; gap: 27px; grid-template-columns: 62px 1.1fr 1fr; margin: 110px 50px 10px; padding: 31px; }
.about-mark { align-items: center; background: var(--accent); border-radius: 17px; color: #21172d; display: flex; font-family: Georgia, serif; font-size: 36px; height: 62px; justify-content: center; transform: rotate(-8deg); width: 62px; }
.about-panel h2 { font-size: 22px; line-height: 1.1; margin-bottom: 12px; }
.about-panel p:not(.section-kicker) { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 0; max-width: 510px; }
.provider-list { border-left: 1px solid var(--line); display: grid; gap: 9px; padding-left: 28px; }
.provider-list span { align-items: center; color: #d9d5e3; display: flex; font-size: 10px; gap: 8px; }
.provider-list small { color: #777986; font-family: 'DM Mono', monospace; font-size: 8px; margin-left: auto; }
.status-dot { border-radius: 50%; height: 6px; width: 6px; }
.status-dot.pending { background: var(--yellow); box-shadow: 0 0 10px rgba(240,199,108,.55); }

.site-footer { color: #626572; display: flex; font-family: 'DM Mono', monospace; font-size: 8px; justify-content: space-between; margin: 0 auto; max-width: 1440px; padding: 25px 98px 35px; text-transform: uppercase; }

.modal-backdrop { align-items: center; background: rgba(4,4,8,.75); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 30; }
.modal-backdrop[hidden] { display: none; }
.movie-modal { background: #161821; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); display: grid; grid-template-columns: .82fr 1.18fr; max-height: min(680px, 90vh); max-width: 850px; overflow: auto; position: relative; width: 100%; }
.modal-close { background: rgba(9,10,15,.72); border: 1px solid rgba(255,255,255,.17); border-radius: 50%; color: white; font-size: 20px; height: 31px; line-height: 1; position: absolute; right: 15px; top: 15px; width: 31px; z-index: 3; }
.modal-visual { background: #27233e; min-height: 420px; position: relative; }
.modal-visual::before { color: rgba(255,255,255,.86); content: attr(data-mark); font-family: 'Playfair Display', Georgia, serif; font-size: 82px; font-style: italic; left: 35px; position: absolute; top: 35px; z-index: 1; }
.modal-visual::after { background: linear-gradient(transparent 38%, rgba(10,11,16,.96)); content: ''; inset: 0; position: absolute; }
.modal-body { padding: 48px 38px 34px; }
.modal-body h2 { font-size: 36px; margin-bottom: 14px; }
.modal-body > p:not(.section-kicker) { color: var(--muted); font-size: 12px; line-height: 1.75; }
.modal-meta { align-items: center; color: #bcb8c6; display: flex; font-family: 'DM Mono', monospace; font-size: 9px; gap: 8px; margin-bottom: 20px; text-transform: uppercase; }
.modal-meta .rating { color: var(--yellow); }
.player-note { align-items: center; background: rgba(191,154,255,.08); border: 1px solid rgba(191,154,255,.2); border-radius: 11px; display: flex; gap: 11px; margin: 21px 0 14px; padding: 12px; }
.player-note-icon { align-items: center; background: var(--accent); border-radius: 8px; color: #191221; display: flex; font-size: 11px; height: 30px; justify-content: center; width: 30px; }
.player-note strong, .player-note span { display: block; }
.player-note strong { font-size: 10px; margin-bottom: 3px; }
.player-note span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.source-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.source-button { background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: #bcb8c6; font-family: 'DM Mono', monospace; font-size: 8px; padding: 7px 9px; }
.source-button:hover { border-color: var(--accent); color: var(--text); }
.source-button::before { background: var(--yellow); border-radius: 50%; content: ''; display: inline-block; height: 5px; margin-right: 6px; width: 5px; }
.modal-actions { display: flex; gap: 9px; margin-top: 24px; }

.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

@media (max-width: 1050px) {
  .site-header, main { padding-left: 27px; padding-right: 27px; }
  .hero-copy { padding-left: 15px; }
  .section-block { padding-left: 15px; padding-right: 15px; }
  .about-panel { margin-left: 15px; margin-right: 15px; }
  .movie-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .genre-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .genre-card:nth-child(n+4) { display: none; }
  .site-footer { padding-left: 42px; padding-right: 42px; }
}

@media (max-width: 760px) {
  .site-header { gap: 18px; height: 70px; }
  .main-nav { display: none; }
  .header-actions { gap: 8px; }
  .search-box { width: min(42vw, 220px); }
  .search-box kbd { display: none; }
  main { padding-left: 16px; padding-right: 16px; }
  .hero { display: flex; flex-direction: column; gap: 22px; padding-top: 30px; }
  .hero-copy { padding: 0; }
  h1 { font-size: clamp(46px, 14vw, 72px); }
  .hero-art { min-height: 390px; width: 100%; }
  .hero-poster { left: calc(50% - 125px); }
  .hero-orbit { left: calc(50% - 185px); }
  .note-rating { left: 8%; }
  .note-quality { right: 6%; }
  .hero-meta { flex-wrap: wrap; }
  .genre-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genre-card:nth-child(n+3) { display: none; }
  .catalog-section { padding-top: 54px; }
  .catalog-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .catalog-controls { width: 100%; }
  .select-wrap { margin-right: auto; }
  .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .movie-hover-actions { opacity: 1; transform: none; }
  .about-panel { align-items: start; grid-template-columns: 48px 1fr; margin-top: 70px; padding: 22px; }
  .about-mark { border-radius: 13px; font-size: 27px; height: 48px; width: 48px; }
  .provider-list { border-left: 0; border-top: 1px solid var(--line); grid-column: 1 / -1; padding: 18px 0 0; width: 100%; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 25px 16px 30px; }
  .movie-modal { display: block; max-height: 94vh; }
  .modal-visual { min-height: 230px; }
  .modal-body { padding: 28px 23px 25px; }
  .modal-body h2 { font-size: 30px; }
}

@media (max-width: 430px) {
  .brand { font-size: 14px; }
  .demo-badge { display: none; }
  .search-box { width: 38vw; }
  .search-box input { font-size: 10px; }
  .avatar-button { display: none; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .hero-actions .primary-button { width: 100%; }
  .hero-actions .text-button { padding-left: 4px; }
  .hero-art { min-height: 345px; transform: scale(.92); transform-origin: top center; width: 109%; }
}