:root {
    --gold: #c9903a;
    --gold-light: #e4b96a;
    --gold-pale: #f5e4c0;
    --brown: #4a2a10;
    --text-mid: #6b5d54;
    --text-light: #8e837d;
    --cream: #fdfaf5;
    --rose: #e8c4bb;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.04);
    --shadow-gold: 0 15px 45px rgba(201, 144, 58, 0.15);
}

/* ─── LAYOUT GENERALE ─── */
body {
    background-color: var(--cream);
    overflow-x: hidden;
}

    /* ─── HERO ─── */
    #home {
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      background:
        radial-gradient(ellipse 80% 70% at 70% 40%, rgba(228,185,106,.22), transparent 65%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(232,196,187,.28), transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 10%, rgba(138,171,138,.14), transparent 55%),
        var(--cream-light);
    }
    .hero-orb {
      position: absolute; border-radius: 50%;
      filter: blur(60px); pointer-events: none;
      animation: orbPulse 7s ease-in-out infinite;
    }
    .hero-orb-1 {
      width: 520px; height: 520px;
      background: radial-gradient(circle, rgba(201,144,58,.16), transparent 70%);
      top: -120px; right: -120px;
    }
    .hero-orb-2 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(212,137,122,.14), transparent 70%);
      bottom: -100px; left: -100px; animation-delay: -2.5s;
    }
    .hero-orb-3 {
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(138,171,138,.11), transparent 70%);
      top: 35%; left: 8%; animation-delay: -5s;
    }
    @keyframes orbPulse {
      0%,100% { transform: scale(1); }
      50%      { transform: scale(1.08) translate(8px,-8px); }
    }

    .hero-content {
      text-align: center; position: relative; z-index: 2;
      padding: 2rem; max-width: 820px;
    }
    .hero-eyebrow {
      font-size: .75rem; letter-spacing: .32em;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 1.5rem;
      animation: fadeUp .8s .3s both;
    }
    .hero-eyebrow::before { content: '\2014\a0'; }
    .hero-eyebrow::after  { content: '\a0\2014'; }

    .hero-title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: clamp(3.8rem, 10vw, 8rem);
      line-height: 1.0;
      color: var(--brown);
      animation: fadeUp .9s .5s both;
    }
    .hero-title em {
      font-style: italic; color: var(--gold); display: block;
    }
    .hero-sub {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(1rem, 2.5vw, 1.3rem); font-weight: 300;
      color: var(--text-mid); max-width: 540px;
      margin: 1.8rem auto; line-height: 1.75;
      animation: fadeUp .9s .75s both;
    }
    .hero-cta {
      display: inline-flex; align-items: center; gap: .75rem;
      padding: 1rem 2.6rem;
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      color: #fff;
      font-family: 'Tenor Sans', sans-serif;
      font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
      text-decoration: none; border-radius: 100px;
      box-shadow: 0 8px 32px rgba(201,144,58,.38);
      animation: fadeUp .9s 1s both;
      transition: transform .3s, box-shadow .3s;
    }
    .hero-cta:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(201,144,58,.5); }
    .hero-cta svg { transition: transform .3s; }
    .hero-cta:hover svg { transform: translateX(4px); }

    .scroll-hint {
      position: absolute; bottom: 2.5rem; left: 50%;
      transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: .5rem;
      animation: fadeIn 1s 1.8s both;
    }
    .scroll-hint span {
      font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
      color: var(--text-light);
    }
    .scroll-line {
      width: 1px; height: 48px;
      background: linear-gradient(to bottom, var(--gold), transparent);
      animation: scrollPulse 2.2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%,100% { transform: scaleY(1); opacity: .5; }
      50%      { transform: scaleY(.5); opacity: 1; }
    }

    /* ─── SECTION COMMONS ─── */
    section { position: relative; z-index: 2; }
    .section-label {
      font-size: .7rem; letter-spacing: .32em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 1rem;
    }
    .section-label::before { content: '\2736\a0\a0'; }
    .section-label::after  { content: '\a0\a0\2736'; }
    .section-title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      color: var(--brown); line-height: 1.1;
    }
    .section-title em { font-style: italic; color: var(--gold); }
    .divider {
      display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0;
    }
    .divider::before, .divider::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold-pale), transparent);
    }

    /* ─── SPECIALITÀ ─── */
    #specialita {
      padding: 7rem 2rem;
      background: radial-gradient(ellipse 60% 50% at 90% 50%, rgba(228,185,106,.1), transparent 60%),
                  var(--cream);
    }
    .specialita-inner { max-width: 1200px; margin: 0 auto; }
    .specialita-header { text-align: center; margin-bottom: 4.5rem; }
    .specialita-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 2rem;
    }
    .spec-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-radius: var(--r-lg);
      padding: 2.5rem 2rem; text-align: center;
      box-shadow: var(--shadow);
      transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
    }
    .spec-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
    .spec-icon {
      font-size: 3rem; display: block; margin-bottom: 1.2rem;
      animation: iconFloat 3s ease-in-out infinite;
    }
    .spec-card:nth-child(2) .spec-icon { animation-delay: -.8s; }
    .spec-card:nth-child(3) .spec-icon { animation-delay: -1.6s; }
    .spec-card:nth-child(4) .spec-icon { animation-delay: -2.4s; }
    @keyframes iconFloat {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-7px); }
    }
    .spec-title {
      font-family: 'DM Serif Display', serif;
      font-size: 1.4rem; color: var(--brown); margin-bottom: .6rem;
    }
    .spec-desc {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem; color: var(--text-light); line-height: 1.65;
    }

    /* ─── MENU ─── */
    #menu {
      padding: 7rem 2rem;
      background: radial-gradient(ellipse 70% 60% at 10% 50%, rgba(138,171,138,.08), transparent 60%),
                  var(--warm-white);
    }
    .menu-inner { max-width: 1200px; margin: 0 auto; }
    .menu-header { text-align: center; margin-bottom: 3.5rem; }
    .menu-tabs {
      display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem;
      margin-bottom: 2.5rem;
    }
    .tab-btn {
      display: flex; align-items: center; gap: .45rem;
      padding: .65rem 1.4rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(12px);
      border-radius: 100px;
      font-family: 'Tenor Sans', sans-serif;
      font-size: .78rem; letter-spacing: .1em;
      color: var(--text-mid); cursor: pointer;
      transition: all .3s cubic-bezier(.34,1.56,.64,1);
      box-shadow: 0 2px 12px rgba(90,50,20,.06);
    }
    .tab-btn:hover, .tab-btn.active {
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      color: #fff; border-color: transparent;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(201,144,58,.3);
    }
    .menu-panel { display: none; }
    .menu-panel.active {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 1.5rem;
    }
    .menu-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-radius: var(--r); padding: 1.8rem;
      box-shadow: var(--shadow);
      transition: transform .3s, box-shadow .3s;
      animation: cardIn .4s ease both;
    }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .menu-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
    .menu-card-top {
      display: flex; justify-content: space-between; align-items: flex-start;
      margin-bottom: .7rem;
    }
    .menu-card-name {
      font-family: 'DM Serif Display', serif;
      font-size: 1.15rem; color: var(--brown); line-height: 1.25;
    }
    .menu-card-price {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem; font-weight: 600;
      color: var(--gold); white-space: nowrap; margin-left: 1rem;
    }
    .menu-card-desc {
      font-family: 'Cormorant Garamond', serif;
      font-size: .95rem; color: var(--text-light); line-height: 1.65;
    }
    .menu-badge {
      display: inline-block; margin-top: .8rem;
      padding: .2rem .75rem;
      background: linear-gradient(135deg, rgba(245,228,192,.7), rgba(228,185,106,.25));
      border: 1px solid rgba(201,144,58,.3);
      border-radius: 100px;
      font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--gold);
    }

    /* ─── CHI SIAMO ─── */
    #chisiamo {
      padding: 7rem 2rem;
      background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(228,185,106,.09), transparent 70%),
                  var(--cream);
    }
    .about-inner {
      max-width: 1100px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 5rem; align-items: center;
    }
    .about-visual { position: relative; }
    .about-blob {
      width: 100%; aspect-ratio: 4/5;
      border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%;
      background: linear-gradient(145deg, var(--gold-pale), var(--rose), var(--cream));
      display: flex; align-items: center; justify-content: center;
      font-size: 7rem;
      animation: morphBlob 9s ease-in-out infinite;
      box-shadow: 0 20px 60px rgba(201,144,58,.18);
    }
    @keyframes morphBlob {
      0%,100% { border-radius: 40% 60% 55% 45% / 45% 50% 50% 55%; }
      25%      { border-radius: 55% 45% 40% 60% / 55% 40% 60% 45%; }
      50%      { border-radius: 45% 55% 60% 40% / 40% 60% 40% 60%; }
      75%      { border-radius: 60% 40% 45% 55% / 60% 45% 55% 40%; }
    }
    .float-card {
      position: absolute;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-radius: var(--r); padding: .9rem 1.3rem;
      box-shadow: var(--shadow);
    }
    .float-card-a { top: 10%; right: -18px; animation: floatCard 4s ease-in-out infinite; }
    .float-card-b { bottom: 14%; left: -18px; animation: floatCard 4s ease-in-out infinite; animation-delay: -2s; }
    @keyframes floatCard {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-9px); }
    }
    .float-card-icon { font-size: 1.5rem; }
    .float-card-text { font-size: .73rem; color: var(--text-mid); margin-top: .2rem; }

    .about-story {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.12rem; color: var(--text-mid);
      line-height: 1.85; margin: 1.5rem 0 2rem;
    }
    .about-values { display: flex; flex-wrap: wrap; gap: .6rem; }
    .value-tag {
      display: flex; align-items: center; gap: .4rem;
      padding: .4rem 1rem;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px);
      border-radius: 100px;
      font-size: .8rem; color: var(--text-mid);
      box-shadow: 0 2px 8px rgba(90,50,20,.06);
    }
    .value-tag::before { content: '\2736'; color: var(--gold); font-size: .6rem; }

    /* ─── CONTATTI ─── */
    #contatti {
      padding: 7rem 2rem;
      background:
        radial-gradient(ellipse 60% 60% at 80% 30%, rgba(228,185,106,.13), transparent 60%),
        radial-gradient(ellipse 50% 50% at 20% 70%, rgba(232,196,187,.18), transparent 60%),
        var(--warm-white);
    }
    .contatti-inner { max-width: 900px; margin: 0 auto; text-align: center; }
    .contatti-header { margin-bottom: 3.5rem; }
    .contatti-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 1.5rem; margin-bottom: 3rem;
    }
    .contatti-card {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border-radius: var(--r); padding: 2rem 1.5rem;
      box-shadow: var(--shadow);
      transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    }
    .contatti-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); }
    .contatti-card-icon { font-size: 2rem; margin-bottom: 1rem; }
    .contatti-card-label {
      font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold); margin-bottom: .5rem;
    }
    .contatti-card-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem; color: var(--text-mid); line-height: 1.5;
    }
    .btn-outline {
      display: inline-flex; align-items: center; gap: .75rem;
      padding: 1rem 2.8rem;
      background: transparent; border: 1.5px solid var(--gold);
      border-radius: 100px;
      font-family: 'Tenor Sans', sans-serif;
      font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold); text-decoration: none;
      transition: all .35s cubic-bezier(.34,1.56,.64,1);
      box-shadow: 0 4px 20px rgba(201,144,58,.12);
    }
    .btn-outline:hover {
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      color: #fff; border-color: transparent;
      transform: translateY(-4px) scale(1.03);
      box-shadow: 0 12px 36px rgba(201,144,58,.38);
    }

    /* ─── REVEAL ─── */
    .reveal {
      opacity: 0; transform: translateY(36px);
      transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: .12s; }
    .reveal-d2 { transition-delay: .22s; }
    .reveal-d3 { transition-delay: .32s; }
    .reveal-d4 { transition-delay: .42s; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; } to { opacity: 1; }
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 900px) {
      .about-inner { grid-template-columns: 1fr; gap: 3rem; }
      .about-visual { max-width: 380px; margin: 0 auto; }
    }
    @media (max-width: 680px) {
      #nav-links { display: none !important; }
      .hamburger { display: flex; }
      #specialita, #menu, #chisiamo, #contatti { padding: 5rem 1.2rem; }
      .tab-btn { font-size: .72rem; padding: .55rem 1rem; }
    }

/* ─── CHI SIAMO: VERSIONE MOBILE PULITA ─── */

@media (max-width: 850px) {
    /* 1. Nascondiamo la torta e le card fluttuanti per pulizia visiva */
    .about-visual {
        display: none !important;
    }

    /* 2. Ottimizziamo il contenitore del testo */
    .about-inner {
        display: block; /* Layout semplice a colonna */
        padding: 3rem 1.5rem;
        text-align: center;
    }

    /* 3. Centratura e spaziatura dei testi */
    .section-label {
        display: block;
        font-size: 0.8rem;
        letter-spacing: 0.2em;
        margin-bottom: 1rem;
    }

    .section-title {
        font-size: 2.4rem;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    .divider {
        margin: 1.5rem auto;
        justify-content: center;
    }

    .about-story {
        font-size: 1.15rem;
        line-height: 1.8;
        color: var(--text-dark);
        text-align: center; /* Testo centrato per estetica mobile */
        max-width: 100%;
        margin-bottom: 3rem;
    }

    /* 4. Valori (se presenti) uno sotto l'altro */
    .about-values {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
}