/* ============================================================
   VARIABILI CSS (Single Source of Truth)
   ============================================================ */
:root {
  --color-navy:       #0F2B46;
  --color-navy-light: #163A5C;
  --color-gold:       #C6A75E;
  --color-gold-light: #D4BA7A;
  --color-gold-dark:  #A8893E;
  --color-cream:      #FAF8F5;
  --color-slate:      #64748B;
  --color-error:      #F87171;
}

/* ============================================================
   FONT FACES
   ============================================================ */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font/PlayfairDisplay.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(font/DMSans.woff2) format('woff2');
}

/* ============================================================
   BASE
   ============================================================ */
html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  height: 100%;
  margin: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* ============================================================
   ANIMAZIONI (rispetta prefers-reduced-motion)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes countUp {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50%       { transform: translateY(0);   animation-timing-function: cubic-bezier(0,0,0.2,1); }
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
  }

  .animate-fade-up    { animation: fadeInUp    0.8s ease-out forwards; }
  .animate-fade-in    { animation: fadeIn      0.6s ease-out forwards; }
  .animate-slide-left { animation: slideInLeft 0.8s ease-out forwards; }
  .animate-slide-right{ animation: slideInRight 0.8s ease-out forwards; }
  .animate-count      { animation: countUp     0.6s ease-out forwards; }
  .animate-bounce     { animation: bounce      1s   infinite; }
  .animate-pulse      { animation: pulse       2s   cubic-bezier(0.4,0,0.6,1) infinite; }
  .toast              { animation: fadeInUp    0.4s ease-out forwards; }

  .gold-shimmer {
    background: linear-gradient(90deg, var(--color-gold) 0%, #E8D5A0 40%, var(--color-gold) 60%, var(--color-gold-dark) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up,
  .animate-fade-in,
  .animate-slide-left,
  .animate-slide-right,
  .animate-count {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .anim-hidden { opacity: 1 !important; }
  .gold-shimmer {
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   DELAY ANIMAZIONI
   ============================================================ */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }

.anim-hidden { opacity: 0; }

/* ============================================================
   ACCESSIBILITÀ
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--color-gold);
  color: var(--color-navy);
  padding: 8px 16px;
  border-radius: 0 0 4px 4px;
  font-weight: 600;
  font-size: 14px;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

@media (forced-colors: active) {
  .btn-gold    { forced-color-adjust: auto; }
  .gold-shimmer { -webkit-text-fill-color: CanvasText; }
}

/* ============================================================
   COMPONENTI UI
   ============================================================ */

/* Hero */
.hero-pattern {
  background-image:
    radial-gradient(circle at 20% 50%, rgba(198,167,94,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(198,167,94,0.05) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(255,255,255,0.03) 0%, transparent 30%);
}

/* Geo accent */
.geo-accent::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  border-radius: 2px;
}

/* Program card */
.program-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(198,167,94,0.15);
}
.program-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(15,43,70,0.15);
  border-color: rgba(198,167,94,0.4);
}
.program-card:focus-within {
  box-shadow: 0 0 0 3px var(--color-gold);
}

/* Buttons */
.btn-gold {
  background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 50%, var(--color-gold) 100%);
  background-size: 200% auto;
  transition: background-position 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  color: var(--color-navy);
  font-weight: 600;
  cursor: pointer;
}
.btn-gold:hover {
  background-position: right center;
  box-shadow: 0 8px 30px rgba(198,167,94,0.4);
  transform: translateY(-2px);
}
.btn-gold:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-outline {
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}
.btn-outline:hover {
  background: var(--color-gold);
  color: var(--color-navy);
}

/* Header */
.header-scrolled {
  background: rgba(15,43,70,0.97) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}

/* Testimonial */
.testimonial-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(198,167,94,0.15);
  backdrop-filter: blur(4px);
}

/* Mobile nav */
.mobile-nav {
  position: fixed;
  inset: 0;
  background-color: var(--color-navy) !important;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.35s ease;
}
.mobile-nav.hidden-nav {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Stat */
.stat-number { font-variant-numeric: tabular-nums; }

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,167,94,0.3), transparent);
}

/* Form */
.form-input::placeholder { color: rgba(255,255,255,0.5); }
.form-input:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(198,167,94,0.25);
  outline: none;
}
.form-error {
  color: var(--color-error);
  font-size: 12px;
  margin-top: 4px;
  display: none;
}
.form-error.visible { display: block; }

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error) !important;
}

/* FAQ */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-answer.open { max-height: 500px; }

/* Filter */
.filter-btn.active {
  background: var(--color-gold);
  color: var(--color-navy);
}

/* Cookie banner */
.cookie-container {
  position: fixed;
  bottom: 30px;
  left: 30px;
  background: #ffffff;
  color: #1a1a1a;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-radius: 8px;
  display: none;
  z-index: 10000;
  max-width: 420px;
  border-top: 4px solid #1a2a40;
}
.cookie-content h3 {
  margin-top: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #1a2a40;
  margin-bottom: 12px;
}
.cookie-content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a4a4a;
  margin-bottom: 20px;
}
.cookie-buttons { display: flex; gap: 12px; }
.cookie-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  flex: 1;
}
.accept { background: #1a2a40; color: white; }
.accept:hover { background: #2c4365; box-shadow: 0 4px 8px rgba(26,42,64,0.2); }
.decline { background: #f4f4f4; color: #1a2a40; border: 1px solid #e0e0e0; }
.decline:hover { background: #ebebeb; }

@media (max-width: 480px) {
  .cookie-container { left: 15px; right: 15px; bottom: 15px; padding: 20px; }
  .cookie-buttons { flex-direction: column; }
}

/* ============================================================
   COLORI CUSTOM (usa variabili CSS)
   ============================================================ */

/* Backgrounds */
.bg-navy        { background-color: var(--color-navy); }
.bg-navy-light  { background-color: var(--color-navy-light); }
.bg-gold        { background-color: var(--color-gold); }
.bg-gold-light  { background-color: var(--color-gold-light); }
.bg-gold-dark   { background-color: var(--color-gold-dark); }
.bg-cream       { background-color: var(--color-cream); }
.bg-slate       { background-color: var(--color-slate); }
.bg-white       { background-color: #ffffff; }

/* Testi */
.text-navy       { color: var(--color-navy); }
.text-navy-light { color: var(--color-navy-light); }
.text-gold       { color: var(--color-gold); }
.text-gold-light { color: var(--color-gold-light); }
.text-gold-dark  { color: var(--color-gold-dark); }
.text-cream      { color: var(--color-cream); }
.text-slate      { color: var(--color-slate); }
.text-white      { color: #ffffff; }
.text-black      { color: #000000; }

/* Bordi */
.border-navy       { border-color: var(--color-navy); }
.border-navy-light { border-color: var(--color-navy-light); }
.border-gold       { border-color: var(--color-gold); }
.border-gold-light { border-color: var(--color-gold-light); }
.border-gold-dark  { border-color: var(--color-gold-dark); }
.border-cream      { border-color: var(--color-cream); }
.border-slate      { border-color: var(--color-slate); }

/* Font families */
.font-display { font-family: 'Playfair Display', Georgia, serif; }
.font-body    { font-family: 'DM Sans', system-ui, sans-serif; }

/* Opacità sfondo */
.bg-white\/5  { background-color: rgba(255,255,255,0.05); }
.bg-white\/8  { background-color: rgba(255,255,255,0.08); }
.bg-white\/10 { background-color: rgba(255,255,255,0.10); }
.bg-navy\/5   { background-color: rgba(15,43,70,0.05); }
.bg-gold\/5   { background-color: rgba(198,167,94,0.05); }
.bg-gold\/8   { background-color: rgba(198,167,94,0.08); }
.bg-gold\/10  { background-color: rgba(198,167,94,0.10); }
.bg-gold\/20  { background-color: rgba(198,167,94,0.20); }

/* Opacità testo */
.text-white\/30 { color: rgba(255,255,255,0.30); }
.text-white\/40 { color: rgba(255,255,255,0.40); }
.text-white\/50 { color: rgba(255,255,255,0.50); }
.text-white\/60 { color: rgba(255,255,255,0.60); }
.text-white\/70 { color: rgba(255,255,255,0.70); }
.text-white\/80 { color: rgba(255,255,255,0.80); }

/* Opacità bordi */
.border-white\/5  { border-color: rgba(255,255,255,0.05); }
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/15 { border-color: rgba(255,255,255,0.15); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/30 { border-color: rgba(255,255,255,0.30); }
.border-gold\/10  { border-color: rgba(198,167,94,0.10); }
.border-gold\/20  { border-color: rgba(198,167,94,0.20); }
.border-gold\/30  { border-color: rgba(198,167,94,0.30); }

/* Gradient custom */
.from-gold      { --tw-gradient-from: var(--color-gold); }
.to-gold-light  { --tw-gradient-to:   var(--color-gold-light); }
.from-gold-dark { --tw-gradient-from: var(--color-gold-dark); }
.to-gold        { --tw-gradient-to:   var(--color-gold); }

/* Fill */
.fill-gold { fill: var(--color-gold); }

/* ============================================================
   UTILITÀ TAILWIND (mantenute per compatibilità HTML)
   ============================================================ */

/* Layout */
.sr-only       { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; }
.absolute      { position: absolute; }
.fixed         { position: fixed; }
.relative      { position: relative; }
.block         { display: block; }
.flex          { display: flex; }
.grid          { display: grid; }
.hidden        { display: none; }
.inline-flex   { display: inline-flex; }
.overflow-auto   { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.resize-none     { resize: none; }
.appearance-none { appearance: none; }
.list-disc       { list-style-type: disc; }
.backdrop-blur   { backdrop-filter: blur(8px); }
.opacity-60      { opacity: 60%; }

/* Position helpers */
.inset-0    { inset: 0; }
.top-0      { top: 0; }
.top-10     { top: 2.5rem; }
.top-20     { top: 5rem; }
.left-0     { left: 0; }
.left-10    { left: 2.5rem; }
.right-10   { right: 2.5rem; }
.right-20   { right: 5rem; }
.bottom-8   { bottom: 2rem; }
.bottom-32  { bottom: 8rem; }
.-bottom-4  { bottom: -1rem; }
.-right-4   { right: -1rem; }
.top-1\/3   { top: calc(1/3 * 100%); }
.right-1\/4 { right: calc(1/4 * 100%); }
.bottom-1\/4{ bottom: calc(1/4 * 100%); }
.left-1\/2  { left: calc(1/2 * 100%); }
.left-1\/3  { left: calc(1/3 * 100%); }

/* Z-index */
.-z-10 { z-index: -10; }
.z-10  { z-index: 10; }
.z-50  { z-index: 50; }

/* Flex/Grid */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.order-1       { order: 1; }
.order-2       { order: 2; }
.order-last    { order: 9999; }
.mx-auto       { margin-inline: auto; }
.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.h-full        { height: 100%; }
.w-full        { width: 100%; }

/* Transform */
.-translate-x-1\/2 { --tw-translate-x: calc(50% * -1); translate: var(--tw-translate-x) var(--tw-translate-y); }
.rotate-12 { rotate: 12deg; }
.rotate-45 { rotate: 45deg; }

/* Dimensioni (h/w) */
.h-1   { height: 0.25rem; }
.h-2   { height: 0.5rem; }
.h-2\.5{ height: 0.625rem; }
.h-4   { height: 1rem; }
.h-5   { height: 1.25rem; }
.h-6   { height: 1.5rem; }
.h-7   { height: 1.75rem; }
.h-8   { height: 2rem; }
.h-9   { height: 2.25rem; }
.h-10  { height: 2.5rem; }
.h-11  { height: 2.75rem; }
.h-12  { height: 3rem; }
.h-14  { height: 3.5rem; }
.h-16  { height: 4rem; }
.h-20  { height: 5rem; }
.h-40  { height: 10rem; }
.h-48  { height: 12rem; }
.h-64  { height: 16rem; }
.h-96  { height: 24rem; }
.w-1   { width: 0.25rem; }
.w-2   { width: 0.5rem; }
.w-3   { width: 0.75rem; }
.w-4   { width: 1rem; }
.w-5   { width: 1.25rem; }
.w-6   { width: 1.5rem; }
.w-7   { width: 1.75rem; }
.w-8   { width: 2rem; }
.w-9   { width: 2.25rem; }
.w-10  { width: 2.5rem; }
.w-11  { width: 2.75rem; }
.w-12  { width: 3rem; }
.w-14  { width: 3.5rem; }
.w-24  { width: 6rem; }
.w-40  { width: 10rem; }
.w-48  { width: 12rem; }
.w-64  { width: 16rem; }
.w-96  { width: 24rem; }

/* Padding */
.p-1\.5  { padding: 0.375rem; }
.p-6     { padding: 1.5rem; }
.p-8     { padding: 2rem; }
.px-3    { padding-inline: 0.75rem; }
.px-4    { padding-inline: 1rem; }
.px-5    { padding-inline: 1.25rem; }
.px-6    { padding-inline: 1.5rem; }
.px-8    { padding-inline: 2rem; }
.px-10   { padding-inline: 2.5rem; }
.py-1    { padding-block: 0.25rem; }
.py-2    { padding-block: 0.5rem; }
.py-2\.5 { padding-block: 0.625rem; }
.py-3    { padding-block: 0.75rem; }
.py-4    { padding-block: 1rem; }
.py-16   { padding-block: 4rem; }
.pb-4    { padding-bottom: 1rem; }
.pl-5    { padding-left: 1.25rem; }
.pr-4    { padding-right: 1rem; }
.pt-6    { padding-top: 1.5rem; }

/* Margin */
.mb-1    { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-12   { margin-bottom: 3rem; }
.mb-14   { margin-bottom: 3.5rem; }
.mb-16   { margin-bottom: 4rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-4    { margin-top: 1rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-16   { margin-top: 4rem; }
.-mt-0\.5{ margin-top: -0.125rem; }

/* Gap */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* Tipografia */
.text-\[10px\] { font-size: 10px; }
.text-xs       { font-size: 0.75rem;  line-height: 1rem; }
.text-sm       { font-size: 0.875rem; line-height: 1.25rem; }
.text-base     { font-size: 1rem;     line-height: 1.5rem; }
.text-lg       { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl       { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl      { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl      { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl      { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl      { font-size: 3rem;     line-height: 1; }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.uppercase     { text-transform: uppercase; }
.italic        { font-style: italic; }
.not-italic    { font-style: normal; }
.underline     { text-decoration-line: underline; }
.font-light    { font-weight: 300; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.leading-\[1\.1\]   { line-height: 1.1; }
.leading-relaxed    { line-height: 1.625; }
.leading-tight      { line-height: 1.25; }
.tracking-wide      { letter-spacing: 0.025em; }
.tracking-wider     { letter-spacing: 0.05em; }
.tracking-widest    { letter-spacing: 0.1em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }

/* Border radius */
.rounded-full { border-radius: calc(infinity * 1px); }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }

/* Border */
.border   { border-style: solid; border-width: 1px; }
.border-2 { border-style: solid; border-width: 2px; }
.border-t { border-top-style: solid; border-top-width: 1px; }

/* Shadow */
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Max-width */
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-7xl { max-width: 80rem; }

/* Background gradient */
.bg-gradient-to-r {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
}

/* Transition */
.transition-all {
  transition-property: all;
  transition-timing-function: ease;
  transition-duration: 0s;
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: ease;
  transition-duration: 0s;
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: ease;
  transition-duration: 0s;
}
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* Space-y */
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* ============================================================
   SCROLLBAR CUSTOM (solo desktop)
   ============================================================ */
@media (min-width: 1024px) {
  ::-webkit-scrollbar       { width: 8px; }
  ::-webkit-scrollbar-track { background: var(--color-navy); }
  ::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: 4px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 640px) {
  .sm\:flex-row     { flex-direction: row; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:block        { display: block; }
  .sm\:px-6         { padding-inline: 1.5rem; }
  .sm\:text-lg      { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-xl      { font-size: 1.25rem;  line-height: 1.75rem; }
  .sm\:text-5xl     { font-size: 3rem;     line-height: 1; }
  .sm\:gap-10       { gap: 2.5rem; }
}

@media (min-width: 768px) {
  .md\:col-span-2   { grid-column: span 2; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:h-20         { height: 5rem; }
  .md\:w-11         { width: 2.75rem; }
  .md\:block        { display: block; }
  .md\:gap-12       { gap: 3rem; }
  .md\:gap-16       { gap: 4rem; }
  .md\:p-12         { padding: 3rem; }
  .md\:py-20        { padding-block: 5rem; }
  .md\:py-28        { padding-block: 7rem; }
  .md\:text-base    { font-size: 1rem;     line-height: 1.5rem; }
  .md\:text-xl      { font-size: 1.25rem;  line-height: 1.75rem; }
  .md\:text-2xl     { font-size: 1.5rem;   line-height: 2rem; }
  .md\:text-4xl     { font-size: 2.25rem;  line-height: 2.5rem; }
  .md\:text-5xl     { font-size: 3rem;     line-height: 1; }
  .md\:text-6xl     { font-size: 3.75rem;  line-height: 1; }
}

@media (min-width: 1024px) {
  .lg\:col-span-1   { grid-column: span 1; }
  .lg\:col-span-2   { grid-column: span 2; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:block        { display: block; }
  .lg\:flex         { display: flex; }
  .lg\:hidden       { display: none; }
  .lg\:gap-20       { gap: 5rem; }
  .lg\:order-1      { order: 1; }
  .lg\:order-2      { order: 2; }
  .lg\:px-8         { padding-inline: 2rem; }
  .lg\:text-5xl     { font-size: 3rem;  line-height: 1; }
  .lg\:text-7xl     { font-size: 4.5rem; line-height: 1; }
  .hidden.lg\:block { display: block; }
}

/* ============================================================
   STAMPA
   ============================================================ */
@media print {
  header, footer, .fixed, #chatButton, #toast { display: none !important; }
  body { color: black; background: white; }
  a    { color: black; text-decoration: underline; }
}

/* ============================================================
   PROPRIETÀ CUSTOM TAILWIND (fallback browser)
   ============================================================ */
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-leading  { syntax: "*"; inherits: false; }
@property --tw-tracking { syntax: "*"; inherits: false; }
@property --tw-duration { syntax: "*"; inherits: false; }

@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-duration: initial;
    }
  }
}