/* RESET & FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* Midnight Premiere Palette */
  --bg-primary: #0B0A0F;
  --bg-secondary: #17161E;
  --surface-panel: rgba(255, 255, 255, 0.04);
  
  --accent-gold: #D6B46A;
  --accent-burgundy: #6D2336;
  --accent-blue: #243B63;
  --text-ivory: #F5F2EB;
  --text-graphite: #6B7280;
  
  --brass-soft: #B98A3D;
  --walnut-dark: #4A3528;
  --bronze: #8C6239;

  --blur-amount: 16px;
  --radius-btn: 18px;
  --radius-card: 16px;
  --radius-stage: 24px;
  
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  
  --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --sidebar-width: 280px;
}

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

body {
  background-color: var(--bg-primary);
  color: var(--text-ivory);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

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

/* UTILITIES */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.text-gold { color: var(--accent-gold); }
.text-center { text-align: center; }
.mb-2 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 4rem; }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: var(--transition);
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-burgundy));
  color: var(--text-ivory);
  box-shadow: 0 4px 15px rgba(109, 35, 54, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(214, 180, 106, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--text-ivory);
  border: 1px solid rgba(214, 180, 106, 0.4);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(214, 180, 106, 0.1);
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

/* NOTICE BAR */
.notice-bar {
  background-color: var(--bg-secondary);
  color: var(--accent-gold);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(214, 180, 106, 0.1);
  position: relative;
  z-index: 100;
}

/* APP LAYOUT */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
}

/* CINEMA DIRECTORY SIDEBAR */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, rgba(23, 22, 30, 0.95) 0%, rgba(11, 10, 15, 0.98) 100%);
  backdrop-filter: blur(var(--blur-amount));
  border-right: 1px solid rgba(185, 138, 61, 0.2);
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.5rem;
  z-index: 90;
  box-shadow: 5px 0 30px rgba(0,0,0,0.5);
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('images/black-marble-texture-overlay.jpg') center/cover;
  opacity: 0.05;
  pointer-events: none;
}

.brand {
  margin-bottom: 4rem;
  text-align: center;
}

.brand h2 {
  font-size: 1.8rem;
  color: var(--accent-gold);
  margin: 0;
  line-height: 1.2;
}

.brand span {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--text-graphite);
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  color: var(--text-graphite);
  font-weight: 500;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.nav-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: var(--transition);
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-gold);
  background: rgba(214, 180, 106, 0.05);
}

.nav-link:hover::before, .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  background: var(--accent-gold);
  border-radius: 0 4px 4px 0;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.75rem;
  color: var(--text-graphite);
  text-align: center;
}

/* HEADER */
.header-minimal {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 2rem 3rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
}

/* HERO: THE GRAND PREMIERE */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 3rem 4rem;
  background: url('images/luxury-cinema-lobby-architecture.jpg') center/cover no-repeat;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, var(--bg-primary) 0%, rgba(11, 10, 15, 0.8) 50%, rgba(11, 10, 15, 0.4) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

.hero-content {
  max-width: 600px;
}

.hero-headline {
  font-size: 4.5rem;
  line-height: 1.1;
  color: var(--text-ivory);
  margin-bottom: 1.5rem;
  text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-graphite);
  margin-bottom: 2.5rem;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero-stats {
  display: flex;
  gap: 2rem;
  border-top: 1px solid rgba(214, 180, 106, 0.2);
  padding-top: 1.5rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-value {
  color: var(--accent-gold);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-graphite);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* FEATURED PREMIERE STAGE (SLOT CONTAINER) */
.premiere-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-stage);
  padding: 12px;
  background: linear-gradient(145deg, #1A1822 0%, #0B0A0F 100%);
  box-shadow: 
    0 20px 50px rgba(0,0,0,0.8),
    0 0 0 1px rgba(185, 138, 61, 0.3),
    inset 0 0 40px rgba(109, 35, 54, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-corners {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  border-radius: var(--radius-stage);
  border: 2px solid rgba(214, 180, 106, 0.1);
}

.stage-corners::before, .stage-corners::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--brass-soft);
  animation: shimmer 4s infinite alternate;
}

.stage-corners::before {
  top: -2px; left: -2px;
  border-right: none; border-bottom: none;
  border-top-left-radius: var(--radius-stage);
}

.stage-corners::after {
  bottom: -2px; right: -2px;
  border-left: none; border-top: none;
  border-bottom-right-radius: var(--radius-stage);
}

.iframe-wrapper {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-stage) - 8px);
  overflow: hidden;
  position: relative;
  background: #000;
}

.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@keyframes shimmer {
  0% { opacity: 0.4; box-shadow: 0 0 10px rgba(185, 138, 61, 0); }
  100% { opacity: 1; box-shadow: 0 0 20px rgba(185, 138, 61, 0.5); }
}

/* SECTION PADDING */
.section {
  padding: 6rem 3rem;
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-header h2 {
  font-size: 2.5rem;
  color: var(--text-ivory);
  margin-bottom: 1rem;
}

.section-header p {
  color: var(--text-graphite);
  max-width: 600px;
  margin: 0 auto;
}

/* NOW SHOWING (CARDS) */
.now-showing {
  background: var(--bg-primary);
}

.cinema-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  grid-auto-rows: 250px;
}

.cinema-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  transition: var(--transition);
  cursor: pointer;
}

.cinema-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(11, 10, 15, 0.9) 0%, rgba(11, 10, 15, 0.1) 60%);
  z-index: 1;
  transition: var(--transition);
}

.cinema-card img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.cinema-card-content {
  position: relative;
  z-index: 2;
  transform: translateY(10px);
  transition: var(--transition);
}

.cinema-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.cinema-card p {
  font-size: 0.85rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  transition: var(--transition);
}

.cinema-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.cinema-card:hover img {
  transform: scale(1.05);
}

.cinema-card:hover::before {
  background: linear-gradient(0deg, rgba(11, 10, 15, 0.95) 0%, rgba(109, 35, 54, 0.3) 100%);
}

.cinema-card:hover .cinema-card-content {
  transform: translateY(0);
}

.cinema-card:hover p {
  opacity: 1;
}

/* Asymmetric Span Rules */
.card-featured { grid-column: span 8; grid-row: span 2; }
.card-classic { grid-column: span 4; grid-row: span 2; }
.card-adventure { grid-column: span 4; }
.card-mystery { grid-column: span 4; }
.card-awards { grid-column: span 4; }

/* BEHIND THE SCENES */
.behind-scenes {
  background: var(--bg-secondary);
}

.editorial-row {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 4rem;
}

.editorial-row:nth-child(even) {
  flex-direction: row-reverse;
}

.editorial-image {
  flex: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
}

.editorial-image::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  border-radius: var(--radius-card);
}

.editorial-image img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.editorial-text {
  flex: 1;
}

.editorial-text h3 {
  font-size: 2rem;
  color: var(--accent-gold);
}

/* AWARDS GALLERY */
.awards-gallery {
  background: var(--bg-primary);
  background-image: radial-gradient(circle at 50% 0%, rgba(214, 180, 106, 0.05) 0%, transparent 50%);
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.award-showcase {
  background: var(--surface-panel);
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(var(--blur-amount));
  border-radius: var(--radius-card);
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.award-showcase::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: 0.5;
}

.award-showcase:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-5px);
  border-color: rgba(214, 180, 106, 0.2);
}

.award-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  fill: var(--accent-gold);
  filter: drop-shadow(0 10px 15px rgba(214,180,106,0.2));
}

.award-showcase h4 {
  color: var(--text-ivory);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* REVIEWS */
.reviews {
  background: var(--bg-secondary);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.review-card {
  padding: 3rem 2rem;
  background: var(--bg-primary);
  border-left: 2px solid var(--accent-burgundy);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

.review-quote {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 1.5rem;
  color: var(--text-ivory);
  line-height: 1.8;
}

.review-author {
  font-size: 0.9rem;
  color: var(--accent-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* RESPONSIBLE GAMING BRIEF */
.rg-brief {
  background: var(--bg-primary);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 4rem 2rem;
  text-align: center;
}

.rg-content {
  max-width: 800px;
  margin: 0 auto;
}

.rg-icon {
  width: 48px;
  height: 48px;
  fill: var(--text-graphite);
  margin-bottom: 1rem;
}

.rg-content p {
  color: var(--text-graphite);
  font-size: 0.9rem;
}

/* FOOTER */
.footer {
  background: #050408;
  padding: 5rem 3rem 2rem;
  border-top: 1px solid rgba(214, 180, 106, 0.1);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-brand h3 {
  color: var(--accent-gold);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--text-graphite);
  max-width: 400px;
}

.footer-links h4 {
  color: var(--text-ivory);
  font-family: var(--font-sans);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-links ul {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  color: var(--text-graphite);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--accent-gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 2rem;
  text-align: center;
  color: var(--text-graphite);
  font-size: 0.8rem;
}

/* PAGE WRAPPERS (Legal & Inner pages) */
.page-hero {
  padding: 8rem 3rem 4rem;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.page-hero h1 {
  font-size: 3.5rem;
  color: var(--accent-gold);
}

.page-content {
  padding: 4rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}

.content-block {
  margin-bottom: 3rem;
}

.content-block h2 {
  color: var(--accent-gold);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.content-block p {
  color: var(--text-graphite);
  margin-bottom: 1.5rem;
}

/* CONTACT FORM */
.contact-form {
  background: var(--surface-panel);
  padding: 3rem;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,0.05);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-ivory);
  font-size: 0.9rem;
}

.form-control {
  width: 100%;
  padding: 1rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-ivory);
  font-family: var(--font-sans);
  transition: var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-gold);
  background: rgba(0,0,0,0.5);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
  .hero-headline { font-size: 3.5rem; }
  .cinema-grid { grid-template-columns: repeat(8, 1fr); }
  .card-featured { grid-column: span 8; }
  .card-classic, .card-adventure, .card-mystery, .card-awards { grid-column: span 4; }
}

@media (max-width: 992px) {
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .hero-content { margin: 0 auto; }
  .hero-actions { justify-content: center; }
  .hero-stats { justify-content: center; }
  .editorial-row, .editorial-row:nth-child(even) { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
  }
  
  .main-content {
    margin-left: 0;
    margin-bottom: 80px; /* Space for bottom nav */
  }
  
  .sidebar {
    top: auto;
    bottom: 0;
    width: 100%;
    height: 80px;
    flex-direction: row;
    padding: 0 1rem;
    border-right: none;
    border-top: 1px solid rgba(185, 138, 61, 0.2);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
  }
  
  .brand, .sidebar-footer {
    display: none;
  }
  
  .nav-menu {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  
  .nav-link {
    flex-direction: column;
    padding: 0.5rem;
    font-size: 0.65rem;
    gap: 0.3rem;
  }
  
  .nav-link::before { display: none; }
  
  .header-minimal {
    padding: 1rem;
    justify-content: center;
    background: linear-gradient(180deg, rgba(11,10,15,0.9) 0%, transparent 100%);
  }
  
  .hero { padding: 8rem 1.5rem 3rem; }
  .section { padding: 4rem 1.5rem; }
  .page-hero { padding: 6rem 1.5rem 3rem; }
  
  .cinema-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .card-featured, .card-classic, .card-adventure, .card-mystery, .card-awards { grid-column: span 1; }
}
/* ENDFILE */

<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Grand Cinema District | Movie Slot Premiere</title>
    <meta name="description" content="Step inside the Grand Cinema District. Experience a premium movie premiere social casino featuring Movie Slot. 100% Free-to-Play.">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="notice-bar">
        Welcome to the Grand Cinema District • Now Showing: Movie Slot Premiere • 100% Free-to-Play Entertainment
    </div>

    <div class="app-wrapper">
        <!-- Floating Cinema Directory Sidebar -->
        <aside class="sidebar">
            <div class="brand">
                <h2>RANKQUEST<br>GROVE</h2>
                <span>The Cinema District</span>
            </div>
            <ul class="nav-menu">
                <li>
                    <a href="index.html" class="nav-link active">
                        <svg viewBox="0 0 24 24"><path d="M12 3l9 9h-3v9h-4v-6h-4v6H6v-9H3l9-9z"/></svg>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="#premiere" class="nav-link">
                        <svg viewBox="0 0 24 24"><path d="M18 4v1h-2V4c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1H6V4c0-.55-.45-1-1-1s-1 .45-1 1v16c0 .55.45 1 1 1s1-.45 1-1v-1h2v1c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-1h2v1c0 .55.45 1 1 1s1-.45 1-1V4c0-.55-.45-1-1-1s-1 .45-1 1zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"/></svg>
                        <span>Movie Slot</span>
                    </a>
                </li>
                <li>
                    <a href="#now-showing" class="nav-link">
                        <svg viewBox="0 0 24 24"><path d="M2 6h20v2H2zm0 4h20v2H2zm0 4h20v2H2zm0 4h20v2H2z"/></svg>
                        <span>Now Showing</span>
                    </a>
                </li>
                <li>
                    <a href="#awards" class="nav-link">
                        <svg viewBox="0 0 24 24"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM7 10.82C5.84 10.4 5 9.3 5 8V7h2v3.82zM19 8c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>
                        <span>Awards</span>
                    </a>
                </li>
                <li>
                    <a href="about.html" class="nav-link">
                        <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
                        <span>About</span>
                    </a>
                </li>
            </ul>
            <div class="sidebar-footer">
                <a href="responsible-gaming.html">Responsible Gaming</a><br>
                18+ Free-to-Play
            </div>
        </aside>

        <!-- Main Experience Content -->
        <main class="main-content">
            
            <header class="header-minimal">
                <a href="#premiere" class="btn btn-primary">Watch the Premiere</a>
            </header>

            <!-- Hero: The Grand Premiere -->
            <section class="hero">
                <div class="hero-grid">
                    <div class="hero-content">
                        <h1 class="hero-headline">Every Spin Deserves A Standing Ovation.</h1>
                        <p class="hero-description">Step inside the Grand Cinema District where every reel unveils another unforgettable scene and every spin takes center stage in our exclusive Movie Slot feature.</p>
                        
                        <div class="hero-actions">
                            <a href="#premiere" class="btn btn-primary">Watch Premiere</a>
                            <a href="#now-showing" class="btn btn-secondary">Explore Cinema</a>
                        </div>
                        
                        <div class="hero-stats">
                            <div class="stat-item">
                                <span class="stat-value">★★★★★</span>
                                <span class="stat-label">Premium Experience</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value">100%</span>
                                <span class="stat-label">Free-to-Play</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-value">18+</span>
                                <span class="stat-label">Adults Only</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Featured Premiere Stage inside Hero for 50/50 split dominance -->
                    <div class="premiere-stage" id="premiere">
                        <div class="stage-corners"></div>
                        <div class="iframe-wrapper">
                            <iframe src="game-movie-slot/" allowfullscreen title="Movie Slot Main Feature Presentation"></iframe>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Now Showing -->
            <section class="section now-showing" id="now-showing">
                <div class="container">
                    <div class="section-header">
                        <h2>Now Showing</h2>
                        <p>Browse our curated selection of cinematic categories inspired by the greatest eras of film.</p>
                    </div>
                    
                    <div class="cinema-grid">
                        <div class="cinema-card card-featured">
                            <img src="https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?auto=format&fit=crop&q=80&w=1200" alt="Cinematic luxury theater seating with dramatic lighting">
                            <div class="cinema-card-content">
                                <h3>Featured Premiere</h3>
                                <p>Main Stage Event</p>
                            </div>
                        </div>
                        <div class="cinema-card card-classic">
                            <img src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&q=80&w=800" alt="Classic vintage film reels arranged elegantly">
                            <div class="cinema-card-content">
                                <h3>Classic Films</h3>
                                <p>Golden Age Reels</p>
                            </div>
                        </div>
                        <div class="cinema-card card-adventure">
                            <img src="https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?auto=format&fit=crop&q=80&w=800" alt="Camera lens focusing in dramatic cinematic lighting">
                            <div class="cinema-card-content">
                                <h3>Adventure</h3>
                                <p>Action Sequences</p>
                            </div>
                        </div>
                        <div class="cinema-card card-mystery">
                            <img src="https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&q=80&w=800" alt="Noir style old projector in dark room">
                            <div class="cinema-card-content">
                                <h3>Mystery</h3>
                                <p>Suspenseful Spins</p>
                            </div>
                        </div>
                        <div class="cinema-card card-awards">
                            <img src="https://images.unsplash.com/photo-1585644155178-5db77f44d9f6?auto=format&fit=crop&q=80&w=800" alt="Golden award statuette illuminated against black background">
                            <div class="cinema-card-content">
                                <h3>Award Winners</h3>
                                <p>Critically Acclaimed</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Behind the Scenes -->
            <section class="section behind-scenes">
                <div class="container">
                    <div class="section-header">
                        <h2>Behind the Scenes</h2>
                        <p>Discover the art, machinery, and elegance that power the Grand Cinema District.</p>
                    </div>

                    <div class="editorial-row">
                        <div class="editorial-image">
                            <img src="https://images.unsplash.com/photo-1505686994434-e3cc5abf1330?auto=format&fit=crop&q=80&w=1000" alt="Vintage film camera on tripod in professional studio setting">
                        </div>
                        <div class="editorial-text">
                            <h3>The Director's Vision</h3>
                            <br>
                            <p>Every frame is meticulously crafted. The mechanics of the Movie Slot operate seamlessly behind the curtain, ensuring a continuous flow of high-definition entertainment and theatrical presentation.</p>
                        </div>
                    </div>

                    <div class="editorial-row">
                        <div class="editorial-image">
                            <img src="https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&q=80&w=1000" alt="Vintage theater seating in elegant art deco cinema hall">
                        </div>
                        <div class="editorial-text">
                            <h3>Art Deco Elegance</h3>
                            <br>
                            <p>Inspired by the grand movie palaces of the 1920s, our digital architecture blends midnight velvet with champagne gold, offering a timeless sanctuary where players can escape into cinematic splendor.</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Awards Gallery -->
            <section class="section awards-gallery" id="awards">
                <div class="container">
                    <div class="section-header">
                        <h2>Awards Gallery</h2>
                        <p>Recognitions of excellence within the Grand Cinema District.</p>
                    </div>

                    <div class="awards-grid">
                        <div class="award-showcase">
                            <svg class="award-icon" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                            <h4>Best Visual Direction</h4>
                            <p class="text-graphite">Annual Cinema Gala</p>
                        </div>
                        <div class="award-showcase">
                            <svg class="award-icon" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 9h-2V7h-2v5H6v2h2v5h2v-5h2v-2z"/></svg>
                            <h4>Outstanding Interface</h4>
                            <p class="text-graphite">Streaming Design Awards</p>
                        </div>
                        <div class="award-showcase">
                            <svg class="award-icon" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                            <h4>Player's Choice</h4>
                            <p class="text-graphite">Social Entertainment Guild</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Reviews -->
            <section class="section reviews">
                <div class="container">
                    <div class="review-grid">
                        <div class="review-card">
                            <p class="review-quote">"A triumph of design. Playing Movie Slot here feels akin to attending a private midnight screening at a luxury film festival."</p>
                            <span class="review-author">Cinema Lifestyle Magazine</span>
                        </div>
                        <div class="review-card">
                            <p class="review-quote">"It abandons the noise of typical arcades for the refined, velvet-draped ambiance of an art deco theater. Truly majestic."</p>
                            <span class="review-author">The Editorial Critic</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Responsible Gaming Brief -->
            <div class="rg-brief">
                <div class="rg-content">
                    <svg class="rg-icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                    <p>This platform provides free-to-play social casino entertainment only. No real money gambling is available. Players must be 18 years of age or older.</p>
                </div>
            </div>

            <!-- Footer -->
            <footer class="footer">
                <div class="container">
                    <div class="footer-grid">
                        <div class="footer-brand">
                            <h3>RANKQUEST GROVE</h3>
                            <p>An exclusive international film festival and luxury cinema district right on your screen. Experience the premier free-to-play social entertainment venue.</p>
                        </div>
                        <div class="footer-links">
                            <h4>Directory</h4>
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html">About the Cinema</a></li>
                                <li><a href="contact.html">Box Office Contact</a></li>
                            </ul>
                        </div>
                        <div class="footer-links">
                            <h4>Legal</h4>
                            <ul>
                                <li><a href="terms-conditions.html">Terms & Conditions</a></li>
                                <li><a href="privacy-policy.html">Privacy Policy</a></li>
                                <li><a href="responsible-gaming.html">Responsible Gaming</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer-bottom">
                        <p>&copy; 2026 Rankquestgrove.store. All rights reserved. Cinematic Social Casino Entertainment.</p>
                    </div>
                </div>
            </footer>
            
        </main>
    </div>
</body>
</html>