/* ============================================================
   GEP VARELLA — Less, but better.  (v4 — personal brand)
   Più volto, più prova, più direzione. Card editoriali, non SaaS.
   Un solo font: Inter. Rosso REC = firma rara.
   ============================================================ */

:root {
  --ink:#080808; --ink-2:#0D0D0D; --surface:#141414; --surface-2:#1A1A1A;
  --platinum:#F4F0E8; --text:#B7B3A9; --muted:#79766D;
  --champagne:#D8CCB2; --champagne-2:#CFC2A4; --champagne-3:#B7AB8E;
  --rec:#D7262E; --rec-dark:#A9151C; --rec-soft:rgba(215,38,46,0.12); --rec-glow:rgba(215,38,46,0.22);
  --line:rgba(244,240,232,0.09); --line-2:rgba(244,240,232,0.15);
  --radius:16px; --maxw:1180px; --pad-x:clamp(20px,5vw,56px);
  --sans:"Inter", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--ink); color:var(--text); font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.65; letter-spacing:-0.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

body::before { content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); position:relative; z-index:2; }

.eyebrow { display:inline-flex; align-items:center; gap:11px; font-size:12.5px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin:0 0 22px; }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--rec); }

.accent { font-style:italic; font-weight:500; color:var(--champagne); letter-spacing:-0.02em; }

/* Bottoni */
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:100px; font-size:15px; font-weight:600; letter-spacing:-0.01em; border:1px solid transparent; cursor:pointer; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s, box-shadow .35s, color .35s; will-change:transform; }
.btn:hover { transform:translateY(-2px); }
.btn .arrow { transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.btn:hover .arrow { transform:translateX(4px); }
.btn--rec { background:var(--rec); color:#fff; box-shadow:0 10px 38px -14px var(--rec-glow); }
.btn--rec:hover { background:var(--rec-dark); box-shadow:0 16px 46px -12px var(--rec-glow); }
.btn--ghost { background:transparent; color:var(--platinum); border-color:var(--line-2); }
.btn--soon { opacity:0.62; cursor:default; pointer-events:none; }
.soon-tag { font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--rec); background:var(--rec-soft); border:1px solid var(--rec-glow); border-radius:100px; padding:2px 8px; margin-left:9px; }
.btn--ghost:hover { border-color:var(--champagne-3); background:rgba(244,240,232,0.03); }

/* Logo occhio */
.eye { display:block; }
.eye .lid { fill:none; stroke:var(--champagne); stroke-width:1.5; }
.eye .pupil { fill:var(--rec); transform-box:fill-box; transform-origin:center; animation:recPulse 2.6s ease-in-out infinite; }
@keyframes recPulse { 0%,100%{opacity:1;} 50%{opacity:0.55;} }

/* REC tag riutilizzabile (frame creator) */
.rec-tag { display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--platinum); padding:7px 11px; border-radius:100px; background:rgba(8,8,8,0.5); border:1px solid var(--line-2); backdrop-filter:blur(10px); }
.rec-tag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--rec); animation:recPulse 2.6s ease-in-out infinite; }

/* Navbar */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s, border-color .4s, backdrop-filter .4s; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(8,8,8,0.74); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--line); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:74px; }
.logo { display:inline-flex; align-items:center; gap:11px; }
.logo .eye { width:30px; height:auto; }
.wordmark { font-weight:700; letter-spacing:0.05em; color:var(--platinum); font-size:15px; }
.wordmark .dot { color:var(--rec); }
.nav__links { display:flex; gap:34px; align-items:center; }
.nav__links a { font-size:14px; color:var(--muted); transition:color .3s; }
.nav__links a:hover { color:var(--platinum); }
.nav__links .btn { padding:10px 20px; }
.nav__menu-links { display:none; }
.burger { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.burger span { display:block; width:22px; height:1.5px; background:var(--platinum); margin:5px 0; transition:transform .3s, opacity .3s; }

/* Sezioni base */
section { position:relative; z-index:2; }
.section { padding:clamp(60px,8.5vw,108px) 0; }
.section--alt { background:var(--ink-2); }
.section__head { max-width:780px; margin-bottom:clamp(30px,4vw,50px); }
.section__title { font-size:clamp(30px,4.4vw,50px); line-height:1.1; font-weight:800; letter-spacing:-0.03em; color:var(--platinum); margin:0; }
.section__lead { margin:20px 0 0; font-size:clamp(16px,1.7vw,19px); color:var(--text); max-width:640px; }

/* ============================================================
   HERO — foto cinematica di sfondo, testo sopra
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; padding-top:104px; padding-bottom:72px; overflow:hidden; }

/* livello immagine (sotto al testo) */
.hero__media { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__media img {
  position:absolute; top:0; right:0; height:100%; width:64%;
  object-fit:cover; object-position:54% 28%;
  opacity:0.5;
  filter:grayscale(0.3) contrast(1.05) saturate(0.92);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 34%, #000 78%);
  mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 34%, #000 78%);
}
/* overlay per leggibilità: nero a sinistra + sfumatura alto/basso */
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--ink) 16%, rgba(8,8,8,0.55) 46%, rgba(8,8,8,0) 76%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(8,8,8,0) 22%, rgba(8,8,8,0) 66%, var(--ink) 100%);
}
/* alone rosso tenue */
.hero::before { content:""; position:absolute; top:-20%; left:50%; width:110vw; height:110vh; transform:translateX(-50%); background:radial-gradient(34% 36% at 24% 26%, rgba(215,38,46,0.06), transparent 60%); z-index:1; pointer-events:none; }

.hero__inner { position:relative; z-index:2; max-width:660px; }
.hero__roles { display:inline-flex; align-items:center; gap:11px; font-size:12.5px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin:0 0 24px; }
.hero__roles::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--rec); }
.hero__title { font-size:clamp(38px,5.4vw,72px); line-height:1.06; font-weight:800; letter-spacing:-0.035em; color:var(--platinum); margin:0; }
.hero__title .accent { color:var(--champagne); font-style:normal; }
.hero__sub { margin:clamp(26px,3.6vw,40px) 0 0; max-width:500px; font-size:clamp(16px,1.8vw,19px); line-height:1.55; color:var(--text); }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(30px,4vw,44px); }

/* REC discreto, lontano dal volto */
.hero__rec { position:absolute; left:var(--pad-x); bottom:26px; z-index:2; opacity:0.6; padding:5px 10px; font-size:10px; letter-spacing:0.16em; }

/* placeholder ritratto (usato nell'About) */
.portrait__ph { display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); }
.portrait__ph svg { width:34px; height:34px; opacity:.5; }
.portrait__ph span { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; }

/* ============================================================
   POSIZIONAMENTO
   ============================================================ */
.stance__title { font-size:clamp(28px,4.4vw,54px); line-height:1.12; font-weight:800; letter-spacing:-0.03em; color:var(--platinum); max-width:18ch; margin:0; }
.stance__body { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); margin-top:42px; }
.stance__body p { margin:0; font-size:17px; color:var(--text); }
.stance__body p:first-child { color:var(--platinum); font-size:19px; line-height:1.5; }

/* ============================================================
   PROOF — Progetti, contenuti e sistemi (4 frame)
   ============================================================ */
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.frame { position:relative; aspect-ratio:3/4; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(155deg,#1a1a1a 0%,#101010 60%,#0b0b0b 100%); display:flex; align-items:flex-end; padding:18px; transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s; }
.frame::before { content:""; position:absolute; inset:0; background:radial-gradient(70% 80% at 78% 12%, rgba(244,240,232,0.06), transparent 60%); opacity:.7; transition:opacity .45s; }
.frame::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 80% 18%, var(--rec-soft), transparent 60%); opacity:0; transition:opacity .45s; }
.frame:hover { transform:translateY(-4px); border-color:var(--line-2); }
.frame:hover::after { opacity:1; }
.frame img, .frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame__num { position:absolute; top:14px; left:16px; z-index:2; font-size:11px; letter-spacing:0.14em; color:var(--champagne-3); }
.frame__play { display:none; }
.frame__label { position:relative; z-index:2; }
.frame__cat { font-size:15px; font-weight:600; color:var(--platinum); letter-spacing:-0.02em; }
.frame__meta { display:block; font-size:11px; letter-spacing:0.05em; color:var(--muted); margin-top:4px; }

/* ============================================================
   COSA FACCIO — aree editoriali (leggere)
   ============================================================ */
.areas { display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,5vw,56px); }
.area { padding:22px 0 20px; border-top:1px solid var(--line); }
.area__num { font-size:12px; font-weight:600; letter-spacing:0.14em; color:var(--champagne-3); }
.area h3 { margin:11px 0 5px; font-size:19px; font-weight:700; letter-spacing:-0.02em; color:var(--platinum); }
.area p { margin:0 0 12px; font-size:15px; line-height:1.45; color:var(--text); }
.area__keys { display:flex; flex-wrap:wrap; gap:7px; }
.area__keys span { font-size:12px; color:var(--muted); padding:5px 11px; border:1px solid var(--line); border-radius:100px; }

/* ============================================================
   METODO — passi compatti
   ============================================================ */
.steps { display:grid; gap:0; margin-top:4px; }
.step { display:grid; grid-template-columns:60px 1fr; gap:clamp(16px,3vw,40px); padding:22px 0; border-top:1px solid var(--line); align-items:baseline; }
.step:last-child { border-bottom:1px solid var(--line); }
.step__num { font-size:clamp(22px,2.8vw,32px); font-weight:300; color:var(--champagne-3); line-height:1; letter-spacing:-0.02em; }
.step__body { display:grid; grid-template-columns:180px 1fr; gap:clamp(12px,3vw,36px); align-items:baseline; }
.step__name { font-size:clamp(18px,2vw,22px); font-weight:700; letter-spacing:-0.02em; color:var(--platinum); margin:0; }
.step__desc { margin:0; font-size:15px; color:var(--text); }

/* ============================================================
   CORSI E STRUMENTI (Moduso) — compatto
   ============================================================ */
.tools__top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(26px,3.5vw,40px); }
.tools__copy { max-width:540px; margin:14px 0 0; font-size:16px; color:var(--text); }
.tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tool { padding:22px 20px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface); transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, background .4s; }
.tool:hover { transform:translateY(-3px); border-color:var(--line-2); background:var(--surface-2); }
.tool__name { font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--platinum); }
.tool__desc { margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--text); }
.tool__tag { display:inline-block; margin-top:14px; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--champagne-3); }

/* ============================================================
   APPROCCIO
   ============================================================ */
.problem { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,6vw,72px); align-items:start; }
.problem__title { font-size:clamp(28px,4vw,46px); line-height:1.14; font-weight:800; letter-spacing:-0.03em; color:var(--platinum); margin:0; max-width:16ch; }
.problem__copy { margin:24px 0 0; font-size:17px; color:var(--text); max-width:46ch; }
.needs { list-style:none; margin:0; padding:0; columns:2; column-gap:28px; }
.needs li { display:flex; align-items:baseline; gap:12px; padding:11px 0; font-size:16px; color:var(--platinum); break-inside:avoid; }
.needs li::before { content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:var(--champagne-3); transform:translateY(-2px); }

/* ============================================================
   PER CHI LAVORO
   ============================================================ */
.audience { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.audience__line { font-size:clamp(24px,3.2vw,38px); line-height:1.2; font-weight:800; letter-spacing:-0.03em; color:var(--platinum); margin:0; }
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip { padding:12px 19px; border-radius:100px; border:1px solid var(--line); background:var(--surface); font-size:15px; color:var(--text); transition:border-color .35s, color .35s, transform .35s; }
.chip:hover { border-color:var(--rec); color:var(--platinum); transform:translateY(-2px); }

/* ============================================================
   PERCORSO — archivio (mosaic) + contatori
   ============================================================ */
.archive-grid {
  display:grid; gap:12px;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas:"main a b" "main c d";
  height:clamp(330px,42vw,470px);
}
.a-main{grid-area:main;} .a-a{grid-area:a;} .a-b{grid-area:b;} .a-c{grid-area:c;} .a-d{grid-area:d;}
.archive-item { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#0c0c0c; }
.archive-item img { width:100%; height:100%; object-fit:cover; filter:grayscale(0.35) contrast(1.04); transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s; }
.archive-item::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.04) 46%); pointer-events:none; }
.archive-item:hover img { transform:scale(1.045); filter:grayscale(0.1) contrast(1.06); }
.archive-item__label { position:absolute; left:13px; bottom:11px; right:11px; z-index:2; display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum); }
.archive-item__label::before { content:""; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:var(--rec); }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:clamp(40px,5vw,60px); padding-top:clamp(32px,4vw,46px); border-top:1px solid var(--line); }
.stat__num { font-size:clamp(32px,4.6vw,52px); font-weight:800; letter-spacing:-0.03em; color:var(--champagne); line-height:1; }
.stat__num .plus { color:var(--rec); }
.stat__label { margin-top:10px; font-size:13.5px; color:var(--muted); }

/* ============================================================
   OUTRO — About + CTA finale (compatto, centrato)
   ============================================================ */
.outro { padding:clamp(68px,10vw,128px) 0; text-align:center; position:relative; overflow:hidden; }
.outro::before { content:""; position:absolute; left:50%; top:46%; width:70vw; height:54vh; transform:translate(-50%,-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(215,38,46,0.10), transparent 64%); pointer-events:none; }
.outro__inner { position:relative; z-index:2; }
.outro__avatar { width:82px; height:82px; border-radius:50%; object-fit:cover; object-position:54% 22%; margin:0 auto 22px; border:1px solid var(--line-2); }
.outro__bio { max-width:54ch; margin:0 auto; font-size:clamp(16px,1.7vw,18px); line-height:1.55; color:var(--text); }
.outro__bio p { margin:0 0 14px; }
.outro__bio p:last-child { margin-bottom:0; }
.outro__bio p:first-child { color:var(--platinum); font-weight:600; }
.outro__rule { width:40px; height:1px; background:var(--line-2); margin:clamp(34px,5vw,52px) auto; }

/* ============================================================
   CTA FINALE
   ============================================================ */
.final { padding:clamp(90px,13vw,168px) 0; text-align:center; position:relative; overflow:hidden; }
.final::before { content:""; position:absolute; left:50%; top:42%; width:70vw; height:54vh; transform:translate(-50%,-50%); background:radial-gradient(50% 50% at 50% 50%, rgba(215,38,46,0.10), transparent 64%); pointer-events:none; }
.final__title { font-size:clamp(32px,5.2vw,66px); line-height:1.08; font-weight:800; letter-spacing:-0.04em; color:var(--platinum); margin:0 auto; max-width:18ch; }
.final__sub { margin:24px auto 0; max-width:52ch; font-size:clamp(16px,1.8vw,19px); color:var(--text); }
.final__cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px; }
.final__sign { margin:30px 0 0; font-size:12.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.final__sign .accent { text-transform:none; letter-spacing:-0.01em; }

/* Footer */
.footer { border-top:1px solid var(--line); padding:44px 0; }
.footer__inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.footer__brand { display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:0.05em; color:var(--platinum); }
.footer__brand .eye { width:26px; height:auto; }
.footer__brand .dot { color:var(--rec); }
.footer small { color:var(--muted); font-size:13px; }
.footer__links { display:flex; gap:22px; }
.footer__links a { font-size:14px; color:var(--muted); transition:color .3s; }
.footer__links a:hover { color:var(--platinum); }

/* ============================================================
   PROGETTI — card concrete (media + titolo + desc + Guarda)
   ============================================================ */
.pcards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pcard { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s; }
.pcard:hover { transform:translateY(-4px); border-color:var(--line-2); }
.pcard__media { position:relative; aspect-ratio:16/11; background:linear-gradient(155deg,#1b1b1b,#0e0e0e 60%,#0b0b0b); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pcard__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pcard__media .ico { width:30px; height:30px; opacity:.5; }
.pcard__body { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.pcard__cat { display:block; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--champagne-3); margin:0 0 8px; }
.pcard h3 { margin:0 0 6px; font-size:17px; font-weight:700; letter-spacing:-0.02em; color:var(--platinum); }
.pcard p { margin:0 0 16px; font-size:13.5px; line-height:1.5; color:var(--text); flex:1; }
.guarda { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--platinum); transition:color .3s; }
.guarda::after { content:"\2192"; transition:transform .3s; }
.guarda:hover { color:var(--rec); }
.guarda:hover::after { transform:translateX(3px); }
.guarda--cta { margin-top:auto; background:none; border:none; padding:0; font-family:inherit; cursor:pointer; }

/* Carosello (no librerie) + blocchi portfolio */
.lavori-flow { display:flex; flex-direction:column; gap:clamp(28px,4vw,52px); }

.workblock { display:grid; grid-template-columns:1.25fr 0.8fr; gap:clamp(22px,3.5vw,44px); align-items:center; padding:clamp(16px,2.2vw,24px); border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.workblock--rev { grid-template-columns:0.8fr 1.25fr; }
.workblock--rev .carousel { order:2; }
.workblock--rev .workblock__text { order:1; }
.workblock__text h3 { margin:9px 0 12px; font-size:clamp(21px,2.5vw,29px); font-weight:800; letter-spacing:-0.025em; color:var(--platinum); }
.workblock__text p { margin:0 0 20px; font-size:15px; line-height:1.55; color:var(--text); max-width:44ch; }

.worksub__title { margin:0 0 6px; font-size:clamp(21px,2.5vw,29px); font-weight:800; letter-spacing:-0.025em; color:var(--platinum); }
.worksub__lead { margin:0 0 clamp(20px,3vw,28px); font-size:15px; line-height:1.55; color:var(--text); max-width:62ch; }

.carousel__viewport { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0c0c0c; }
.carousel__track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.carousel__track::-webkit-scrollbar { display:none; }
.cslide { position:relative; flex:0 0 100%; scroll-snap-align:start; aspect-ratio:16/10; background:#0c0c0c; }
.cslide img { width:100%; height:100%; object-fit:cover; display:block; }
.cslide figcaption { position:absolute; right:10px; top:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum); background:rgba(8,8,8,0.5); border:1px solid var(--line-2); border-radius:100px; padding:4px 9px; backdrop-filter:blur(8px); }
.cslide figcaption::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--rec); flex:0 0 auto; }
.carousel__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); background:rgba(8,8,8,0.55); color:var(--platinum); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; cursor:pointer; opacity:0; transition:opacity .3s, border-color .3s; }
.carousel__viewport:hover .carousel__arrow { opacity:1; }
.carousel__arrow:hover { border-color:var(--rec); }
.carousel__arrow--prev { left:10px; }
.carousel__arrow--next { right:10px; }
.carousel__caption { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:13px 2px 0; }
.carousel__caption-label { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:0.01em; color:var(--platinum); }
.carousel__caption-label::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--rec); }
.carousel__caption-cat { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--champagne-3); }
.carousel__dots { display:flex; justify-content:center; gap:6px; padding:12px 0 2px; }
.carousel__dots button { width:6px; height:6px; border-radius:50%; border:none; background:var(--line-2); cursor:pointer; padding:0; transition:background .3s, width .3s; }
.carousel__dots button.is-active { background:var(--champagne); width:16px; border-radius:100px; }

/* Blocco "Video e reel virali": carosello con screenshot verticale + dati a lato */
.workblock--viral { display:block; }
.viral-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(18px,2.5vw,26px); }
.viral-head__text { max-width:60ch; }
.viral-head__text h3 { margin:9px 0 10px; font-size:clamp(21px,2.5vw,29px); font-weight:800; letter-spacing:-0.025em; color:var(--platinum); }
.viral-head__text p { margin:0; font-size:15px; line-height:1.55; color:var(--text); }
.viral-head .guarda--cta { margin:0; flex:0 0 auto; }
.carousel__viewport--viral { border:none; border-radius:0; background:none; }
.vslide { flex:0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3.5vw,46px); align-items:center; padding:6px clamp(2px,1vw,8px) 10px; }
.vslide__shot { position:relative; width:clamp(240px,26vw,330px); aspect-ratio:4/5; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#0c0c0c; flex:0 0 auto; }
.vslide__shot img { width:100%; height:100%; object-fit:cover; display:block; }
.vslide__plat { position:absolute; top:11px; right:11px; z-index:2; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--platinum); background:rgba(8,8,8,0.6); border:1px solid var(--line-2); border-radius:100px; padding:5px 10px; backdrop-filter:blur(8px); }
.vslide__info { min-width:0; }
.vslide__note { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--champagne-3); display:inline-flex; align-items:center; gap:7px; }
.vslide__note::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--rec); }
.vslide__title { margin:11px 0 14px; font-size:clamp(19px,2.2vw,25px); font-weight:800; letter-spacing:-0.02em; color:var(--platinum); }
.vslide__data { font-size:clamp(24px,3.2vw,36px); font-weight:800; letter-spacing:-0.02em; color:var(--champagne); line-height:1; }
.vslide__data .like { color:var(--rec); }
.vslide__desc { margin:14px 0 18px; font-size:14.5px; line-height:1.55; color:var(--text); max-width:44ch; }

/* ============================================================
   VIDEO VIRALI — reel verticali (ibrido: anteprima + link discreto)
   ============================================================ */
.virals { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.viral { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s; }
.viral:hover { transform:translateY(-4px); border-color:var(--line-2); }
.viral__media { position:relative; aspect-ratio:4/5; overflow:hidden; }
.viral__media img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.viral:hover .viral__media img { transform:scale(1.04); }
.viral__plat { position:absolute; top:11px; right:11px; z-index:2; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--platinum); background:rgba(8,8,8,0.6); border:1px solid var(--line-2); border-radius:100px; padding:5px 10px; backdrop-filter:blur(8px); }
.viral__info { display:flex; flex-direction:column; flex:1; padding:15px 15px 14px; }
.viral__note { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--champagne-3); display:inline-flex; align-items:center; gap:7px; }
.viral__note::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--rec); }
.viral__info h3 { margin:9px 0 5px; font-size:15px; font-weight:700; letter-spacing:-0.02em; color:var(--platinum); }
.viral__desc { margin:0 0 13px; font-size:12.5px; line-height:1.45; color:var(--text); }
.viral__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
.viral__data { font-size:12.5px; font-weight:600; color:var(--champagne); letter-spacing:0.01em; }
.viral__data .like { color:var(--rec); }
.viral__link { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--muted); transition:color .3s; }
.viral__link svg { width:11px; height:11px; }
.viral__link:hover { color:var(--rec); }

.virals__note { margin:18px 0 0; font-size:13px; color:var(--muted); }

/* mini-CTA interna */
.mini-cta { margin-top:clamp(30px,4vw,46px); padding:clamp(24px,3.2vw,34px) clamp(26px,3.5vw,38px); border:1px solid var(--line); border-radius:16px; background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.mini-cta h3 { margin:0; font-size:clamp(18px,2.1vw,23px); font-weight:700; letter-spacing:-0.02em; color:var(--platinum); max-width:34ch; }
.mini-cta .btn { flex:0 0 auto; }

/* targhetta chiara per i loghi reali (restano leggibili su sfondo scuro) */
.logobox { display:inline-flex; align-items:center; justify-content:center; background:#F4F0E8; border-radius:10px; padding:9px 13px; }
.tools__logo { margin:0 0 16px; }
.tools__logo img { height:22px; width:auto; display:block; }
.collab__logobox { flex:0 0 auto; padding:13px 18px; }
.collab__logobox img { height:30px; width:auto; display:block; }

/* ============================================================
   VIDEO VIRALI — fine
   ============================================================ */

/* ============================================================
   COME LAVORO — 4 step visivi con icone
   ============================================================ */
.flow-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.step-card { position:relative; padding:26px 22px 24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s, background .45s; }
.step-card::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 0% 0%, var(--rec-soft), transparent 42%); opacity:0; transition:opacity .45s; pointer-events:none; }
.step-card:hover { transform:translateY(-5px); border-color:var(--line-2); background:var(--surface-2); }
.step-card:hover::after { opacity:1; }
.step-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ico { stroke:var(--champagne); }
.step-card .ico { width:34px; height:34px; }
.ico [data-draw] { stroke-dasharray:1; stroke-dashoffset:1; }
.step-card.in .ico [data-draw] { animation:draw 1s ease forwards; }
.step-card:nth-child(2).in .ico [data-draw] { animation-delay:.12s; }
.step-card:nth-child(3).in .ico [data-draw] { animation-delay:.24s; }
.step-card:nth-child(4).in .ico [data-draw] { animation-delay:.36s; }
@keyframes draw { to { stroke-dashoffset:0; } }
.ico .rec { fill:var(--rec); stroke:none; opacity:0; }
.step-card.in .ico .rec { animation:recOn .5s ease forwards; animation-delay:.9s; }
@keyframes recOn { to { opacity:1; } }
.step-card__num { font-size:12px; font-weight:600; letter-spacing:0.14em; color:var(--champagne-3); }
.step-card h3 { margin:0 0 7px; font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--platinum); }
.step-card p { margin:0; font-size:14px; line-height:1.5; color:var(--text); }

.macro { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(30px,4vw,46px); }
.macro span { font-size:12.5px; color:var(--muted); padding:8px 15px; border:1px solid var(--line); border-radius:100px; transition:border-color .3s, color .3s; }
.macro span:hover { border-color:var(--champagne-3); color:var(--text); }

/* ============================================================
   Collaborazioni
   ============================================================ */
.collab { display:flex; align-items:center; gap:clamp(20px,4vw,40px); flex-wrap:wrap; padding:clamp(24px,3.5vw,34px); border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.collab__text { flex:1; min-width:240px; }
.collab__text .eyebrow { margin-bottom:10px; }
.collab__text p { margin:0; font-size:15.5px; color:var(--text); max-width:60ch; }

/* Motion */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.07s;} .reveal[data-d="2"]{transition-delay:.14s;} .reveal[data-d="3"]{transition-delay:.21s;} .reveal[data-d="4"]{transition-delay:.28s;}

/* Responsive */
@media (max-width:920px) {
  .hero__media img { width:82%; }
  .workblock, .workblock--rev { grid-template-columns:1fr; gap:20px; }
  .workblock--rev .carousel { order:0; }
  .workblock--rev .workblock__text { order:0; }
  .pcards { grid-template-columns:repeat(2,1fr); }
  .virals { grid-template-columns:repeat(4,1fr); }
  .flow-steps { grid-template-columns:repeat(2,1fr); }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
  .areas { grid-template-columns:repeat(2,1fr); gap:0 32px; }
  .tools-grid { grid-template-columns:repeat(2,1fr); }
  .step { grid-template-columns:44px 1fr; }
  .step__body { grid-template-columns:1fr; gap:6px; }
  .archive-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; grid-template-areas:"main main" "a b" "c d"; height:auto; }
  .archive-item { aspect-ratio:1/1; }
  .a-main { aspect-ratio:16/10; }
  .stats { grid-template-columns:repeat(2,1fr); gap:18px 24px; }
}
@media (max-width:680px) {
  body { font-size:16px; }
  .nav__links { display:none; }
  .nav__menu-links { display:flex; position:fixed; inset:74px 0 auto 0; flex-direction:column; gap:0; background:rgba(8,8,8,0.95); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); padding:12px var(--pad-x) 26px; transform:translateY(-130%); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
  .nav__menu-links.open { transform:translateY(0); }
  .nav__menu-links a { padding:16px 0; border-bottom:1px solid var(--line); color:var(--text); }
  .nav .btn { display:none; }
  .burger { display:block; }
  .areas { grid-template-columns:repeat(2,1fr); gap:0 24px; }
  .proof-grid { grid-template-columns:repeat(2,1fr); }
  .tools-grid { grid-template-columns:repeat(2,1fr); }
  .pcards { grid-template-columns:1fr; }
  .carousel__arrow { display:none; }
  .virals { grid-template-columns:repeat(2,1fr); }
  .flow-steps { grid-template-columns:1fr; }
  .collab { flex-direction:column; align-items:flex-start; }
  .hero__media img { width:100%; opacity:0.4; object-position:52% 18%;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, #000 58%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, #000 58%); }
  .hero__media::after { background:linear-gradient(to bottom, rgba(8,8,8,0.28) 0%, rgba(8,8,8,0.82) 56%, var(--ink) 100%); }
  .hero__rec { display:none; }
  .archive-item__label { font-size:9.5px; letter-spacing:0.05em; gap:6px; left:10px; right:8px; bottom:9px; flex-wrap:wrap; }
  .hero { padding-top:96px; padding-bottom:60px; }
  .hero__roles { margin-bottom:20px; white-space:nowrap; font-size:9.5px; letter-spacing:0.05em; gap:8px; }
  .hero__title { font-size:clamp(34px,10vw,46px); line-height:1.08; }
  .hero__sub { margin-top:24px; }
  .hero__cta { margin-top:32px; gap:12px; }
  .hero__cta .btn, .final__cta .btn { flex:1 1 100%; justify-content:center; }
  .viral-head { flex-direction:column; align-items:flex-start; }
  .vslide { grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px; }
  .vslide__shot { width:min(270px,74vw); }
  .vslide__info { text-align:center; }
  .vslide__desc { margin-left:auto; margin-right:auto; }
  .vslide .viral__link { justify-content:center; }
}

:focus-visible { outline:2px solid var(--rec); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .reveal { opacity:1; transform:none; } .eye .pupil, .rec-tag::before { animation:none !important; } }

/* ============================================================
   Card progetto (Brand identity) — slide ricche nel carosello
   ============================================================ */
.cslide--proj { flex:0 0 100%; scroll-snap-align:start; aspect-ratio:auto; height:auto; background:var(--surface); display:flex; flex-direction:column; text-align:left; }
.pj__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(155deg,#1b1b1b,#0e0e0e 60%,#0b0b0b); }
.pj__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pj__rec { position:absolute; top:12px; right:12px; z-index:2; }
.pj__body { padding:18px 18px 20px; display:flex; flex-direction:column; }
.pj__cat { font-size:10.5px; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; color:var(--rec); margin:0 0 9px; }
.pj__cat i { font-style:normal; margin:0 6px; opacity:.7; }
.pj__titlerow { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pj__title { margin:0; font-size:clamp(17px,1.9vw,21px); font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; color:var(--platinum); line-height:1.14; }
.pj__arrow { flex:0 0 auto; margin-top:2px; color:var(--champagne-3); transition:transform .35s cubic-bezier(.2,.7,.2,1), color .35s; }
.pj__arrow svg { width:18px; height:18px; display:block; }
.cslide--proj:hover .pj__arrow { transform:translate(3px,-3px); color:var(--champagne); }
.pj__desc { margin:11px 0 0; font-size:13.5px; line-height:1.55; color:var(--text); }
.pj__tags { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:16px; }
.pj__tag { font-size:10px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:var(--text); border:1px solid var(--line-2); border-radius:100px; padding:6px 12px; white-space:nowrap; }
.pj__dot { width:4px; height:4px; border-radius:50%; background:var(--champagne-3); flex:0 0 auto; }


/* ===== Brand slide (galleria multi-immagine, scala uguale ai reel) ===== */
.bslide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3.5vw,46px);align-items:center;padding:6px clamp(2px,1vw,8px) 10px;}
.bslide__gallery{position:relative;width:clamp(240px,27vw,340px);aspect-ratio:4/5;display:grid;gap:5px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0c0c0c;flex:0 0 auto;}
.bslide__gallery img{width:100%;height:100%;object-fit:cover;display:block;}
.bslide__gallery.g-2{grid-template-columns:1fr 1fr;}
.bslide__gallery.g-3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.bslide__gallery.g-3 img:first-child{grid-column:1/3;}
.bslide__gallery.g-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.bslide__rec{position:absolute;top:10px;right:10px;z-index:2;padding:5px 9px;font-size:9.5px;letter-spacing:0.14em;}
.bslide__info{min-width:0;}
.bslide__note{font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--rec);display:inline-flex;align-items:center;font-weight:600;}
.bslide__note i{font-style:normal;margin:0 6px;opacity:.7;}
.bslide__title{margin:10px 0 12px;font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-0.02em;color:var(--platinum);}
.bslide__desc{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--text);max-width:46ch;}
.bslide__tags{display:flex;flex-wrap:wrap;align-items:center;gap:9px;}
.bslide__tag{font-size:10px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;color:var(--text);border:1px solid var(--line-2);border-radius:100px;padding:6px 12px;white-space:nowrap;}
.bslide__dot{width:4px;height:4px;border-radius:50%;background:var(--champagne-3);flex:0 0 auto;}
@media (max-width:920px){.bslide{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;}.bslide__gallery{width:min(320px,78vw);}.bslide__info{text-align:center;}.bslide__desc{margin-left:auto;margin-right:auto;}.bslide__tags{justify-content:center;}}

/* ===== Brand case-study (immagini complete 3:2) ===== */
.bcase{aspect-ratio:3/2;background:#0a0a0a;}
.bcase img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== Fix overflow orizzontale mobile (carosello dentro grid .workblock) ===== */
.workblock > * { min-width: 0; }
.carousel { min-width: 0; max-width: 100%; }
.carousel__viewport, .carousel__track { max-width: 100%; }