/* Landing America's Cup Napoli — Italiamare. Mobile first.
   I token vengono da ../styles.css (design system Italiamare). */

body{background:var(--surface-page);padding-bottom:84px}
@media(min-width:768px){body{padding-bottom:0}}
img{max-width:100%;display:block}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:760px}
.mt-24{margin-top:var(--sp-5)}.mt-32{margin-top:var(--sp-6)}.mt-40{margin-top:var(--sp-7)}

/* --- Tipografia di pagina --- */
.eyebrow{margin:0;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--azzurro)}
.eyebrow--light{color:rgba(255,255,255,.85)}
.h2{margin:var(--sp-3) 0 0;font-size:var(--fs-h2);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-heading);color:var(--text-title)}
.h2--light{color:var(--bianco)}
.h3{margin:var(--sp-2) 0 0;font-size:var(--fs-h3);font-weight:var(--fw-extrabold);color:var(--text-title)}
.rule{width:56px;height:var(--bw-rule);background:var(--azzurro);margin-top:var(--sp-4)}
.rule--light{background:var(--bianco)}
.lead{margin:0;font-size:var(--fs-body-lg);max-width:640px}
.ico{display:inline-block;flex:0 0 auto;width:20px;height:20px;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* --- Fasce --- */
.band{padding:var(--sp-8) 0}
@media(min-width:768px){.band{padding:var(--sp-10) 0}}
.band--white{background:var(--surface-page)}
.band--light{background:var(--surface-subtle)}
.band--dark{background:var(--surface-band);color:var(--text-on-dark)}

/* --- Topbar --- */
.topbar{background:var(--bianco);box-shadow:var(--shadow-header);position:relative;z-index:20}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:68px;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.topbar__logo img{height:34px;width:auto}
@media(min-width:768px){.topbar__row{min-height:84px}.topbar__logo img{height:46px}}
.topbar__phone{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--blu);text-decoration:none;border:var(--bw-medium) solid var(--azzurro);border-radius:var(--radius-md);padding:10px 16px;transition:var(--transition-ui)}
.topbar__phone:hover{background:var(--azzurro);color:var(--bianco);text-decoration:none}
.ico--phone{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/phone.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/phone.svg);width:16px;height:16px}

/* --- Hero --- */
.hero{position:relative;display:grid;align-items:end;min-height:520px;background:var(--blu)}
@media(min-width:768px){.hero{min-height:640px;align-items:center}}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,60,97,.35) 0%,rgba(1,60,97,.55) 45%,rgba(1,60,97,.88) 100%)}
@media(min-width:768px){.hero__scrim{background:linear-gradient(90deg,rgba(1,60,97,.9) 0%,rgba(1,60,97,.72) 45%,rgba(1,60,97,.25) 100%)}}
.hero__body{position:relative;padding-top:var(--sp-9);padding-bottom:var(--sp-9);max-width:var(--container)}
    .hero__body h1 {
        margin: var(--sp-4) 0 0;
        max-width: 22ch;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(2rem,7vw,4rem);
        font-weight: var(--fw-extrabold);
        line-height: var(--lh-tight);
        letter-spacing: var(--ls-display);
        color: var(--bianco)
    }
.hero__sub{margin:var(--sp-5) 0 0;max-width:46ch;font-size:var(--fs-body-lg);color:rgba(255,255,255,.9)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-7)}

/* --- Pulsanti --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;padding:12px 24px;font-family:var(--font-core);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;border:var(--bw-medium) solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-ui),transform var(--dur-fast) var(--ease-standard)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:56px;padding:16px 32px;font-size:var(--fs-body)}
.btn--block{width:100%}
.btn--primary{background:var(--cta-bg);border-color:var(--cta-bg);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--cta-bg-hover);border-color:var(--cta-bg-hover);color:var(--bianco)}
.btn--secondary{background:transparent;border-color:var(--blu);color:var(--blu)}
.btn--secondary:hover{background:var(--blu);color:var(--bianco)}
.btn--onDarkOutline{background:transparent;border-color:rgba(255,255,255,.7);color:var(--bianco)}
.btn--onDarkOutline:hover{background:rgba(255,255,255,.14);border-color:var(--bianco);color:var(--bianco)}
.btn--wa{background:#1fa855;border-color:#1fa855;color:var(--bianco)}
.btn--wa:hover{background:#188443;border-color:#188443;color:var(--bianco)}
.ico--wa{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/message-circle.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/message-circle.svg);width:20px;height:20px}

/* --- Griglie e card --- */
.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.card{background:var(--surface-card);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--sp-5)}
@media(min-width:768px){.card{padding:var(--sp-6)}}
.card--formula{display:flex;flex-direction:column}
.card--formula .btn{margin-top:auto;align-self:flex-start}
.card__kicker{margin:0;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--azzurro)}
.ticks{list-style:none;padding:0;margin:var(--sp-5) 0 var(--sp-6);display:grid;gap:var(--sp-3)}
.ticks li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-body);line-height:var(--lh-snug)}
.ico--check{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/check.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/check.svg);color:var(--azzurro);margin-top:2px;width:18px;height:18px}

/* --- Timeline: verticale su mobile, orizzontale su desktop --- */
.timeline{list-style:none;padding:0;margin:0;display:grid;gap:0}
.timeline__step{position:relative;padding:0 0 var(--sp-6) var(--sp-6);border-left:var(--bw-medium) solid rgba(255,255,255,.28)}
.timeline__step:last-child{padding-bottom:0;border-left-color:transparent}
.timeline__dot{position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:var(--radius-pill);background:var(--azzurro);box-shadow:0 0 0 3px var(--surface-band)}
.timeline__time{margin:0;font-size:var(--fs-body-sm);font-weight:var(--fw-extrabold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--bianco)}
.timeline__text{margin:var(--sp-2) 0 0;font-size:var(--fs-body-sm);color:var(--text-on-dark-muted);line-height:var(--lh-snug)}
@media(min-width:900px){
.timeline{grid-template-columns:repeat(5,1fr);gap:0}
.timeline__step{padding:var(--sp-6) var(--sp-4) 0 0;border-left:none;border-top:var(--bw-medium) solid rgba(255,255,255,.28)}
.timeline__step:last-child{padding-bottom:0;border-left:none;border-top-color:rgba(255,255,255,.28)}
.timeline__dot{left:0;top:-7px}
}

/* --- Cosa è incluso --- */
.incl{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.incl__item{display:flex;align-items:center;gap:var(--sp-3);background:var(--bianco);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--radius-md);padding:var(--sp-4);font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--blu)}
.incl__item .ico{color:var(--azzurro);width:22px;height:22px}
.ico--ship{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/ship.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/ship.svg)}
.ico--anchor{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/anchor.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/anchor.svg)}
.ico--users{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/users.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/users.svg)}
.ico--fuel{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/fuel.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/fuel.svg)}
.ico--cup{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/cup-soda.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/cup-soda.svg)}
.ico--beer{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/beer.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/beer.svg)}
.ico--wine{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/wine.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/wine.svg)}
.ico--snack{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/croissant.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/croissant.svg)}
.ico--lunch{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/utensils.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/utensils.svg)}
.ico--info{-webkit-mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/info.svg);mask-image:url(https://unpkg.com/lucide-static@0.454.0/icons/info.svg)}
.note{display:flex;gap:var(--sp-3);align-items:flex-start;margin:0;background:var(--azzurro-050);border-left:var(--bw-accent) solid var(--azzurro);border-radius:var(--radius-sm);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-body-sm);line-height:var(--lh-snug);color:var(--blu)}
.note .ico{color:var(--azzurro);margin-top:1px}

/* --- Flotta --- */
.fleet{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.boat{display:flex;flex-direction:column;background:var(--surface-card);border:var(--bw-hairline) solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:var(--transition-ui),transform var(--dur-base) var(--ease-standard)}
.boat:hover{box-shadow:var(--shadow-card-hover);border-color:var(--azzurro-100);transform:translateY(-2px)}
.boat__photo{aspect-ratio:3/2;width:100%;object-fit:cover;background:var(--blu-100)}
.boat__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);flex:1}
.boat__name{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-extrabold);color:var(--text-title)}
.boat__slot{display:flex;flex-wrap:wrap;gap:var(--sp-2);min-height:34px}
.slot{display:inline-flex;align-items:center;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.02em;color:var(--grigio-700);background:var(--surface-subtle);border:var(--bw-hairline) dashed var(--grigio-300);border-radius:var(--radius-pill);padding:6px 12px}
.boat .btn{margin-top:auto;width:100%}

/* --- Form --- */
.form{display:block}
.form__grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.field{margin:0;display:block}
.field--full{grid-column:1/-1}
.label{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--blu);margin-bottom:var(--sp-2)}
.req{color:var(--azzurro)}
.input{width:100%;font-family:var(--font-core);font-size:var(--fs-body);color:var(--blu);background:var(--bianco);border:var(--bw-hairline) solid var(--grigio-300);border-radius:var(--radius-md);padding:12px 14px;min-height:48px;transition:var(--transition-ui)}
.input:focus{border-color:var(--azzurro);box-shadow:var(--ring-focus);outline:none}
.input[aria-invalid="true"]{border-color:var(--errore)}
.select{appearance:none;cursor:pointer;padding-right:40px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23013c61' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.textarea{min-height:120px;resize:vertical;line-height:var(--lh-snug)}
.check{display:flex;gap:var(--sp-3);align-items:flex-start;margin:var(--sp-5) 0 0}
.check__box{flex:0 0 auto;width:22px;height:22px;margin:0;accent-color:var(--azzurro)}
.check__label{font-size:var(--fs-body-sm);line-height:var(--lh-snug);color:var(--text-body)}
.form__error{margin:var(--sp-4) 0 0;background:var(--errore-tint);border-left:var(--bw-accent) solid var(--errore);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--errore)}
.form .btn--wa{margin-top:var(--sp-6)}
.form__hint{margin:var(--sp-3) 0 0;text-align:center;font-size:var(--fs-caption);color:var(--text-muted)}

/* --- Footer --- */
.footer{background:var(--surface-footer);color:rgba(255,255,255,.7);padding:var(--sp-7) 0}
.footer__row{display:grid;gap:var(--sp-5);align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.footer__logo{height:34px;width:auto}
.footer__col p{margin:0 0 6px;font-size:var(--fs-body-sm)}
.footer__col a{color:var(--bianco)}
.footer__col a:hover{color:var(--azzurro-100)}

/* --- WhatsApp sticky (solo mobile) --- */
.sticky-wa{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:var(--bw-hairline) solid var(--border-hairline);box-shadow:0 -2px 12px rgba(1,60,97,.10)}
@media(min-width:768px){.sticky-wa{display:none}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

.hero__body {
    text-align: center
}

.hero__sub {
    margin-left: auto;
    margin-right: auto
}

.hero__cta {
    justify-content: center
}

.boat__model {
    margin: -4px 0 0;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--azzurro)
}

.slot {
    border-style: solid
}

.boat {
    cursor: pointer
}

.boat__photo {
    transition: transform var(--dur-base) var(--ease-standard)
}

.boat:hover .boat__photo {
    transform: scale(1.04)
}