/* Free CD Songs of Power (FPS), Imperial Age. Stesso mondo della 7 Free Songs:
   Gravesend Bold/Light + Open Sans, oro sul nero. In apertura il CD a sinistra e il modulo a due passi a destra. */
@font-face { font-family:'Gravesend'; font-weight:700; font-display:swap;
  src:url('fonts/gravesend-sans-bold.ttf') format('truetype'); }
@font-face { font-family:'Gravesend'; font-weight:300; font-display:swap;
  src:url('fonts/gravesend-sans-light.ttf') format('truetype'); }

:root {
  --black:#050505; --coal:#0d0d0e; --paper:#efe9dc; --ink:#e9e4d8; --dim:#8f897d;
  --gold:#d4a53c; --gold-lt:#f1cf78; --red:#b8312f;
  --display:'Gravesend', 'Arial Black', Arial, sans-serif;
  --sans:'Open Sans', Arial, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--black); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
em { font-style:italic; color:#fff; }
a { color:var(--gold-lt); }
.wrap { max-width:1180px; margin:0 auto; padding-inline:24px; }
.label { font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.34em; font-size:13px; color:var(--gold); }
h2 { font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.95; font-size:clamp(34px,4.6vw,58px); margin-top:14px; }

/* ============ apertura ============ */
.hero { position:relative; padding:34px 0 64px; overflow:hidden; isolation:isolate; }
.hero-photo { position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(5,5,5,.72) 0%, rgba(5,5,5,.9) 60%, var(--black) 100%),
    linear-gradient(0deg, var(--black) 2%, rgba(5,5,5,0) 40%),
    url('img/pan.jpg') center 30%/cover no-repeat;
  filter:grayscale(.6) contrast(1.1) brightness(.8); }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.hero-copy { padding-top:8px; }

/* solo la scritta, ritagliata da logo.png (900x289): IMPERIAL x315 y60 585x82, AGE x315 y160 257x82 */
.logo { display:flex; align-items:flex-end; gap:.32em; width:min(300px,62%); }
.logo i { display:block; min-width:0; background:url('logo.png') no-repeat; }
.logo .lg-imp { flex:585; aspect-ratio:585/82; background-size:153.85% auto; background-position:100% 28.99%; }
.logo .lg-age { flex:257; aspect-ratio:257/82; background-size:350.19% auto; background-position:48.99% 77.29%; }

.kicker { margin-top:30px; font-family:var(--display); font-weight:300; letter-spacing:.38em; text-transform:uppercase; font-size:13px; color:var(--gold-lt); }
.hero h1 { font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.9; letter-spacing:-.01em;
  font-size:clamp(54px,7.4vw,104px); margin-top:12px; color:#fff; text-shadow:0 10px 50px rgba(0,0,0,.7); }
.hero h1 .gold { color:var(--gold); text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.08em; }
.hero h1 { font-size:clamp(34px,4.2vw,58px); line-height:1; margin-top:6px; }
.warn { margin-top:16px; font-style:italic; text-transform:uppercase; font-weight:600; font-size:clamp(15px,1.4vw,18px); line-height:1.35; color:#e0584f; }
.sub { margin-top:14px; font-size:clamp(17px,1.6vw,19px); color:#fff; }
.edition { margin-top:12px; text-transform:uppercase; font-size:16px; letter-spacing:.02em; color:var(--gold); }
.edition b { color:var(--gold-lt); }
.cd { width:100%; max-width:560px; margin-top:22px; border-radius:6px; filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.facts { list-style:none; margin-top:22px; display:grid; gap:8px; font-size:16px; color:var(--ink); }
.facts li { padding-left:22px; position:relative; }
.facts li:before { content:''; position:absolute; left:0; top:.62em; width:10px; height:10px; background:var(--gold); transform:rotate(45deg); }
.facts b { color:#fff; }

/* ============ modulo a due passi ============ */
.order { position:sticky; top:20px; background:var(--paper); color:#141414; border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.7); padding:0 0 22px; overflow:hidden; scroll-margin-top:20px; }
.steps { display:grid; grid-template-columns:1fr 1fr; list-style:none; background:#e2dbcb; }
.steps li { display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 8px;
  font-family:var(--display); font-weight:300; text-transform:uppercase; letter-spacing:.16em; font-size:12px; color:#7a7366; }
.steps li span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  border:2px solid currentColor; font-weight:700; letter-spacing:0; font-size:12px; }
.steps li.on { color:#141414; background:var(--paper); }
.steps li.on span { background:var(--gold); border-color:var(--gold); color:#141414; }
.steps li.done span { background:#141414; border-color:#141414; color:var(--paper); }

.step { display:grid; gap:14px; padding:22px 26px 0; }
.step[hidden] { display:none; }
.step-title { font-size:clamp(24px,2.4vw,30px); margin:0 0 4px; line-height:1; color:#141414; }
.step label span { display:block; font-family:var(--display); font-weight:300; letter-spacing:.22em; text-transform:uppercase; font-size:11px; color:#4b463e; }
.step input, .step select { display:block; width:100%; margin-top:6px; font:inherit; font-size:17px; color:#111; background:#fff;
  border:1px solid #cfc6b4; border-radius:5px; padding:11px 12px; }
.step input:focus, .step select:focus { outline:none; border-color:#141414; box-shadow:0 0 0 2px rgba(212,165,60,.5); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.hp { position:absolute; left:-9999px; }
.step button[type=submit] { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:17px; color:#111; background:var(--gold); border:0; border-radius:5px; padding:18px 20px; cursor:pointer;
  transition:background .15s ease, transform .15s ease; }
.step button[type=submit]:hover { background:var(--gold-lt); transform:translateY(-1px); }
.step button[disabled] { opacity:.6; cursor:wait; }
.err { min-height:0; color:var(--red); font-size:15px; font-weight:600; }
.err:empty { display:none; }
.next, .safe { font-size:14px; color:#5d574c; text-align:center; }
.back { justify-self:center; background:none; border:0; font:inherit; font-size:14px; color:#5d574c; cursor:pointer; text-decoration:underline; }

/* extra prima del pagamento: riquadri tratteggiati, oro quando spuntati */
.bumps { display:grid; gap:10px; }
.bump { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border:2px dashed #c9a24a; border-radius:6px;
  background:#fbf6e8; cursor:pointer; font-size:14px; line-height:1.45; color:#3b372f; transition:background .15s ease, border-color .15s ease; }
.bump.on { background:#f6e7bd; border-style:solid; border-color:var(--gold); }
.bump input { width:20px; height:20px; margin:2px 0 0; flex:0 0 auto; accent-color:#141414; padding:0; }
.step .bump span { font-family:var(--sans); font-weight:400; text-transform:none; letter-spacing:0; font-size:14px; color:#3b372f; }
.bump b { display:block; font-size:15px; font-weight:700; color:#141414; }
.bump-img img { width:44px; height:auto; flex:0 0 auto; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.25); }

.summary { border-top:1px solid #cfc6b4; border-bottom:1px solid #cfc6b4; padding:12px 0; display:grid; gap:6px; font-size:16px; }
.summary div { display:flex; justify-content:space-between; gap:12px; }
.summary div[hidden] { display:none; }
.summary s { color:#8a8274; font-weight:400; margin-right:6px; }
.summary .total { font-size:18px; padding-top:6px; border-top:1px dashed #cfc6b4; }
.pay { min-height:58px; }
.pay-ph { font-size:14px; color:#8a8274; }

/* ============ tracce ============ */
.tracks { padding:96px 0; border-top:1px solid #1c1b19; }
.tracks-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.tracks-grid > div p:not(.label) { margin-top:20px; max-width:46ch; }
.tracklist { list-style:none; counter-reset:t; border-top:1px solid #2a2824; }
.tracklist li { counter-increment:t; display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid #2a2824; font-size:17px; color:#fff; }
.tracklist li:before { content:counter(t, decimal-leading-zero); font-family:var(--display); font-weight:300; font-size:13px; color:var(--gold); letter-spacing:.1em; min-width:26px; }
.tracklist small { margin-left:auto; font-size:13px; color:var(--dim); white-space:nowrap; }

/* ============ stampa ============ */
.press { padding:70px 0; background:var(--coal); }
.press { text-align:center; }
.featured { width:min(860px,100%); margin:18px auto 0; }
.press blockquote img { height:44px; width:auto; max-width:180px; object-fit:contain; margin-bottom:14px; }

/* foto dei fan: colonne a mosaico, ogni foto con le sue proporzioni */
.fans { padding:84px 0; border-top:1px solid #1c1b19; text-align:center; }
.fans h2 { font-size:clamp(26px,3.2vw,40px); line-height:1.05; }
.fan-grid { margin-top:36px; columns:4 220px; column-gap:14px; }
.fan-grid img { width:100%; margin-bottom:14px; border-radius:6px; break-inside:avoid; filter:saturate(.95); }
.press h2 { margin-top:56px; color:var(--gold); }
.quotes { margin-top:36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:32px 40px; text-align:left; }
.press blockquote { font-size:17px; line-height:1.55; color:#fff; }

/* ============ perche' gratis + ultima chiamata ============ */
.why { padding:84px 0; }
.why-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:52px; align-items:center; }
.why-grid p { margin-bottom:16px; }
.last { padding:84px 0 96px; text-align:center; background:var(--coal); }
.last .wrap { max-width:860px; }
.last h2 { font-size:clamp(28px,3.6vw,46px); line-height:1.02; }
.last p:not(.label) { margin:20px auto 0; max-width:60ch; }
.last .btn { display:inline-block; margin-top:28px; }
.press cite { display:block; margin-top:12px; font-style:normal; font-family:var(--display); font-weight:300; letter-spacing:.24em; text-transform:uppercase; font-size:12px; color:var(--gold); }

/* ============ la band, su fondo bianco come la foto ============ */
.meet { background:#fff; color:#141414; padding:80px 0; }
.meet-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; }
.meet h2 { color:#141414; }
.meet .label { color:#a37a1f; }
.meet-text p:not(.label) { margin-top:18px; color:#2b2924; }
.stats { list-style:none; margin-top:26px; display:grid; gap:10px; border-top:1px solid #e3ddd0; padding-top:20px; font-size:16px; color:#2b2924; }
.stats b { font-family:var(--display); font-weight:700; font-size:22px; color:#141414; margin-right:8px; }

/* ============ Aor e Jane ============ */
.duo { display:grid; grid-template-columns:1fr 1fr 1.25fr; align-items:stretch; }
.face { position:relative; min-height:540px; overflow:hidden; }
.face img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); }
.face figcaption { position:absolute; left:20px; bottom:18px; }
.face b { display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:30px; line-height:1; color:#fff; }
.face span { font-size:14px; color:var(--ink); }
.duo-text { padding:64px 48px; display:flex; flex-direction:column; justify-content:center; gap:18px; background:var(--black); }
.btn { align-self:flex-start; margin-top:8px; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:16px; color:#111; background:var(--gold); text-decoration:none; border-radius:5px; padding:17px 26px; }
.btn:hover { background:var(--gold-lt); }

/* ============ domande ============ */
.faq { padding:90px 0; border-top:1px solid #1c1b19; }
.faq .wrap { max-width:820px; }
.faq details { border-bottom:1px solid #2a2824; padding:18px 0; }
.faq details:first-of-type { margin-top:18px; border-top:1px solid #2a2824; }
.faq summary { cursor:pointer; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:19px; color:#fff; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+'; float:right; color:var(--gold); }
.faq details[open] summary:after { content:'\2212'; }
.faq details p { margin-top:10px; color:var(--ink); }

footer { padding:36px 24px 46px; text-align:center; font-size:13px; color:var(--dim); border-top:1px solid #1c1b19; }
footer p + p { margin-top:6px; }

/* ============ telefono ============ */
@media (max-width:900px) {
  .hero { padding:22px 0 44px; }
  .hero-grid { grid-template-columns:1fr; gap:26px; }
  /* sul telefono il CD sale subito sotto la scritta rossa */
  .hero-copy { text-align:center; display:flex; flex-direction:column; align-items:center; }
  .hero-copy .sub { order:2; }
  .hero-copy .edition { order:3; }
  .logo { margin:0 auto; width:min(230px,64%); }
  .kicker { margin-top:20px; font-size:12px; }
  .cd { order:1; margin:18px auto 4px; width:100%; max-width:400px; }
  .facts { display:none; }
  .order { position:static; }
  .step { padding:20px 18px 0; }
  .tracks { padding:64px 0; }
  .tracks-grid { grid-template-columns:1fr; gap:28px; }
  .quotes { grid-template-columns:1fr; gap:26px; }
  .why { padding:56px 0; }
  .why-grid { grid-template-columns:1fr; gap:24px; }
  .why-grid img { max-width:320px; margin:0 auto; }
  .last { padding:56px 0 64px; }
  .fans { padding:56px 0; }
  .fan-grid { columns:2; column-gap:10px; }
  .fan-grid img { margin-bottom:10px; }
  .meet { padding:48px 0 56px; }
  .meet-grid { grid-template-columns:1fr; gap:24px; }
  .duo { grid-template-columns:1fr 1fr; }
  .face { min-height:300px; }
  .duo-text { grid-column:1 / -1; padding:44px 24px; }
  .faq { padding:64px 0; }
}
@media (max-width:420px) {
  .row { grid-template-columns:1fr; }
  .tracklist small { display:none; }
}

/* ============ upsell e grazie ============ */
.up .up-wrap { max-width:980px; padding-top:44px; padding-bottom:70px; }
.up-ok { display:inline-block; margin-bottom:26px; padding:8px 14px; border-radius:5px; background:#14301c; color:#9fe0b0; font-size:15px; font-weight:600; }
.up-title { font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:1.02; font-size:clamp(30px,4vw,50px); margin-top:12px; color:#fff; }
.up-title .gold { color:var(--gold); }
.up-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin-top:32px; }
.up-cd { width:100%; max-width:440px; filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.up-price { font-size:20px; }
.up-price s { color:var(--dim); }
.up-price b { font-family:var(--display); font-size:44px; color:#fff; margin:0 8px; }
.up-off { background:var(--red); color:#fff; font-weight:700; font-size:14px; padding:4px 9px; border-radius:4px; }
.up-yes { display:block; width:100%; margin-top:24px; border:0; cursor:pointer; font-size:17px; padding:20px; text-align:center; }
.up-yes[disabled] { opacity:.6; cursor:wait; }
.up-note { margin-top:10px; font-size:14px; color:var(--dim); text-align:center; }
.up-no { display:block; margin-top:18px; text-align:center; font-size:14px; color:var(--dim); }
.up .err { margin-top:12px; text-align:center; color:#ff8a80; }
.up-letter { margin-top:60px; padding-top:36px; border-top:1px solid #2a2824; max-width:720px; }
.up-letter p:not(.label) { margin-top:16px; }
.sign { margin-top:22px; font-family:var(--display); font-weight:700; text-transform:uppercase; color:var(--gold); }
.ty p:not(.label) { margin-top:18px; max-width:62ch; }
.ty-total { font-size:20px; color:#fff; font-weight:600; }
.ty-cd { width:min(420px,100%); margin-top:30px; }
@media (max-width:900px) {
  .up-grid { grid-template-columns:1fr; gap:22px; }
  .up-cd { max-width:320px; margin:0 auto; }
  .up .up-wrap { padding-top:26px; }
}