/* Cini web — one stylesheet for the landing, privacy, and terms pages. */
:root{
  --marquee:#E8B64C; --velvet:#A8352A; --ink:#F5EEDF; --bg:#131011;
  --surface:#1D1719; --surface2:#262023; --gray:#A69C91; --hair:rgba(255,255,255,.12);
  --green:#2FBF71;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--marquee);}
.serif{font-family:"DM Serif Display",Georgia,serif; font-weight:400;}

/* Shared header / footer */
.nav{display:flex; align-items:center; justify-content:space-between;
  max-width:960px; margin:0 auto; padding:22px 24px;}
.nav .wordmark{font-family:"Limelight",Georgia,serif; font-size:30px;
  color:var(--marquee); text-decoration:none;}
.nav nav a{color:var(--gray); text-decoration:none; font-size:14px; margin-left:22px;}
.nav nav a:hover{color:var(--ink);}
footer{border-top:1px solid var(--hair); margin-top:80px;}
.foot{max-width:960px; margin:0 auto; padding:28px 24px; display:flex;
  flex-wrap:wrap; gap:10px 26px; align-items:center; font-size:13px; color:var(--gray);}
.foot a{color:var(--gray); text-decoration:none;}
.foot a:hover{color:var(--ink);}
.foot .tmdb{margin-left:auto; font-size:11px;}

/* House-lights-down ambiance: a warm marquee glow behind the hero. */
body{position:relative;}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 45% at 78% 12%, rgba(232,182,76,.14), transparent 70%),
    radial-gradient(55% 45% at 12% 4%, rgba(168,53,42,.16), transparent 70%);}

/* Landing — hero */
.hero{max-width:1040px; margin:0 auto; padding:64px 24px 60px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero-copy .tagline{margin-top:0;}
.tagline{font-size:11px; letter-spacing:.4em; color:var(--marquee); font-weight:700;
  opacity:.85;}
.hero h1{font-size:clamp(34px,5vw,56px); margin:16px 0 18px; line-height:1.05;}
.hero p.lede{color:var(--gray); font-size:17px; max-width:520px; margin:0 0 26px;}
.hero p.lede b{color:var(--ink);}
.dots{display:flex; gap:30px; margin:26px 0 6px;}
.dots>div{text-align:center;}
.dots .d{width:46px; height:46px; border-radius:50%; margin:0 auto;
  box-shadow:0 6px 18px rgba(0,0,0,.35);}
.dots span{display:block; font-size:12px; color:var(--gray); margin-top:9px;}
.cta-row{margin:30px 0 0;}
.cta{display:inline-block; background:var(--velvet); color:#fff; text-decoration:none;
  font-weight:600; font-size:15px; padding:14px 32px; border-radius:999px;
  box-shadow:0 10px 26px rgba(168,53,42,.35); transition:transform .15s, box-shadow .15s;}
.cta:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(168,53,42,.45);}
.cta.ghost{background:none; border:1px solid var(--hair); color:var(--ink);
  box-shadow:none; margin-left:10px;}
.cta-note{font-size:12.5px; color:var(--gray); margin-top:16px;}

/* Phone mockup */
.hero-device{display:flex; justify-content:center;}
.device{width:min(288px, calc(100vw - 64px)); border-radius:42px; padding:11px;
  background:linear-gradient(160deg,#2A2326,#15110F);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4) inset;}
.screen{background:var(--bg); border-radius:32px; padding:18px 14px 20px; overflow:hidden;
  border:1px solid var(--hair);}
.app-bar{font-family:"Limelight",Georgia,serif; color:var(--marquee); font-size:17px;
  text-align:center; padding-bottom:14px;}
.compare{background:var(--surface); border:1px solid var(--hair); border-radius:16px;
  padding:14px 12px 16px;}
.compare-q{font-size:13px; font-weight:600; text-align:center; margin:0 0 12px; color:var(--ink);}
.compare-row{display:flex; align-items:center; gap:10px;}
.poster{flex:1; aspect-ratio:2/3; border-radius:10px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--p1),var(--p2)); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 18px rgba(0,0,0,.4);}
.poster span{position:absolute; left:7px; right:7px; bottom:7px; font-size:11px; font-weight:700;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7); line-height:1.15;}
.vs{font-family:"DM Serif Display",Georgia,serif; font-size:18px; color:var(--gray); font-style:italic;}
.rank-label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gray);
  margin:18px 4px 8px;}
.rank-list{display:flex; flex-direction:column; gap:8px;}
.rank-row{display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--hair); border-radius:12px; padding:8px 10px;}
.rk{font-family:"DM Serif Display",Georgia,serif; font-size:15px; color:var(--marquee); width:14px;}
.mini{width:26px; height:38px; border-radius:5px; flex:none;
  background:linear-gradient(150deg,var(--p1),var(--p2));}
.rt{flex:1; min-width:0; line-height:1.2;}
.rt b{display:block; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rt i{font-size:11px; color:var(--gray); font-style:normal;}
.badge{font-size:13px; font-weight:800; padding:4px 8px; border-radius:9px; color:#0E0B0C;}
.badge.hi{background:var(--green);} .badge.mid{background:var(--marquee);} .badge.lo{background:#D96B6B;}

/* Sections */
.section{max-width:960px; margin:0 auto; padding:44px 24px;}
.section h2{font-family:"Limelight",Georgia,serif; font-weight:400;
  font-size:32px; margin:0 0 6px;}
.section .sub{color:var(--gray); margin:0 0 26px; max-width:560px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;}
.card{background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:22px;
  transition:transform .15s, border-color .15s, background .15s;}
.card:hover{transform:translateY(-3px); border-color:rgba(232,182,76,.4); background:var(--surface2);}
.card .ico{font-size:22px;}
.card h3{font-size:16px; margin:10px 0 6px;}
.card p{font-size:14px; color:var(--gray); margin:0;}
.steps{counter-reset:step; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.step{background:var(--surface); border:1px solid var(--hair); border-radius:16px; padding:22px;}
.step::before{counter-increment:step; content:counter(step);
  font-family:"DM Serif Display",Georgia,serif; font-size:30px; color:var(--marquee); display:block;}
.step h3{font-size:16px; margin:8px 0 6px;}
.step p{font-size:14px; color:var(--gray); margin:0;}

/* Closing call-to-action band */
.closer{max-width:760px; margin:40px auto 0; padding:56px 24px; text-align:center;
  border-top:1px solid var(--hair);}
.closer h2{font-size:clamp(26px,4vw,38px); margin:0 auto 12px; max-width:560px; line-height:1.15;}
.closer p{color:var(--gray); font-size:16px; max-width:460px; margin:0 auto 28px;}
.closer .ticket{font-size:11px; letter-spacing:.34em; color:var(--marquee); opacity:.7; margin:26px 0 0;}

/* Responsive: stack the hero on narrow screens */
@media (max-width:760px){
  .hero{grid-template-columns:1fr; gap:36px; padding:44px 24px 48px; text-align:center;}
  .hero p.lede{margin-left:auto; margin-right:auto;}
  .dots{justify-content:center;}
  .hero-device{order:2;}
  /* Bigger touch targets for thumbs (vertical padding only, so the
     header/footer never widen or wrap). */
  .nav nav a{display:inline-block; padding:11px 0;}
  .foot{gap:4px 22px;}
  .foot a{display:inline-block; padding:9px 0;}
  .closer{padding:44px 22px;}
}

/* Legal pages */
.legal{max-width:680px; margin:0 auto; padding:24px 24px 60px;}
.legal h1{font-family:"DM Serif Display",Georgia,serif; font-weight:400;
  font-size:40px; color:var(--marquee); margin:18px 0 2px;}
.legal .updated{color:var(--gray); font-size:14px; margin-bottom:28px;}
.legal h2{font-family:"DM Serif Display",Georgia,serif; font-weight:400;
  font-size:24px; margin-top:36px; color:var(--ink);}
.legal p, .legal li{font-size:15px; color:#D8D0C4;}
.legal b{color:var(--ink);}