/* ============================================================
   RAFAELPATRON.IT — Stylesheet unico
   Direzione: editorial-dark con atmosfera neurale
   ============================================================ */

/* --- Design Tokens ----------------------------------------- */
:root{
  /* Colori */
  --ink:          #0b0b0c;
  --ink-2:        #141416;
  --ink-3:        #1d1d21;
  --paper:        #f5f1ea;
  --paper-dim:    #ddd7cc;
  --mute:         #6b6b74;
  --line:         rgba(245,241,234,.12);
  --line-strong:  rgba(245,241,234,.28);
  --accent:       #d4ff3a;          /* lime elettrico — AI */
  --accent-dim:   #a8cc2e;
  --accent-ghost: rgba(212,255,58,.12);
  --danger:       #ff5b3a;

  /* Tipografia */
  --f-display: "Fraunces", "Playfair Display", Georgia, serif;
  --f-sans:    "Inter Tight", "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Spazi */
  --maxw: 1440px;
  --pad:  clamp(20px, 3.5vw, 56px);

  /* Motion */
  --ease:   cubic-bezier(.2, .7, .2, 1);
  --ease-o: cubic-bezier(.7, 0, .2, 1);
}

/* --- Reset & base ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-sans);
  background:var(--ink);
  color:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--ink)}

/* Grana televisiva di atmosfera
   NOTE: usiamo vw/vh + inset negativo in unità viewport per evitare che
   un eventuale antenato con `transform` cambi il containing block e
   trasformi il 140% in 140% dell'intero scrollHeight (causava ~1700px
   di whitespace fantasma sotto il footer). */
body::before{
  content:"";
  position:fixed;
  top:-10vh; left:-10vw;
  width:120vw; height:120vh;
  pointer-events:none;
  z-index:1000;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.92 0 0 0 0 0.85 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Container / grid -------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}
.row{display:flex;flex-wrap:wrap;gap:24px}

/* --- Tipografia di sistema --------------------------------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 0;
  letter-spacing:-.035em;
  line-height:.92;
}
.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.kicker{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
}
.lead{
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.5;
  color:var(--paper-dim);
  max-width:62ch;
}
.prose p{font-size:17px;line-height:1.7;color:var(--paper-dim);margin-bottom:1.1em;max-width:68ch}
.prose p strong{color:var(--paper)}
.prose h2{
  font-family:var(--f-display);
  font-size:clamp(28px,3vw,42px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.05;
  margin:2.2em 0 .6em;
  color:var(--paper);
}
.prose h3{
  font-family:var(--f-sans);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:1.8em 0 .4em;
  color:var(--paper);
}
.prose a{color:var(--accent);border-bottom:1px solid var(--accent-ghost);transition:border-color .2s}
.prose a:hover{border-bottom-color:var(--accent)}
.prose ul{margin:0 0 1.2em 1.2em;color:var(--paper-dim)}
.prose ul li{font-size:17px;line-height:1.7;margin-bottom:.4em}
.prose ul li::marker{color:var(--accent)}

/* --- Topbar ------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--ink) 85%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--paper);
}
.brand__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-ghost);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px var(--accent-ghost)}
  50%   {box-shadow:0 0 0 10px transparent}
}
.brand__name{font-weight:500}
.brand__tag{color:var(--mute)}

.nav{display:flex;gap:2px;align-items:center}
.nav a{
  position:relative;
  padding:10px 14px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--paper-dim);
  transition:color .2s var(--ease);
}
.nav a::before{
  content:"";
  position:absolute;left:14px;right:14px;bottom:6px;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover,.nav a.is-active{color:var(--paper)}
.nav a:hover::before,.nav a.is-active::before{transform:scaleX(1);transform-origin:left}

.nav-toggle{
  display:none;
  padding:10px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.08em;
  border:1px solid var(--line-strong);
  border-radius:999px;
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:68px 0 auto 0;
    flex-direction:column;align-items:stretch;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    padding:16px var(--pad) 24px;
    gap:0;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.25s var(--ease);
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{
    padding:14px 0;
    border-top:1px solid var(--line);
    font-size:13px;
  }
  .nav a:first-child{border-top:0}
  .nav a::before{display:none}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px}
}

/* --- Hero homepage ----------------------------------------- */
.hero{
  position:relative;
  padding:clamp(48px,9vw,120px) 0 clamp(56px,8vw,100px);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero__canvas{
  position:absolute;inset:0;
  z-index:0;
  opacity:.55;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 60% 40%, #000 20%, transparent 75%);
}
.hero__inner{position:relative;z-index:1}
.hero__meta{
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);
  margin-bottom:clamp(40px,6vw,72px);
}
.hero__meta span + span::before{content:"// ";color:var(--line-strong)}
.hero__title{
  font-size:clamp(56px,11vw,168px);
  margin-bottom:clamp(24px,3vw,40px);
}
.hero__title em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
  color:var(--accent);
}
.hero__sub{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:24px;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.hero__sub p{
  font-size:clamp(18px,1.8vw,24px);
  line-height:1.45;
  color:var(--paper-dim);
  max-width:52ch;
}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:700px){
  .hero__sub{grid-template-columns:1fr}
}

/* --- Bottoni ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  font-family:var(--f-mono);
  font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--paper);
  transition:.25s var(--ease);
}
.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn--solid{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn--solid:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);transform:translateY(-1px)}
.btn__arrow{
  display:inline-block;
  transition:transform .25s var(--ease);
}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* --- Tickertape / strisce mono ----------------------------- */
.ticker{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  background:var(--ink-2);
}
.ticker__track{
  display:inline-flex;gap:48px;
  padding:14px 0;
  font-family:var(--f-mono);
  font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-dim);
  animation:scroll 42s linear infinite;
}
.ticker__track span{display:inline-flex;align-items:center;gap:48px}
.ticker__track span::after{
  content:"●";
  color:var(--accent);
  font-size:8px;
}
@keyframes scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* --- Sezioni standard -------------------------------------- */
.section{
  padding:clamp(56px,8vw,120px) 0;
  border-bottom:1px solid var(--line);
}
.section__head{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:32px;
  margin-bottom:clamp(32px,4vw,56px);
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.section__head .eyebrow{padding-top:8px}
.section__title{
  font-family:var(--f-display);
  font-size:clamp(36px,5vw,72px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 40;
}
.section__title em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1}
.section__intro{
  font-size:clamp(17px,1.5vw,20px);
  color:var(--paper-dim);
  max-width:52ch;
  margin-top:18px;
}
@media (max-width:800px){
  .section__head{grid-template-columns:1fr;gap:12px}
}

/* --- Pagina hero (sotto-pagine) ---------------------------- */
.page-hero{
  padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.page-hero .eyebrow{margin-bottom:20px;display:block}
.page-hero h1{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(44px,7vw,104px);
  line-height:.95;
  letter-spacing:-.03em;
  margin-bottom:clamp(16px,2vw,28px);
  font-variation-settings:"opsz" 144, "SOFT" 40;
  max-width:14ch;
}
.page-hero h1 em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1}

/* --- Big numbers (statistiche) ----------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{
  padding:32px 24px;
  border-right:1px solid var(--line);
  transition:background .3s var(--ease);
}
.stat:last-child{border-right:0}
.stat:hover{background:var(--ink-2)}
.stat__num{
  font-family:var(--f-display);
  font-size:clamp(40px,5vw,72px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 50;
}
.stat__num em{font-style:italic;color:var(--accent)}
.stat__lab{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--mute);
  margin-top:14px;
  line-height:1.5;
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}

/* --- Card grid (servizi / attività) ------------------------ */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:var(--ink);
  padding:clamp(24px,3vw,40px);
  transition:background .3s var(--ease);
  position:relative;
}
.card:hover{background:var(--ink-2)}
.card__num{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.15em;
  color:var(--accent);
  margin-bottom:20px;
}
.card__title{
  font-family:var(--f-display);
  font-size:clamp(22px,2.2vw,30px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--paper);
  margin-bottom:12px;
  font-variation-settings:"opsz" 72, "SOFT" 30;
}
.card__desc{
  font-size:15px;
  line-height:1.6;
  color:var(--paper-dim);
  max-width:42ch;
}
.card__meta{
  display:inline-flex;
  margin-top:20px;
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}

/* --- Lista clienti ----------------------------------------- */
.clients{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.client{
  padding:28px 20px;
  border-right:1px solid var(--line);
  font-family:var(--f-display);
  font-size:clamp(20px,2vw,26px);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--paper-dim);
  text-align:center;
  transition:color .2s var(--ease);
}
.client:last-child{border-right:0}
.client:hover{color:var(--accent)}
@media (max-width:700px){
  .clients{grid-template-columns:repeat(2,1fr)}
  .client:nth-child(even){border-right:0}
  .client{border-bottom:1px solid var(--line);padding:20px}
}

/* --- Credenziali (timeline) -------------------------------- */
.creds{display:grid;gap:0}
.cred{
  display:grid;
  grid-template-columns:160px 1fr auto;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.cred__year{
  font-family:var(--f-mono);
  font-size:12px;letter-spacing:.12em;
  color:var(--accent);
}
.cred__title{
  font-family:var(--f-display);
  font-size:clamp(20px,1.9vw,26px);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--paper);
}
.cred__desc{
  font-size:15px;color:var(--paper-dim);
  margin-top:4px;
  max-width:58ch;
}
.cred__tag{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  white-space:nowrap;
}
@media (max-width:800px){
  .cred{grid-template-columns:1fr;gap:6px}
  .cred__tag{margin-top:6px}
}

/* --- Libri -------------------------------------------------- */
.books{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.book{
  background:var(--ink);
  padding:clamp(28px,3vw,44px);
  display:flex;flex-direction:column;
  transition:background .3s var(--ease);
}
.book:hover{background:var(--ink-2)}
.book__cover{
  aspect-ratio:5/7;
  margin-bottom:28px;
  border:1px solid var(--line-strong);
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:32px 24px;
  text-align:center;
  transition:border-color .3s var(--ease), transform .5s var(--ease);
}
.book:hover .book__cover{border-color:var(--accent);transform:translateY(-4px)}
.book__cover::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%, var(--accent-ghost) 0%, transparent 60%);
  opacity:0;transition:opacity .5s var(--ease);
}
.book:hover .book__cover::before{opacity:1}
.book__cover--1{background:linear-gradient(145deg, #1a1a1e 0%, #0b0b0c 100%)}
.book__cover--2{background:linear-gradient(145deg, #1d1d0e 0%, #0b0b0c 100%)}
.book__cover--3{background:linear-gradient(145deg, #0e1a1a 0%, #0b0b0c 100%)}
.book__cover-eyebrow{
  position:absolute;top:18px;left:20px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  color:var(--accent);
}
.book__cover-title{
  font-family:var(--f-display);
  font-size:clamp(24px,2.4vw,34px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.025em;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 60;
}
.book__cover-author{
  position:absolute;bottom:18px;left:20px;right:20px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
  color:var(--paper-dim);
  text-transform:uppercase;
}
.book__year{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent);margin-bottom:10px;
}
.book__title{
  font-family:var(--f-display);
  font-size:clamp(24px,2.2vw,30px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--paper);
  margin-bottom:10px;
}
.book__desc{
  font-size:15px;color:var(--paper-dim);line-height:1.6;
  margin-bottom:20px;
  flex-grow:1;
}
@media (max-width:900px){
  .books{grid-template-columns:1fr}
}

/* --- Città (SEO locale) ------------------------------------ */
.cities{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.city{
  background:var(--ink);
  padding:clamp(24px,2.8vw,36px);
  transition:background .3s var(--ease);
  display:block;
  position:relative;
  overflow:hidden;
}
.city:hover{background:var(--ink-2)}
.city::after{
  content:"↗";
  position:absolute;
  top:20px;right:24px;
  font-family:var(--f-mono);
  color:var(--mute);
  transition:.3s var(--ease);
}
.city:hover::after{color:var(--accent);transform:translate(4px,-4px)}
.city__kicker{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:16px;
}
.city__name{
  font-family:var(--f-display);
  font-size:clamp(28px,2.8vw,40px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.025em;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 50;
  margin-bottom:4px;
}
.city__name em{font-style:italic;color:var(--accent)}
.city__desc{
  font-size:14px;color:var(--paper-dim);margin-top:12px;
  max-width:38ch;line-height:1.55;
}

/* --- Form contatti ----------------------------------------- */
.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.form__field{
  background:var(--ink);
  padding:20px 24px;
  position:relative;
}
.form__field--full{grid-column:1 / -1}
.form__label{
  display:block;
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  margin-bottom:8px;
}
.form__input,.form__textarea{
  width:100%;
  background:transparent;
  border:0;
  font-family:var(--f-sans);
  font-size:16px;
  color:var(--paper);
  padding:4px 0;
  outline:none;
}
.form__input::placeholder,.form__textarea::placeholder{color:var(--mute)}
.form__textarea{min-height:140px;resize:vertical;line-height:1.5}
.form__field:focus-within{background:var(--ink-2)}
.form__field:focus-within .form__label{color:var(--accent)}
.form__submit{
  grid-column:1 / -1;
  background:var(--ink);
  padding:24px;
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
}
.form__note{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;
  color:var(--mute);text-transform:uppercase;
}
@media (max-width:700px){
  .form{grid-template-columns:1fr}
}

/* --- Links box / contact ----------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:clamp(40px,5vw,64px);
}
.contact-item{
  background:var(--ink);
  padding:clamp(24px,3vw,36px);
}
.contact-item__label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);
  margin-bottom:14px;
}
.contact-item__value{
  font-family:var(--f-display);
  font-size:clamp(20px,2vw,26px);
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--paper);
  line-height:1.2;
  word-break:break-word;
}
.contact-item__value:hover{color:var(--accent)}
@media (max-width:700px){
  .contact-grid{grid-template-columns:1fr}
}

/* --- Quote / pull-quote ------------------------------------ */
.pullquote{
  padding:clamp(32px,5vw,72px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
  position:relative;
}
.pullquote p{
  font-family:var(--f-display);
  font-size:clamp(28px,4vw,52px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.025em;
  color:var(--paper);
  max-width:22ch;
  margin:0 auto;
  font-variation-settings:"opsz" 144, "SOFT" 70;
}
.pullquote em{font-style:italic;color:var(--accent);font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1}

/* --- Footer ------------------------------------------------- */
.foot{
  padding:clamp(48px,6vw,80px) 0 28px;
  background:var(--ink);
}
.foot__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid var(--line);
}
.foot__brand{
  font-family:var(--f-display);
  font-size:clamp(32px,3vw,44px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 50;
  margin-bottom:16px;
}
.foot__brand em{font-style:italic;color:var(--accent)}
.foot__tagline{
  font-size:15px;color:var(--paper-dim);max-width:34ch;line-height:1.55;
}
.foot__col h5{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-bottom:18px;font-weight:500;
}
.foot__col ul{list-style:none}
.foot__col ul li{margin-bottom:10px}
.foot__col ul a{
  font-size:14px;color:var(--paper-dim);
  transition:color .2s var(--ease);
}
.foot__col ul a:hover{color:var(--accent)}
.foot__bottom{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;
  margin-top:28px;
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.1em;
  color:var(--mute);
}
.foot__heart{color:var(--danger)}
@media (max-width:800px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .foot__brand-col{grid-column:1 / -1}
}

/* --- Reveal on load / on scroll ---------------------------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{opacity:1;transform:none}

.stagger > *{
  opacity:0;
  transform:translateY(16px);
  animation:rise .9s var(--ease) forwards;
}
.stagger > *:nth-child(1){animation-delay:.05s}
.stagger > *:nth-child(2){animation-delay:.15s}
.stagger > *:nth-child(3){animation-delay:.25s}
.stagger > *:nth-child(4){animation-delay:.35s}
.stagger > *:nth-child(5){animation-delay:.45s}
.stagger > *:nth-child(6){animation-delay:.55s}

@keyframes rise{
  to{opacity:1;transform:none}
}

/* --- 404 ---------------------------------------------------- */
.e404{
  min-height:calc(100vh - 68px);
  display:flex;align-items:center;justify-content:center;
  padding:80px var(--pad);
  text-align:center;
}
.e404__code{
  font-family:var(--f-display);
  font-size:clamp(100px,22vw,280px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 50, "WONK" 1;
}
.e404__code em{font-style:italic;color:var(--accent)}
.e404__msg{
  font-family:var(--f-display);
  font-size:clamp(22px,2.6vw,32px);
  font-weight:400;
  font-style:italic;
  color:var(--paper-dim);
  margin:12px 0 32px;
  max-width:32ch;
  margin-left:auto;margin-right:auto;
}

/* --- Utility ------------------------------------------------ */
.hide-mobile{display:inline}
@media (max-width:700px){.hide-mobile{display:none}}
.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}

/* ============================================================
   V2 — Modern / Aggressive module
   Cursor, shader hero, parallax, magnetic, 3D tilt, legal,
   cookie banner, Program Manager page, split text reveals.
   ============================================================ */

/* --- Perspective root for 3D effects --------------------- */
body{perspective:1600px}

/* --- Enhanced grain — subtle drift, stays within oversize margin ------------- */
body::before{opacity:.04;animation:grain 14s steps(10) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-2%,-2%)}
  20%{transform:translate(-3%,1%)}
  30%{transform:translate(1%,-3%)}
  40%{transform:translate(-2%,3%)}
  50%{transform:translate(-3%,2%)}
  60%{transform:translate(3%,0)}
  70%{transform:translate(0,2%)}
  80%{transform:translate(-3%,0)}
  90%{transform:translate(2%,1%)}
}
@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}

/* --- Magnetic button — transform set via JS ------------- */
.magnetic{
  display:inline-block;
  transition:transform .35s var(--ease);
  will-change:transform;
}

/* --- Parallax layers — offset set via JS ---------------- */
[data-parallax]{
  will-change:transform;
  transition:transform 0s linear;
}

/* Split-text legacy classes removed in v25: reveal is now
   word-based via GSAP (see wow-2026.js and .word-reveal__*). */

/* --- WebGL shader hero ---------------------------------- */
.shader-hero{
  position:relative;
  min-height:calc(100vh - 68px);
  display:flex;align-items:center;
  padding:clamp(40px,6vw,80px) 0;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  isolation:isolate;
}
.shader-hero__canvas{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
}
.shader-hero__canvas canvas{
  width:100%;height:100%;
  display:block;
}
.shader-hero__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,11,12,.0) 40%, rgba(11,11,12,.6) 100%),
    radial-gradient(circle at 80% 20%, rgba(212,255,58,.05), transparent 40%);
}
.shader-hero__grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.25;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.shader-hero__inner{
  position:relative;z-index:2;
  width:100%;
}
.shader-hero .hero__title{
  font-size:clamp(56px,13vw,220px);
  line-height:.88;
  margin-bottom:clamp(24px,4vw,48px);
}
.shader-hero .hero__title em{
  display:inline-block;
  transform:translateZ(0);
}

/* Status bar at top of shader hero */
.shader-hero__status{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);
  padding-bottom:20px;margin-bottom:clamp(40px,6vw,80px);
  border-bottom:1px solid var(--line);
}
.shader-hero__status .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:8px;
  animation:pulse 2s var(--ease) infinite;
}

@media (max-width:700px){
  .shader-hero__status{flex-direction:column;align-items:flex-start;gap:8px}
}

/* --- Card tilt 3D container (set by JS) ----------------- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .4s var(--ease);
  will-change:transform;
}
.tilt__inner{
  transform:translateZ(0);
  transition:transform .4s var(--ease);
}
.tilt:hover .tilt__inner{transform:translateZ(30px)}

/* --- Aggressive marquee --------------------------------- */
.marquee-big{
  overflow:hidden;white-space:nowrap;
  padding:clamp(40px,6vw,80px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--ink);
}
.marquee-big__track{
  display:inline-flex;gap:64px;
  font-family:var(--f-display);
  font-size:clamp(48px,9vw,140px);
  font-weight:400;
  letter-spacing:-.04em;
  color:var(--paper);
  animation:scroll 30s linear infinite;
  will-change:transform;
}
.marquee-big__track em{
  color:var(--accent);
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.marquee-big__dot{
  display:inline-flex;align-items:center;justify-content:center;
  width:1em;height:1em;
  font-size:.4em;color:var(--mute);
}
.marquee-big--reverse .marquee-big__track{animation-direction:reverse}

/* --- Oversized quote block ------------------------------ */
.quote-xxl{
  padding:clamp(60px,10vw,160px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;
  background:
    radial-gradient(circle at 20% 50%, rgba(212,255,58,.05), transparent 40%),
    var(--ink);
}
.quote-xxl__text{
  font-family:var(--f-display);
  font-size:clamp(42px,7vw,120px);
  line-height:.96;
  letter-spacing:-.035em;
  color:var(--paper);
  max-width:22ch;
}
.quote-xxl__text em{
  color:var(--accent);
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.quote-xxl__cite{
  display:block;
  margin-top:32px;
  font-family:var(--f-mono);
  font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}

/* --- Manifesto / stacked block -------------------------- */
.manifesto{
  padding:clamp(60px,10vw,140px) 0;
  position:relative;
  overflow:hidden;
}
.manifesto__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  font-family:var(--f-display);
  font-size:clamp(200px,30vw,480px);
  line-height:.85;
  font-weight:400;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px var(--line-strong);
  white-space:nowrap;
  display:flex;align-items:center;
  opacity:.8;
}
.manifesto__inner{position:relative;z-index:1}
.manifesto__kicker{
  font-family:var(--f-mono);
  font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:40px;
}
.manifesto__text{
  font-family:var(--f-display);
  font-size:clamp(32px,4.5vw,68px);
  line-height:1.1;
  letter-spacing:-.02em;
  max-width:26ch;
  color:var(--paper);
  margin-bottom:40px;
}
.manifesto__text em{
  color:var(--accent);
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}

/* --- Horizontal scroll section -------------------------- */
.hscroll{
  position:relative;
  padding:clamp(60px,8vw,120px) 0;
  border-top:1px solid var(--line);
}
.hscroll__head{padding:0 var(--pad);margin-bottom:48px}
.hscroll__track{
  display:flex;gap:24px;
  padding:0 var(--pad);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hscroll__track::-webkit-scrollbar{display:none}
.hscroll__item{
  flex:0 0 clamp(280px,36vw,480px);
  aspect-ratio:3/4;
  background:var(--ink-2);
  border:1px solid var(--line);
  padding:36px 32px;
  display:flex;flex-direction:column;justify-content:space-between;
  scroll-snap-align:start;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
  position:relative;overflow:hidden;
}
.hscroll__item:hover{
  border-color:var(--accent);
  transform:translateY(-6px);
}
.hscroll__item::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(212,255,58,.08), transparent 40%);
  opacity:0;transition:opacity .4s;
  pointer-events:none;
}
.hscroll__item:hover::before{opacity:1}
.hscroll__item__num{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.2em;
  color:var(--mute);
}
.hscroll__item__title{
  font-family:var(--f-display);
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;letter-spacing:-.02em;
  color:var(--paper);
  margin:12px 0 16px;
}
.hscroll__item__title em{
  color:var(--accent);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.hscroll__item__desc{
  font-size:14px;line-height:1.6;color:var(--paper-dim);
  max-width:34ch;
}

/* --- Chi-sono specific layout (new design) ------------- */
.bio-hero{
  position:relative;
  min-height:88vh;
  padding:clamp(40px,6vw,80px) 0;
  display:flex;align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.bio-hero__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.4;
}
.bio-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:center;
  position:relative;z-index:3;
}
.bio-hero__content{
  max-width: 580px;
  position:relative;
  padding: 80px 60px 80px 24px;
  background: radial-gradient(ellipse at left center,
              rgba(11,11,12,.78) 0%,
              rgba(11,11,12,.55) 40%,
              rgba(11,11,12,0) 80%);
}
.bio-hero__stat strong{ font-weight:600; }
.bio-hero__stat span{ color:var(--paper-dim); }
.bio-hero__portrait{
  aspect-ratio:3/4;
  background:
    linear-gradient(135deg, var(--ink-2), var(--ink-3));
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}
.bio-hero__portrait::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 40%, rgba(212,255,58,.15), transparent 50%),
    linear-gradient(135deg, var(--ink-2), var(--ink-3));
}
.bio-hero__portrait svg{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.3;
}
.bio-hero__portrait__label{
  position:absolute;bottom:20px;left:20px;right:20px;
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);
}
.bio-hero__name{
  font-family:var(--f-display);
  font-size:clamp(52px,9vw,140px);
  line-height:.9;
  letter-spacing:-.035em;
  color:var(--paper);
  margin:0 0 24px;
}
.bio-hero__name em{
  color:var(--accent);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.bio-hero__role{
  font-family:var(--f-mono);
  font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin-bottom:40px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
}
.bio-hero__lead{
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.6;
  color:var(--paper-dim);
  max-width:52ch;
  margin-bottom:32px;
}
.bio-hero__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.bio-hero__stat strong{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(28px,3.5vw,48px);
  line-height:1;
  color:var(--accent);
  margin-bottom:6px;
}
.bio-hero__stat span{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}

@media (max-width:900px){
  .bio-hero__grid{grid-template-columns:1fr}
  .bio-hero__content{
    padding: 60px 20px 60px 20px;
    max-width: 100%;
    background: radial-gradient(ellipse at center,
                rgba(11,11,12,.85) 0%,
                rgba(11,11,12,.6) 50%,
                rgba(11,11,12,.4) 100%);
  }
  .bio-hero__stats{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* --- Timeline ------------------------------------------- */
.timeline{
  padding:clamp(60px,10vw,140px) 0;
  border-top:1px solid var(--line);
  background:var(--ink);
}
.timeline__head{max-width:720px;margin-bottom:64px}
.timeline__list{
  position:relative;
  padding-left:32px;
  border-left:1px solid var(--line);
}
.timeline__item{
  position:relative;
  padding:24px 0 48px;
  display:grid;
  grid-template-columns:120px 1fr;
  gap:32px;
  align-items:start;
}
.timeline__item::before{
  content:"";
  position:absolute;left:-37px;top:30px;
  width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:1px solid var(--accent);
}
.timeline__item:hover::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-ghost)}
.timeline__year{
  font-family:var(--f-mono);
  font-size:13px;letter-spacing:.14em;
  color:var(--accent);
}
.timeline__content h3{
  font-family:var(--f-display);
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.1;letter-spacing:-.01em;
  color:var(--paper);
  font-weight:400;
  margin-bottom:10px;
}
.timeline__content p{
  font-size:15px;line-height:1.6;color:var(--paper-dim);
  max-width:60ch;
}

@media (max-width:700px){
  .timeline__item{grid-template-columns:1fr;gap:8px}
  .timeline__list{padding-left:20px}
  .timeline__item::before{left:-25px}
}

/* --- Big credentials / CV block ------------------------ */
.creds-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.creds-grid__item{
  padding:40px 32px;
  background:var(--ink);
  transition:background .3s;
}
.creds-grid__item:hover{background:var(--ink-2)}
.creds-grid__item h4{
  font-family:var(--f-display);
  font-size:clamp(20px,2vw,26px);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--paper);
  margin-bottom:12px;
}
.creds-grid__item h4 em{
  color:var(--accent);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.creds-grid__item p{
  font-size:14px;line-height:1.6;color:var(--paper-dim);
}
.creds-grid__item .meta{
  display:block;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);
  margin-bottom:10px;
}

@media (max-width:700px){.creds-grid{grid-template-columns:1fr}}

/* --- Skill bars ------------------------------------------ */
.skills{
  display:grid;gap:24px;
  max-width:720px;
}
.skill{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.skill__label{
  font-family:var(--f-sans);
  font-size:16px;font-weight:500;
  color:var(--paper);
}
.skill__value{
  font-family:var(--f-mono);
  font-size:12px;letter-spacing:.1em;
  color:var(--accent);
}
.skill__bar{
  grid-column:1/-1;
  height:2px;
  background:var(--line);
  position:relative;overflow:hidden;
}
.skill__bar::after{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:var(--pct,50%);
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease);
}
.skill.is-revealed .skill__bar::after{transform:scaleX(1)}

/* --- Program Manager page specific ---------------------- */
.pm-matrix{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:48px;
}
.pm-matrix__cell{
  background:var(--ink);
  padding:32px 24px;
  min-height:220px;
  display:flex;flex-direction:column;
  transition:background .3s;
  position:relative;overflow:hidden;
}
.pm-matrix__cell:hover{background:var(--ink-2)}
.pm-matrix__cell__num{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.2em;
  color:var(--mute);
  margin-bottom:16px;
}
.pm-matrix__cell__title{
  font-family:var(--f-display);
  font-size:clamp(19px,2vw,24px);
  line-height:1.1;letter-spacing:-.01em;
  color:var(--paper);
  font-weight:400;
  margin-bottom:auto;
  padding-bottom:16px;
}
.pm-matrix__cell__title em{
  color:var(--accent);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.pm-matrix__cell__desc{
  font-size:13px;line-height:1.55;color:var(--paper-dim);
}

@media (max-width:1000px){.pm-matrix{grid-template-columns:repeat(2,1fr)}}
@media (max-width:500px){.pm-matrix{grid-template-columns:1fr}}

.pm-process{
  counter-reset:step;
  display:grid;gap:32px;
  max-width:880px;
  margin:48px auto 0;
}
.pm-process__step{
  position:relative;
  padding:28px 32px 28px 90px;
  background:var(--ink);
  border:1px solid var(--line);
  transition:border-color .3s, transform .3s;
  counter-increment:step;
}
.pm-process__step:hover{
  border-color:var(--accent);
  transform:translateX(8px);
}
.pm-process__step::before{
  content:counter(step, decimal-leading-zero);
  position:absolute;left:28px;top:28px;
  font-family:var(--f-mono);
  font-size:24px;font-weight:500;
  color:var(--accent);
  letter-spacing:-.02em;
}
.pm-process__step h3{
  font-family:var(--f-display);
  font-size:clamp(20px,2.2vw,26px);
  font-weight:400;letter-spacing:-.01em;
  margin-bottom:8px;
  color:var(--paper);
}
.pm-process__step p{
  font-size:15px;line-height:1.55;color:var(--paper-dim);
  max-width:60ch;
}

/* --- Legal / Privacy / Cookie pages --------------------- */
.legal{
  padding:clamp(60px,8vw,120px) 0;
  max-width:840px;
  margin:0 auto;
}
.legal__head{margin-bottom:64px}
.legal__head h1{
  font-family:var(--f-display);
  font-size:clamp(44px,6vw,88px);
  line-height:.95;letter-spacing:-.03em;
  color:var(--paper);
  margin-bottom:16px;
}
.legal__head h1 em{
  color:var(--accent);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.legal__meta{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.legal h2{
  font-family:var(--f-display);
  font-size:clamp(24px,2.8vw,34px);
  font-weight:400;
  letter-spacing:-.015em;
  color:var(--paper);
  margin:56px 0 16px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{
  font-family:var(--f-sans);
  font-size:17px;font-weight:600;
  color:var(--paper);
  margin:32px 0 10px;
}
.legal p{
  font-size:15px;line-height:1.7;color:var(--paper-dim);
  margin-bottom:14px;max-width:72ch;
}
.legal ul{
  list-style:none;
  padding:0;margin:16px 0 24px;
}
.legal ul li{
  position:relative;
  padding-left:20px;
  font-size:15px;line-height:1.7;color:var(--paper-dim);
  margin-bottom:8px;max-width:70ch;
}
.legal ul li::before{
  content:"";
  position:absolute;left:0;top:12px;
  width:10px;height:1px;background:var(--accent);
}
.legal a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-ghost);
  transition:border-color .2s;
}
.legal a:hover{border-bottom-color:var(--accent)}
.legal table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
  font-size:14px;
}
.legal table th,.legal table td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--line);
  color:var(--paper-dim);
}
.legal table th{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink-2);
}

/* --- Cookie banner -------------------------------------- */
.cookie-banner{
  position:fixed;
  bottom:20px;left:20px;right:20px;
  max-width:520px;
  margin:0 auto;
  z-index:900;
  background:var(--ink-2);
  border:1px solid var(--line-strong);
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transform:translateY(140%);
  opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.cookie-banner.is-visible{transform:translateY(0);opacity:1}
.cookie-banner__head{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}
.cookie-banner__head::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  animation:pulse 2s var(--ease) infinite;
}
.cookie-banner p{
  font-size:14px;line-height:1.55;
  color:var(--paper-dim);
  margin-bottom:20px;
}
.cookie-banner p a{color:var(--accent);border-bottom:1px solid var(--accent-ghost)}
.cookie-banner__actions{
  display:flex;gap:10px;flex-wrap:wrap;
}
.cookie-banner__actions .btn{
  padding:10px 16px;font-size:11px;
}

/* --- Section separators with aggressive diagonal ------- */
.diag-cut{
  position:relative;
  height:1px;
  background:var(--line);
  margin:0;
  overflow:visible;
}
.diag-cut::after{
  content:"";
  position:absolute;right:var(--pad);top:50%;
  width:40px;height:1px;
  background:var(--accent);
  transform:translateY(-50%) rotate(-30deg);
  transform-origin:right;
}

/* --- Distorted hover text ------------------------------- */
.distort{
  display:inline-block;
  transition:letter-spacing .4s var(--ease), font-variation-settings .4s var(--ease);
}
.distort:hover{
  letter-spacing:-.055em;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}

/* --- Footer enrichment — 3-level ------------------------ */
.foot__meta-row{
  display:flex;gap:24px;flex-wrap:wrap;
  padding-top:20px;margin-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--mute);
}
.foot__meta-row a{color:var(--paper-dim)}
.foot__meta-row a:hover{color:var(--accent)}
.foot__meta-row button{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper-dim);
  background:none;border:0;cursor:pointer;padding:0;
}
.foot__meta-row button:hover{color:var(--accent)}

/* --- Noise overlay on shader hero ----------------------- */
.shader-hero__noise{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Glass panels --------------------------------------- */
.glass{
  background:color-mix(in srgb, var(--ink-2) 70%, transparent);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  border:1px solid var(--line);
}

/* --- Reduced motion ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .shader-hero__canvas{opacity:.2}
}

/* ============================================================
   V2.1 — FAQ accordion + social icons (native cursor restored)
   ============================================================ */

/* --- Native cursor polish — only make hover interactive ---- */
a, button, .btn, .nav-toggle, .city, .book, .card, .tilt,
.hscroll__item, .pm-matrix__cell, .pm-process__step,
details summary {
  cursor: pointer;
}

/* --- FAQ section -------------------------------------------- */
.faq{
  padding:clamp(60px,9vw,140px) 0;
  border-top:1px solid var(--line);
  position:relative;
}
.faq__head{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(32px,5vw,80px);
  align-items:end;
  margin-bottom:clamp(40px,6vw,80px);
}
.faq__kicker{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
  display:block;
}
.faq__title{
  font-family:var(--f-display);
  font-size:clamp(40px,6vw,88px);
  line-height:.95;letter-spacing:-.03em;
  color:var(--paper);
  font-weight:400;
}
.faq__title em{
  color:var(--accent);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.faq__lead{
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.55;
  color:var(--paper-dim);
  max-width:52ch;
}

.faq__list{
  border-top:1px solid var(--line);
}

.faq__item{
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.faq__item[open]{
  background:color-mix(in srgb, var(--ink-2) 40%, transparent);
}
.faq__item > summary{
  list-style:none;
  display:grid;
  grid-template-columns:48px 1fr 56px;
  align-items:center;
  padding:28px 0;
  gap:24px;
  font-family:var(--f-display);
  font-size:clamp(20px,2.4vw,32px);
  line-height:1.25;
  letter-spacing:-.015em;
  font-weight:400;
  color:var(--paper);
  transition:color .3s var(--ease);
}
.faq__item > summary::-webkit-details-marker{display:none}
.faq__item > summary::marker{display:none;content:""}

.faq__item > summary:hover{color:var(--accent)}
.faq__num{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;
  color:var(--mute);
  padding-left:8px;
}
.faq__toggle{
  justify-self:end;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  position:relative;
  transition:border-color .3s var(--ease), transform .4s var(--ease);
  flex-shrink:0;
}
.faq__toggle::before,
.faq__toggle::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  background:var(--paper);
  transition:background .3s var(--ease), transform .4s var(--ease);
}
.faq__toggle::before{
  width:14px;height:1px;
  transform:translate(-50%,-50%);
}
.faq__toggle::after{
  width:1px;height:14px;
  transform:translate(-50%,-50%);
}
.faq__item:hover .faq__toggle{
  border-color:var(--accent);
}
.faq__item:hover .faq__toggle::before,
.faq__item:hover .faq__toggle::after{
  background:var(--accent);
}
.faq__item[open] .faq__toggle{
  border-color:var(--accent);
  transform:rotate(180deg);
}
.faq__item[open] .faq__toggle::after{
  transform:translate(-50%,-50%) rotate(90deg);
  background:var(--accent);
}
.faq__item[open] .faq__toggle::before{
  background:var(--accent);
}

.faq__answer{
  display:grid;
  grid-template-columns:48px 1fr 56px;
  gap:24px;
  padding:0 0 32px;
  animation:faq-in .45s var(--ease);
}
.faq__answer__body{
  grid-column:2;
  font-size:16px;line-height:1.7;
  color:var(--paper-dim);
  max-width:68ch;
}
.faq__answer__body p{margin-bottom:1em}
.faq__answer__body p:last-child{margin-bottom:0}
.faq__answer__body a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-ghost);
  transition:border-color .2s;
}
.faq__answer__body a:hover{border-bottom-color:var(--accent)}
.faq__answer__body ul{
  list-style:none;
  padding:0;margin:8px 0 12px;
}
.faq__answer__body ul li{
  position:relative;
  padding-left:20px;
  margin-bottom:6px;
}
.faq__answer__body ul li::before{
  content:"";
  position:absolute;left:0;top:12px;
  width:10px;height:1px;background:var(--accent);
}
@keyframes faq-in{
  0%  {opacity:0;transform:translateY(-6px)}
  100%{opacity:1;transform:translateY(0)}
}

@media (max-width:760px){
  .faq__head{grid-template-columns:1fr}
  .faq__item > summary{
    grid-template-columns:1fr 40px;
    gap:16px;
    padding:22px 0;
    font-size:18px;
  }
  .faq__num{display:none}
  .faq__toggle{width:32px;height:32px}
  .faq__answer{
    grid-template-columns:1fr;
    gap:0;padding-bottom:24px;
  }
  .faq__answer__body{grid-column:1;font-size:15px}
}

/* --- Social icons row in footer --------------------------- */
.social-icons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.social-icons a{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:var(--paper-dim);
  transition:
    border-color .3s var(--ease),
    background .3s var(--ease),
    color .3s var(--ease),
    transform .3s var(--ease);
}
.social-icons a:hover{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--ink);
  transform:translateY(-2px);
}
.social-icons a svg{
  width:18px;height:18px;
  fill:currentColor;
}

/* --- Contact direct block (replaces form) ---------------- */
.contact-direct{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:48px;
}
.contact-direct__cell{
  background:var(--ink);
  padding:40px 36px;
  transition:background .3s;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:220px;
}
.contact-direct__cell:hover{background:var(--ink-2)}
.contact-direct__cell__kicker{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
  display:block;
}
.contact-direct__cell__label{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  display:block;
  margin-bottom:8px;
}
.contact-direct__cell__value{
  font-family:var(--f-display);
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.1;letter-spacing:-.015em;
  color:var(--paper);
  font-weight:400;
  display:block;
  word-break:break-word;
}
.contact-direct__cell__value em{
  color:var(--accent);font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-direct__cell__value a{
  color:inherit;
  border-bottom:1px solid transparent;
  transition:border-color .3s;
}
.contact-direct__cell__value a:hover{
  border-bottom-color:var(--accent);
  color:var(--accent);
}
.contact-direct__cell__desc{
  font-size:14px;line-height:1.6;
  color:var(--paper-dim);
  margin-top:16px;
  max-width:48ch;
}

@media (max-width:700px){
  .contact-direct{grid-template-columns:1fr}
}

/* ============================================================
   V2.1 — MOTION & TEXTURE REFINEMENTS (Apr 2026)
   Dot fields, wave dividers, floating accents, aurora bleed.
   Designed primarily for desktop; gracefully subdued on mobile.
   ============================================================ */

/* --- Dot field (puntini) — applicabile a qualsiasi sezione --- */
.dots-bg{ position:relative; overflow:hidden }
.dots-bg > *{ position:relative; z-index:1 }
.dots-bg::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:
    radial-gradient(circle, rgba(212,255,58,.16) 1px, transparent 1.4px);
  background-size:32px 32px;
  opacity:.55;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 75% 60% at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 50%, #000 30%, transparent 75%);
  animation:dots-drift 26s linear infinite;
  z-index:0;
}
@keyframes dots-drift{
  0%   { background-position:0 0; }
  100% { background-position:64px 64px; }
}
@media (max-width:800px){
  .dots-bg::before{ background-size:24px 24px; opacity:.35 }
}
@media (prefers-reduced-motion:reduce){
  .dots-bg::before{ animation:none }
}

/* --- Aurora bleed — lenta sfumatura lime che fluisce dietro al testo --- */
.aurora-bg{ position:relative; overflow:hidden; isolation:isolate }
.aurora-bg > *{ position:relative; z-index:1 }
.aurora-bg::after{
  content:"";
  position:absolute;
  top:-30%; left:-20%; width:140%; height:160%;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(212,255,58,.09), transparent 65%),
    radial-gradient(ellipse 45% 55% at 75% 60%, rgba(212,255,58,.06), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
  animation:aurora-shift 28s ease-in-out infinite;
}
@keyframes aurora-shift{
  0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); }
  33%    { transform:translate(-4%,3%) rotate(4deg) scale(1.04); }
  66%    { transform:translate(3%,-3%) rotate(-3deg) scale(.96); }
}
@media (prefers-reduced-motion:reduce){
  .aurora-bg::after{ animation:none }
}

/* --- Wave divider (onda) — SVG sinuosa tra sezioni --- */
.wave-divider{
  width:100%;
  height:80px;
  display:block;
  overflow:hidden;
  position:relative;
  pointer-events:none;
  margin:-1px 0;
}
.wave-divider svg{
  width:200%; height:100%; display:block;
  animation:wave-flow 14s ease-in-out infinite;
  will-change:transform;
}
.wave-divider--slow svg{ animation-duration:22s }
.wave-divider--reverse svg{ animation-direction:reverse }
@keyframes wave-flow{
  0%,100% { transform:translateX(0); }
  50%     { transform:translateX(-25%); }
}
@media (prefers-reduced-motion:reduce){
  .wave-divider svg{ animation:none; width:100% }
}

/* --- Floating accents — punti lime che fluttuano sull'hero --- */
.floating-accents{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.floating-accents > .fa-dot{
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px 2px rgba(212,255,58,.35);
  opacity:0;
  animation:fa-rise 12s ease-in-out infinite;
}
.floating-accents > .fa-dot:nth-child(1){ left: 8%; top:80%; animation-delay:0s;  width:4px;height:4px }
.floating-accents > .fa-dot:nth-child(2){ left:22%; top:85%; animation-delay:2s;  width:3px;height:3px; opacity:0 }
.floating-accents > .fa-dot:nth-child(3){ left:40%; top:88%; animation-delay:4s;  width:5px;height:5px }
.floating-accents > .fa-dot:nth-child(4){ left:58%; top:82%; animation-delay:6s;  width:3px;height:3px }
.floating-accents > .fa-dot:nth-child(5){ left:74%; top:87%; animation-delay:8s;  width:6px;height:6px }
.floating-accents > .fa-dot:nth-child(6){ left:90%; top:78%; animation-delay:10s; width:4px;height:4px }
@keyframes fa-rise{
  0%   { transform:translateY(0);     opacity:0 }
  20%  { opacity:.6 }
  50%  { opacity:.9 }
  80%  { opacity:.3 }
  100% { transform:translateY(-90vh); opacity:0 }
}
@media (max-width:800px){
  .floating-accents > .fa-dot:nth-child(n+4){ display:none } /* meno affollamento su mobile */
  .floating-accents > .fa-dot{ box-shadow:0 0 8px 1px rgba(212,255,58,.3) }
}
@media (prefers-reduced-motion:reduce){
  .floating-accents > .fa-dot{ display:none }
}

/* --- Section ribbon — barra accent fluida in cima ad alcune sezioni --- */
.section-ribbon{
  height:2px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 15%,
    var(--accent) 25%,
    transparent 40%,
    transparent 60%,
    var(--accent) 75%,
    var(--accent) 85%,
    transparent 100%
  );
  background-size:300% 100%;
  animation:ribbon-slide 8s linear infinite;
  opacity:.45;
}
@keyframes ribbon-slide{
  0%   { background-position:0% 0 }
  100% { background-position:300% 0 }
}
@media (prefers-reduced-motion:reduce){
  .section-ribbon{ animation:none; opacity:.3 }
}

/* --- Eyebrow pulse — piccola pulsazione sul dot verde degli eyebrows principali --- */
.eyebrow.eyebrow--live::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  margin-right:10px;
  vertical-align:middle;
  box-shadow:0 0 0 0 rgba(212,255,58,.6);
  animation:dot-pulse 2.2s ease-out infinite;
}
@keyframes dot-pulse{
  0%   { box-shadow:0 0 0 0 rgba(212,255,58,.6) }
  70%  { box-shadow:0 0 0 10px rgba(212,255,58,0) }
  100% { box-shadow:0 0 0 0 rgba(212,255,58,0) }
}

/* --- Parallax depth — più marcato sui decorativi manifesto --- */
.manifesto__bg{
  transform:translate3d(0,0,0);
  transition:transform 0.05s linear;
}
/* JS applica transform Y tramite data-parallax; overridiamo qui per chi-sono portrait */
.bio-hero__portrait{ transition:transform 0.1s linear }

/* ============================================================
   V2.2 — DESKTOP TYPOGRAPHY & GRID REFINEMENT (Apr 2026)
   Più Type, più personalità, asimmetrie desktop-only.
   ============================================================ */

/* --- Display variants — Fraunces variable axis pushed --- */
.display--wonk em{
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
  font-style:italic;
  color:var(--accent);
}
.display--soft{
  font-variation-settings:"opsz" 144, "SOFT" 80;
}
.display--xl{
  font-size:clamp(56px, 11vw, 200px) !important;
  line-height:.88 !important;
  letter-spacing:-.04em !important;
  font-variation-settings:"opsz" 144, "SOFT" 30 !important;
}
.display em{
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}

/* --- Drop cap utility — per paragrafi lead di impatto --- */
@media (min-width:900px){
  .has-dropcap::first-letter{
    font-family:var(--f-display);
    font-size:5.2em;
    font-weight:400;
    float:left;
    line-height:.85;
    padding:0.02em 0.1em 0 0;
    margin-top:0.02em;
    color:var(--accent);
    font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
    font-style:italic;
  }
  .has-dropcap::after{
    content:"";
    display:table;
    clear:both;
  }
}

/* --- Side-rail — etichette verticali decorative desktop --- */
.side-rail{
  display:none;
  position:fixed;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  transform-origin:center center;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.35em;
  color:var(--paper-dim);
  opacity:.35;
  pointer-events:none;
  z-index:5;
  white-space:nowrap;
  text-transform:uppercase;
}
.side-rail--left{  left:20px;  transform:translateY(-50%) rotate(-90deg) }
.side-rail--right{ right:20px; transform:translateY(-50%) rotate(90deg) }
.side-rail::before{
  content:"";
  display:inline-block;
  width:28px; height:1px;
  background:var(--paper-dim);
  vertical-align:middle;
  margin-right:14px;
  opacity:.6;
}
.side-rail::after{
  content:"";
  display:inline-block;
  width:28px; height:1px;
  background:var(--paper-dim);
  vertical-align:middle;
  margin-left:14px;
  opacity:.6;
}
@media (min-width:1280px){
  .side-rail{ display:block; }
}

/* --- Underline draw — link hover animation --- */
.link-draw{
  position:relative;
  display:inline-block;
  text-decoration:none;
  color:inherit;
}
.link-draw::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease);
}
.link-draw:hover::after,
.link-draw:focus-visible::after{
  transform:scaleX(1);
}
.link-draw--accent::after{ background:var(--accent) }

/* --- Eyebrow refinement — numbered / divider styles --- */
.eyebrow--numbered{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.eyebrow--numbered::before{
  content:attr(data-num);
  font-family:var(--f-display);
  font-size:1.9em;
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
  font-style:italic;
  color:var(--accent);
  letter-spacing:-.02em;
  line-height:1;
  opacity:.85;
}

/* --- Quote marks on xxl quotes — desktop only --- */
@media (min-width:900px){
  .quote-xxl{ position:relative; }
  .quote-xxl::before{
    content:"\201C";
    position:absolute;
    top:clamp(20px,5vw,60px);
    left:clamp(0px,2vw,-40px);
    font-family:var(--f-display);
    font-size:clamp(140px,18vw,320px);
    line-height:.8;
    color:var(--accent);
    opacity:.12;
    font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
    font-style:italic;
    pointer-events:none;
    z-index:0;
  }
  .quote-xxl .wrap{ position:relative; z-index:1 }
}

/* --- Stat numbers — tabular + OT features --- */
.stat__num,
.bio-hero__stat strong,
.stat strong{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"ss01", "ss02";
}

/* --- Section ticker — micro-info bar at top of sections --- */
.section-ticker{
  display:none;
}
@media (min-width:1024px){
  .section-ticker{
    display:flex;
    align-items:center;
    gap:24px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    margin-bottom:clamp(32px,4vw,56px);
    font-family:var(--f-mono);
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .section-ticker span{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .section-ticker span::before{
    content:"";
    display:inline-block;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--accent);
    opacity:.7;
  }
  .section-ticker .ticker-sep{
    flex:1;
    height:1px;
    background:var(--line);
  }
}

/* --- Asymmetric hero layout — desktop only --- */
@media (min-width:1200px){
  .page-hero--asym .wrap{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:80px;
    align-items:end;
  }
  .page-hero--asym .wrap > .page-hero__aside{
    font-family:var(--f-mono);
    font-size:12px;
    line-height:1.7;
    color:var(--paper-dim);
    text-transform:uppercase;
    letter-spacing:.12em;
    padding-bottom:20px;
    border-left:1px solid var(--line);
    padding-left:24px;
  }
  .page-hero--asym .wrap > .page-hero__aside strong{
    color:var(--accent);
    font-weight:400;
  }
}

/* --- Big display scale on hero on desktop — bolder moments --- */
@media (min-width:1280px){
  .page-hero h1.display{
    font-size:clamp(96px, 10vw, 160px);
    letter-spacing:-.035em;
  }
}

/* --- Marquee refinement — slower, more gap --- */
.marquee-big__track{ font-feature-settings:"ss01" }
@media (min-width:1024px){
  .marquee-big{
    font-size:clamp(84px, 11vw, 180px);
  }
}

/* --- Body link base styling --- */
.prose a,
.faq__answer__body a{
  color:var(--paper);
  border-bottom:1px solid var(--accent);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.prose a:hover,
.faq__answer__body a:hover{
  color:var(--accent);
  border-color:var(--paper);
}

/* --- Hero overlay number — big floating numerals --- */
.hero-overlay-num{
  display:none;
}
@media (min-width:1280px){
  .hero-overlay-num{
    display:block;
    position:absolute;
    top:60%;
    right:-5vw;
    transform:translateY(-50%);
    font-family:var(--f-display);
    font-size:clamp(260px, 32vw, 520px);
    font-weight:400;
    line-height:.8;
    color:var(--accent);
    opacity:.04;
    font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
    font-style:italic;
    pointer-events:none;
    z-index:0;
    letter-spacing:-.05em;
  }
}

/* --- Credentials grid — asymmetric desktop --- */
@media (min-width:1200px){
  .creds-grid{
    grid-template-columns:repeat(12, 1fr);
  }
  .creds-grid__item:nth-child(1){ grid-column:span 7 }
  .creds-grid__item:nth-child(2){ grid-column:span 5 }
  .creds-grid__item:nth-child(3){ grid-column:span 5 }
  .creds-grid__item:nth-child(4){ grid-column:span 7 }
  .creds-grid__item:nth-child(5){ grid-column:span 6 }
  .creds-grid__item:nth-child(6){ grid-column:span 6 }
  .creds-grid__item:nth-child(7){ grid-column:span 12 }
}

/* --- Timeline — side offset alternating (desktop) --- */
@media (min-width:1200px){
  .timeline__list{
    position:relative;
  }
  .timeline__list::before{
    content:"";
    position:absolute;
    left:200px; top:0; bottom:0;
    width:1px;
    background:var(--line);
  }
  .timeline__item:nth-child(even) .timeline__content{
    padding-left:24px;
    border-left:2px solid var(--accent);
  }
  .timeline__item:nth-child(odd) .timeline__content{
    padding-left:24px;
    border-left:2px solid var(--line);
  }
  .timeline__year{
    font-family:var(--f-mono);
    font-size:13px;
    letter-spacing:.1em;
  }
}

/* --- Overall padding enhancement on desktop --- */
@media (min-width:1400px){
  :root{
    --pad:48px;
  }
  .wrap{
    max-width:1360px;
  }
}

/* ============================================================
   V2.3 — MICRO-INTERACTIONS & TRUST SIGNALS (Apr 2026)
   Card tilt, underline draws, stagger reveal, trust badges.
   ============================================================ */

/* --- Card tilt refinement — already in JS, CSS polish --- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.tilt > *{
  transform:translateZ(20px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.tilt .card__num,
.tilt .pm-matrix__cell__num,
.tilt .stat__num{
  transform:translateZ(40px);
}

/* --- Cards get subtle tilt hover state via JS class --- */
.card,
.pm-matrix__cell,
.cards > .card,
.creds-grid__item,
.book{
  transition:transform .5s cubic-bezier(.2,.8,.2,1),
             box-shadow .5s cubic-bezier(.2,.8,.2,1),
             border-color .3s var(--ease);
}
.card:hover,
.pm-matrix__cell:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
}

/* --- Link underline grow-from-center --- */
.link-grow{
  position:relative;
  display:inline-block;
  text-decoration:none;
  color:inherit;
}
.link-grow::after{
  content:"";
  position:absolute;
  left:50%; right:50%; bottom:-3px;
  height:1px;
  background:var(--accent);
  transition:left .4s var(--ease), right .4s var(--ease);
}
.link-grow:hover::after,
.link-grow:focus-visible::after{
  left:0; right:0;
}

/* --- Btn micro-interaction enhancement --- */
.btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
                             rgba(212,255,58,.15) 0%,
                             transparent 60%);
  opacity:0;
  transition:opacity .4s var(--ease);
  z-index:-1;
  pointer-events:none;
}
.btn:hover::before{ opacity:1 }
.btn__arrow{
  display:inline-block;
  transition:transform .35s var(--ease);
  will-change:transform;
}
.btn:hover .btn__arrow{
  transform:translateX(6px);
}
.btn--solid:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px -12px rgba(212,255,58,.4);
}

/* --- Stagger reveal — utility for grids --- */
.stagger-reveal > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.stagger-reveal.is-visible > *{
  opacity:1;
  transform:none;
}
.stagger-reveal.is-visible > *:nth-child(1){ transition-delay:.05s }
.stagger-reveal.is-visible > *:nth-child(2){ transition-delay:.12s }
.stagger-reveal.is-visible > *:nth-child(3){ transition-delay:.19s }
.stagger-reveal.is-visible > *:nth-child(4){ transition-delay:.26s }
.stagger-reveal.is-visible > *:nth-child(5){ transition-delay:.33s }
.stagger-reveal.is-visible > *:nth-child(6){ transition-delay:.40s }
.stagger-reveal.is-visible > *:nth-child(7){ transition-delay:.47s }

@media (prefers-reduced-motion:reduce){
  .stagger-reveal > *{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   TRUST SIGNALS / RECOGNITION BADGES
   ============================================================ */
.trust-signals{
  padding:clamp(32px, 5vw, 56px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-signals__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:32px;
  flex-wrap:wrap;
  gap:16px;
}
.trust-signals__kicker{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.trust-signals__meta{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--paper-dim);
  opacity:.6;
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}
.trust-badge{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:4px;
  background:color-mix(in srgb, var(--ink-2) 60%, transparent);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
}
.trust-badge::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:3px; height:100%;
  background:var(--accent);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.trust-badge:hover{
  border-color:var(--line-strong);
  transform:translateY(-2px);
}
.trust-badge:hover::before{ opacity:1 }
.trust-badge__cat{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:.85;
}
.trust-badge__title{
  font-family:var(--f-display);
  font-size:20px;
  font-weight:400;
  line-height:1.15;
  color:var(--paper);
  font-variation-settings:"opsz" 144, "SOFT" 40;
  margin:0;
}
.trust-badge__title em{
  font-style:italic;
  color:var(--accent);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.trust-badge__desc{
  font-size:13px;
  line-height:1.5;
  color:var(--paper-dim);
  margin:0;
}
.trust-badge__link{
  margin-top:auto;
  padding-top:12px;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--paper-dim);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.trust-badge:hover .trust-badge__link{
  color:var(--accent);
}
a.trust-badge:hover .trust-badge__title{
  color:var(--accent);
}

@media (max-width:640px){
  .trust-grid{ grid-template-columns:1fr }
  .trust-badge{ padding:16px }
}

/* ============================================================
   V2.4 — AURORA BACKGROUND (porting vanilla Aceternity)
   Sostituisce lo shader WebGL della home hero.
   Aurora = repeating-linear-gradients sovrapposti, blur alto,
   animazione di background-position 60s, mask radial ellisse.
   Palette del sito: lime #d4ff3a dominante, ink #0b0b0c base,
   viola #3a2fff come accento secondario.
============================================================ */
.aurora-bg{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
  --aurora-lime: #d4ff3a;
  --aurora-lime-soft: rgba(212,255,58,.55);
  --aurora-violet: #3a2fff;
  --aurora-violet-soft: rgba(58,47,255,.55);
  --aurora-indigo: #6d5fff;
  --aurora-ink: #0b0b0c;
}

.aurora-bg__layer{
  --aurora-colors: repeating-linear-gradient(
    100deg,
    var(--aurora-lime) 10%,
    var(--aurora-lime-soft) 15%,
    var(--aurora-violet-soft) 20%,
    var(--aurora-indigo) 25%,
    var(--aurora-lime) 30%
  );
  --aurora-base: repeating-linear-gradient(
    100deg,
    var(--aurora-ink) 0%,
    var(--aurora-ink) 7%,
    transparent 10%,
    transparent 12%,
    var(--aurora-ink) 16%
  );

  position:absolute;
  inset:-40px;
  pointer-events:none;
  background-image: var(--aurora-base), var(--aurora-colors);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(24px) saturate(120%);
  opacity:.55;
  mix-blend-mode: screen;
  will-change: transform, background-position;
  animation: aurora 60s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 90% 10%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse at 90% 10%, #000 10%, transparent 75%);
}

/* Secondo strato, controcorrente, per dare profondità */
.aurora-bg__layer--alt{
  mix-blend-mode: lighten;
  opacity:.35;
  filter: blur(42px) saturate(150%);
  animation: aurora-alt 90s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 10% 90%, #000 5%, transparent 60%);
          mask-image: radial-gradient(ellipse at 10% 90%, #000 5%, transparent 60%);
}

/* Vignettatura ink sopra per leggibilità del testo in primo piano */
.aurora-bg__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 40%, transparent 0%, rgba(11,11,12,.55) 70%),
    linear-gradient(180deg, rgba(11,11,12,.2) 0%, transparent 30%, transparent 70%, rgba(11,11,12,.6) 100%);
  z-index:1;
}

@keyframes aurora{
  0%   { background-position: 50% 50%, 50% 50%; }
  100% { background-position: 350% 50%, 350% 50%; }
}
@keyframes aurora-alt{
  0%   { background-position: 50% 50%, 50% 50%; }
  100% { background-position: -350% 50%, -350% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .aurora-bg__layer,
  .aurora-bg__layer--alt{ animation:none; }
}

/* ============================================================
   V2.4 — HERO V2 (home): 2 colonne desktop, stack mobile.
   Colonna sx = testo, colonna dx = Spline robot.
   Sfondo = .aurora-bg come wrapper di sezione.
============================================================ */
.hero-v2{
  position:relative;
  min-height: clamp(640px, 92vh, 900px);
  display:flex;
  align-items:center;
  padding: clamp(96px, 12vh, 140px) 0 clamp(64px, 10vh, 120px);
  overflow:hidden;
}
.hero-v2__grid{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items:center;
  width:100%;
}
.hero-v2__text{
  max-width: 580px;
  position:relative;
  z-index:2;
  padding: 80px 60px 80px 24px;
  background: radial-gradient(ellipse at left center,
              rgba(11,11,12,.75) 0%,
              rgba(11,11,12,.55) 40%,
              rgba(11,11,12,0) 80%);
}
.hero-v2__status{
  display:flex; flex-wrap:wrap; gap:18px;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim);
  margin-bottom:28px;
}
.hero-v2__status .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-right:8px; vertical-align:middle;
  box-shadow:0 0 12px var(--accent);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.8); }
}
.hero-v2__title{
  font-family:var(--f-display);
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  letter-spacing:-.035em;
  line-height:1.05;
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  max-width: 14ch;
  color: var(--paper);
  margin-bottom: 28px;
}
.hero-v2__title em{
  font-style:italic;
  color:var(--accent);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.hero-v2__sub{
  font-size: clamp(16px, 1.4vw, 19px);
  line-height:1.55;
  color: var(--paper-dim);
  max-width: 52ch;
  margin-bottom: 36px;
}
.hero-v2__sub strong{ color: var(--paper); }
.hero-v2__cta{
  display:flex; flex-wrap:wrap; gap:14px;
}

/* V29 — pointer-events RADICALE per Spline mouse-tracking.
   Universal selector * copre wrapper span GSAP data-split,
   .hero-v2__grid stesso è dichiarato none per evitare cattura
   sopra celle vuote, CTA esplicitamente abilitati. */
.hero-v2 > .hero-v2__grid,
.hero-v2__text,
.hero-v2__text *,
.hero-v2__title,
.hero-v2__title *,
.hero-v2__sub,
.hero-v2__sub *,
.hero-v2__status,
.hero-v2__status *{
  pointer-events: none;
}
.hero-v2__cta,
.hero-v2__cta *,
.hero-v2 a.btn,
.hero-v2 a.btn *,
.hero-v2__sub a{
  pointer-events: auto;
}

/* Stesso trattamento per il bio-hero di /chi-sono/, /en/about/,
   /es/sobre-mi/ se usano spline-viewer.
   Nota: .bio-hero__grid è discendente (dentro .wrap), non child. */
.bio-hero .wrap,
.bio-hero__grid,
.bio-hero__content,
.bio-hero__content *,
.bio-hero__name,
.bio-hero__name *,
.bio-hero__role,
.bio-hero__lead,
.bio-hero__lead *,
.bio-hero__stats,
.bio-hero__stats *{
  pointer-events: none;
}
.bio-hero a,
.bio-hero a *,
.bio-hero .btn,
.bio-hero .btn *{
  pointer-events: auto;
}

/* Robot — full-bleed cinematic background */
.hero-v2 > .hero-v2__robot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  backdrop-filter:none;
  pointer-events:none;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Aurora layers / blobs sit BEHIND the robot inside the hero */
.hero-v2 > .aurora-bg__layer,
.hero-v2 > .aurora-bg__layer--alt,
.hero-v2 > .hero-v2__blobs{ z-index:0; }
/* Aurora veil sits OVER the robot for readability behind text */
.hero-v2 > .aurora-bg__veil{ z-index:2; }
/* Text/grid on top */
.hero-v2 > .hero-v2__grid{ z-index:3; }
.hero-v2__robot spline-viewer{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform: scale(1.1);
  transform-origin: center center;
  pointer-events:auto;
}
.hero-v2__robot .spline-fallback{
  position:absolute; inset:0; width:100%; height:100%;
}
/* Skeleton di fallback: aurora shimmer in attesa del 3D */
.spline-fallback{
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(212,255,58,.15), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(58,47,255,.18), transparent 55%);
  color: var(--paper-dim);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing:.18em;
  text-transform: uppercase;
}
.spline-fallback::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 40%, rgba(212,255,58,.08) 50%, transparent 60%);
  animation: spline-shimmer 3.2s ease-in-out infinite;
}
@keyframes spline-shimmer{
  0%{ transform: translateX(-30%); }
  100%{ transform: translateX(30%); }
}
@media (prefers-reduced-motion: reduce){
  .spline-fallback::before{ animation:none; }
  .hero-v2__status .dot{ animation:none; }
}

@media (max-width: 900px){
  .hero-v2{
    min-height: 88vh;
    padding: clamp(80px, 14vh, 120px) 0 48px;
  }
  .hero-v2__grid{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-v2__text{
    padding: 60px 20px 60px 20px;
    max-width: 100%;
    background: radial-gradient(ellipse at center,
                rgba(11,11,12,.85) 0%,
                rgba(11,11,12,.6) 50%,
                rgba(11,11,12,.4) 100%);
  }
  /* Robot remains full-bleed absolute behind text */
  .hero-v2__robot{
    inset:0;
  }
}

/* ============================================================
   V2.4 — WOW 2026 effects pack
============================================================ */

/* Lenis compatibility: disable native smooth-scroll when Lenis owns the scroll */
html.lenis-on{ scroll-behavior: auto; }
html.lenis-on, html.lenis-on body{ height: auto; }

/* 5.2 — Word reveal */
.word-reveal__w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  line-height: inherit;
  padding: 0 .02em;
  margin: 0 -.02em;
}
.word-reveal__i{
  display:inline-block;
  will-change: transform, opacity;
}

/* 5.3 — Custom cursor (fine pointer only) */
.wow-cursor{
  position:fixed; inset:0; pointer-events:none;
  z-index:9998;
  mix-blend-mode: difference;
}
.wow-cursor__dot,
.wow-cursor__ring{
  position:fixed; left:0; top:0;
  will-change: transform, width, height;
  pointer-events:none;
}
.wow-cursor__dot{
  width:6px; height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background: var(--accent);
}
.wow-cursor__ring{
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1px solid rgba(212,255,58,.55);
  transition:
    width .22s var(--ease),
    height .22s var(--ease),
    margin .22s var(--ease),
    border-color .22s var(--ease),
    background .22s var(--ease);
}
.wow-cursor.is-hover .wow-cursor__ring{
  width:56px; height:56px;
  margin:-28px 0 0 -28px;
  border-color: var(--accent);
  background: rgba(212,255,58,.08);
}
@media (pointer: coarse){ .wow-cursor{ display:none; } }
@media (prefers-reduced-motion: reduce){ .wow-cursor{ display:none; } }
html.prm *{ animation-duration: .001s !important; transition-duration: .001s !important; }

/* 5.9 — Animated gradient border on primary CTAs */
@property --wow-ang{
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.btn--glow{
  position: relative;
  isolation: isolate;
  z-index: 0;
}
.btn--glow::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  padding:2px;
  background: conic-gradient(
    from var(--wow-ang, 0deg),
    var(--accent),
    #3a2fff 35%,
    #6d5fff 55%,
    var(--accent) 75%,
    var(--accent)
  );
  z-index:-1;
  filter: blur(8px);
  opacity:.55;
  animation: wow-btn-rotate 6s linear infinite;
  pointer-events:none;
}
.btn--glow::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: inherit;
  z-index:-1;
  pointer-events:none;
}
@keyframes wow-btn-rotate{
  from{ --wow-ang: 0deg; }
  to  { --wow-ang: 360deg; }
}
@media (prefers-reduced-motion: reduce){
  .btn--glow::before{ animation:none; opacity:.3; }
}

/* 5.10 — Fluid ambient blobs (zero JS) */
.fluid-blob{
  position:absolute;
  pointer-events:none;
  width: clamp(320px, 46vw, 680px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(72px);
  opacity:.22;
  z-index:0;
  mix-blend-mode: screen;
}
.fluid-blob--lime{
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
}
.fluid-blob--violet{
  background: radial-gradient(circle, #3a2fff 0%, transparent 60%);
}
.fluid-blob--a{
  top:-18%; left:-12%;
  animation: fluid-drift-a 22s ease-in-out infinite alternate;
}
.fluid-blob--b{
  bottom:-20%; right:-8%;
  animation: fluid-drift-b 28s ease-in-out infinite alternate;
}
.fluid-blob--c{
  top:20%; right:-14%;
  animation: fluid-drift-c 34s ease-in-out infinite alternate;
}
@keyframes fluid-drift-a{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(60px, 80px) scale(1.15); }
}
@keyframes fluid-drift-b{
  0%   { transform: translate(0,0) scale(1.1); }
  100% { transform: translate(-80px, -60px) scale(.95); }
}
@keyframes fluid-drift-c{
  0%   { transform: translate(0,0) scale(.95); }
  100% { transform: translate(-40px, 50px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .fluid-blob{ animation:none !important; }
}

/* 5.5 — clip-path reveal baseline (hidden until GSAP runs) */
[data-clip-reveal]{
  clip-path: inset(0 100% 0 0);
}
html.prm [data-clip-reveal]{ clip-path: none; }

/* 5.8 — tilt card subtle polish */
.card{ transform-origin: center; will-change: transform; }

/* ============================================================
   WOW 2026 v25 — cinematic extensions
   Scope:
    · Word split baseline (hidden before GSAP runs)
    · Cursor trail (5 dots)
    · Scroll progress bar
    · Bio-hero portrait Spline override
    · Fluid-blob placement inside hero-v2
    · Section entry transitions (initial hidden state before ST arms)
============================================================ */

/* Word-split baseline — applied when JS ran */
.word-reveal__w{ padding: 0 .03em; margin: 0 -.03em; }
.word-reveal__i{ display:inline-block; }
.words-primed .word-reveal__i{ opacity:0; }
html.prm .words-primed .word-reveal__i{ opacity:1; }

/* Section entry transitions initial state — prevents FOUC flash
   before ScrollTrigger arms. Set on body after GSAP init. */
html.wow-ready .wow-section-enter{
  will-change: opacity, transform, filter;
}

/* Cursor trail */
.wow-cursor__trail{
  position:fixed; left:0; top:0;
  pointer-events:none;
  border-radius:50%;
  background: var(--accent);
  filter: blur(3px);
  will-change: transform;
  transform: translate3d(-200px,-200px,0);
}
.wow-cursor__trail[data-i="0"]{ width:6px; height:6px; margin:-3px 0 0 -3px; opacity:.8; }
.wow-cursor__trail[data-i="1"]{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; opacity:.6; }
.wow-cursor__trail[data-i="2"]{ width:4px; height:4px; margin:-2px 0 0 -2px; opacity:.4; }
.wow-cursor__trail[data-i="3"]{ width:3px; height:3px; margin:-1.5px 0 0 -1.5px; opacity:.25; }
.wow-cursor__trail[data-i="4"]{ width:2px; height:2px; margin:-1px 0 0 -1px; opacity:.15; }
@media (pointer: coarse){ .wow-cursor__trail{ display:none; } }
@media (prefers-reduced-motion: reduce){ .wow-cursor__trail{ display:none; } }

/* Scroll progress bar */
#scroll-progress{
  position:fixed; top:0; left:0;
  width:0; height:3px;
  background: var(--accent);
  z-index: 99999;
  pointer-events:none;
  will-change: width;
  box-shadow: 0 0 12px rgba(212,255,58,.55);
}
html.prm #scroll-progress{ box-shadow: none; }

/* Bio-hero portrait with Spline viewer — full-bleed cinematic */
.bio-hero > .bio-hero__portrait--spline{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  z-index:1;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  pointer-events:none;
  transform-style: preserve-3d;
  will-change: transform;
}
.bio-hero > .bio-hero__portrait--spline::before{ display:none; }
.bio-hero > .bio-hero__portrait--spline spline-viewer{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform: scale(1.1);
  transform-origin: center center;
  pointer-events:auto;
}
.bio-hero > .bio-hero__portrait--spline .spline-fallback{
  position:absolute; inset:0; width:100%; height:100%;
}

/* Fluid blobs positioned inside hero-v2 — scope-contained via wrapper */
.hero-v2__blobs{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.hero-v2__blobs .fluid-blob{
  position:absolute;
}

/* Counter animation target — prevent shifting during count */
.is-counting{
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: inline-block;
}

/* ============================================================
   V2.6 — Spline watermark hide (triple-layer redundancy)
   1) Shadow-DOM ::part(logo) — works when Spline exposes the part.
   2) Pseudo-overlay covering bottom-right corner (where the
      watermark lives) — hard cap that always wins.
   3) overflow:hidden on the wrapper combined with scale(1.1)
      on the inner spline-viewer pushes the watermark outside
      the visible area.
============================================================ */
spline-viewer::part(logo){ display:none !important; }

.hero-v2__robot::after,
.bio-hero__portrait--spline::after{
  content:"";
  position:absolute;
  bottom:0; right:0;
  width:200px;
  height:72px;
  background: var(--ink, #0b0b0c);
  z-index:999;
  pointer-events:auto;
  cursor:default;
}

/* ============================================================
   V2.6 — Spline loaded state: hide fallback once viewer ready
============================================================ */
.hero-v2__robot .spline-fallback,
.bio-hero__portrait--spline .spline-fallback{
  transition: opacity .8s ease;
}
.hero-v2__robot.spline-loaded .spline-fallback,
.bio-hero__portrait--spline.spline-loaded .spline-fallback{
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   V27 — Round contenuti (homepage rebuild + nuove pagine)
   New classes introduced for: brand subtitle, extended nav,
   service cards (cat/example/link), aziende flow, books sub,
   small btn, metodo steps, detailed cities, focus cards,
   4-col footer, lang switcher floating.
============================================================ */

/* Brand subtitle under logo (desktop only) */
.brand__sub{
  display:none;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper-dim);
  margin-left:8px;
  padding-left:10px;
  border-left:1px solid var(--line);
  line-height:1.2;
  align-self:center;
}
@media (min-width: 1024px){
  .brand__sub{ display:inline-flex; }
}

/* Mobile extra nav (Program Mgmt, AIPIA, Metodo, Media, Cities, Lang) */
.nav__mobile-extra{ display:none; }
@media (max-width: 900px){
  .nav__mobile-extra{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid var(--line);
    width:100%;
  }
  .nav__mobile-extra a{
    color:var(--paper-dim);
    text-decoration:none;
    font-family:var(--f-sans);
    font-size:14px;
  }
  .nav__cities{ font-family:var(--f-mono); font-size:12px; text-transform:uppercase; }
  .nav__cities summary{ cursor:pointer; padding:6px 0; color:var(--paper-dim); list-style:none; }
  .nav__cities summary::-webkit-details-marker{ display:none; }
  .nav__cities summary::before{ content:"› "; color:var(--accent); }
  .nav__cities[open] summary::before{ content:"⌄ "; }
  .nav__cities a{
    display:block;
    padding:6px 0 6px 16px;
    font-size:13px;
    color:var(--paper);
  }
  .nav__lang{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-family:var(--f-mono);
    font-size:12px;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .nav__lang a{ color:var(--paper-dim); }
  .nav__lang a.is-active{ color:var(--accent); }
}

/* Service cards — category, example, link */
.card__cat{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
  padding:4px 10px;
  border:1px solid rgba(212,255,58,.3);
  border-radius:999px;
}
.card__example{
  margin-top:18px;
  padding-top:18px;
  border-top:1px dashed var(--line);
  font-style:italic;
  font-size:14px;
  color:var(--paper-dim);
  line-height:1.55;
}
.card__link{
  display:inline-block;
  margin-top:20px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid var(--accent-ghost);
  padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.card__link:hover{ color:var(--paper); border-color:var(--paper); }

/* Aziende flow text */
.aziende-flow{
  margin-top:24px;
  max-width:1200px;
}
.aziende-flow p{
  font-family:var(--f-display);
  font-weight:300;
  font-size:clamp(20px,2.6vw,32px);
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--paper);
}
.aziende-flow__sep{
  color:var(--accent);
  margin:0 .15em;
  font-weight:600;
}

/* Books subtitle */
.hscroll__item__sub{
  margin-top:8px;
  font-family:var(--f-sans);
  font-size:13px;
  font-style:italic;
  color:var(--paper-dim);
  line-height:1.4;
}

/* Smaller button variant */
.btn--small{
  padding:8px 14px;
  font-size:11px;
  letter-spacing:.08em;
}

/* Metodo steps grid */
.metodo-step{
  text-align:left;
  padding:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(20,20,22,.4);
  backdrop-filter:blur(6px);
}
.metodo-step__num{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:10px;
}
.metodo-step__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:22px;
  letter-spacing:-.01em;
  margin:0 0 10px;
  color:var(--paper);
}
.metodo-step__desc{
  font-size:14px;
  line-height:1.55;
  color:var(--paper-dim);
  margin:0;
}
.manifesto__lead{ font-style:normal; }

/* Cities — detailed variant with descriptions */
.cities--detailed{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.city--detailed{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:28px 24px;
  text-align:left;
  min-height:280px;
}
.city--detailed .city__name{
  font-size:clamp(40px,4.5vw,64px);
}
.city__desc{
  flex:1;
  font-size:13px;
  line-height:1.55;
  color:var(--paper-dim);
  margin:0;
}
.city__link{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:auto;
}

/* Focus cards (What's next) */
.cards--focus{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
}
.cards--focus .card__cat{ margin-bottom:10px; }

/* Section lead text */
.section__lead{
  font-family:var(--f-sans);
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.6;
}

/* Footer 4-col grid */
.foot__grid--4{
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 900px){
  .foot__grid--4{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .foot__grid--4{
    grid-template-columns: 1fr;
  }
}
.foot__meta-row{ flex-wrap:wrap; }

/* Lang switcher — floating */
.lang-switcher{
  position:fixed;
  bottom:24px;
  right:24px;
  background:rgba(20,20,22,.85);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(212,255,58,.2);
  border-radius:999px;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-mono);
  font-size:12px;
  text-transform:uppercase;
  z-index:99998;
  opacity:.6;
  transition:opacity .3s ease;
}
.lang-switcher:hover{ opacity:1; }
.lang-link{ color:#aaa; text-decoration:none; }
.lang-link.active{ color:var(--accent); }
.lang-link:hover{ color:var(--paper); }
.lang-divider{ color:rgba(212,255,58,.3); }
.lang-icon{ opacity:.7; }

@media (max-width: 768px){
  .lang-switcher{ display:none; }
}

/* Card link visibility tweak inside tilt */
.tilt__inner > .card__cat + .card__title{ margin-top:6px; }

/* Background detail blocks (chi-sono) */
.bg-detail{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:32px;
  margin-top:24px;
}
.bg-detail__block h3{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 14px;
}
.bg-detail__block ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.bg-detail__block li{
  font-size:14px;
  line-height:1.5;
  color:var(--paper);
  padding-bottom:10px;
  border-bottom:1px dashed var(--line);
}
.bg-detail__block li:last-child{ border-bottom:none; }

/* Two-column body for new pages */
.body-section{
  max-width:72ch;
  font-size:clamp(16px,1.6vw,18px);
  line-height:1.7;
  color:var(--paper);
}
.body-section p{ margin-top:24px; }
.body-section p:first-child{ margin-top:0; }

/* Modalità (consulenza) cards expanded */
.modalita-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.modalita-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(20,20,22,.4);
}
.modalita-card__cat{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
  padding:4px 10px;
  border:1px solid rgba(212,255,58,.3);
  border-radius:999px;
}
.modalita-card__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:24px;
  letter-spacing:-.01em;
  margin:0 0 14px;
  color:var(--paper);
}
.modalita-card__desc{
  font-size:14px;
  line-height:1.6;
  color:var(--paper-dim);
  margin:0 0 14px;
}
.modalita-card__format{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--paper);
  border-top:1px dashed var(--line);
  padding-top:14px;
  margin:0;
}

/* Step block (metodo) */
.step-block{
  border-left:3px solid var(--accent);
  padding:24px 0 24px 28px;
  margin-bottom:24px;
}
.step-block__num{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--accent);
}
.step-block__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(28px,3.2vw,40px);
  letter-spacing:-.015em;
  margin:8px 0 12px;
  color:var(--paper);
}
.step-block__sub{
  font-style:italic;
  color:var(--paper-dim);
  font-size:16px;
  margin:0 0 16px;
}
.step-block__desc{
  font-size:15px;
  line-height:1.65;
  color:var(--paper);
  margin:0 0 12px;
  max-width:62ch;
}
.step-block__output{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:14px;
}

/* Hero with single big italic word */
.hero-single{
  padding:clamp(80px,12vw,160px) 0 clamp(60px,8vw,120px);
  border-bottom:1px solid var(--line);
}
.hero-single__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(80px,16vw,220px);
  line-height:.9;
  letter-spacing:-.04em;
  margin:24px 0 32px;
  color:var(--paper);
}
.hero-single__title em{
  font-style:italic;
  color:var(--accent);
  font-variation-settings:'opsz' 144, 'SOFT' 100, 'WONK' 1;
}