/*
 * design-system.css
 * Stili condivisi tra tutti i template del sito Gabriele Di Stefano.
 * Viene incluso da ogni template PHP via <link rel="stylesheet">.
 * Non modificare direttamente — aggiornare le variabili in :root.
 */

:root {
  --bg:#0C0B08; --bg-alt:#0F0E0A; --s1:#161410; --s2:#1D1B15; --s3:#252219;
  --border:#2E2B22; --bord-m:#3C382C; --bord-s:#1C1A13;
  --acc:#C4872A; --acc-l:#D9A050; --acc-ll:#EAC07A;
  --acc-x:rgba(196,135,42,.06); --acc-sm:rgba(196,135,42,.13);
  --acc-md:rgba(196,135,42,.25); --acc-hi:rgba(196,135,42,.40);
  --text:#F0EAD8; --text-2:#9B9585; --text-3:#5C5848; --text-4:#3A3730;
  --green:#4BA876; --green-x:rgba(75,168,118,.08); --green-sm:rgba(75,168,118,.18);
  --orange:#C97B3A; --red:#C85F4A; --red-x:rgba(200,95,74,.07); --red-sm:rgba(200,95,74,.15);
  --display:'Bricolage Grotesque',sans-serif;
  --serif:'Playfair Display',serif;
  --body:'DM Sans',sans-serif;
  --r-xs:3px; --r-sm:6px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --glow:0 0 60px rgba(196,135,42,.18),0 0 120px rgba(196,135,42,.08);
  --glow-sm:0 0 28px rgba(196,135,42,.14);
}

*,*::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(--text);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}}

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-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(196,135,42,.38);transition:width .25s,height .25s,border-color .25s}
.cursor-ring.hovered{width:46px;height:46px;border-color:rgba(196,135,42,.65)}
@media(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

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

@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(75,168,118,.32)}50%{box-shadow:0 0 0 4px rgba(75,168,118,0)}}
@keyframes mesh{0%,100%{filter:brightness(1)}50%{filter:brightness(1.025)}}
@keyframes shimmer{0%{opacity:.3}50%{opacity:.7}100%{opacity:.3}}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.22s}.d4{transition-delay:.31s}

.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:#72695A;margin-bottom:.9rem}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;font-family:var(--body);font-weight:600;letter-spacing:.01em;border-radius:var(--r-sm);transition:transform .22s cubic-bezier(.25,.46,.45,.94),box-shadow .22s,background .18s,color .18s,border-color .18s}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);transform:translateX(-130%);transition:transform .48s;pointer-events:none}
.btn:hover::after{transform:translateX(130%)}
.btn-primary{background:var(--acc);color:#fff;font-size:1rem;padding:.92rem 2.2rem}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.btn-ghost{background:transparent;color:var(--text-2);font-size:.88rem;padding:.82rem 1.6rem;border:1px solid var(--bord-m)}
.btn-ghost:hover{border-color:var(--acc-md);color:var(--text);background:var(--acc-x);transform:translateY(-1px)}

/* 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(--text-3);transition:color .18s}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link.active{color:var(--acc)}
.nav-cta{font-size:.8rem;font-weight:600;background:var(--acc);color:#fff;padding:.52rem 1.3rem;border-radius:var(--r-sm);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(--green);background:var(--green-x);border-color:var(--green-sm)}
.cb-ads{color:#5B9EF5;background:rgba(91,158,245,.08);border-color:rgba(91,158,245,.2)}
.cb-mind{color:var(--orange);background:rgba(201,123,58,.08);border-color:rgba(201,123,58,.2)}
.cb-tool{color:#B07AE0;background:rgba(176,122,224,.08);border-color:rgba(176,122,224,.2)}

/* 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 36s 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(--text-4)}
.tick-dot{width:3px;height:3px;border-radius:50%;background:var(--acc);opacity:.65}