:root{
  /* Core palette */
  --off-white:#f7f5ef;
  --ink:#0f0f10;
  --muted:#5d6169;
  --stroke:rgba(15,15,16,0.08);

  /* Brand accents */
  --epic-green:#19c37d;              /* “Colour Epic Green” */
  --rose:rgba(255,192,203,0.25);     /* glass rose */
  --beige:rgba(222,211,190,0.30);    /* glass beige */
  --blue:rgba(116,149,255,0.22);     /* glass blue */
  --green:rgba(25,195,125,0.18);     /* glass green */
  --beige-pink:rgba(236,200,190,0.35); /* stream card */

  /* Effects */
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow-1:0 6px 20px rgba(15,15,16,0.08);
  --shadow-2:0 20px 50px rgba(15,15,16,0.12);
  --blur:16px;

  /* Typography */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:18px;
  --fs-lg:22px;
  --fs-xl:28px;
  --fs-2xl:40px;
  --fs-3xl:56px;
}

/* ========================= GLOBAL / RESET ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  background:var(--off-white);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border-radius:calc(var(--radius-lg) - 6px)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid rgba(25,195,125,0.55);outline-offset:3px;border-radius:10px}

.container{width:min(1200px,92vw);margin-inline:auto}

/* Everything centered (layout & headings); inner text blocks keep readable alignment */
section, .site-header, .site-footer{display:flex;justify-content:center}
section > .container, header > .container, footer > .container{text-align:center;width:100%}

/* ========================= HEADER ========================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg, rgba(247,245,239,0.92), rgba(247,245,239,0.65) 60%, rgba(247,245,239,0));
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--stroke);
}
.header-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand-link{font-weight:900;font-style:italic;font-size:var(--fs-lg);padding:10px 14px;border-radius:12px;background:rgba(25,195,125,0.10);box-shadow:var(--shadow-1)}
.main-nav .nav-list{display:flex;gap:22px;list-style:none;margin:0;padding:0;justify-content:center}
.nav-link{position:relative;padding:10px 12px;border-radius:10px}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg,transparent,rgba(25,195,125,0.9),transparent);transform:scaleX(0);transform-origin:center;transition:transform .35s ease}
.nav-link:hover{background:rgba(25,195,125,0.08)}
.nav-link:hover::after{transform:scaleX(1)}

/* ========================= HERO SLIDER ========================= */
.hero{padding:18px 0 12px}
.slider{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-2)}
.slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{position:relative;display:block;scroll-snap-align:center;isolation:isolate}
.slide img{width:100%;aspect-ratio:1926/712;object-fit:cover;filter:saturate(1.05) contrast(1.02)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.18));mix-blend-mode:multiply}
.slide:hover img{transform:scale(1.015);transition:transform .5s cubic-bezier(.2,.7,.2,1)}

.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,0.7);backdrop-filter:blur(6px);padding:8px 14px;border-radius:16px;cursor:pointer;font-size:28px;box-shadow:var(--shadow-1)}
.slide-arrow:hover{background:rgba(255,255,255,0.9)}
.slide-arrow.prev{left:10px}
.slide-arrow.next{right:10px}

.dots{position:absolute;inset:auto 0 10px;display:flex;justify-content:center;gap:8px;pointer-events:none}
.dots button{pointer-events:auto;width:9px;height:9px;border-radius:999px;border:0;background:rgba(0,0,0,0.25)}
.dots button[aria-current="true"]{width:26px;background:rgba(0,0,0,0.55)}

/* ========================= GLASSMORPHISM ========================= */
.glass{
  position:relative;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(var(--blur)) saturate(130%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(130%);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-1);
}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,0.7),rgba(255,255,255,0.15));mix-blend-mode:overlay;pointer-events:none}

/* colored glass overlays */
.glass-rose{background:var(--rose)}
.glass-beige{background:var(--beige)}
.glass-blue{background:var(--blue)}
.glass-green{background:var(--green)}

/* ========================= INTRO ========================= */
.intro{padding:40px 0}
.intro-card{padding:36px 26px}
.headline{font-size:var(--fs-2xl);margin:0 0 10px;font-weight:900}
.tagline{font-size:var(--fs-md);margin:0 auto 18px;max-width:900px;color:var(--muted)}
.included h3{margin:10px 0 8px}
.included ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;justify-items:center}
.included li{padding:8px 14px;border-radius:999px;background:rgba(25,195,125,0.10);border:1px dashed rgba(25,195,125,0.35)}

/* ========================= 2x3 COLOURED POSTERS ========================= */
.mini-posters{padding:24px 0 10px}
.grid-2x3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.poster{min-height:160px;padding:22px;border-radius:var(--radius-lg);display:grid;place-items:center;text-align:center;transition:transform .35s ease, box-shadow .35s ease, filter .35s ease}
.poster:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-2)}
.poster h3{margin:0 0 6px;font-size:var(--fs-lg)}
.poster p{margin:0;color:var(--muted)}

/* Epic Green emphasis */
.epic-green{background:linear-gradient(145deg, rgba(25,195,125,0.18), rgba(25,195,125,0.08));border:1px solid rgba(25,195,125,0.35)}

/* ========================= NEWS PROMO ========================= */
.news-promo{padding:22px 0}
.news-card{display:block;padding:26px;border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-1);transition:transform .35s ease, box-shadow .35s ease}
.news-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.news-content h2{margin:0 0 6px;font-size:var(--fs-2xl);letter-spacing:0.5px}
.news-content p{margin:10px auto 0;max-width:900px;color:var(--muted)}
.news-link{margin-top:12px;font-weight:700}

/* ========================= ORIGINALS (HORIZONTAL SCROLL ROWS) ========================= */
.originals{padding:24px 0}
.row-head{display:flex;justify-content:center;align-items:center;margin-bottom:12px}
.row-head h2{font-size:var(--fs-xl);margin:0}

.h-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(180px,22vw,280px);gap:16px;overflow-x:auto;padding:6px 6px 14px;scroll-snap-type:x proximity;scrollbar-width:none}
.h-scroll::-webkit-scrollbar{height:10px}
.h-scroll::-webkit-scrollbar-thumb{background:rgba(15,15,16,0.2);border-radius:999px}
.h-scroll::-webkit-scrollbar-track{background:rgba(15,15,16,0.06)}

.title-card{scroll-snap-align:center;display:grid;place-items:center;min-height:140px;border-radius:var(--radius-lg);padding:18px;text-align:center;font-weight:800;letter-spacing:0.3px;box-shadow:var(--shadow-1);background:
  radial-gradient(120% 120% at 80% 0%, rgba(25,195,125,0.25), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.30));
  border:1px solid rgba(25,195,125,0.35);
  transition:transform .35s ease, box-shadow .35s ease
}
.title-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-2)}
.title-card .title{font-size:var(--fs-md)}

/* ========================= STREAM FEATURE (SPLIT) ========================= */
.stream-feature{padding:28px 0}
.stream-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:16px;padding:22px;align-items:center}
.stream-left{text-align:center}
.stream-left h2{margin:0 0 6px;font-size:var(--fs-xl)}
.stream-left p{margin:0;color:var(--muted)}
.stream-right{display:flex;justify-content:center}
.stream-cta{display:grid;place-items:center;min-height:140px;width:100%;max-width:500px;border-radius:var(--radius-lg);background:var(--beige-pink);border:1px solid rgba(0,0,0,0.06);box-shadow:var(--shadow-1);transition:transform .35s ease, box-shadow .35s ease}
.stream-cta:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.stream-cta span{font-weight:900;font-size:var(--fs-lg)}
.stream-cta small{opacity:.8}

/* ========================= FOOTER ========================= */
.site-footer{padding:30px 0 40px;margin-top:12px;border-top:1px solid var(--stroke);background:linear-gradient(180deg, rgba(247,245,239,0), rgba(247,245,239,0.7))}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
.footer-col h3{margin:0 0 6px;font-size:var(--fs-lg)}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:8px;justify-items:center}
.footer-links a{padding:6px 10px;border-radius:10px;transition:background .25s ease, transform .25s ease}
.footer-links a:hover{background:rgba(25,195,125,0.08);transform:translateY(-2px)}

.copyright{font-size:var(--fs-sm);color:var(--muted)}

/* ========================= ANIMATIONS / REVEALS ========================= */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .8s ease, transform .8s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 1024px){
  .grid-2x3{grid-template-columns:repeat(2,1fr)}
  .stream-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .header-bar{gap:10px}
  .brand-link{font-size:var(--fs-md)}
  .nav-link{padding:8px 10px}
  .headline{font-size:32px}
  .news-content h2{font-size:32px}
  .footer-cols{grid-template-columns:1fr}
}

/* ========================= REDUCED MOTION ========================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .slide:hover img,.poster:hover,.title-card:hover,.stream-cta:hover{transform:none}
  .reveal{transition:none}
}