/* ============================================================
   Amir Roma — cioccolato e pasticceria · Campo de' Fiori, Roma
   Design system Royaletiger — fondente, latte, bianco e oro
   ============================================================ */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/CormorantGaramond-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/CormorantGaramond-500i.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/CormorantGaramond-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/CormorantGaramond-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-600.woff2') format('woff2'); }

:root {
  /* i tre cioccolati: fondente (scuro), latte (medio), bianco (sfondo) */
  --choc-deep: #190c06;
  --choc: #2a170d;
  --choc-soft: #43271a;
  --milk: #6f4127;
  --milk-deep: #57301c;
  --bg: #f7ecdd;
  --ivory: #fffaf2;
  --ivory-alt: #efdcc3;
  /* oro del logo */
  --gold: #c29d5a;
  --gold-soft: #e8d09a;
  --gold-dim: #7d5c28;
  --gold-foil: linear-gradient(135deg, #f0dcaa 0%, #c9a15a 38%, #a9803f 62%, #e3c98e 100%);
  /* testo */
  --ink: #2a170d;
  --text: #4e3727;
  --muted: #7a5d45;
  --line: #e3cdae;
  --line-dark: rgba(232, 208, 154, .22);
  /* tipografia */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  /* texture */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .78 0 0 0 0 .52 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.08'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.38'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='5' y='5' width='110' height='110' rx='7' fill='url(%23a)'/%3E%3Crect x='17' y='17' width='86' height='86' rx='4' fill='%23000' fill-opacity='.10'/%3E%3C/svg%3E");
  --drip-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0V16C20 16 30 18 38 22C44 26 44 58 50 62C56 66 62 62 62 54C62 40 60 26 66 22C80 16 110 18 130 16C142 18 144 34 150 36C157 38 160 32 158 24C157 19 170 16 190 17C220 18 240 16 255 20C266 26 268 78 276 82C285 86 290 78 289 64C288 40 286 26 296 20C320 15 350 17 372 18C384 22 386 48 394 51C403 54 406 46 405 36C404 26 404 21 418 18C450 15 480 17 500 19C510 24 512 40 519 42C527 44 530 38 529 30C528 23 534 19 548 17C570 16 590 16 600 16V0Z'/%3E%3C/svg%3E");
  --bean: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill-rule='evenodd' d='M12 1C5 1 2 8 2 16s3 15 10 15 10-7 10-15S19 1 12 1zM11.4 4C8.8 7.6 8.8 12 11.4 16S14 24.4 11.4 28h1.2c2.6-3.6 2.6-8 0-12S10 7.6 12.6 4z'/%3E%3C/svg%3E");
  --bean-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%23c29d5a' fill-rule='evenodd' d='M12 1C5 1 2 8 2 16s3 15 10 15 10-7 10-15S19 1 12 1zM11.4 4C8.8 7.6 8.8 12 11.4 16S14 24.4 11.4 28h1.2c2.6-3.6 2.6-8 0-12S10 7.6 12.6 4z'/%3E%3C/svg%3E");
  /* sistema */
  --shadow-sm: 0 2px 10px rgba(42, 23, 13, .07);
  --shadow-md: 0 16px 38px rgba(42, 23, 13, .14);
  --shadow-lg: 0 28px 70px rgba(25, 12, 6, .34);
  --radius: 4px;
  --container: 1200px;
  --nav-h: 96px;
  --drip-h: 84px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; overflow-x: hidden; scrollbar-color: var(--milk) var(--bg); }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dim); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--choc); }
ul, ol { list-style: none; }
::selection { background: var(--milk); color: var(--gold-soft); }

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 6vw, 4.9rem); letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -.005em; }
h3 { font-size: 1.45rem; }

/* corsivi in oro: foglia metallica su scuro, oro brunito su chiaro */
h1 em, h2 em {
  font-style: italic; font-weight: 500; padding-right: .06em;
  background: linear-gradient(100deg, #7d5c28 0%, #a9803f 45%, #7d5c28 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 em, .page-hero h1 em, .section-dark h2 em, .article-cta h2 em {
  background: linear-gradient(100deg, #e8d09a 0%, #c29d5a 30%, #f5e3b8 50%, #c29d5a 70%, #e8d09a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: foil 7s ease-in-out infinite;
}
@keyframes foil { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 118px 0; position: relative; }
.section-alt { background: var(--ivory-alt); }
.section-dark {
  background:
    var(--grain),
    radial-gradient(900px 420px at 12% 0%, rgba(194, 157, 90, .12), transparent 62%),
    linear-gradient(180deg, var(--choc-deep) 0%, var(--choc) 100%);
}
.section-dark h2, .section-dark h3 { color: var(--ivory); }
.section-dark p { color: rgba(255, 250, 242, .78); }

/* ---------- colate di cioccolato tra le sezioni ----------
   La colata ha il colore della sezione precedente e "gocciola"
   dentro quella successiva. Nessun markup: bastano i fratelli. */
.page-hero + .section,
.flavor-ribbon + .section,
.section-dark + .section:not(.section-dark),
.section:not(.section-dark) + .section-dark { --drip: var(--choc); }
.flavor-ribbon + .section { --drip: var(--milk); }
.section:not(.section-dark):not(.section-alt) + .section-dark { --drip: var(--bg); }
.section-alt + .section-dark { --drip: var(--ivory-alt); }
.page-hero + .section::before,
.flavor-ribbon + .section::before,
.section-dark + .section:not(.section-dark)::before,
.section:not(.section-dark) + .section-dark::before,
main:has(> section.section:last-child:not(.section-dark)) + .site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px;
  height: var(--drip-h); z-index: 1; pointer-events: none;
  background: var(--grain), var(--drip);
  -webkit-mask: var(--drip-shape) repeat-x top left / 600px var(--drip-h);
  mask: var(--drip-shape) repeat-x top left / 600px var(--drip-h);
}
main:has(> section.section:last-child:not(.section-dark)) + .site-footer { --drip: var(--bg); position: relative; padding-top: 40px; }
.section > .container { position: relative; z-index: 2; }

/* ---------- eyebrow con fava di cacao ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .78rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 18px;
}
.eyebrow::before {
  content: ''; width: 60px; height: 16px; flex: none;
  background: var(--bean-gold) left center / 11px 15px no-repeat,
              linear-gradient(var(--gold), var(--gold)) 18px center / 42px 1px no-repeat;
}
.section-head.is-center .eyebrow::after,
.page-hero .eyebrow::after {
  content: ''; width: 60px; height: 16px; flex: none;
  background: linear-gradient(var(--gold), var(--gold)) left center / 42px 1px no-repeat,
              var(--bean-gold) right center / 11px 15px no-repeat;
}
.section-dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--gold-soft); }
.section-head { max-width: 700px; margin-bottom: 62px; }
.section-head.is-center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 18px; font-size: 1.06rem; color: var(--muted); }
.section-dark .section-head p { color: rgba(255, 250, 242, .68); }
.lead { font-size: 1.14rem; line-height: 1.8; }
.center-cta { text-align: center; margin-top: 52px; }

/* ---------- bottoni: foglia d'oro e cioccolato ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 34px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-primary { background: var(--gold-foil); color: var(--choc-deep); border-color: #b48d4b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 18px rgba(169, 128, 63, .25); }
.btn-primary:hover { color: var(--choc-deep); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 30px rgba(169, 128, 63, .4); }
.btn-outline { background: transparent; color: var(--choc); border-color: var(--choc); }
.btn-outline:hover { background: var(--choc); color: var(--gold-soft); transform: translateY(-2px); }
.btn-outline-light { background: rgba(255, 250, 242, .03); color: var(--ivory); border-color: var(--line-dark); }
.btn-outline-light:hover { border-color: var(--gold-soft); color: var(--gold-soft); transform: translateY(-2px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: rgba(25, 12, 6, .55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(232, 208, 154, .14);
  transition: background .35s var(--ease);
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 157, 90, .7), transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
.site-header.scrolled { background: rgba(25, 12, 6, .93); }
.site-header.scrolled::after { opacity: 1; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.nav-brand img { width: auto; height: 68px; transition: height .3s var(--ease); }
.site-header.scrolled .nav-brand img { height: 56px; }
.nav-menu { display: flex; align-items: center; gap: 34px; }
.nav-menu a {
  position: relative; font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 250, 242, .82); padding: 6px 0;
}
.nav-menu a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold-soft);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--gold-soft); }
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-menu .nav-cta { border: 1px solid var(--gold); border-radius: 999px; padding: 11px 24px; color: var(--gold-soft); }
.nav-menu .nav-cta::after { display: none; }
.nav-menu .nav-cta:hover { background: var(--gold-foil); color: var(--choc-deep); }

/* barra di lettura negli articoli */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 95; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; background: var(--gold-foil); transform-origin: left; transform: scaleX(0); }

/* ---------- hero home ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    var(--grain),
    radial-gradient(1100px 520px at 82% -10%, rgba(194, 157, 90, .18), transparent 62%),
    radial-gradient(700px 420px at -5% 20%, rgba(111, 65, 39, .45), transparent 60%),
    linear-gradient(180deg, #120804 0%, var(--choc-deep) 45%, var(--choc) 100%);
  padding: calc(var(--nav-h) + 90px) 0 120px;
  color: var(--ivory);
}
.hero::before {
  content: ''; position: absolute; inset: 22px; pointer-events: none; z-index: 1;
  border: 1px solid rgba(232, 208, 154, .12);
}
.hero-bg, .page-hero .hero-bg {
  position: absolute; inset: -30px; z-index: 0; pointer-events: none;
  background: var(--img) center / cover no-repeat;
  filter: blur(3px) saturate(1.15);
  opacity: .22;
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 92%);
  mask: linear-gradient(180deg, #000 30%, transparent 92%);
}
.page-hero .hero-bg { filter: blur(10px) saturate(1.1); opacity: .3; }
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-deco span {
  position: absolute; width: 22px; height: 30px;
  background: linear-gradient(135deg, #e8d09a, #8f6a34);
  -webkit-mask: var(--bean) center / contain no-repeat; mask: var(--bean) center / contain no-repeat;
  opacity: .22; animation: float 9s ease-in-out infinite;
}
.hero-deco span:nth-child(1) { top: 18%; left: 46%; transform: rotate(-25deg); }
.hero-deco span:nth-child(2) { top: 72%; left: 6%; width: 30px; height: 40px; animation-delay: -3s; opacity: .16; }
.hero-deco span:nth-child(3) { top: 12%; left: 8%; width: 16px; height: 22px; animation-delay: -5s; }
.hero-deco span:nth-child(4) { top: 82%; left: 52%; width: 26px; height: 35px; animation-delay: -1.5s; opacity: .14; }
.hero-deco span:nth-child(5) { top: 40%; right: 3%; width: 18px; height: 24px; animation-delay: -6s; }
@keyframes float {
  0%, 100% { translate: 0 0; rotate: -18deg; }
  50% { translate: 0 -16px; rotate: 12deg; }
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.hero h1 { color: var(--ivory); margin-bottom: 26px; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero .lead { color: rgba(255, 250, 242, .76); max-width: 34rem; margin-bottom: 40px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 56px; }
.hero-stats { display: flex; border-top: 1px solid var(--line-dark); padding-top: 30px; }
.hero-stats > div { padding-right: 40px; margin-right: 40px; border-right: 1px solid var(--line-dark); }
.hero-stats > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-stats strong {
  display: block; font-family: var(--font-display); font-size: 2.3rem; font-weight: 600; line-height: 1.1;
  background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats span { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 250, 242, .55); }

.hero-visual { position: relative; min-height: 530px; }
.hero-photo {
  position: absolute; overflow: hidden;
  background: linear-gradient(145deg, #5a3521, #24130a);
  border: 1px solid rgba(232, 208, 154, .35);
  padding: 10px; box-shadow: var(--shadow-lg);
  border-radius: 6px;
}
.hero-photo::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(232, 208, 154, .25); pointer-events: none; border-radius: 3px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.hero-photo-main { top: 0; right: 34px; width: min(390px, 76%); aspect-ratio: 1; z-index: 2; }
.hero-photo-side { bottom: 0; left: 0; width: min(300px, 58%); aspect-ratio: 1; z-index: 3; }
.hero-seal {
  position: absolute; z-index: 4; top: -30px; left: 16%;
  width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #5c3722 0%, var(--choc) 55%, var(--choc-deep) 100%);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-lg), inset 0 2px 6px rgba(255, 255, 255, .12);
}
.hero-seal img { width: 52px; height: auto; position: relative; z-index: 1; }
.hero-seal svg { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: spin 32s linear infinite; }
.hero-seal svg text { font-size: 8.6px; letter-spacing: 1.6px; fill: var(--gold-soft); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }

/* nastro dei gusti */
.flavor-ribbon {
  position: relative; overflow: hidden; white-space: nowrap;
  background: var(--grain), linear-gradient(180deg, #7a4a2d, var(--milk));
  border-top: 1px solid rgba(232, 208, 154, .35);
  padding: 20px 0 14px;
}
.flavor-track { display: inline-flex; animation: ribbon 46s linear infinite; }
.flavor-track span {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.6rem; color: var(--gold-soft); padding: 0 22px;
}
.flavor-track span.sep { font-style: normal; font-size: 1rem; color: var(--gold); padding: 0; align-self: center; }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* ---------- hero pagine interne ---------- */
.page-hero {
  position: relative; overflow: hidden; text-align: center; color: var(--ivory);
  background:
    var(--grain),
    radial-gradient(900px 420px at 85% -20%, rgba(194, 157, 90, .16), transparent 60%),
    linear-gradient(180deg, #120804 0%, var(--choc-deep) 50%, var(--choc) 100%);
  padding: calc(var(--nav-h) + 76px) 0 84px;
}
.page-hero::before { content: ''; position: absolute; inset: 18px; pointer-events: none; z-index: 1; border: 1px solid rgba(232, 208, 154, .1); }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--ivory); text-shadow: 0 2px 30px rgba(0, 0, 0, .4); }
.page-hero .lead { color: rgba(255, 250, 242, .74); max-width: 40rem; margin: 20px auto 0; }
.breadcrumb { display: flex; justify-content: center; gap: 10px; margin-top: 28px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 250, 242, .5); }
.breadcrumb a { color: var(--gold-soft); }
.breadcrumb span[aria-hidden] { color: rgba(255, 250, 242, .35); }

/* ---------- card valori (icone a praline) ---------- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-card {
  position: relative; background: var(--ivory); border: 1px solid var(--line);
  border-radius: 6px; padding: 50px 38px 44px; text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.value-card::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px;
  background: var(--gold-foil); border-radius: 0 0 3px 3px;
  transform: scaleX(0); transition: transform .45s var(--ease);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.value-card:hover::before { transform: scaleX(1); }
.value-icon {
  width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, #7a4a2e 0%, #3a2114 48%, var(--choc-deep) 100%);
  border: 1px solid var(--gold);
  box-shadow: 0 10px 22px rgba(42, 23, 13, .28), inset 0 2px 5px rgba(255, 255, 255, .14);
}
.value-icon svg { width: 30px; height: 30px; stroke: var(--gold-soft); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.value-card h3 { margin-bottom: 12px; }
.value-card p { font-size: .96rem; color: var(--muted); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split-media { position: relative; }
.split-media .frame {
  position: relative; padding: 12px; background: var(--ivory);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: 6px;
}
.split-media .frame img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.split-media::before {
  content: ''; position: absolute; top: 26px; left: -26px; right: 26px; bottom: -26px;
  background: var(--bar), linear-gradient(145deg, var(--milk), var(--choc));
  border-radius: 6px; z-index: -1;
}
.split-media .badge-floating {
  position: absolute; right: -18px; bottom: -18px;
  background: radial-gradient(circle at 30% 25%, #5c3722, var(--choc-deep));
  color: var(--gold-soft); border: 1px solid var(--gold); border-radius: 6px;
  padding: 20px 26px; text-align: center; box-shadow: var(--shadow-lg);
}
.split-media .badge-floating strong { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.split-media .badge-floating span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.split-body h2 { margin-bottom: 22px; }
.split-body p + p { margin-top: 16px; }
.split-body .btn { margin-top: 34px; }
.split-list { margin-top: 26px; display: grid; gap: 14px; }
.split-list li { display: flex; gap: 14px; align-items: baseline; }
.split-list li::before { content: ''; width: 10px; height: 14px; flex: none; background: var(--bean-gold) center / contain no-repeat; transform: translateY(2px); }

/* ---------- prodotti ---------- */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.product-card {
  background: var(--ivory); border: 1px solid var(--line); overflow: hidden; border-radius: 6px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.product-card figure { position: relative; overflow: hidden; aspect-ratio: 4/3; border-bottom: 3px solid var(--gold); }
.product-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.product-card:hover figure img { transform: scale(1.06); }
.product-card figcaption {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: rgba(25, 12, 6, .82); color: var(--gold-soft); border-radius: 999px;
  font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid rgba(232, 208, 154, .35);
}
.product-body { padding: 26px 30px 34px; }
.product-body h3 { margin-bottom: 10px; }
.product-body p { font-size: .95rem; color: var(--muted); }

/* ---------- scala del cacao ---------- */
.cacao-scale { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; counter-reset: none; }
.cacao-scale::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 56px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #efe1c6, #9a6238, #5e3420, #3d1f10, #1d0d06);
}
.cacao-scale li { position: relative; text-align: center; }
.choc-square {
  display: block; width: 112px; height: 112px; margin: 0 auto 22px; border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .3) 100%),
    var(--c);
  box-shadow: inset 0 0 0 9px rgba(0, 0, 0, .07), inset 3px 3px 0 rgba(255, 255, 255, .14), inset -3px -3px 0 rgba(0, 0, 0, .14), 0 14px 26px rgba(42, 23, 13, .22);
  transition: transform .4s var(--ease);
}
.cacao-scale li:hover .choc-square { transform: translateY(-6px) rotate(-3deg); }
.cacao-scale h3 { font-size: 1.35rem; margin-bottom: 4px; }
.cacao-scale .pct { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px; }
.cacao-scale li p:last-child { font-size: .92rem; color: var(--muted); }

/* ---------- citazione ---------- */
.quote-band { text-align: center; }
.quote-band blockquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.35;
  color: var(--ivory); max-width: 880px; margin: 0 auto;
}
.quote-band blockquote p strong { color: var(--gold-soft); font-weight: 600; }
.quote-band cite { display: block; margin-top: 26px; font-style: normal; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); }
.crown { width: 58px; margin: 0 auto 30px; filter: drop-shadow(0 4px 12px rgba(194, 157, 90, .35)); }
.section-dark + .section-dark { border-top: 1px solid var(--line-dark); }

/* ---------- galleria ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-grid a {
  position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 6px;
  border: 1px solid var(--line); background: var(--ivory);
}
.gallery-grid a img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery-grid a:hover img { transform: scale(1.07); }
.gallery-grid a::after {
  content: '+'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-soft);
  background: radial-gradient(circle, rgba(42, 23, 13, .35), rgba(25, 12, 6, .65)); opacity: 0; transition: opacity .4s var(--ease);
}
.gallery-grid a:hover::after { opacity: 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(18, 8, 4, .95); padding: 32px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(860px, 92vw); max-height: 84vh; border: 1px solid var(--gold); padding: 8px; background: var(--choc-deep); border-radius: 6px; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: none; border: 1px solid var(--line-dark); border-radius: 50%;
  width: 52px; height: 52px; color: var(--ivory); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lightbox-close { top: 22px; right: 26px; font-size: 1.5rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); font-size: 1.3rem; }
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--gold); color: var(--gold-soft); }
.lightbox-prev { left: 26px; }
.lightbox-next { right: 26px; }

/* ---------- blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.blog-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.blog-card {
  display: flex; flex-direction: column; border-radius: 6px;
  background: var(--ivory); border: 1px solid var(--line); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.blog-card figure { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.blog-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.blog-card:hover figure img { transform: scale(1.05); }
.blog-card-body { padding: 24px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.blog-card-meta { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 12px; }
.blog-card h3 { font-size: 1.32rem; margin-bottom: 12px; }
.blog-card h3 a { color: var(--ink); }
.blog-card h3 a:hover { color: var(--gold-dim); }
.blog-card p { font-size: .94rem; color: var(--muted); flex: 1; }
.blog-card .read-more {
  margin-top: 22px; font-size: .76rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--choc);
  display: inline-flex; align-items: center; gap: 8px;
}
.blog-card .read-more::after { content: '→'; transition: transform .3s var(--ease); }
.blog-card .read-more:hover::after { transform: translateX(6px); }

/* articolo */
.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { font-size: 2rem; margin: 50px 0 16px; }
.article-body h3 { font-size: 1.38rem; margin: 34px 0 12px; }
.article-body p + p { margin-top: 16px; }
.article-body a { color: var(--milk); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.article-body a:hover { color: var(--choc); }
.article-body a.btn { text-decoration: none; }
.article-body > .lead:first-child {
  position: relative; padding: 30px 32px 30px 36px; margin-bottom: 10px;
  background: var(--ivory); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-sm);
}
.article-body > .lead:first-child::before { content: ''; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 4px; border-radius: 4px; background: var(--gold-foil); }
.article-body ul { margin: 16px 0; display: grid; gap: 10px; }
.article-body ul li { display: flex; gap: 12px; align-items: baseline; }
.article-body ul li::before { content: ''; width: 9px; height: 12px; flex: none; background: var(--bean-gold) center / contain no-repeat; transform: translateY(1px); }
.article-body .article-figure { margin: 36px 0; padding: 10px; border: 1px solid var(--line); background: var(--ivory); border-radius: 6px; }
.tip-box {
  position: relative; margin: 46px 0 10px; padding: 34px 36px 32px; border-radius: 6px; overflow: hidden;
  background: var(--grain), var(--bar), radial-gradient(600px 200px at 10% 0%, rgba(194, 157, 90, .14), transparent 60%), linear-gradient(160deg, var(--milk-deep), var(--choc));
  color: rgba(255, 250, 242, .86); border: 1px solid rgba(232, 208, 154, .3);
}
.article-body .tip-box h2 { margin: 0 0 12px; font-size: 1.55rem; color: var(--gold-soft); display: flex; align-items: center; gap: 12px; }
.tip-box h2::before { content: ''; width: 16px; height: 22px; flex: none; background: var(--bean-gold) center / contain no-repeat; }
.article-cta {
  margin-top: 56px; padding: 44px 40px; text-align: center; border-radius: 6px;
  background: var(--grain), var(--bar), linear-gradient(180deg, var(--choc-deep), var(--choc));
  border: 1px solid var(--gold);
}
.article-cta h2 { color: var(--ivory); margin: 0 0 10px; font-size: 1.8rem; }
.article-cta p { color: rgba(255, 250, 242, .72); margin-bottom: 24px; }
.related { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--line); }
.related > h2 { text-align: center; font-size: 2rem; margin: 0 0 36px; }

/* ---------- contatti ---------- */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
.contact-info { display: grid; gap: 18px; }
.contact-item {
  display: flex; gap: 20px; align-items: flex-start; border-radius: 6px;
  background: var(--ivory); border: 1px solid var(--line); padding: 26px 28px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.contact-item:hover { border-color: var(--gold); transform: translateX(4px); }
.contact-item .value-icon { width: 54px; height: 54px; margin: 0; flex: none; }
.contact-item .value-icon svg { width: 22px; height: 22px; }
.contact-item h3 { font-size: 1.18rem; margin-bottom: 4px; }
.contact-item p, .contact-item a { font-size: .96rem; color: var(--muted); }
.contact-item a:hover { color: var(--choc); }

.contact-form {
  position: relative; background: var(--ivory); border: 1px solid var(--line); border-radius: 6px;
  padding: 50px 46px 46px; box-shadow: var(--shadow-md); overflow: hidden;
}
.contact-form::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px;
  background: var(--grain), var(--choc);
  -webkit-mask: var(--drip-shape) repeat-x top left / 300px 30px; mask: var(--drip-shape) repeat-x top left / 300px 30px;
}
.contact-form h2 { font-size: 1.95rem; margin-bottom: 8px; }
.contact-form > p { color: var(--muted); font-size: .95rem; margin-bottom: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.form-field input, .form-field textarea {
  width: 100%; padding: 14px 16px;
  font-family: var(--font-body); font-size: .96rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(194, 157, 90, .2); }
.form-field textarea { resize: vertical; min-height: 130px; }
.form-consent { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; color: var(--muted); margin: 4px 0 24px; }
.form-consent input { margin-top: 5px; accent-color: var(--milk); width: 16px; height: 16px; flex: none; }
.form-status { margin-top: 16px; font-size: .92rem; min-height: 1.4em; }
.form-status.is-ok { color: #3c6e47; }
.form-status.is-error { color: #a33c2f; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- CTA banner: una tavoletta di cioccolato ---------- */
.cta-banner {
  text-align: center;
  background:
    var(--grain),
    radial-gradient(700px 300px at 50% 0%, rgba(194, 157, 90, .14), transparent 65%),
    var(--bar),
    linear-gradient(180deg, var(--choc-deep) 0%, var(--choc) 100%);
}
.cta-banner h2 { max-width: 720px; margin: 0 auto 16px; }
.cta-banner p { max-width: 560px; margin: 0 auto 36px; }
.cta-banner .hero-cta { justify-content: center; margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--grain), var(--choc-deep); color: rgba(255, 250, 242, .72); border-top: 1px solid var(--line-dark); }
.footer-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 50px; padding: 80px 24px 56px; }
.footer-brand-col img { height: 88px; width: auto; margin-bottom: 20px; }
.footer-brand-col p { font-size: .92rem; max-width: 30ch; }
.site-footer h4 { font-family: var(--font-body); font-size: .76rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 20px; }
.site-footer ul { display: grid; gap: 10px; }
.site-footer ul a, .site-footer ul li { font-size: .92rem; color: rgba(255, 250, 242, .72); }
.site-footer ul a:hover { color: var(--gold-soft); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; justify-content: space-between;
  padding: 26px 24px; border-top: 1px solid var(--line-dark);
  font-size: .82rem; color: rgba(255, 250, 242, .5);
}
.footer-bottom a { color: rgba(255, 250, 242, .66); }
.footer-bottom a:hover { color: var(--gold-soft); }

/* ---------- 404 ---------- */
.page-404 { min-height: 60vh; display: flex; align-items: center; text-align: center; }
.page-404 .display { font-family: var(--font-display); font-size: clamp(5rem, 14vw, 9rem); line-height: 1; background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- reveal (contenuto SEMPRE visibile senza JS) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   MENU MOBILE — blocco standard Royaletiger (vedi skill FASE 5-bis)
   ============================================================ */
body.is-locked {
  position: fixed; width: 100%; overflow: hidden;
  top: var(--scroll-lock-top, 0); overflow-anchor: none;
}
.nav-overlay { display: none; }
.site-header.has-menu-open {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--choc-deep);
}
.nav-toggle {
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 1.6px; background: var(--gold-soft); transition: transform .3s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 89;
    background: rgba(18, 8, 4, .6); border: 0; padding: 0; cursor: pointer;
    opacity: 0; visibility: hidden;
    transition: opacity .38s var(--ease), visibility 0s linear .38s;
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; transition: opacity .38s var(--ease), visibility 0s linear 0s; }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; z-index: 91;
    width: min(86vw, 360px);
    background: var(--grain), var(--choc-deep);
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 110px 28px 40px;
    box-shadow: var(--shadow-lg);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .nav-menu.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s linear 0s; }
  .nav-menu a { padding: 15px 16px; font-size: .92rem; border-bottom: 1px solid rgba(232, 208, 154, .1); }
  .nav-menu a::after { display: none; }
  .nav-menu .nav-cta { margin-top: 20px; text-align: center; justify-content: center; display: flex; border-bottom: 0; border: 1px solid var(--gold); }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { gap: 46px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid.is-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .choc-square { width: 92px; height: 92px; }
  .cacao-scale::before { top: 46px; }
}
@media (max-width: 900px) {
  :root { --drip-h: 64px; }
  .section { padding: 92px 0; }
  .hero { padding: calc(var(--nav-h) + 60px) 0 90px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .hero-photo { position: static; width: auto; padding: 8px; }
  .hero-photo::after { inset: 8px; }
  .hero-photo-main, .hero-photo-side { width: auto; }
  .hero-seal { display: none; }
  .values-grid, .products-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 60px; }
  .split-media { max-width: 480px; }
  .blog-grid { grid-template-columns: 1fr; }
  .cacao-scale { gap: 14px; }
  .choc-square { width: 76px; height: 76px; }
  .cacao-scale::before { top: 38px; }
  .flavor-track span { font-size: 1.3rem; padding: 0 16px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 80px; --drip-h: 48px; }
  .page-hero + .section::before, .flavor-ribbon + .section::before,
  .section-dark + .section:not(.section-dark)::before, .section:not(.section-dark) + .section-dark::before,
  main:has(> section.section:last-child:not(.section-dark)) + .site-footer::before {
    -webkit-mask-size: 380px var(--drip-h); mask-size: 380px var(--drip-h);
  }
  .section { padding: 80px 0; }
  .eyebrow { gap: 10px; letter-spacing: .26em; }
  .eyebrow::before, .section-head.is-center .eyebrow::after, .page-hero .eyebrow::after {
    width: 12px; background: var(--bean-gold) center / 11px 15px no-repeat;
  }
  .hero-deco span:nth-child(1), .hero-deco span:nth-child(3), .hero-deco span:nth-child(5) { display: none; }
  .nav-brand img { height: 54px; }
  .site-header.scrolled .nav-brand img { height: 48px; }
  .values-grid, .products-grid, .blog-grid.is-3 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-stats { flex-wrap: wrap; gap: 18px 0; }
  .hero-stats > div { padding-right: 22px; margin-right: 22px; }
  .cacao-scale { grid-template-columns: 1fr; gap: 14px; }
  .cacao-scale::before { left: 37px; right: auto; top: 20px; bottom: 20px; width: 4px; height: auto; background: linear-gradient(180deg, #efe1c6, #9a6238, #5e3420, #3d1f10, #1d0d06); }
  .cacao-scale li { display: grid; grid-template-columns: 78px 1fr; column-gap: 18px; text-align: left; align-items: center; }
  .cacao-scale li .choc-square { grid-row: span 3; margin: 0; }
  .contact-form { padding: 44px 24px 32px; }
  .form-row { grid-template-columns: 1fr; }
  .tip-box { padding: 28px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; padding: 60px 24px 40px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}