:root{
  --primary:#00E676;
  --accent:#FFC400;
  --bg:#0B0F1A;
  --card:#141B2E;
  --text:#F5F7FA;
  --muted:#9AA4B8;
  --button-text:#03170C;
  --primary-shadow:rgba(0,230,118,.35);
  --hero-bg-mobile:none;
  --hero-bg-desktop:none;
  --hero-overlay-1:rgba(11,15,26,.55);
  --hero-overlay-2:rgba(11,15,26,.92);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* Full-page background photo (mobile/desktop) — fixed behind all
   content so it covers the whole viewport regardless of page
   length, with a dark overlay (derived from the brand background
   color) for text legibility. Falls back to solid --bg when no
   image is configured. */
body::before{
  content:"";
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:-1;
  background-image:linear-gradient(180deg,var(--hero-overlay-1),var(--hero-overlay-2)),var(--hero-bg-mobile);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.container{max-width:640px;margin:0 auto;padding:0 20px}

/* Header */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  position:sticky;top:0;z-index:50;
  background:rgba(11,15,26,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.logo{display:flex;align-items:center;min-height:32px}
.logo img{height:32px;width:auto;display:block}
.logo span{font-weight:800;font-size:20px;letter-spacing:.5px;color:var(--primary)}

/* Hero */
.hero{padding:28px 20px 8px}
.hero-inner{display:flex;flex-direction:column}
.hero-visual{order:-1;display:flex;justify-content:center;margin-bottom:8px}
.hero-visual img{max-height:220px;width:auto;object-fit:contain}
.hero-text{text-align:center}
.badge{
  display:inline-block;background:var(--accent);color:#1a1400;
  font-weight:700;font-size:12px;letter-spacing:.5px;
  padding:6px 14px;border-radius:999px;margin-bottom:16px;
  text-transform:uppercase;
}
.headline{font-size:28px;font-weight:800;line-height:1.2;margin-bottom:12px}
.subheadline{color:var(--muted);font-size:16px;margin-bottom:20px}
.trustpoints{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:8px}
.trustpoint{
  font-size:12px;color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;border-radius:8px;
}

/* CTA buttons */
.cta-primary,.cta-secondary{
  display:block;width:100%;text-align:center;
  font-weight:800;font-size:18px;
  padding:16px 20px;border-radius:14px;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
  border:none;cursor:pointer;
}
.cta-primary{
  background:var(--primary);color:var(--button-text);
  box-shadow:0 8px 24px var(--primary-shadow);
  margin-bottom:12px;
}
.cta-secondary{
  background:transparent;color:var(--text);
  border:2px solid rgba(255,255,255,.18);
}
.cta-primary:active,.cta-secondary:active{transform:scale(.97)}
.cta-group{padding:8px 20px 8px}

/* Promo ticket — pure CSS, no raster asset, brand-agnostic */
.promo{padding:20px 20px 12px;text-align:center}
.promo-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.5px;
  color:var(--muted);text-transform:uppercase;margin-bottom:10px;
}
.promo-ticket{
  position:relative;
  max-width:420px;margin:0 auto 16px;
  background:var(--card);
  border:2px dashed rgba(255,255,255,.25);
  border-radius:14px;
  padding:22px 28px;
  overflow:visible;
}
.promo-ticket::before,.promo-ticket::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:22px;height:22px;background:var(--bg);border-radius:50%;
}
.promo-ticket::before{left:-11px}
.promo-ticket::after{right:-11px}
.ticket-label{
  font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:13px;letter-spacing:.5px;color:var(--muted);
  margin-bottom:8px;
}
.code-overlay{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(20px,7vw,34px);
}
#code-main{color:#fff}

/* Offer text */
.offer-desc{color:var(--text);margin-bottom:8px;font-size:15px}
.offer-terms{color:var(--muted);font-size:12px}

/* Features */
.features{padding:16px 20px 24px;display:grid;gap:14px}
.feature{
  background:var(--card);border-radius:14px;padding:16px;
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid rgba(255,255,255,.06);
}
.feature-icon{
  width:32px;height:32px;flex-shrink:0;
  border-radius:50%;background:var(--accent);color:#1a1400;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;
}
.feature-title{font-weight:700;margin-bottom:2px;font-size:15px}
.feature-text{color:var(--muted);font-size:13px}

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:rgba(11,15,26,.95);
  backdrop-filter:blur(8px);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  display:none;
}
.sticky-cta .cta-primary{margin-bottom:0}
@media (max-width:640px){
  .sticky-cta{display:block}
  body{padding-bottom:84px}
}

/* Legal footer — ΕΕΕΠ compliance badge, desktop/mobile variants */
.legal{
  padding:24px 20px 40px;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:16px;
  text-align:center;
}
.legal-note{color:#fff;font-size:13px;margin-bottom:12px}
.eeep-badge{display:flex;justify-content:center}
.eeep-desktop{display:none;width:100%;height:auto}
.eeep-mobile{display:block;width:100%;max-width:220px;height:auto;margin:0 auto}

@media (min-width:641px){
  body::before{background-image:linear-gradient(180deg,var(--hero-overlay-1),var(--hero-overlay-2)),var(--hero-bg-desktop)}
  .headline{font-size:36px}
  .hero-inner{flex-direction:row;align-items:center;gap:32px;text-align:left}
  .hero-visual{order:2;margin-bottom:0;flex:0 0 280px}
  .hero-visual img{max-height:320px}
  .hero-text{order:1;text-align:left;flex:1}
  .trustpoints{justify-content:flex-start}
  .cta-group{max-width:420px;margin:0 auto}
  .features{max-width:640px;margin:0 auto}
  .eeep-desktop{display:block}
  .eeep-mobile{display:none}
}

/* Demo watermark — visual/legal deterrent, not a security control */
.demo-watermark{
  position:fixed;top:8px;right:8px;z-index:100;
  background:rgba(0,0,0,.6);color:#fff;
  font-size:10px;line-height:1.3;
  padding:5px 9px;border-radius:6px;
  letter-spacing:.2px;
  pointer-events:none;
  max-width:180px;text-align:right;
}