/*
 * design-system.css — v3.0
 * Gabriele Di Stefano — gabrieledistefano.it
 * ─────────────────────────────────────────
 * CHANGELOG v3:
 * - Card A: Dark Brutalist (box-shadow solida, headline Bricolage 800 + Playfair italic)
 * - Card C: Stacked Layer (layer amber fisico sotto la card)
 * - Rimossi: btn-primary blur, btn-ghost precedenti
 * - Aggiunto: btn-fill (Fill Slide, primario + ghost + sage + cop)
 * - Aggiunto: btn-bracket (Bracket + underline, terziario)
 * - Fix: .ca-tag colore alzato (#5E574D + opacity .75) per leggibilità
 * - Aggiornati: copper, sage come accent colori ufficiali
 * ─────────────────────────────────────────
 */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --bg:      #131211;
  --bg-alt:  #161412;
  --s1:      #1C1A16;
  --s2:      #252119;
  --s3:      #302B21;
  --border:  #2C2820;
  --bord-m:  #3D3830;
  --bord-s:  #201D17;

  --acc:     #C8921E;
  --acc-l:   #DBA84A;
  --acc-ll:  #ECC578;
  --acc-x:   rgba(200,146,30,.06);
  --acc-sm:  rgba(200,146,30,.13);
  --acc-md:  rgba(200,146,30,.25);
  --acc-hi:  rgba(200,146,30,.40);

  --cop:     #B85C38;
  --cop-l:   #D4734E;
  --cop-ll:  #E8906A;
  --cop-x:   rgba(184,92,56,.07);
  --cop-sm:  rgba(184,92,56,.16);

  --sage:    #5C8F6E;
  --sage-l:  #7AAF8A;
  --sage-x:  rgba(92,143,110,.07);
  --sage-sm: rgba(92,143,110,.16);

  --slate:   #5B8FA8;
  --slate-x: rgba(91,143,168,.07);

  --cream:   #F2E8D0;
  --cream-2: #D4C8AA;
  --cream-3: #E8E6E1;
  --cream-4: #A8A297;

  /* alias legacy per compatibilità template */
  --text:    var(--cream);
  --text-2:  var(--cream-2);
  --text-3:  var(--cream-3);
  --text-4:  var(--cream-4);
  --green:   var(--sage);
  --green-x: var(--sage-x);
  --green-sm:var(--sage-sm);

  --display: 'Bricolage Grotesque', sans-serif;
  --serif:   'Playfair Display', serif;
  --body:    'DM Sans', sans-serif;
  --mono:    'Courier New', monospace;

  --r-xs: 2px; --r-sm: 4px; --r-md: 8px;
  --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;

  --shadow-card:  6px 6px 0px var(--acc);
  --shadow-hover: 10px 10px 0px var(--acc);
  --glow:    0 0 40px rgba(200,146,30,.16),0 0 80px rgba(200,146,30,.07);
  --glow-sm: 0 0 24px rgba(200,146,30,.13);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--body);background:var(--bg);color:var(--cream);line-height:1.6;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
@media(pointer:coarse){body{cursor:auto}}

/* ── NOISE TEXTURE ───────────────────────────────────────── */
body::before{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}

/* ── CURSOR ──────────────────────────────────────────────── */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;border-radius:50%;z-index:10000;transform:translate(-50%,-50%)}
.cursor-dot{width:6px;height:6px;background:var(--acc)}
.cursor-ring{width:30px;height:30px;border:1px solid rgba(200,146,30,.38);transition:width .25s,height .25s,border-color .25s}
.cursor-ring.hovered{width:46px;height:46px;border-color:rgba(200,146,30,.65)}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem)}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes fadein{to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse-g{0%,100%{box-shadow:0 0 0 0 rgba(92,143,110,.32)}50%{box-shadow:0 0 0 4px rgba(92,143,110,0)}}
@keyframes shimmer{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes mesh{0%,100%{filter:brightness(1)}50%{filter:brightness(1.025)}}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.22s}.d4{transition-delay:.31s}

/* ── OVERLINE / LABELS ───────────────────────────────────── */
.over-primary{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--acc);margin-bottom:1rem}
.over-primary::before{content:'';width:14px;height:1px;background:var(--acc);flex-shrink:0}
.over-sec{display:block;font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-3);margin-bottom:.9rem}
.sec-over{display:flex;align-items:center;gap:1rem;font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--cream-4);margin-bottom:1.8rem}
.sec-over::after{content:'';flex:1;height:1px;background:var(--border)}
.sec-over span{color:var(--acc)}

/* ══════════════════════════════════════════════════════════
   BUTTONS — v3
   Sistema 2 livelli:
   1. PRIMARIO / SECONDARIO → .btn-fill
   2. TERZIARIO             → .btn-bracket
   Principi: border-radius ≤ 4px, no box-shadow blur,
   animazioni via transform/opacity only
   ══════════════════════════════════════════════════════════ */

/* BTN FILL SLIDE ─── primario + secondario */
.btn-fill{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.65rem;font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:var(--acc-ll);border:1.5px solid var(--acc);background:transparent;padding:.88rem 1.9rem;cursor:pointer;text-decoration:none;border-radius:0;transition:color .35s cubic-bezier(.16,1,.3,1)}
.btn-fill::before{content:'';position:absolute;inset:0;background:var(--acc);transform:translateX(-101%);transition:transform .38s cubic-bezier(.16,1,.3,1);z-index:0}
.btn-fill:hover::before{transform:translateX(0)}
.btn-fill:hover{color:#0C0B08}
.btn-fill>*{position:relative;z-index:1}
.btn-fill .btn-arr{display:inline-block;font-size:1rem;line-height:1;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn-fill:hover .btn-arr{transform:translateX(5px)}
/* Ghost — CTA secondaria */
.btn-fill-ghost{color:var(--cream-3);border-color:var(--bord-m)}
.btn-fill-ghost::before{background:var(--s3)}
.btn-fill-ghost:hover{color:var(--cream)}
/* Sage — T2 */
.btn-fill-sage{color:var(--sage-l);border-color:var(--sage)}
.btn-fill-sage::before{background:var(--sage)}
.btn-fill-sage:hover{color:#0C0B08}
/* Copper */
.btn-fill-cop{color:var(--cop-l);border-color:var(--cop)}
.btn-fill-cop::before{background:var(--cop)}
.btn-fill-cop:hover{color:#0C0B08}
/* Sizes */
.btn-fill-sm{font-size:.78rem;padding:.65rem 1.4rem}
.btn-fill-lg{font-size:1rem;padding:1.05rem 2.3rem}

/* BTN BRACKET + UNDERLINE ─── terziario */
.btn-bracket{display:inline-flex;flex-direction:column;gap:.18rem;align-items:flex-start;font-family:var(--mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--cream);background:none;border:none;cursor:pointer;text-decoration:none;padding:.5rem 0;transition:color .2s}
.btn-bracket:hover{color:var(--acc-ll)}
.bb-inner{display:flex;align-items:center}
.bb-open,.bb-close{color:var(--acc);font-size:1.05rem;line-height:1;display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s}
.btn-bracket:hover .bb-open{transform:translateX(-5px)}
.btn-bracket:hover .bb-close{transform:translateX(5px)}
.btn-bracket:hover .bb-open,.btn-bracket:hover .bb-close{color:var(--cop-l)}
.bb-text{padding:0 .5rem;transition:letter-spacing .3s cubic-bezier(.16,1,.3,1)}
.btn-bracket:hover .bb-text{letter-spacing:.17em}
.bb-line{height:1px;background:var(--acc);width:100%;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1);display:block}
.btn-bracket:hover .bb-line{transform:scaleX(1)}
.btn-bracket-sage .bb-open,.btn-bracket-sage .bb-close{color:var(--sage-l)}
.btn-bracket-sage .bb-line{background:var(--sage-l)}
.btn-bracket-sage:hover{color:var(--sage-l)}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;height:60px;display:flex;align-items:center;padding:0 clamp(1.5rem,4vw,3.5rem);border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(12,11,8,.92);border-color:var(--border);backdrop-filter:blur(22px)}
.nav-logo{font-family:var(--display);font-weight:800;font-size:.98rem;letter-spacing:-.03em;flex-shrink:0;margin-right:auto}
.nav-logo span{color:var(--acc)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-link{font-size:.8rem;color:var(--cream-3);transition:color .18s}
.nav-link:hover,.nav-link.active{color:var(--cream)}
.nav-link.active{color:var(--acc)}
.nav-cta{font-size:.8rem;font-weight:700;background:var(--acc);color:#0C0B08;padding:.52rem 1.3rem;margin-left:2rem;transition:transform .22s,box-shadow .22s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:var(--glow-sm)}
@media(max-width:700px){.nav-links{display:none}}

/* ── CATEGORY BADGES ─────────────────────────────────────── */
.cat-badge{font-family:var(--display);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.22rem .75rem;border-radius:var(--r-pill);border:1px solid}
.cb-pos{color:var(--acc-ll);background:var(--acc-sm);border-color:var(--acc-md)}
.cb-acq{color:var(--sage-l);background:var(--sage-x);border-color:var(--sage-sm)}
.cb-ads{color:var(--slate);background:var(--slate-x);border-color:rgba(91,143,168,.22)}
.cb-cop{color:var(--cop-l);background:var(--cop-x);border-color:var(--cop-sm)}
.cb-tool{color:#B07AE0;background:rgba(176,122,224,.08);border-color:rgba(176,122,224,.22)}

/* ── TICKER ──────────────────────────────────────────────── */
.ticker-wrap{overflow:hidden;background:var(--bg-alt);border-top:1px solid var(--bord-s);border-bottom:1px solid var(--bord-s)}
.ticker{display:flex;white-space:nowrap;animation:ticker 40s linear infinite;padding:.75rem 0}
.ticker:hover{animation-play-state:paused}
.tick{display:inline-flex;align-items:center;gap:.9rem;padding:0 2rem;font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-4)}
.tick-dot{width:3px;height:3px;border-radius:50%;background:var(--acc);opacity:.65}

/* ══════════════════════════════════════════════════════════
   CARD A — DARK BRUTALIST ★ v3
   Box-shadow solida amber (no blur)
   Headline: Bricolage 800 + Playfair italic in <em>
   Riga accent top: gradient cop→acc
   Number badge flottante sopra bordo
   ══════════════════════════════════════════════════════════ */
.card-a{background:var(--s1);border:1.5px solid var(--bord-m);padding:2rem 1.8rem 1.8rem;position:relative;box-shadow:var(--shadow-card);transition:transform .22s ease,box-shadow .22s ease;display:flex;flex-direction:column;gap:.9rem}
.card-a::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cop),var(--acc) 60%,transparent)}
.card-a:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-hover)}
.card-a.v-cop{box-shadow:6px 6px 0px var(--cop)}
.card-a.v-cop:hover{box-shadow:10px 10px 0px var(--cop)}
.card-a.v-sage{box-shadow:6px 6px 0px var(--sage)}
.card-a.v-sage:hover{box-shadow:10px 10px 0px var(--sage)}

/* Number badge */
.ca-num{position:absolute;top:0;right:1.5rem;background:var(--acc);color:#0C0B08;font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;padding:.28rem .65rem;transform:translateY(-100%)}
.ca-num.n-cop{background:var(--cop);color:var(--cream)}
.ca-num.n-sage{background:var(--sage);color:var(--cream)}

/* Category label */
.ca-cat{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--cop-l);display:flex;align-items:center;gap:.5rem}
.ca-cat::before{content:'';width:16px;height:1px;background:currentColor}
.ca-cat.t-sage{color:var(--sage-l)}
.ca-cat.t-acc{color:var(--acc-ll)}

/* Headline: Bricolage 800 + Playfair italic in em */
.ca-title{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.05;letter-spacing:-.05em;color:var(--cream);flex:1}
.ca-title em{display:block;font-family:var(--serif);font-style:italic;font-weight:700;font-size:.95em;color:var(--acc-ll);letter-spacing:-.03em}
.ca-title em.t-cop{color:var(--cop-l)}
.ca-title em.t-sage{color:var(--sage-l)}

/* Body */
.ca-desc{font-size:.8rem;font-weight:300;color:var(--cream-3);line-height:1.7}

/* Meta tag angolo — v3 FIX: colore più leggibile */
.ca-tag{position:absolute;bottom:1.4rem;right:1.6rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-4);opacity:.75}

/* ══════════════════════════════════════════════════════════
   CARD C — STACKED LAYER ★ v3
   Layer amber fisico visibile dietro la card
   Headline: Bricolage 800 + Playfair italic in span
   ══════════════════════════════════════════════════════════ */
.card-c-wrap{position:relative}
.card-c-wrap::before{content:'';position:absolute;inset:0;background:var(--acc);transform:translate(8px,8px);border:1.5px solid var(--acc);transition:transform .22s ease}
.card-c-wrap:hover::before{transform:translate(12px,12px)}
.card-c-wrap.v-cop::before{background:var(--cop);border-color:var(--cop)}
.card-c-wrap.v-sage::before{background:var(--sage);border-color:var(--sage)}

.card-c{background:var(--s2);border:1.5px solid var(--bord-m);padding:1.8rem;position:relative;z-index:1;display:flex;flex-direction:column;gap:.85rem;transition:transform .22s ease}
.card-c-wrap:hover .card-c{transform:translate(-3px,-3px)}

/* Header */
.cc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.cc-num{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;color:var(--acc);background:rgba(200,146,30,.12);border:1px solid rgba(200,146,30,.25);padding:.25rem .6rem;flex-shrink:0}
.cc-num.n-cop{color:var(--cop-l);background:rgba(184,92,56,.12);border-color:rgba(184,92,56,.25)}
.cc-num.n-sage{color:var(--sage-l);background:rgba(92,143,110,.10);border-color:rgba(92,143,110,.22)}
.cc-cat{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.14em;color:var(--cream-4)}

/* Divisore */
.cc-rule{width:100%;height:1px;background:linear-gradient(90deg,var(--bord-m),transparent)}

/* Headline */
.cc-title{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.05;letter-spacing:-.05em;color:var(--cream)}
.cc-title span{display:block;font-family:var(--serif);font-style:italic;font-weight:700;font-size:1.05em;color:var(--acc-ll);letter-spacing:-.03em}
.cc-title span.t-cop{color:var(--cop-l)}
.cc-title span.t-sage{color:var(--sage-l)}

/* Body */
.cc-desc{font-size:.8rem;font-weight:300;color:var(--cream-3);line-height:1.7;flex:1}

/* Footer */
.cc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:.65rem;border-top:1px solid var(--border)}
.cc-step{font-family:var(--mono);font-size:.53rem;color:var(--cream-4);letter-spacing:.08em;text-transform:uppercase}

/* ── HERO BG ─────────────────────────────────────────────── */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(200,146,30,.10) 0%,transparent 60%),radial-gradient(ellipse 40% 50% at 85% 20%,rgba(184,92,56,.06) 0%,transparent 55%),radial-gradient(ellipse 50% 40% at 15% 80%,rgba(92,143,110,.04) 0%,transparent 50%)}
.hero-bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(200,146,30,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(200,146,30,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 0%,black 30%,transparent 100%)}

/* ── NOTE CARD ───────────────────────────────────────────── */
.note-card{background:var(--s1);border:1px solid var(--border);border-left:2px solid var(--acc);padding:.9rem 1.2rem;font-size:.78rem;font-weight:300;color:var(--cream-3);line-height:1.7}
.note-card strong{color:var(--acc-ll);font-weight:600}
.note-card.n-sage{border-left-color:var(--sage)}
.note-card.n-cop{border-left-color:var(--cop)}

/* ── THOUGHT BUBBLE ──────────────────────────────────────── */
.thought{background:var(--s2);border:1px solid var(--bord-m);border-left:2px solid var(--acc-md);padding:1.2rem 1.4rem;display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;font-style:italic;color:var(--cream-2);line-height:1.7;transition:border-left-color .2s}
.thought:hover{border-left-color:var(--acc)}
.thought-icon{width:24px;height:24px;background:var(--cop-x);border:1px solid var(--cop-sm);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.thought-icon svg{width:11px;height:11px;fill:var(--cop-l)}

/* ── STAT NUMBERS ────────────────────────────────────────── */
.stat-n{font-family:var(--display);font-weight:800;font-size:2.8rem;color:var(--acc);line-height:1;letter-spacing:-.04em}
.stat-n sub{font-size:.45em;vertical-align:.1em;color:var(--acc-l);font-weight:600}
.stat-l{font-size:.78rem;color:var(--cream-3);margin-top:.3rem;font-weight:300}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{padding:1.1rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--display);font-size:1rem;font-weight:700;cursor:pointer;transition:color .18s}
.faq-q:hover{color:var(--acc-ll)}
.faq-toggle{width:26px;height:26px;background:var(--s2);border:1px solid var(--bord-m);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--acc);transition:background .2s,transform .25s;line-height:1}
.faq-item.open .faq-toggle{transform:rotate(45deg);background:var(--acc-sm)}
.faq-item.open .faq-q{color:var(--acc-ll)}
.faq-a{display:none;padding-bottom:1.1rem;font-size:.88rem;font-weight:300;color:var(--cream-3);line-height:1.8}
.faq-item.open .faq-a{display:block}

/* ── TESTIMONIAL ─────────────────────────────────────────── */
.testimonial{background:var(--s2);border:1px solid var(--bord-m);padding:1.8rem;position:relative;overflow:hidden;transition:transform .22s,border-color .22s}
.testimonial:hover{transform:translateY(-3px)}
.test-stars{display:flex;gap:.2rem;margin-bottom:.9rem}
.test-star{color:var(--acc-ll);font-size:.85rem}
.test-body{font-size:.9rem;font-style:italic;color:var(--cream-2);line-height:1.75;margin-bottom:1rem}
.test-body strong{font-style:normal;color:var(--cream);font-weight:500}
.test-author{display:flex;align-items:center;gap:.75rem}
.test-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--acc-sm),var(--cop-x));border:1px solid var(--bord-m);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;color:var(--acc-ll);font-size:.9rem}
.test-name{font-size:.82rem;font-weight:600;color:var(--cream)}
.test-role{font-size:.72rem;color:var(--cream-3);margin-top:.1rem}
.testimonial::after{content:'"';position:absolute;bottom:-.5rem;right:1rem;font-family:var(--serif);font-size:6rem;line-height:1;color:var(--acc);opacity:.07;pointer-events:none;user-select:none}

/* ── QUALIFICA ───────────────────────────────────────────── */
.qual-card{background:var(--s2);border:1px solid var(--bord-m);padding:1.5rem}
.qual-head{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.qual-icon{width:32px;height:32px;border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.qual-icon-yes{background:var(--sage-x);border:1px solid var(--sage-sm)}
.qual-icon-no{background:var(--cop-x);border:1px solid rgba(200,80,70,.18)}
.qual-icon svg{width:16px;height:16px}
.qual-title{font-family:var(--display);font-weight:700;font-size:.95rem}
.qual-list{display:flex;flex-direction:column;gap:.55rem}
.qual-item{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;font-weight:300;color:var(--cream-3);line-height:1.6}
.qual-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:.52rem}
.qual-dot-yes{background:var(--sage-l)}
.qual-dot-no{background:var(--cop-l)}

/* ── BLOG CARD ───────────────────────────────────────────── */
.blog-card{background:var(--s1);border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform .22s,border-color .22s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--bord-m)}
.blog-thumb{aspect-ratio:16/9;background:var(--s3);position:relative;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-body{padding:1.4rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
.blog-meta{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.6rem;color:var(--cream-4);text-transform:uppercase;letter-spacing:.1em}
.blog-sep{color:var(--bord-m)}
.blog-title{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.25;letter-spacing:-.03em;color:var(--cream);flex:1}
.blog-title:hover{color:var(--acc-ll)}
.blog-excerpt{font-size:.8rem;font-weight:300;color:var(--cream-3);line-height:1.7}

/* ── UTILITY ─────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.pt-section{padding-top:clamp(4rem,8vw,7rem)}
.pb-section{padding-bottom:clamp(4rem,8vw,7rem)}
.py-section{padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(4rem,8vw,7rem)}
.pt-page{padding-top:calc(60px + clamp(3rem,6vw,5rem))}
.text-acc{color:var(--acc-ll)}.text-cop{color:var(--cop-l)}.text-sage{color:var(--sage-l)}.text-muted{color:var(--cream-3)}
.font-serif{font-family:var(--serif)}.font-display{font-family:var(--display)}.font-mono{font-family:var(--mono)}.italic{font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ══════════════════════════════════════════════════════════
   GENERATEPRESS COMPAT — v3.3
   ══════════════════════════════════════════════════════════ */

/* 1. Background scuro sui wrapper GP */
html, body,
#page, .site, #content, .site-content, .site-main,
.generate-columns-container {
  background-color: var(--bg) !important;
}
.site-content,
.entry-content { padding: 0 !important; max-width: 100% !important; }

/* 2. Link — override GP blu #1e73be */
a                  { color: inherit !important; text-decoration: none !important; }
.prose a           { color: var(--acc-ll) !important; border-bottom: 1px solid var(--acc-sm) !important; text-decoration: none !important; }
.prose a:hover     { color: var(--acc) !important; border-bottom-color: var(--acc-md) !important; }

/* 3. Heading reset SOLO nei wrapper GP nativi */
.entry-content h1,
.entry-content h2,
.entry-content h3  { font-size: inherit !important; font-weight: inherit !important; }

/* 4. Prose headings (single.php) */
.prose h2 { font-family:var(--display) !important; font-size:clamp(1.35rem,2.8vw,1.85rem) !important; font-weight:800 !important; line-height:1.1 !important; letter-spacing:-.04em !important; color:var(--cream) !important; margin-top:3rem !important; margin-bottom:1.1rem !important; padding-bottom:.65rem !important; border-bottom:1px solid var(--bord-s) !important; }
.prose h3 { font-family:var(--display) !important; font-size:clamp(1.05rem,2vw,1.3rem) !important;   font-weight:700 !important; line-height:1.2 !important; letter-spacing:-.025em !important; color:var(--cream) !important; margin-top:2.2rem !important; margin-bottom:.8rem !important; }

/* ══════════════════════════════════════════════════════════
   BUTTON BACKWARD COMPAT — v3.3
   Colori ESATTI dal design-system-v3-preview.html:
   .btn-fill primario  → color: var(--acc-ll) | hover: #0C0B08
   .btn-fill-ghost     → color: var(--cream-3) | hover: var(--cream)
   .btn-fill-sage      → color: var(--sage-l) | hover: #0C0B08
   .btn-bracket        → color: var(--cream)  | hover: var(--acc-ll)
   ══════════════════════════════════════════════════════════ */

/* Base .btn (template v2: .btn-primary / .btn-ghost) */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center !important;
  gap: .65rem;
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  letter-spacing: -.01em !important;
  background: transparent !important;
  padding: .88rem 1.9rem !important;
  cursor: pointer;
  text-decoration: none !important;
  border-radius: 0 !important;
  transition: color .35s cubic-bezier(.16,1,.3,1) !important;
  box-shadow: none !important;
}
.btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-101%) !important;
  transition: transform .38s cubic-bezier(.16,1,.3,1) !important;
  z-index: 0 !important;
}
.btn:hover::before { transform: translateX(0) !important; }
.btn > * { position: relative !important; z-index: 1 !important; }
.btn:hover { transform: none !important; }

/* .btn-primary → stile btn-fill primario amber */
.btn-primary {
  border: 1.5px solid var(--acc) !important;
  /* Testo a riposo: acc-ll (amber chiaro) — come nel preview */
  color: var(--acc-ll) !important;
}
.btn-primary::before { background: var(--acc) !important; }
.btn-primary:hover   { color: #0C0B08 !important; box-shadow: none !important; }

/* .btn-ghost → stile btn-fill-ghost */
.btn-ghost {
  border: 1.5px solid var(--bord-m) !important;
  /* Testo a riposo: cream-3 aggiornato (#B5A898) — leggibile */
  color: var(--cream-3) !important;
}
.btn-ghost::before { background: var(--s3) !important; }
.btn-ghost:hover   { color: var(--cream) !important; }

/* .btn-green → stile btn-fill-sage */
.btn-green {
  border: 1.5px solid var(--sage) !important;
  background: transparent !important;
  color: var(--sage-l) !important;
}
.btn-green::before { background: var(--sage) !important; }
.btn-green:hover   { color: #0C0B08 !important; box-shadow: none !important; }

/* btn-fill nativi DS v3 — assicura colori preview */
.btn-fill            { color: var(--acc-ll) !important; }
.btn-fill:hover      { color: #0C0B08 !important; }
.btn-fill-ghost      { color: var(--cream-3) !important; border-color: var(--bord-m) !important; }
.btn-fill-ghost:hover{ color: var(--cream) !important; }
.btn-fill-sage       { color: var(--sage-l) !important; border-color: var(--sage) !important; }
.btn-fill-sage:hover { color: #0C0B08 !important; }
.btn-fill-cop        { color: var(--cop-l) !important; border-color: var(--cop) !important; }
.btn-fill-cop:hover  { color: #0C0B08 !important; }

/* btn-bracket — colori dal preview */
.btn-bracket       { color: var(--cream) !important; }
.btn-bracket:hover { color: var(--acc-ll) !important; }
.bb-open, .bb-close { color: var(--acc) !important; }
.btn-bracket:hover .bb-open,
.btn-bracket:hover .bb-close { color: var(--cop-l) !important; }
.bb-line { background: var(--acc) !important; }

/* ══════════════════════════════════════════════════════════
   FIX LEGGIBILITÀ COMPONENTI — v3.3
   ══════════════════════════════════════════════════════════ */

/* Blog card titolo */
.blog-card .blog-title,
.blog-card .blog-title * {
  font-family:var(--display) !important; font-size:1.05rem !important;
  font-weight:700 !important; line-height:1.25 !important;
  letter-spacing:-.03em !important; color:var(--cream) !important; margin:0 !important;
}
.blog-card:hover .blog-title { color: var(--acc-ll) !important; }

/* Featured post title */
.fp-title, .fp-title a { color: var(--cream) !important; font-family: var(--display) !important; }
.fp-title a:hover      { color: var(--acc-ll) !important; border-bottom: none !important; }

/* Category badges — leggibilità forzata */
.cat-badge { font-family:var(--display) !important; font-size:.62rem !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; padding:.22rem .75rem !important; border-radius:var(--r-pill) !important; border:1px solid !important; }
.cb-pos  { color:var(--acc-ll)  !important; background:var(--acc-sm)  !important; border-color:var(--acc-md)  !important; }
.cb-acq  { color:var(--sage-l)  !important; background:var(--sage-x)  !important; border-color:var(--sage-sm) !important; }
.cb-ads  { color:#7BB8D4        !important; background:rgba(91,143,168,.12) !important; border-color:rgba(91,143,168,.3) !important; }
.cb-cop  { color:var(--cop-ll)  !important; background:var(--cop-x)   !important; border-color:var(--cop-sm)  !important; }
.cb-tool { color:#C09AE8        !important; background:rgba(176,122,224,.12) !important; border-color:rgba(176,122,224,.3) !important; }

/* Newsletter */
.nl-title      { color:var(--cream)   !important; }
.nl-sub        { color:var(--cream-2) !important; }
.nl-sub strong { color:var(--cream)   !important; }
.nl-note       { color:var(--cream-3) !important; }
.nl-overline   { color:var(--acc-ll)  !important; }

/* Sidebar single.php */
.scta-title    { color:var(--cream)   !important; }
.scta-sub      { color:var(--cream-2) !important; }
.sp-label      { color:var(--cream-3) !important; }
.sp-pct        { color:var(--acc-ll)  !important; }
.sc-head       { color:var(--cream-3) !important; }
.toc-text      { color:var(--cream-2) !important; }
.toc-item.active-toc .toc-text { color:var(--cream) !important; }
.toc-num       { color:var(--cream-4) !important; }
.toc-item.active-toc .toc-num  { color:var(--acc-ll) !important; }

/* ══════════════════════════════════════════════════════════
   FIX TITOLI TEMPLATE v2 + SINGLE.PHP — v3.4
   Problema: questi elementi non hanno color esplicito
   e ereditano il grigio di GeneratePress (body color GP).
   Soluzione: color !important su ogni classe di titolo.
   ══════════════════════════════════════════════════════════ */

/* single.php — titolo articolo */
.art-title {
  color: var(--cream) !important;
  font-family: var(--display) !important;
}

/* template-homepage.php — hero */
.hero-title          { color: var(--cream) !important; font-family: var(--display) !important; }
.ht-a                { color: var(--cream) !important; }
/* .ht-b è serif italic: usa cream-2 come da design originale — ora #D4C8AA */
.ht-b                { color: var(--cream-2) !important; }

/* template-professionisti.php + template-attivita-locali.php */
.page-title          { color: var(--cream) !important; font-family: var(--display) !important; }
/* .pt-serif è il titolo corsivo sotto: usa cream-2 — leggibile e distinto */
.pt-serif            { color: var(--cream-2) !important; }

/* Titoli di sezione interni ai template v2 */
.diag-title          { color: var(--cream) !important; font-family: var(--display) !important; }
.pd-title            { color: var(--cream) !important; font-family: var(--display) !important; }
.sc-title            { color: var(--cream) !important; font-family: var(--display) !important; }

/* Thought bubble — testo corsivo nelle hero */
.thought-bubble      { color: var(--cream-2) !important; }

/* Sottotitoli / lead paragraph nelle hero */
.hero-sub,
.hero-desc,
.page-sub            { color: var(--cream-2) !important; }

/* ── GP body color override ─────────────────────────────── */
/* GP imposta body { color: #3d3d3d } o simile.
   Forziamo il default cream su tutti gli elementi di testo
   che non hanno una classe specifica. */
body,
body p,
body li,
body span,
body div    { color: var(--cream); }

/* Eccezione: elementi con classi che hanno già il loro colore
   non vengono toccati (le regole !important sopra vincono) */

/* ══════════════════════════════════════════════════════════
   FIX HOVER BOTTONI v2 TEMPLATES — v3.5
   Problema: .btn-primary { color: acc-ll !important } vince
   anche al hover perché ha uguale specificità di .btn:hover.
   Soluzione: selettori hover espliciti e più specifici.
   ══════════════════════════════════════════════════════════ */

/* Primario — testo scuro su sfondo amber al hover */
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover {
  color: #0C0B08 !important;
}

/* Ghost — testo cream su sfondo s3 (quasi nero) al hover */
a.btn.btn-ghost:hover,
button.btn.btn-ghost:hover,
.btn.btn-ghost:hover {
  color: var(--cream) !important;
}

/* Verde / sage — testo scuro su sfondo sage al hover */
a.btn.btn-green:hover,
button.btn.btn-green:hover,
.btn.btn-green:hover {
  color: #0C0B08 !important;
}

/* btn-fill nativi — stesso fix per sicurezza */
a.btn-fill:not(.btn-fill-ghost):hover,
button.btn-fill:not(.btn-fill-ghost):hover {
  color: #0C0B08 !important;
}
a.btn-fill.btn-fill-ghost:hover,
button.btn-fill.btn-fill-ghost:hover {
  color: var(--cream) !important;
}