:root{
  --bg: #0a1810;
  --bg-deep: #06120b;
  --panel: #132118;
  --panel-raised: #16281d;
  --border: #2a4a38;
  --gold: #d4af37;
  --gold-bright: #e8c250;
  --text: #e8f0ea;
  --muted: #8fb39f;
  --muted-2: #5c7a6a;
  --green: #22c55e;
  --red: #ff5c5c;
  --blue: #4fb8ff;
}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 82% -6%, rgba(212,175,55,0.08), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(34,197,94,0.05), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:"Inter", "Segoe UI", sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Cinzel","Segoe UI",serif; font-weight:700; letter-spacing:0.3px; margin:0;}
.num{font-family:"Space Grotesk","Inter",sans-serif;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
::selection{background:var(--gold); color:#132118;}

/* ---------- nav ---------- */
nav{
  background:rgba(10,24,16,0.86);
}
.nav-row{max-width:1120px;}
.brand{letter-spacing:0.5px;}
.nav-links{display:flex; gap:32px; font-size:14px; color:var(--muted);}
.nav-links a{text-decoration:none; transition:color .15s;}
.nav-links a:hover{color:var(--text);}
.lang-switch{padding:8px 13px; margin-right:14px; transition:border-color .15s, color .15s;}

/* ---------- hero ---------- */
.hero{padding:96px 0 72px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--gold); font-size:12.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  border:1px solid rgba(212,175,55,0.35); background:rgba(212,175,55,0.08);
  padding:6px 14px; border-radius:99px; margin-bottom:22px;
}
.hero h1{font-size:47px; line-height:1.14; letter-spacing:0.2px;}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero p.lead{color:var(--muted); font-size:17px; max-width:480px; margin:22px 0 32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-note{margin-top:16px; font-size:13px; color:var(--muted-2);}

/* signature card: the recommended-play banner, same motif as in-app */
.rec-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-left:6px solid var(--gold);
  border-radius:4px 14px 14px 4px;
  padding:22px 26px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.rec-card .rec-label{font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); font-weight:700;}
.rec-card .rec-hand{display:flex; gap:8px; margin:12px 0 16px;}
.card-chip{
  width:44px; height:60px; border-radius:6px; background:#f5f2e8; color:#1a1d29;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:18px; box-shadow:0 4px 10px rgba(0,0,0,0.35);
}
.card-chip.red{color:#d1352b;}
.rec-verdict{font-size:21px; font-weight:800; font-family:"Inter",sans-serif;}
.rec-verdict .pct{color:var(--gold-bright); font-family:"Space Grotesk",sans-serif;}
.rec-why{color:var(--muted); font-size:14px; margin-top:8px;}
.rec-bar{display:flex; height:10px; border-radius:6px; overflow:hidden; margin-top:18px; border:1px solid rgba(0,0,0,0.3);}
.rec-bar span{display:block; height:100%;}

.hero-visual{position:relative;}
.hero-visual .float-tag{
  position:absolute; background:var(--panel-raised); border:1px solid var(--border);
  border-radius:8px; padding:8px 12px; font-size:12px; color:var(--muted); box-shadow:0 12px 24px rgba(0,0,0,0.4);
}
.float-tag.t1{top:-18px; right:12px;}
.float-tag.t2{bottom:-16px; left:-18px;}
.float-tag b{color:var(--green); font-family:"Space Grotesk",sans-serif;}

/* ---------- section shell ---------- */
section{padding:88px 0;}
.section-head{max-width:620px; margin:0 auto 52px; text-align:center;}
.section-head .eyebrow{display:inline-flex;}
.section-head h2{font-size:32px; margin-top:14px;}
.section-head p{color:var(--muted); font-size:15.5px; margin-top:14px;}
.divider{height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent); max-width:1120px; margin:0 auto;}

/* ---------- value props ---------- */
.props{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.prop-card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:28px 24px;}
.prop-card .glyph{font-size:22px; color:var(--gold); margin-bottom:14px;}
.prop-card h3{font-family:"Inter",sans-serif; font-size:16.5px; font-weight:700;}
.prop-card p{color:var(--muted); font-size:14px; margin-top:8px;}

/* ---------- how it works ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:step;}
.step{position:relative; padding-top:8px;}
.step .step-num{
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:13px; color:var(--gold);
  border:1px solid rgba(212,175,55,0.4); width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.step h3{font-family:"Inter",sans-serif; font-size:17px;}
.step p{color:var(--muted); font-size:14px; margin-top:8px;}
.step-mock{
  margin-top:18px; background:var(--panel); border:1px solid var(--border); border-radius:10px;
  height:150px; padding:14px; overflow:hidden;
}
/* mini mockups */
.mock-seats{position:relative; height:100%;}
.mock-felt{position:absolute; inset:14% 18%; border:3px solid var(--gold); border-radius:60px; background:var(--bg-deep);}
.mock-seat{position:absolute; width:34px; height:22px; background:var(--panel-raised); border:1.5px solid var(--gold); border-radius:5px; font-size:8px; display:flex; align-items:center; justify-content:center; color:var(--text); font-weight:700;}
.mock-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:3px; height:100%;}
.mock-grid div{border-radius:2px;}
.mock-verdict{display:flex; flex-direction:column; justify-content:center; height:100%; gap:10px;}
.mock-verdict .line{height:10px; border-radius:4px; background:var(--border);}
.mock-verdict .line.gold{background:var(--gold); width:60%;}
.mock-verdict .line.w80{width:80%;} .mock-verdict .line.w40{width:40%;}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:1.15fr 1fr; gap:24px;}
.gallery-main, .gallery-side .shot{background:var(--panel); border:1px solid var(--border); border-radius:14px; overflow:hidden;}
.shot-head{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--bg-deep);}
.shot-head .dot{width:8px; height:8px; border-radius:50%; background:var(--border);}
.shot-head span{font-size:11px; color:var(--muted-2); margin-left:6px;}
.gallery-side{display:flex; flex-direction:column; gap:24px;}
.shot-body{overflow:hidden;}
.shot-body img{display:block; width:100%; height:100%; object-fit:cover;}
.gallery-main .shot-body{height:460px;}
.gallery-main .shot-body img{object-position:top;}
.gallery-side .shot-body{height:200px;}
.gallery-side .shot-body img{object-position:top;}


/* ---------- pricing ---------- */
.pricing{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch;}
.plan{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:34px 30px; display:flex; flex-direction:column;}
.plan.featured{border-color:var(--gold); border-left:6px solid var(--gold); position:relative; box-shadow:0 30px 60px -24px rgba(212,175,55,0.25);}
.plan .badge{position:absolute; top:-13px; right:28px; background:var(--gold); color:#14231a; font-size:11px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase; padding:5px 12px; border-radius:99px;}
.plan .plan-name{font-size:13px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); font-weight:700;}
.plan .plan-tag{color:var(--muted); font-size:14px; margin-top:8px; min-height:42px;}
.plan .price{font-family:"Space Grotesk",sans-serif; font-size:44px; font-weight:700; margin-top:22px; display:flex; align-items:baseline; gap:8px;}
.plan .price span{font-size:15px; color:var(--muted); font-weight:500; font-family:"Inter",sans-serif;}
.plan ul{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:13px; flex-grow:1;}
.plan li{display:flex; gap:10px; font-size:14.5px; color:var(--text);}
.plan li.locked{color:var(--muted-2);}
.plan li .ico{color:var(--green); font-weight:700;}
.plan li.locked .ico{color:var(--muted-2);}
.plan .btn{margin-top:28px; width:100%;}
.price-note{text-align:center; color:var(--muted-2); font-size:12.5px; margin-top:20px;}

/* ---------- audience ---------- */
.audience{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.aud-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:30px;}
.aud-card .tag{font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold); font-weight:700;}
.aud-card h3{font-family:"Inter",sans-serif; font-size:19px; margin-top:10px;}
.aud-card p{color:var(--muted); font-size:14.5px; margin-top:10px;}
.quote{margin-top:20px; padding-top:18px; border-top:1px solid var(--border); font-size:13.5px; color:var(--muted); font-style:normal;}
.quote b{color:var(--text);}

/* ---------- faq ---------- */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:14px; overflow:hidden; border:1px solid var(--border);}
.faq-item{background:var(--panel); padding:22px 26px;}
.faq-item h3{font-family:"Inter",sans-serif; font-size:15.5px; font-weight:700; margin-bottom:8px;}
.faq-item p{color:var(--muted); font-size:14px; margin:0;}

/* ---------- final cta + footer ---------- */
.final-cta{text-align:center; padding:100px 0 60px;}
.final-cta h2{font-size:34px; max-width:600px; margin:0 auto;}
.final-cta p{color:var(--muted); margin:16px auto 30px; max-width:460px;}
footer{border-top:1px solid var(--border); padding:36px 0; }
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .brand{font-size:15px;}
footer .fine{color:var(--muted-2); font-size:12.5px;}

@media (max-width:860px){
  .hero-grid, .props, .steps, .gallery, .pricing, .audience{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .nav-links{display:none;}
}

.footer-links{display:flex; gap:18px; font-size:12.5px; color:var(--muted-2);}
.footer-links a{color:var(--muted-2); text-decoration:none;}
.footer-links a:hover{color:var(--muted);}
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200;
  max-width:640px; margin:0 auto;
  background:var(--panel-raised); border:1px solid var(--border); border-left:4px solid var(--gold);
  border-radius:12px; padding:18px 22px; box-shadow:0 20px 50px rgba(0,0,0,0.5);
  display:none; flex-wrap:wrap; align-items:center; gap:14px;
}
.cookie-banner.show{display:flex;}
.cookie-banner p{margin:0; font-size:13px; color:var(--muted); flex:1; min-width:220px;}
.cookie-banner .btn{font-size:12.5px; padding:9px 16px;}