/* =====================
   Design tokens (variabili CSS riutilizzabili)
   ===================== */
:root{
  --green:#16A34A;        /* primario */
  --green-dark:#0E7A36;   /* primario scuro */
  --ink:#0B0F12;          /* testo principale */
  --gray100:#F6F7F9;      /* sfondo sezioni alternate */
  --gray400:#9AA4B2;      /* testo attenuato */
  --space-section:20px;
  --space-grid:clamp(18px,2.6vw,28px);
  --space-content:clamp(16px,2.2vw,24px);
}

/* Reset basilare */
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
a{color:inherit;text-decoration:none}

/* Skip link: visibile solo al focus per migliorare la navigazione da tastiera */
.skip{position:absolute;left:16px;top:12px;z-index:100;transform:translateY(-140%);background:#111827;color:#fff;padding:10px 14px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.skip:focus,.skip:focus-visible{transform:translateY(0);outline:3px solid #fff;outline-offset:2px}

/* Contenitore fluido */
.container{max-width:1120px;margin:0 auto;padding:0 clamp(20px,3.2vw,28px)}

/* =====================
   Variabili per preferenze utente (es. modalità scura) o temi futuri
   ===================== */
.top20{margin-top:0px}

/* =====================
   Header / Navigazione
   ===================== */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #e5e7eb}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(20px, 3.2vw, 28px)}
.menu-panel{display:flex;align-items:center;gap:18px}
.nav .links{display:flex;gap:24px;font-weight:600;color:#374151}
.nav .links a:hover{color:#111827}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#111827;cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
.nav-actions{display:flex;align-items:center;gap:8px}

/* Pulsanti riutilizzabili */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 20px;border:1px solid var(--green);font-weight:700;min-height:46px}
.btn.solid{background:var(--green);color:#fff;border-color:var(--green)}
.btn.outline{background:#fff;color:var(--green)}

/* =====================
   Hero con gradient + immagine decorativa
   ===================== */
.hero{position:relative;overflow:hidden;padding:0;margin-bottom:20px}
.hero .bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--green-dark),var(--green),#89E29B)}
.hero .bg-img{
  position:absolute;inset:0;opacity:.15;mix-blend:multiply;object-fit:cover;width:100%;height:100%
}
.hero .blob1,.hero .blob2{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);filter:blur(30px)}
.hero .blob1{left:-60px;bottom:-60px;width:640px;height:640px}
.hero .blob2{right:-100px;top:-100px;width:560px;height:560px}
.hero .inner{position:relative;color:#fff;text-align:center;padding:clamp(34px,6vw,62px) 0}

/* Marchio */
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:40px}

/* Tipografia base */
h1{font-size:clamp(32px,5vw,56px);margin:12px 0 4px;font-weight:900}
.lead{font-size:clamp(16px,2.4vw,22px);opacity:.95}
.cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Sezioni, griglie e card */
section:not(.hero){padding:var(--space-section) 0}
.title{font-size:clamp(26px,3.4vw,36px);font-weight:900;color:var(--green-dark);text-align:center;margin:0}
.section-grid{margin-top:var(--space-grid)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-grid)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:#fff;border:1px solid #E5E7EB;border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card .content{padding:var(--space-content)}
.muted{color:#6B7280;line-height:1.65}

/* Badges eventi */
.badge{display:inline-block;font-size:12px;text-transform:uppercase;border-radius:999px;padding:6px 10px;background:rgba(22,163,74,.12);color:var(--green-dark);font-weight:700;letter-spacing:.06em}
.status{font-size:12px;border-radius:999px;padding:6px 10px}
.st-sold{background:#fee2e2;color:#dc2626}
.st-sale{background:#d1fae5;color:#047857}
.st-ann{background:#f3f4f6;color:#374151}

.section-alt{background:var(--gray100);margin-top:20px;padding-bottom:40px !important}

/* Media box generica */
.media{width:100%;border:1px solid #E5E7EB;border-radius:16px;overflow:hidden;background:#fff}
.media img{display:block;width:100%;height:auto}

/* CTA video accessibile: vero <button> con focus visibile */
.media-cta{display:grid;place-items:center;height:100%;min-height:280px;background:#fff}
.play-btn{width:64px;height:64px;border-radius:999px;background:var(--green);color:#fff;font-weight:900;display:grid;place-items:center;border:none;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .15s ease, filter .15s ease, box-shadow .15s ease}
.play-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.play-btn:active{transform:translateY(0)}
.play-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 4px rgba(22,163,74,.35)}

/* =====================
   Footer
   ===================== */
footer{background:#0B0F12;color:#fff}
footer .foot{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(28px,4vw,42px);padding-top:18px;flex-wrap:wrap}
.footer-wrap{padding:clamp(32px,6vw,32px) clamp(20px,3.2vw,28px)}
#newsletter{max-width:760px;margin:0 auto}
#newsletter p{max-width:640px;margin:10px auto 0;line-height:1.6}
.newsletter-form-row input{min-height:48px}
.newsletter-form-row .btn{min-width:170px}

/* Responsive generali */
@media (max-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2 .title{text-align:left}
  .hero .inner{padding:30px 0 44px}
  .nav-toggle{display:inline-flex}
  .menu-panel{display:none;position:absolute;top:calc(100% + 10px);left:16px;right:16px;z-index:41;flex-direction:column;align-items:stretch;padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.1)}
  .menu-panel.is-open{display:flex}
  .nav .links{flex-direction:column;gap:6px}
  .nav .links a{padding:10px 12px;border-radius:10px}
  .nav .links a:hover{background:#f3f4f6}
  .nav-actions{display:grid;grid-template-columns:1fr;gap:10px}
  .nav-actions .btn{width:100%}
}

@media (max-width:640px){
  .title{text-align:left}
  .nav{padding:12px 22px}
  .hero .inner{padding:24px 0 34px}
  h1{margin:8px 0 2px}
  .lead{margin-top:6px}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .brand img{height:34px}
  .menu-panel{left:8px;right:8px}
  .footer-wrap{padding:42px 20px 22px}
  .footer-wrap .title{text-align:left}
  .footer-wrap #newsletter{max-width:none}
  .footer-wrap #newsletter p{margin-left:0;margin-right:0;text-align:left}
  .footer-wrap .foot{margin-top:28px}
  .newsletter-form-row{grid-template-columns:1fr !important}
  .newsletter-form-row .btn{width:100%}
  .top20{margin-top:20px}
}

@media (prefers-reduced-motion: reduce){
  .play-btn{transition:none}
}