/* =========================
   Milazzo Platform — Premium (CLEAN + WOW) ✅
   - Pulito: rimossi doppioni/conflitti
   - Drawer FIX: visibile completo, no clip, no flash
   - Mobile header: logo + titolo centro + hamburger
   ========================= */

:root{
  --bg-0:#06131F;
  --bg-1:#071A2B;

  --glass: rgba(16, 26, 36, .56);
  --glass-2: rgba(16, 26, 36, .36);

  --stroke: rgba(255,255,255,.10);
  --stroke-2: rgba(255,255,255,.14);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --brand: #00D1FF;
  --brand2:#2D7CFF;

  --shadow: 0 18px 60px rgba(0,0,0,.45);

  --r: 18px;
  --r2: 26px;
  --max: 1160px;

  --topbar-h: 74px;
}

*{ box-sizing:border-box; }

html, body{ height: auto; min-height: 100%; }

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans";
  background:
    radial-gradient(1100px 650px at 18% 12%, rgba(0,209,255,.20), transparent 60%),
    radial-gradient(900px 560px at 86% 18%, rgba(45,124,255,.16), transparent 60%),
    radial-gradient(800px 520px at 60% 85%, rgba(43,228,198,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  padding-top: var(--topbar-h);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.95; }

.container{
  width: min(100% - 32px, var(--max));
  margin-inline: auto;
}

body.app-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main.page{
  flex: 1 0 auto;
  width: 100%;
}

/* =========================
   TOPBAR (Premium)
   ========================= */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--topbar-h);
  z-index: 900; /* drawer sta sopra */
  overflow: visible; /* FIX: evita clip drawer */

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(10,16,24,.82), rgba(10,16,24,.52));
  border-bottom: 1px solid var(--stroke);
}

.topbar-inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing:.2px;
  min-width: 0;
}

.brand-logo{
  width: 40px;
  height: 40px;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.40));
}
.brand-name{ font-size: 16px; opacity:.95; white-space: nowrap; }

/* Center title (mobile only) */
.topbar-center{
  display:none;
  flex: 1;
  justify-content:center;
  pointer-events:none;
  min-width: 0;
}
.topbar-center-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-weight: 950;
  font-size: 13px;
  letter-spacing:.2px;
  max-width: 62vw;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop nav */
.topnav{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

/* Nav link premium hover/active */
.topnav-link{
  position: relative;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
  overflow: hidden;
}

.topnav-link::before{
  content:"";
  position:absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .22s ease;
  background: radial-gradient(420px 120px at 20% 40%, rgba(0,209,255,.16), transparent 55%);
  pointer-events:none;
}

.topnav-link::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(0,209,255,.0), rgba(0,209,255,.55), rgba(45,124,255,.0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .22s ease;
  pointer-events:none;
}

.topnav-link:hover{
  color: var(--text);
  background: rgba(255,255,255,.07);
  transform: translateY(-2px);
}
.topnav-link:hover::before{ opacity: 1; transform: translateY(0); }
.topnav-link:hover::after{ opacity: 1; transform: translateY(0); }

.topnav-link.is-active{
  color: var(--text);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(0,209,255,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
}
.topnav-link.is-active::after{ opacity: 1; transform: translateY(0); }

/* CTA area */
.topbar-cta{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 900;
  font-size: 14px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: var(--stroke-2);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}
.btn:active{ transform: translateY(0); box-shadow:none; }
.btn-ghost{ background: rgba(255,255,255,.04); }

.btn-primary{
  border-color: rgba(0,209,255,.35);
  background: linear-gradient(135deg, rgba(0,209,255,.85), rgba(45,124,255,.55));
}
.btn-primary:hover{ border-color: rgba(0,209,255,.55); }

/* =========================
   PAGE
   ========================= */
.page{
  min-height: calc(100vh - var(--topbar-h));
  padding: 46px 0 0;
}

/* Generic cards */
.card{
  position: relative;
  overflow: hidden;
  border:1px solid var(--stroke);
  background: var(--glass);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
}
.card-inner{ padding: 26px; }

/* Card glow */
.card::after{
  content:"";
  position:absolute;
  inset:-2px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
  background:
    radial-gradient(600px 240px at 20% 10%, rgba(0,209,255,.20), transparent 55%),
    radial-gradient(520px 260px at 80% 15%, rgba(45,124,255,.16), transparent 60%),
    radial-gradient(420px 220px at 55% 90%, rgba(43,228,198,.12), transparent 60%);
}
.card:hover::after{ opacity: 1; }

/* Spotlight (abilitato via JS) */
.card[data-spotlight="1"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%),
      rgba(255,255,255,.14),
      rgba(255,255,255,.06) 28%,
      transparent 55%);
}
.card[data-spotlight="1"]:hover::before{ opacity: 1; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

.h1{
  margin: 14px 0 12px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.6px;
}
.p{
  margin:0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* Grids */
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Forms */
.form{ display:grid; gap: 12px; }
.field{ min-width:0; }
.field label{
  display:block;
  margin: 0 0 6px;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

.input, .select, .textarea{
  width:100%;
  min-width:0;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 12px 12px;
  outline:none;
  font-size: 16px;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.textarea{ min-height: 120px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(0,209,255,.45);
  box-shadow: 0 0 0 6px rgba(0,209,255,.12);
  background: rgba(255,255,255,.07);
}

.notice{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}
.notice.ok{ border-color: rgba(34,197,94,.35); color: rgba(255,255,255,.88); }
.notice.err{ border-color: rgba(239,68,68,.35); color: rgba(255,255,255,.88); }

/* Booking grid */
.booking-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){
  .booking-grid{ grid-template-columns: 1fr; }
}

/* Admin list */
.admin-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 14px;
}
.list{ display:grid; gap: 10px; margin-top: 14px; }
.row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 14px;
  border-radius: var(--r);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
}
.row .left{ display:grid; gap: 4px; }

.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  font-weight: 950;
  font-size: 12px;
}
.badge.new{ border-color: rgba(0,209,255,.35); color: rgba(255,255,255,.88); }
.badge.in_progress{ border-color: rgba(45,124,255,.35); color: rgba(255,255,255,.88); }
.badge.closed{ border-color: rgba(34,197,94,.30); color: rgba(255,255,255,.86); }

.meta{ color: var(--muted); font-size: 13px; }
.actions{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }

/* =========================
   FOOTER (classic premium)
   ========================= */
.sitefooter{
  position: relative;
  z-index: 5;
  margin-top: 56px;
  padding: 34px 0 24px;
  border-top: 1px solid var(--stroke);
  background-color: #0a1018;
  background-image:
    radial-gradient(900px 300px at 15% 0%, rgba(0,209,255,.10), transparent 60%),
    radial-gradient(800px 260px at 85% 10%, rgba(45,124,255,.08), transparent 55%);
  flex-shrink: 0;
}

.sitefooter-top{
  display:grid;
  grid-template-columns: 1.35fr 1.65fr;
  gap: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--stroke);
  align-items: start;
}

.foot-brand{ display:flex; gap: 14px; align-items:flex-start; }
.foot-logo{
  width: 44px; height: 44px;
  display:block; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.foot-title{ font-weight: 950; letter-spacing:.2px; margin-bottom: 6px; }
.foot-sub{ color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 520px; }

.foot-col-title{
  font-weight: 950;
  font-size: 13px;
  letter-spacing:.3px;
  text-transform: uppercase;
  opacity: .92;
  margin-bottom: 10px;
}
.foot-link{
  display:block;
  color: var(--muted);
  font-weight: 850;
  font-size: 14px;
  padding: 7px 0;
  transition: transform .12s ease, color .12s ease;
}
.foot-link:hover{ color: var(--text); transform: translateX(2px); }
.foot-meta{ color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; padding: 6px 0; }

.sitefooter-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding-top: 18px;
}
.copy{ color: rgba(255,255,255,.62); font-size: 13px; font-weight: 850; }

.foot-legal{ display:flex; align-items:center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.52); }
.foot-legal-link{ color: rgba(255,255,255,.62); font-weight: 900; }
.foot-legal-link:hover{ color: var(--text); }
.sep{ opacity:.6; }

/* Footer mobile accordion */
.foot-cols-desktop{
  display:grid;
  grid-template-columns: 1.05fr 1.05fr 1.25fr;
  gap: 28px;
  align-items:start;
  justify-items:start;
}
.foot-cols-mobile{ display:none; }

@media (max-width: 980px){
  .sitefooter-top{ grid-template-columns: 1fr; }
  .foot-cols-desktop{ display:none; }
  .foot-cols-mobile{ display:grid; gap: 10px; }

  .foot-acc{
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    overflow:hidden;
  }
  .foot-acc summary{
    list-style:none;
    cursor:pointer;
    padding: 14px 14px;
    font-weight: 950;
    color: rgba(255,255,255,.85);
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .foot-acc summary::-webkit-details-marker{ display:none; }
  .foot-acc summary::after{ content: "⌄"; opacity:.75; transform: translateY(-1px); }
  .foot-acc[open] summary::after{ content:"⌃"; }

  .foot-acc-body{ padding: 0 14px 12px; }
  .foot-link{ padding: 8px 0; }

  .sitefooter-bottom{ flex-direction: column; align-items:flex-start; }
}

/* =========================
   HERO (base)
   ========================= */
.hero{ padding: 54px 0 22px; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* Features */
.features{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 0 56px;
}
.feature{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: var(--r);
  padding: 16px;
}
.feature .t{ font-weight: 950; margin: 0 0 6px; }
.feature .d{ margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 920px){
  .features{ grid-template-columns: 1fr; }
}

/* =========================
   Luxury sections
   ========================= */
.lux-section{ padding: 56px 0; }
.lux-eyebrow{ margin:0; font-size:12px; font-weight:900; letter-spacing:.4px; color: rgba(255,255,255,.55); text-transform: uppercase; }
.lux-h2{ margin:10px 0 0; font-size: clamp(22px, 2.6vw, 34px); font-weight: 950; letter-spacing: -.3px; }
.lux-desc{ margin:10px 0 0; max-width: 720px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.7; }
.lux-link{ color: rgba(255,255,255,.70); font-weight: 950; font-size: 14px; }
.lux-link:hover{ color: rgba(255,255,255,.92); }

.lux-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.lux-actions{ display:flex; gap:10px; margin-top: 16px; flex-wrap: wrap; }
.lux-mini{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 14px; }
.lux-pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  font-weight: 950;
  font-size: 12px;
}

.lux-hero{ padding: 22px 0 24px; }
.lux-hero-plus{ padding-top: 26px; }
.lux-hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
@media (max-width: 980px){ .lux-hero-grid{ grid-template-columns: 1fr; } }

.lux-hero-imgwrap{
  position: relative;
  height: 260px;
  overflow: hidden;
  border-top-left-radius: var(--r2);
  border-top-right-radius: var(--r2);
}
.lux-hero-imgwrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.lux-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.32), rgba(8,12,20,.92));
}
.lux-badge{
  position:absolute; right: 14px; bottom: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 10px 12px;
  font-weight: 950;
  color: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}
.lux-badge span{ font-weight: 800; color: rgba(255,255,255,.55); margin-left: 8px; }

.lux-steps{ display:grid; gap: 10px; margin-top: 10px; }
.lux-step{
  display:flex; gap: 12px; align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.lux-n{
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 950;
}
.lux-t{ font-weight: 950; }
.lux-d{ color: rgba(255,255,255,.62); font-size: 13px; margin-top: 3px; line-height: 1.5; }

.lux-grid-3{ margin-top: 18px; display:grid; gap: 14px; grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){ .lux-grid-3{ grid-template-columns: 1fr; } }

.lux-grid-4{ margin-top: 18px; display:grid; gap: 14px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){ .lux-grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .lux-grid-4{ grid-template-columns: 1fr; } }

.lux-grid-2{ margin-top: 18px; display:grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 980px){ .lux-grid-2{ grid-template-columns: 1fr; } }

.lux-cardlink{ display:block; }
.lux-cardhover{ transition: transform .14s ease, border-color .14s ease; }
.lux-cardhover:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.18); }

.lux-img{ position:relative; height: 190px; overflow:hidden; border-top-left-radius: var(--r2); border-top-right-radius: var(--r2); }
.lux-img.sm{ height: 150px; }
.lux-img img{ width:100%; height:100%; object-fit:cover; transition: transform .7s ease; }
.lux-cardhover:hover .lux-img img{ transform: scale(1.08); }

.lux-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.lux-title{ font-weight: 950; letter-spacing: .1px; }
.lux-meta{ color: rgba(255,255,255,.60); font-size: 14px; margin-top: 6px; line-height: 1.6; }
.lux-price{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 950;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}
.lux-more{ margin-top: 14px; font-weight: 950; color: rgba(255,255,255,.72); }
.lux-cardhover:hover .lux-more{ color: rgba(255,255,255,.92); }

.lux-rev-list{ margin-top: 14px; display:grid; gap: 10px; }
.lux-quote{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 14px;
  color: rgba(255,255,255,.70);
  font-size: 14px;
  line-height: 1.6;
}

.lux-cta{
  background:
    radial-gradient(900px circle at 25% 20%, rgba(0,209,255,.14), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.lux-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap; }
.lux-cta-title{ font-size: 22px; font-weight: 950; }
.lux-cta-desc{ margin-top: 8px; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.6; }

/* Stats + marquee + strip */
.lux-stats{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.lux-stat{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 12px;
}
.lux-stat-n{ font-weight: 950; letter-spacing:.2px; font-variant-numeric: tabular-nums; }
.lux-stat-d{ margin-top: 4px; color: rgba(255,255,255,.58); font-size: 13px; }
@media (max-width: 980px){ .lux-stats{ grid-template-columns: 1fr; } }

.lux-marquee{
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.lux-marquee-track{
  display:flex;
  gap: 22px;
  padding: 10px 14px;
  white-space: nowrap;
  color: rgba(255,255,255,.70);
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.2px;
  animation: luxMarquee 22s linear infinite;
}
@keyframes luxMarquee{
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .lux-marquee-track{ animation:none; }
}

.lux-strip{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.lux-strip-item{
  position:relative;
  overflow:hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  height: 120px;
}
.lux-strip-item img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform .7s ease;
}
.lux-strip-item:hover img{ transform: scale(1.10); }
@media (max-width: 980px){
  .lux-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lux-strip-item{ height: 110px; }
}

/* Mobile slider for experiences */
@media (max-width: 980px){
  .lux-grid-4{
    display:flex !important;
    gap: 14px;
    overflow-x:auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .lux-grid-4::-webkit-scrollbar{ height: 10px; }
  .lux-grid-4::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }
  .lux-grid-4 .lux-cardlink{ flex: 0 0 82%; scroll-snap-align: start; }
}

/* Reveal helper */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .7s ease;
  will-change: transform, opacity;
}
.reveal.is-in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* =========================
   MOBILE DRAWER (UNICO) ✅
   ========================= */

/* Hamburger */
.hamburger{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hamburger:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: var(--stroke-2);
}
.hamburger-lines{
  width: 18px;
  height: 12px;
  position: relative;
  display:block;
}
.hamburger-lines::before,
.hamburger-lines::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 8px 0 rgba(255,255,255,.70);
  top: 1px;
}
.hamburger-lines::after{
  top:auto;
  bottom:1px;
  box-shadow:none;
}

/* Backdrop */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.drawer-backdrop.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* Drawer panel (FIX completo: max-height + scroll interno) */
.drawer{
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: min(92vw, 380px);
  max-height: calc(100vh - 24px);
  z-index: 3001;

  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(0,209,255,.12), transparent 55%),
    radial-gradient(800px 420px at 90% 20%, rgba(45,124,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(12,18,28,.92), rgba(10,16,24,.92));

  box-shadow: 0 30px 90px rgba(0,0,0,.55);

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  transform: translate3d(110%, 0, 0);
  pointer-events: none;
  transition: transform .22s ease;
}
.drawer.is-open{
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* Drawer internals */
.drawer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.drawer-brand{ display:flex; gap: 12px; align-items:flex-start; }
.drawer-logo{
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.drawer-title{ font-weight: 950; letter-spacing:.2px; }
.drawer-sub{ color: rgba(255,255,255,.58); font-size: 12px; margin-top: 2px; }

.drawer-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  cursor:pointer;
}

.drawer-nav{
  padding: 10px 10px 0;
  display:grid;
  gap: 8px;
}
.drawer-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  font-weight: 950;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.drawer-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
}
.drawer-link.is-active{
  border-color: rgba(0,209,255,.35);
  background: rgba(0,209,255,.10);
}
.drawer-link::after{
  content:"→";
  color: rgba(255,255,255,.55);
  font-weight: 950;
}

.drawer-cta{
  padding: 12px 12px 0;
  display:grid;
  gap: 10px;
}
.drawer-cta .btn{ width: 100%; justify-content:center; }

.drawer-foot{
  padding: 14px 16px;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.drawer-meta{
  color: rgba(255,255,255,.55);
  font-size: 12px;
  line-height: 1.4;
}

/* Lock scroll when drawer open */
body.is-locked{
  overflow: hidden !important;
  touch-action: none;
}

/* =========================
   Login icon animated (CSS ready)
   - se vuoi renderla visibile: basta aggiungere class="topnav-icon" e markup (ti dico sotto)
   ========================= */
.topnav-icon{
  padding: 10px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
}
.nav-user{
  position:relative;
  width: 28px;
  height: 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav-user-core{
  position:relative;
  z-index:2;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transform: translateZ(0);
}
.nav-user-ring{
  position:absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(0,209,255,.20);
  background: radial-gradient(circle at 30% 30%, rgba(0,209,255,.14), transparent 55%);
  opacity:.9;
  animation: navPulse 2.6s ease-in-out infinite;
}
@keyframes navPulse{
  0%,100%{ transform: scale(1); opacity:.75; }
  50%{ transform: scale(1.08); opacity:1; }
}
.topnav-icon:hover .nav-user-core{ animation: navWiggle .5s ease; }
@keyframes navWiggle{
  0%{ transform: translateY(0) rotate(0deg); }
  35%{ transform: translateY(-1px) rotate(-6deg); }
  70%{ transform: translateY(0) rotate(6deg); }
  100%{ transform: translateY(0) rotate(0deg); }
}

/* =========================
   Responsive navbar rules
   ========================= */
@media (max-width: 980px){
  .topnav{ display:none; }
  .hamburger{ display:inline-flex; }
  .topbar-cta-hide-mobile{ display:none !important; }

  /* mobile header: logo + titolo centro + hamburger */
  .brand-name{ display:none; }
  .topbar-center{ display:flex; }
}

@media (max-width: 560px){
  :root{ --topbar-h: 68px; }
  .brand-logo{ width: 38px; height: 38px; }
  .btn{ height: 40px; padding: 0 12px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .card::after, .card::before{ transition: none; }
  .btn, .topnav-link, .drawer, .drawer-backdrop{ transition: none !important; }
}

/* =========================
   FIX DEFINITIVO: Drawer visibile completo + scroll interno
   (safe append)
   ========================= */

/* Drawer = colonna, header/top fisso, corpo scrollabile */
.drawer{
  display: flex !important;
  flex-direction: column !important;

  /* usa viewport dinamico su mobile (iOS/Chrome) */
  height: calc(100dvh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;

  /* fallback vecchio */
  height: calc(100vh - 24px) !important;
  max-height: calc(100vh - 24px) !important;

  overflow: hidden !important; /* lo scroll lo fa il body interno */
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: env(safe-area-inset-top);
}

/* Header: resta visibile */
.drawer-top{
  flex: 0 0 auto !important;
}

/* Queste sezioni NON devono impedire lo shrink */
.drawer-nav,
.drawer-cta{
  min-height: 0 !important;
}

/* Corpo scrollabile (nav + cta insieme) */
.drawer-nav{
  flex: 1 1 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* CTA e footer restano sotto, senza tagliare */
.drawer-cta{
  flex: 0 0 auto !important;
}

.drawer-foot{
  flex: 0 0 auto !important;
  margin-top: auto !important; /* spinge in basso */
}

/* evita “rimbalzo” che sembra taglio */
.drawer-nav{
  overscroll-behavior: contain;
}

.btn-danger{
  background: rgba(255, 59, 48, .18);
  border: 1px solid rgba(255, 59, 48, .35);
  color: rgba(255,255,255,.92);
}
.btn-danger:hover{
  background: rgba(255, 59, 48, .28);
  border-color: rgba(255, 59, 48, .55);
}
/* PERF: render progressivo */
.lux-section { content-visibility: auto; contain-intrinsic-size: 800px; }
/* =========================
   WhatsApp Floating CTA (Luxury)
   ========================= */

.wa-cta{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none; /* click solo sugli elementi */
}

.wa-cta a{ pointer-events: auto; }

.wa-cta__pill{
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;

  /* Luxury glass */
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0 2px 10px rgba(0,0,0,.08);

  color: rgba(12,18,24,.92);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;

  /* 🔒 hidden by default */
  opacity: 0;
  transform: translateX(6px) scale(.96);
  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

/* mostra la pill SOLO quando hoveri il bottone verde */
.wa-cta:hover .wa-cta__pill{
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.wa-cta__pill-text{
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Mobile: niente testo (solo icona) */
@media (max-width: 560px){
  .wa-cta__pill{
    display: none !important;
  }
}



.wa-cta__pill:active{ transform: translateY(0); }

.wa-cta__pill:focus-visible,
.wa-cta__fab:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(0, 180, 255, .18),
    0 16px 34px rgba(0,0,0,.16),
    0 4px 14px rgba(0,0,0,.10);
}

.wa-cta__fab{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Luxury green (deep, premium) */
  background: linear-gradient(180deg, rgba(22,174,96,1) 0%, rgba(11,121,66,1) 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 36px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.22);

  color: #fff;
  text-decoration: none;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.wa-cta__fab:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow:
    0 22px 44px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.wa-cta__fab:active{ transform: translateY(0); }

.wa-cta__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile: pill più compatta (stile screen 2) */
@media (max-width: 520px){
  .wa-cta{ right: 14px; bottom: 14px; gap: 8px; }
  .wa-cta__pill{ height: 40px; padding: 0 12px; font-weight: 700; }
  .wa-cta__fab{ width: 50px; height: 50px; }
}

/* Rispetta reduced motion */
@media (prefers-reduced-motion: reduce){
  .wa-cta__pill,
  .wa-cta__fab{ transition: none !important; }
}