:root{
  --ink:#0a0908; --ink-2:#100d0a; --card:#16120d;
  --cream:#f4efe6; --muted:#b7ad99;
  --gold:#e3bf63; --gold-deep:#c8a23f; --gold-hi:#f1db7c;
  --gold-grad:linear-gradient(180deg,#f4e08a 0%,#e3bf63 45%,#c8a23f 100%);
  --line:rgba(244,239,230,.12);
  --disp:"Bebas Neue",Impact,sans-serif;
  --sans:"Roboto",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--cream);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  text-align:center; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:1340px; margin:0 auto; padding:0 28px}
.gold{background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.eyebrow{font-weight:500; font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold)}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .9s ease, transform .9s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* ===== HERO CAROUSEL ===== */
.carousel{position:relative; height:100svh; min-height:580px; overflow:hidden}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding:0 24px 13vh; background-size:cover; background-repeat:no-repeat; background-position:center}
.slide.active{opacity:1}
.slide.s1{justify-content:center; padding-bottom:0}
.s-world{background-image:url(../img/slide-world.webp); background-position:center 30%}
.s-cliente{background-image:url(../img/slide-cliente.webp); background-position:68% center}
.s-casa{background-image:url(../img/slide-casa.webp); background-position:58% center}
.s-app{background-image:url(../img/slide-app.webp); background-position:center}
.slide-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,.78) 100%)}
.s-world .slide-shade{background:radial-gradient(120% 90% at 50% 25%, rgba(10,9,8,.25) 0%, rgba(10,9,8,.82) 75%)}
.side-word{position:absolute; left:10px; top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--disp); font-size:clamp(2.4rem,8vw,5.6rem);
  color:rgba(255,255,255,.13); letter-spacing:.04em; pointer-events:none; user-select:none}
.slide-logo{position:absolute; top:22px; right:26px; width:clamp(120px,15vw,180px); height:auto; z-index:3; filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.slide-pin{width:clamp(108px,18vw,150px); height:auto; margin:0 auto 22px; display:block; filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}
.slide-content{position:relative; z-index:2; max-width:1000px}
.kicker{font-family:var(--sans); font-weight:500; font-size:clamp(.84rem,2.4vw,1.3rem); letter-spacing:.2em; text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.phrase{font-family:var(--disp); font-weight:400; font-size:clamp(3.2rem,13vw,8rem); line-height:.9; letter-spacing:.01em; color:#fff; margin:.1em 0 .18em; text-shadow:0 4px 26px rgba(0,0,0,.55)}
.tagline{font-family:var(--sans); font-weight:500; font-size:clamp(.74rem,2vw,1rem); letter-spacing:.24em; text-transform:uppercase; color:#fff; opacity:.92; text-shadow:0 2px 12px rgba(0,0,0,.6)}
.nav-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; cursor:pointer;
  width:44px; height:44px; border:2px solid rgba(255,255,255,.7); border-radius:4px; background:transparent;
  color:#fff; font-size:1.3rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s}
.nav-arrow:hover{background:rgba(255,255,255,.16)}
.nav-prev{left:18px} .nav-next{right:18px}
.dots{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px}
.dot{width:34px; height:3px; border:none; background:rgba(255,255,255,.35); cursor:pointer; padding:0; transition:background .25s}
.dot.active{background:var(--gold)}

/* CTA strip under hero */
.cta-strip{display:flex; gap:13px; flex-wrap:wrap; justify-content:center; align-items:center; padding:30px 24px; background:var(--ink-2); border-bottom:1px solid var(--line)}
.btn{font-family:var(--sans); font-weight:700; font-size:.84rem; letter-spacing:.02em; padding:15px 28px; border-radius:3px;
  cursor:pointer; text-decoration:none; display:inline-block; transition:transform .2s, filter .2s, background .2s; border:1.5px solid var(--gold-deep)}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--gold-grad); color:#221803; border-color:transparent}
.btn-solid:hover{filter:brightness(1.07)}
.btn-ghost{background:transparent; color:var(--gold)}
.btn-ghost:hover{background:rgba(227,191,99,.1)}

/* ===== SECTIONS ===== */
section.block{padding:clamp(76px,12vw,140px) 0}
.manifesto{background:var(--ink); border-bottom:1px solid var(--line)}
.lead-title{font-family:var(--disp); font-weight:400; line-height:1; font-size:clamp(2.4rem,6.4vw,4.4rem); letter-spacing:.01em; margin:16px auto 30px; max-width:22ch}
.prose p{font-size:clamp(1.04rem,1.5vw,1.2rem); max-width:66ch; margin:0 auto 20px; color:#e0d8c8}
.pull{font-weight:700; font-size:clamp(1.3rem,3.2vw,2rem); line-height:1.34; max-width:28ch; margin:44px auto 0}

.sec-head{margin-bottom:54px}
.sec-head h2{font-family:var(--disp); font-weight:400; letter-spacing:.01em; font-size:clamp(2.3rem,6vw,4.2rem); line-height:1; margin:12px auto 0; max-width:22ch}

/* VALORI */
.valori{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:16px 80px; max-width:1240px; margin:0 auto}
.rule{padding:30px 14px; border-top:1px solid var(--line)}
.rule .num{font-family:var(--disp); font-weight:400; font-size:3rem; line-height:1; display:block; margin-bottom:8px}
.rule h4{font-weight:700; font-size:1.16rem; line-height:1.3; margin-bottom:8px; color:var(--cream)}
.rule p{font-size:1rem; color:var(--muted); line-height:1.6; max-width:40ch; margin:0 auto}

/* RACCONTI */
.racconto{background:var(--card); border:1px solid var(--line); border-top:3px solid var(--gold-deep); border-radius:3px; padding:clamp(34px,5vw,64px); max-width:1040px; margin:0 auto}
.r-kick{font-weight:700; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold)}
.r-dish{font-family:var(--disp); font-weight:400; letter-spacing:.01em; font-size:clamp(2rem,5vw,3.2rem); line-height:1; margin:12px 0 8px}
.r-place{font-weight:500; font-size:.88rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:24px}
.r-body{font-size:clamp(1.04rem,1.5vw,1.16rem); color:#e0d8c8; max-width:70ch; margin:0 auto}
.racconti-slider{position:relative; max-width:1100px; margin:0 auto; padding-bottom:50px}
.racconti-viewport{overflow:hidden; border-radius:3px}
.racconti-track{display:flex; align-items:stretch; transition:transform .6s ease}
.racconti-track .racconto{flex:0 0 100%; max-width:none; margin:0; border-radius:0}
.r-prev,.r-next{top:calc(50% - 25px)}
.r-prev{left:8px} .r-next{right:8px}
.r-dots{position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:10px}
.r-dots .dot{width:34px; height:3px; border:none; background:rgba(255,255,255,.30); cursor:pointer; padding:0; transition:background .25s}
.r-dots .dot.active{background:var(--gold)}

/* VISIONE */
.visione{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(54px,8vw,88px) 0}
.visione p{font-weight:500; font-size:clamp(1.14rem,2.3vw,1.55rem); line-height:1.5; color:var(--cream); max-width:52ch; margin:0 auto}

/* FORM */
.join{background:var(--ink)}
.join h2{font-family:var(--disp); font-weight:400; letter-spacing:.01em; font-size:clamp(2.3rem,6vw,4.2rem); line-height:1; margin:12px auto 18px; max-width:18ch}
.join .intro{font-size:1.1rem; color:#e0d8c8; max-width:58ch; margin:0 auto 38px}
form{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin:0 auto; text-align:left}
.field{display:flex; flex-direction:column}
.field label{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.field input{font-family:var(--sans); font-size:1rem; color:var(--cream); background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:3px; padding:13px 15px; transition:border .2s}
.field input:focus{outline:none; border-color:var(--gold)}
.privacy{font-size:.82rem; color:var(--muted); grid-column:1/-1; line-height:1.5; text-align:center}
.privacy a{color:var(--gold); cursor:pointer; text-decoration:underline}
.join .btn{grid-column:1/-1; justify-self:center; border:none; margin-top:8px}

/* NOTA EDITORIALE */
.nota{background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(60px,9vw,100px) 0}
.nota-h{font-family:var(--disp); font-weight:400; letter-spacing:.01em; font-size:clamp(1.8rem,4.6vw,3rem); line-height:1; margin:12px auto 22px}
.nota p:not(.eyebrow){font-size:clamp(1rem,1.5vw,1.14rem); color:var(--muted); line-height:1.7; max-width:58ch; margin:0 auto}

/* FOOTER */
footer{padding:62px 0 74px; border-top:1px solid var(--line)}
.f-logo{width:clamp(180px,40vw,240px); height:auto; margin:0 auto 16px; display:block}
.f-sub{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.f-book{font-size:.96rem; color:var(--muted); margin-top:26px; line-height:1.6}
.f-book b{color:var(--cream); font-weight:500}
.f-legal{font-size:.74rem; color:rgba(183,168,149,.7); margin-top:24px; line-height:1.6}
.f-legal a{color:var(--muted); text-decoration:underline; cursor:pointer}

/* MODAL */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; padding:24px; z-index:60}
.modal.open{display:flex}
.modal-box{background:var(--ink-2); border:1px solid var(--line); max-width:620px; max-height:82vh; overflow:auto; padding:38px; border-radius:5px; text-align:left}
.modal-box h3{font-family:var(--disp); font-weight:400; letter-spacing:.02em; font-size:1.8rem; margin-bottom:16px; text-align:center}
.modal-box p{font-size:.94rem; color:#cfc6b5; margin-bottom:13px}
.modal-box h4{font-family:var(--sans); font-weight:700; font-size:.98rem; color:var(--cream); margin:18px 0 7px}
.modal-box ul{margin:0 0 13px 18px; color:#cfc6b5; font-size:.94rem}
.modal-box li{margin-bottom:6px}
.modal-box strong{color:var(--cream); font-weight:700}
.modal-box .btn{margin:18px auto 0; display:block; width:max-content}

@media(max-width:760px){
  .valori{grid-template-columns:1fr; gap:0}
  .slide{padding-bottom:16vh}
  .side-word{display:none}
  .slide-logo{width:120px; top:18px; right:18px}
}
@media(max-width:600px){ form{grid-template-columns:1fr} }

/* ===== STATI FORM "Proponi" (validazione + successo) ===== */
.field-err{display:block; color:#e6a08a; font-size:.78rem; margin-top:6px; letter-spacing:.02em; text-align:left}
.field-err-full{grid-column:1/-1; text-align:center; margin:0}
.form-success{max-width:760px; margin:0 auto 24px; padding:14px 18px;
  border:1px solid var(--gold-deep); border-radius:3px; background:rgba(227,191,99,.08);
  color:var(--cream); font-weight:500}