:root{
  --bg0:#070a10;
  --bg1:#0b1220;
  --panel:rgba(9,14,22,0.72);
  --text:#d8f2ff;
  --muted:#87a8b8;
  --cyan:#00e5ff;
  --magenta:#ff00aa;
  --violet:#8b5cff;
  --cta:#ff9900;
  --ctaText:#111820;
  --shadow:rgba(0,0,0,0.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--text);
  background:var(--bg0);
}

.bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.32) 0%, transparent 100%),
    radial-gradient(1px 1px at 76% 62%, rgba(0,229,255,.36) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 82%, rgba(255,0,170,.22) 0%, transparent 100%),
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(0,229,255,.06) 31px, rgba(0,229,255,.06) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(0,229,255,.06) 31px, rgba(0,229,255,.06) 32px),
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(139,92,255,.14), transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(255,0,170,.08), transparent 50%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.scanlines{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:.045;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.38) 0px, rgba(0,0,0,.38) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

/* Story layer */
.story{
  position:fixed; inset:0; z-index:50; pointer-events:none; overflow:hidden;
}
.story__inner{position:absolute; inset:0; transform:translateZ(0)}
.story img{
  position:absolute;
  left:50%; top:45%;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  will-change:transform,opacity,filter;
  user-select:none;
  -webkit-user-drag:none;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55));
}
.story__book{ width:min(70vw,520px); max-width:88vw; opacity:1; }
.story__book--open{ opacity:0; }
.story__prince{
  width:min(32vw,260px); max-width:50vw; opacity:0;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(139,92,255,.22));
}
.story__rose{
  width:min(26vw,220px); max-width:44vw; opacity:0;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,0,170,.18));
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .story,.scanlines{display:none}
}

/* Page */
.page{ position:relative; z-index:1; }
.container{ width:min(980px, 92vw); margin:0 auto; padding:0 0 4.5rem; }
.section{ padding:4.25rem 0 0; }
.section--cover{ min-height:100vh; display:flex; align-items:flex-end; padding-top:0; }
.cover{ padding:5rem 0 0; }

.kicker{
  display:inline-block;
  font-size:.9rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid rgba(0,229,255,.22);
  padding:.45rem .7rem;
  background:rgba(0,0,0,.18);
}
.title{
  margin:1rem 0 .35rem;
  font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:400;
  line-height:1.25;
  font-size:clamp(2.1rem, 6.6vw, 4.2rem);
  letter-spacing:.03em;
  color: #efd586;
  text-shadow: 0 0 18px rgba(239,213,134,.35), 3px 3px 0 rgba(92,72,24,.95);
}
.subtitle{
  margin:0 0 1.3rem;
  color:#efd586;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.hint{
  margin:1.1rem 0 0;
  color:rgba(212,240,255,.78);
  font-size:.98rem;
}

.h2{
  margin:0 0 1.1rem;
  font-family:"Press Start 2P", ui-monospace, monospace;
  font-weight:400;
  font-size:clamp(.95rem, 2.5vw, 1.12rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#a4bfc9;
  text-shadow:0 0 14px rgba(164,191,201,.35);
}
.p{
  margin:.0 0 1rem;
  color:rgba(216,242,255,.92);
  line-height:1.6;
  font-size:1.08rem;
}

.cta{ margin-top:1.6rem; }
.btn{
  display:inline-block;
  padding:.95rem 2rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ctaText);
  background:var(--cta);
  border:2px solid #e8890e;
  border-radius:2px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 4px 4px 0 rgba(0,0,0,.35);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:hover{
  background:#ffa31a;
  transform:translate(1px,1px);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4), 3px 3px 0 rgba(0,0,0,.35);
}
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.section:nth-of-type(even){ background:rgba(13,21,32,.55); }
.section--about .container,
.section--trailer .container,
.section--reviews .container{
  padding-top:2.25rem;
  border-top:1px solid rgba(0,229,255,.10);
}

.video{
  width:min(420px, 100%);
  aspect-ratio:9/16;
  margin:1.2rem auto 0;
  border-block:3px solid var(--violet);
  box-shadow: 0 0 30px rgba(139,92,255,.2), inset 0 0 0 1px var(--cyan);
  background:#000;
  position:relative;
  overflow:hidden;
}
.video__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__native{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.video--ref{
  width:min(520px, 100%);
  box-shadow: 0 0 30px rgba(255,0,170,.14), inset 0 0 0 1px rgba(255,0,170,.35);
  border-block-color: rgba(255,0,170,.75);
}

.grid{
  display:grid;
  gap:1.1rem;
  margin-top:1rem;
}
@media (min-width:820px){
  .grid{ grid-template-columns:repeat(3, 1fr); gap:1rem; }
}
.card{
  margin:0;
  padding:1.2rem 1.25rem;
  text-align:left;
  background:rgba(10,14,20,.82);
  border:2px solid rgba(0,229,255,.85);
  box-shadow:4px 4px 0 rgba(0,229,255,.14), inset 0 0 0 1px rgba(255,0,170,.45);
}
.card__p{ margin:0 0 .8rem; color:rgba(216,242,255,.92); font-style:italic; }
.card__f{ color:rgba(135,168,184,.92); font-size:.9rem; }

.endcap{
  margin-top:2.25rem;
  padding:1.25rem 1.2rem;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,0,170,.25);
}
.endcap__line{ color:rgba(216,242,255,.88); }

.footer{ padding:2.5rem 0 3.25rem; border-top:1px solid rgba(139,92,255,.24); }
.footer__inner{ display:flex; flex-direction:column; gap:1rem; align-items:center; padding-bottom:0; }
.footer__links{ display:flex; flex-wrap:wrap; gap:.85rem 1.25rem; justify-content:center; }
.link{ color:rgba(0,229,255,.95); text-decoration:none; border-bottom:1px solid transparent; }
.link:hover{ color:rgba(255,0,170,.95); border-bottom-color:rgba(255,0,170,.5); }
.footer__copy{ color:rgba(135,168,184,.92); }