:root{
  --bg:#070f1b; --panel:rgba(13,26,44,.55); --gold:#f4b740; --gold-2:#ffd479;
  --ink:#f6f8fb; --muted:#9fb0c2; --line:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
}
img,svg{vertical-align:middle; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 26px}

/* ---- top bar ---- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:21px}
.brand .y{color:var(--gold)}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  border:1px solid rgba(244,183,64,.5); color:var(--gold); font-weight:600; font-size:14px;
}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(7,15,27,.62) 0%, rgba(7,15,27,.5) 45%, rgba(7,15,27,.96) 100%),
    url("/assets/cover.jpg");
  background-size:cover; background-position:center;
}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center; padding:18px 0 60px}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.06); font-size:11.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:#e4ebf2; font-weight:600;
}
h1{font-size:clamp(40px,6.4vw,74px); line-height:1.02; margin:20px 0 0; font-weight:800; letter-spacing:-1.5px}
h1 .gold{
  display:block; color:var(--gold);
  background:linear-gradient(92deg,var(--gold),var(--gold-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lead{margin:20px 0 0; font-size:clamp(16px,1.6vw,19px); color:var(--muted); max-width:30em}
.lead b{color:var(--ink); font-weight:600}

.soon{margin-top:26px; display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(244,183,64,.55); animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,183,64,.5)}70%{box-shadow:0 0 0 13px rgba(244,183,64,0)}100%{box-shadow:0 0 0 0 rgba(244,183,64,0)}}

.stores{margin-top:24px; display:flex; gap:13px; flex-wrap:wrap}
.store{display:inline-flex; align-items:center; gap:11px; padding:11px 18px; border-radius:14px;
  border:1px solid var(--line); background:rgba(0,0,0,.5); min-width:186px}
.store .s1{font-size:11px; color:#c2ccd8; line-height:1.15}
.store .s2{font-size:16px; font-weight:700; line-height:1.2}

.shots{position:relative; justify-self:center}
.shots::before{content:""; position:absolute; inset:6% 8%; z-index:0;
  background:radial-gradient(closest-side, rgba(244,183,64,.26), rgba(244,183,64,0) 72%); filter:blur(12px)}
.shots img{position:relative; z-index:1; width:100%; max-width:560px; height:auto; display:block;
  filter:drop-shadow(0 36px 74px rgba(0,0,0,.65))}

/* ---- feature strip ---- */
.features{background:#0a1424}
.feat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; padding:34px 0}
.feat{display:flex; flex-direction:column; gap:8px}
.feat .ic{width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(244,183,64,.12); border:1px solid rgba(244,183,64,.28)}
.feat h3{margin:6px 0 0; font-size:15.5px; font-weight:700}
.feat p{margin:2px 0 0; font-size:13.5px; color:var(--muted); line-height:1.45}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:22px 0; background:#070f1b}
.foot{display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between; color:var(--muted); font-size:13.5px}
.foot nav{display:flex; gap:20px; flex-wrap:wrap}
.foot a:hover{color:#fff}
/* Anti-harvest: email scritta rovesciata nell'HTML e raddrizzata via CSS (no JS, CSP-safe). */
.eml{unicode-bidi:bidi-override; direction:rtl; white-space:nowrap}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:10px; text-align:center; padding-bottom:42px}
  .badge{margin:0 auto}
  .lead{margin-left:auto; margin-right:auto}
  .soon,.stores{justify-content:center}
  .shots{order:-1; margin-bottom:8px}
  .shots img{max-width:330px}
  .feat-grid{grid-template-columns:1fr 1fr; gap:20px}
  .feat{align-items:center; text-align:center}
  .nav .pill{display:none}
  .foot{justify-content:center; text-align:center}
}
@media (max-width:480px){
  .feat-grid{grid-template-columns:1fr}
}