/* =====================================================================
   RECAP.AGENCY - TEMA "DARK TECH"
   Caricato DOPO style.css. Per tornare al vecchio stile basta rimuovere
   la riga <link rel="stylesheet" href="css/theme.css"> dalle pagine.

   Design read: agenzia social per piccole e medie attivita' locali,
   linguaggio dark tech controllato, un solo accento viola, movimento medio.
   Dials: VARIANCE 7 / MOTION 5 / DENSITY 4.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root{
  --bg:#0A0612;
  --surface:#130B22;
  --surface-2:#1A1030;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#EEE9FA;
  --muted:#A99FC4;
  --acc:#B9A2FF;          /* accento (testo e dettagli) */
  --acc-strong:#7A4DF0;   /* accento pieno (sfondi) */
  --acc-glow:rgba(122,77,240,.35);

  /* remap dei vecchi token: tutto il sito segue la nuova palette */
  --cream:var(--bg);
  --ink:var(--text);
  --gold:var(--acc);
  --gold-light:#D6C9FF;
  --purple-900:var(--bg);
  --purple-800:var(--surface);
  --purple-700:var(--surface-2);
  --purple-600:var(--acc-strong);
  --purple-glow-a:#6D3FE0;
  --purple-glow-b:#4B5BFF;

  --font-display:'Brans Bold', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius:18px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

html{color-scheme:dark;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--acc-strong); color:#fff;}

/* ---------- TIPOGRAFIA ---------- */
.hero-title, .section-title, .card h3, .progetto-info h3, .step h3,
.modal-content h3, .footer-col h4, .cta-inner h2, .game-promo-text h2,
.legal-content h2, .platform-chip span{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.01em;
}
.eyebrow, .section-eyebrow, .card-tag, .progetto-tag, .contatti-list li span{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--acc);
}
.section-eyebrow.light{color:var(--acc);}
.section-title{color:var(--text); font-size:clamp(30px,4.4vw,52px); line-height:1.06; margin-bottom:48px;}
.section-title.light{color:var(--text);}

/* ---------- BOTTONI ---------- */
.btn{
  font-weight:600;
  letter-spacing:0;
  border-radius:12px;
  padding:14px 26px;
  transition:transform .16s var(--ease-out), background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-gold, .btn-purple{
  background:var(--acc);
  color:#130B22;
  border-color:var(--acc);
}
.btn-outline{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line-strong);
}
.btn:active{transform:scale(.97);}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover, .btn-purple:hover{
    background:#CDBEFF; border-color:#CDBEFF;
    transform:translateY(-2px);
    box-shadow:0 10px 30px var(--acc-glow);
  }
  .btn-outline:hover{
    background:rgba(255,255,255,.06); border-color:var(--acc); color:#fff;
    transform:translateY(-2px);
  }
}

/* ---------- CURSORE BLOB: rimosso (peso e accessibilita') ---------- */
.blob-cursor{display:none !important;}

/* ---------- HEADER ---------- */
.site-header{padding:16px 0;}
.site-header.scrolled{
  background:rgba(10,6,18,.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  padding:10px 0;
}
.main-nav a{
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
  transition:color .2s ease;
}
.main-nav a::after{background:var(--acc);}
@media (hover:hover) and (pointer:fine){ .main-nav a:hover{color:#fff;} }
.header-cta{padding:10px 20px; font-size:14px; border-radius:10px;}
.burger span{background:var(--text);}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(900px 520px at 85% 8%, rgba(122,77,240,.22), transparent 65%),
    radial-gradient(700px 480px at 0% 100%, rgba(75,91,255,.14), transparent 65%),
    var(--bg);
  padding-top:130px;
}
.glow{filter:blur(110px); opacity:.35;}
.glow-1{background:#6D3FE0; animation:none;}
.glow-2{background:#4B5BFF; animation:none;}
.glow-3{display:none;}
.eyebrow{
  display:inline-flex; align-items:center;
  padding:6px 12px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  margin-bottom:22px;
}
.hero-title{
  font-size:clamp(40px,7.6vw,96px);
  line-height:1.02;
  letter-spacing:.01em;
  color:var(--text);
  margin-bottom:24px;
}
.hero-title-line{white-space:normal;}
.hero-title-accent{
  background:linear-gradient(95deg,#fff 0%, var(--acc) 60%, #8F7CFF 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.hero-sub{color:var(--muted); font-size:18px; line-height:1.6; max-width:520px;}
.hero-actions{gap:12px;}

/* chip fluttuanti: fermi, solo decorazione discreta */
.hero-chip{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--acc);
  animation:none !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* marquee: una sola, sobria, senza rotazione */
.marquee-band{
  transform:none;
  margin-top:64px;
  background:transparent;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
.marquee-track{animation-duration:30s;}
.marquee-track span{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:clamp(14px,1.6vw,18px);
  letter-spacing:.14em;
  color:var(--muted);
  padding:18px 36px;
}
.marquee-track span:nth-child(even){color:var(--acc);}
.marquee-icon{color:var(--acc);}

/* ---------- PIATTAFORME ---------- */
.clients{background:var(--bg); padding:80px 0; border-bottom:1px solid var(--line);}
.clients-label{color:var(--muted); font-size:15px;}
.platform-chip{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 26px;
  color:var(--text);
}
.platform-chip span{font-size:18px; color:var(--text);}
@media (hover:hover) and (pointer:fine){
  .platform-chip:hover{
    background:var(--surface-2); border-color:var(--line-strong);
    transform:translateY(-3px); box-shadow:none;
  }
  .platform-chip:hover span{color:#fff;}
}

/* ---------- SERVIZI: bento asimmetrico ---------- */
.servizi{background:var(--bg); padding:110px 0;}
.servizi-grid{
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
.servizi-grid .card:nth-child(1){grid-column:span 4;}
.servizi-grid .card:nth-child(2){grid-column:span 2;}
.servizi-grid .card:nth-child(3){grid-column:span 2;}
.servizi-grid .card:nth-child(4){grid-column:span 4;}
.servizi-grid .card:nth-child(5){grid-column:span 3;}
.servizi-grid .card:nth-child(6){grid-column:span 3;}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  overflow:hidden;
}
.card h3{color:var(--text); font-size:22px;}
.card p{color:var(--muted); font-size:15px; line-height:1.65;}
.card-tag{
  background:rgba(185,162,255,.12);
  color:var(--acc);
  border:1px solid rgba(185,162,255,.25);
  border-radius:6px;
  padding:4px 10px;
}
.card-icon{
  color:var(--acc);
  background:rgba(185,162,255,.1);
  border:1px solid rgba(185,162,255,.2);
}
/* varieta' visiva delle celle */
.card-featured{
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(122,77,240,.45), transparent 70%),
    var(--surface-2);
  border:1px solid rgba(185,162,255,.28);
}
.card-featured h3{color:#fff; font-size:clamp(26px,3vw,34px);}
.card-featured p{color:rgba(238,233,250,.78); max-width:46ch;}
.card-featured .card-tag{background:var(--acc); color:#130B22; border-color:var(--acc);}
.servizi-grid .card:nth-child(4){
  background:
    radial-gradient(460px 220px at 0% 100%, rgba(75,91,255,.25), transparent 70%),
    var(--surface);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-4px);
    border-color:var(--line-strong);
    background-color:var(--surface-2);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
  }
}

/* ---------- CASE STUDY ---------- */
.case-study{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.case-study-media{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02);
}
.case-study-text{color:var(--muted); line-height:1.7;}
.case-study-stat{color:var(--text); font-weight:500;}
.case-study-stat .icon{
  background:rgba(185,162,255,.1);
  border:1px solid rgba(185,162,255,.22);
  color:var(--acc);
  border-radius:10px;
}

/* ---------- VIDEO / TESTIMONIAL (se presenti) ---------- */
.video-showcase, .testimonials{background:var(--bg);}
.video-showcase-text{color:var(--muted);}
.phone-mock{background:#05030A; border:6px solid var(--surface-2);}
.testimonial-card{background:var(--surface); border:1px solid var(--line);}
.testimonial-card p{color:var(--muted);}
.testimonial-author span{color:var(--text);}
.testimonial-author small, .testimonials-note{color:var(--muted);}

/* ---------- NUMERI ---------- */
.numeri{background:var(--bg); border-bottom:1px solid var(--line); padding:84px 0;}
.numeri-grid{gap:0;}
.numero{padding:10px 20px; border-left:1px solid var(--line);}
.numero:first-child{border-left:none;}
.numero .num, .numero .suffix{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text);
}
.numero .suffix{color:var(--acc);}
.numero p{color:var(--muted); font-weight:500; font-size:14px;}
.numero-icon{color:var(--acc);}

/* ---------- PORTFOLIO ---------- */
.progetti{background:var(--bg); padding:110px 0;}
.filter-btn{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  letter-spacing:0;
  color:var(--muted);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 18px;
}
.filter-btn.active{background:var(--acc); border-color:var(--acc); color:#130B22; font-weight:600;}
@media (hover:hover) and (pointer:fine){
  .filter-btn:hover{border-color:var(--acc); color:#fff;}
  .filter-btn.active:hover{color:#130B22;}
}
.progetti-empty{color:var(--muted);}
.progetti-grid{gap:16px;}
.progetto{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .3s var(--ease-out), border-color .25s ease, box-shadow .3s ease;
}
.progetto-media{height:250px; background:var(--surface-2);}
.progetto-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(10,6,18,.55));
  pointer-events:none;
}
.progetto-info{background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; padding:20px 22px 22px;}
.progetto-tag{color:var(--acc); margin-bottom:8px;}
.progetto-info h3{color:var(--text); font-size:19px;}
.progetto-info p{color:var(--muted);}
@media (hover:hover) and (pointer:fine){
  .progetto:hover{
    transform:translateY(-4px);
    border-color:rgba(185,162,255,.4);
    box-shadow:0 24px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(185,162,255,.12);
  }
  .progetto:hover .progetto-media img{transform:scale(1.05);}
}

/* ---------- PROCESSO ---------- */
.processo{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.step{border-bottom:1px solid var(--line);}
.step-n{font-family:var(--font-mono); font-weight:500; font-size:15px; color:var(--acc); min-width:70px; padding-top:6px;}
.step h3{color:var(--text);}
.step p{color:var(--muted);}

/* ---------- FAQ ---------- */
.faq{background:var(--bg);}
.faq-item{background:var(--surface); border:1px solid var(--line); border-radius:14px;}
.faq-item summary{color:var(--text); font-weight:600;}
.faq-item summary::after{color:var(--acc); font-family:var(--font-body);}
.faq-item p{color:var(--muted);}

/* ---------- GAME PROMO ---------- */
.game-promo{background:var(--bg);}
.game-promo-inner{
  background:
    radial-gradient(600px 260px at 90% 0%, rgba(122,77,240,.4), transparent 70%),
    var(--surface-2);
  border:1px solid rgba(185,162,255,.25);
  border-radius:24px;
}
.game-promo-inner::before{display:none;}
.game-promo-text h2{color:#fff;}
.game-promo-text p.game-promo-sub{color:var(--muted);}

/* ---------- CTA BANNER: unico blocco pieno viola ---------- */
.cta-banner{
  background:
    radial-gradient(800px 320px at 100% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg,#6B3FE6 0%, #4A2BB0 100%);
}
.cta-inner h2{color:#fff;}
.cta-icon{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  animation:none;
  border-radius:16px;
}
.cta-banner .btn-purple{background:#fff; border-color:#fff; color:#1A0F36;}
@media (hover:hover) and (pointer:fine){
  .cta-banner .btn-purple:hover{background:#F1EBFF; border-color:#F1EBFF; box-shadow:0 12px 34px rgba(0,0,0,.3);}
}

/* ---------- CONTATTI ---------- */
.contatti{background:var(--bg);}
.contatti-sub{color:var(--muted);}
.contatti-list li{border-bottom:1px solid var(--line); color:var(--text); font-weight:500;}
.contatti-list li span{color:var(--acc);}
.social-links a{
  border:1px solid var(--line-strong); border-radius:10px; color:var(--text);
  font-weight:500; background:var(--surface);
}
@media (hover:hover) and (pointer:fine){
  .social-links a:hover{background:var(--acc); border-color:var(--acc); color:#130B22;}
}
.contatti-form{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.field label{color:var(--text); font-weight:500; font-size:13px;}
.field input, .field textarea{
  background:var(--bg);
  border:1px solid var(--line-strong);
  color:var(--text);
  border-radius:10px;
}
.field input::placeholder, .field textarea::placeholder{color:#7F739C;}
.field input:focus, .field textarea:focus{border-color:var(--acc); box-shadow:0 0 0 3px rgba(185,162,255,.18);}
.form-note{color:var(--acc);}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--bg); border-top:1px solid var(--line);}
.footer-brand p, .footer-col a{color:var(--muted);}
.footer-col h4{color:var(--text); font-size:15px; font-weight:600;}
@media (hover:hover) and (pointer:fine){ .footer-col a:hover{color:#fff;} }
.footer-bottom{border-top:1px solid var(--line);}
.footer-bottom p{color:#7F739C;}

/* ---------- MODALE PROGETTO ---------- */
.project-modal-backdrop{background:rgba(5,3,10,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.project-modal-box{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:22px;
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.modal-close{background:rgba(10,6,18,.85); border:1px solid var(--line-strong); color:var(--text);}
.modal-content h3{color:#fff;}
.modal-content p{color:var(--muted);}
.modal-site-link{
  background:var(--acc); color:#130B22; border-radius:10px; font-weight:600;
}
.modal-reels::before{font-family:var(--font-mono); font-weight:500; color:var(--acc);}
.modal-reels iframe{background:var(--surface-2); border:1px solid var(--line);}
.modal-gallery img{border:1px solid var(--line);}

/* ---------- PAGINE INTERNE (manifesto, privacy, cookie, candidati) ---------- */
.page-hero{
  background:
    radial-gradient(800px 420px at 85% 0%, rgba(122,77,240,.25), transparent 65%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.legal-content{background:var(--bg);}
.legal-content h2{color:#fff;}
.legal-content p, .legal-content ul{color:var(--muted);}
.legal-content strong{color:var(--text);}
.legal-content a{color:var(--acc); text-decoration:underline; text-underline-offset:3px;}
.legal-content .updated-note{background:var(--surface); border:1px solid var(--line); color:var(--acc);}
.legal-content th{background:var(--surface); color:var(--text);}
.legal-content th, .legal-content td{border-color:var(--line); color:var(--muted);}

/* candidati (funnel) */
.funnel-pill{background:rgba(255,255,255,.05); border:1px solid var(--line-strong); color:var(--text);}
.sticky-cta{background:rgba(10,6,18,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line);}
.compare{background:var(--bg);}
.compare-table{border:1px solid var(--line-strong); background:var(--surface);}
.compare-row + .compare-row{border-top:1px solid var(--line);}
.compare-label{background:rgba(255,255,255,.03);}
.compare-head .compare-win{background:var(--acc); color:#130B22;}
.compare-win{background:rgba(185,162,255,.08);}
.funnel-story{background:var(--surface);}
.funnel-story-text{color:var(--muted);}
.funnel-shift{background:var(--bg);}
.funnel-shift-text{color:var(--muted);}
.brand-wall{background:var(--bg);}
.brand-wall-item{background:var(--surface); border:1px solid var(--line);}
.brand-wall-item span{color:var(--text);}
.funnel-form{background:var(--surface);}

/* ---------- ENTRATA ALLO SCROLL (movimento medio, curato) ---------- */
.reveal{
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .servizi-grid{grid-template-columns:1fr;}
  .servizi-grid .card:nth-child(n){grid-column:auto;}
  .numero{border-left:none; border-top:1px solid var(--line);}
  .numero:first-child, .numero:nth-child(2){border-top:none;}
  .main-nav{background:var(--surface); border-left:1px solid var(--line);}
  .main-nav a{font-size:18px; color:var(--text);}
  .marquee-band{margin-top:48px;}
}
@media (max-width:560px){
  .hero-title{font-size:clamp(32px,9.6vw,46px);}
  .progetto-media{height:220px;}
}

/* hero mobile: prima il messaggio, poi l'illustrazione (headline e CTA visibili subito) */
@media (max-width:900px){
  .hero-illustration{order:2; width:min(62vw,260px); margin:30px 0 0;}
  .hero{padding-top:104px;}
}

/* ---------- HERO LIQUID (WebGL, js/liquid.js) ---------- */
.hero{background:linear-gradient(160deg,#1A0C3C 0%,#2C1566 55%,#1A0C3C 100%);}
.liquid-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  opacity:0;
  transition:opacity 1.2s ease;
  z-index:0;
}
.liquid-canvas.ready{opacity:1;}
.hero .glow{display:none;}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:180px;
  background:linear-gradient(180deg, transparent, var(--bg));
  pointer-events:none; z-index:1;
}
.hero-inner, .marquee-band, .hero-icons{z-index:2;}
.hero-text::before{
  content:''; position:absolute; inset:-40px -60px -40px -30px; z-index:-1;
  background:radial-gradient(closest-side, rgba(10,6,18,.35), transparent);
  pointer-events:none;
}
.hero-text{position:relative;}
.hero-sub{color:rgba(238,233,250,.86);}
.eyebrow{background:rgba(10,6,18,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
@media (prefers-reduced-motion: reduce){ .liquid-canvas{transition:none;} }

/* ---------- HERO COLLAGE: foto, video, siti web, grafica, ads ---------- */
.hero-collage{
  position:relative;
  flex:0 0 auto;
  width:min(46vw,540px);
  aspect-ratio:1 / 1.02;
  margin:0;
}
.hc-item{
  position:absolute;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:var(--surface);
  box-shadow:0 30px 60px rgba(5,3,10,.55), 0 0 0 1px rgba(255,255,255,.03);
  animation:hcIn .9s var(--ease-out) both;
}
.hc-item img{display:block; width:100%; height:100%; object-fit:cover;}
.hc-chip{
  position:absolute; top:-14px; left:14px; z-index:5;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px 6px 9px;
  border-radius:999px;
  background:rgba(10,6,18,.78);
  border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--text);
  font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.04em;
  white-space:nowrap;
}
.hc-chip .icon{width:14px; height:14px; color:var(--acc);}

/* sito web */
.hc-browser{left:0; top:15%; width:70%; rotate:-3deg; overflow:visible; animation-delay:.1s;}
.hc-browser img{aspect-ratio:5/4; border-radius:0 0 15px 15px;}
.hc-bar{display:flex; align-items:center; gap:6px; padding:10px 12px; background:var(--surface-2); border-radius:15px 15px 0 0; border-bottom:1px solid var(--line);}
.hc-bar i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22);}
.hc-bar span{flex:1; height:8px; margin-left:8px; border-radius:6px; background:rgba(255,255,255,.1);}

/* video (telefono) */
.hc-phone{right:3%; top:0; width:32%; aspect-ratio:9/17.5; rotate:5deg; z-index:3; border:5px solid #0D0618; border-radius:26px; overflow:visible; animation-delay:.25s;}
.hc-phone img{border-radius:21px;}
.hc-phone .hc-play{
  position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,6,18,.45); border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff;
}
.hc-play .icon{width:20px; height:20px;}
.hc-side{position:absolute; right:7px; bottom:38px; display:flex; flex-direction:column; gap:10px; color:#fff;}
.hc-side .icon{width:18px; height:18px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.hc-progress{position:absolute; left:10px; right:10px; bottom:12px; height:3px; border-radius:3px; background:rgba(255,255,255,.3);}
.hc-progress b{display:block; width:42%; height:100%; border-radius:3px; background:var(--acc);}
.hc-phone .hc-chip{left:auto; right:-8px; top:-16px;}

/* foto */
.hc-photo{left:3%; bottom:0; width:30%; aspect-ratio:4/5; rotate:-6deg; z-index:2; padding:6px; background:#F4F0FF; border-color:transparent; animation-delay:.4s;}
.hc-photo img{border-radius:10px;}

/* grafica */
.hc-graphic{left:37%; bottom:7%; width:26%; aspect-ratio:1/1; rotate:3deg; z-index:4; padding:14px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,var(--surface-2),var(--surface)); animation-delay:.55s;}
.hc-aa{font-family:var(--font-display); font-size:clamp(26px,3.6vw,44px); line-height:1; color:#fff;}
.hc-swatches{display:flex; gap:6px;}
.hc-swatches i{flex:1; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.2);}
.hc-swatches i:nth-child(1){background:#B9A2FF;}
.hc-swatches i:nth-child(2){background:#7A4DF0;}
.hc-swatches i:nth-child(3){background:#2C1566;}
.hc-swatches i:nth-child(4){background:#F4F0FF;}

/* ads */
.hc-ads{right:0; bottom:2%; width:34%; aspect-ratio:1/0.9; rotate:-3deg; z-index:4; padding:14px; display:flex; align-items:flex-end; background:linear-gradient(160deg,#5B34C9,#2C1566); border-color:rgba(185,162,255,.4); animation-delay:.7s;}
.hc-bars{display:flex; align-items:flex-end; gap:7px; width:100%; height:62%;}
.hc-bars i{flex:1; border-radius:5px 5px 2px 2px; background:rgba(255,255,255,.85);}
.hc-bars i:nth-child(1){height:30%; opacity:.45;}
.hc-bars i:nth-child(2){height:48%; opacity:.6;}
.hc-bars i:nth-child(3){height:44%; opacity:.6;}
.hc-bars i:nth-child(4){height:72%; opacity:.8;}
.hc-bars i:nth-child(5){height:100%;}
.hc-ads-icon{position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); color:#fff;}
.hc-ads-icon .icon{width:16px; height:16px;}

@keyframes hcIn{
  from{opacity:0; translate:0 28px; scale:.94;}
  to{opacity:1; translate:0 0; scale:1;}
}
/* respiro lento solo su due elementi, per dare vita senza distrarre */
.hc-phone{animation:hcIn .9s var(--ease-out) .25s both, hcFloat 7s ease-in-out 1.4s infinite;}
.hc-ads{animation:hcIn .9s var(--ease-out) .7s both, hcFloat 8s ease-in-out 1.8s infinite reverse;}
@keyframes hcFloat{0%,100%{translate:0 0;} 50%{translate:0 -10px;}}

@media (max-width:900px){
  .hero-collage{order:2; width:min(86vw,360px); margin:34px auto 0;}
  .hc-chip{font-size:11px; padding:5px 10px 5px 8px;}
  .hc-phone{border-width:4px; border-radius:20px;}
  .hc-phone img{border-radius:16px;}
  .hc-phone .hc-play{width:36px; height:36px;}
}


/* ---------- TITOLI: sempre in maiuscolo; testi in grotesque rigido (Archivo) ---------- */
.hero-title, .section-title, .card h3, .progetto-info h3, .step h3,
.modal-content h3, .footer-col h4, .cta-inner h2, .game-promo-text h2,
.legal-content h2, .platform-chip span, .game-end h2, .question-box h3{
  text-transform:uppercase;
}
.section-title{font-size:clamp(28px,4vw,48px); line-height:1.08;}
.card h3{font-size:20px;}
.card-featured h3{font-size:clamp(24px,2.8vw,32px);}
.progetto-info h3{font-size:17px;}
.cta-inner h2{font-size:clamp(28px,4vw,44px);}
.modal-content h3{font-size:clamp(22px,3vw,30px);}
body, p, li, input, textarea, button, .btn, .main-nav a{font-family:var(--font-body);}
p, li{letter-spacing:0;}

/* =====================================================================
   ROUND 2: giallo del logo, servizi dinamici, portfolio, counter
   ===================================================================== */
:root{ --yellow:#FCC665; --yellow-soft:rgba(252,198,101,.14); }

/* ---------- GIALLO DEL LOGO: dettagli e CTA principali ---------- */
.btn-gold{background:var(--yellow); border-color:var(--yellow); color:#1A0F36;}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{background:#FFD688; border-color:#FFD688; box-shadow:0 10px 30px rgba(252,198,101,.35);}
}
.hero-title-accent{
  background:linear-gradient(95deg,#FFE3A6 0%, var(--yellow) 55%, #F5A93B 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.marquee-track span:nth-child(even){color:var(--yellow);}
.marquee-icon{color:var(--yellow);}
.step-n{color:var(--yellow);}
.hc-swatches i:nth-child(3){background:var(--yellow);}
.hc-bars i:nth-child(5){background:var(--yellow); opacity:1;}
.hc-progress b{background:var(--yellow);}
.faq-item summary::after{color:var(--yellow);}
.modal-site-link{background:var(--yellow); color:#1A0F36;}

/* ---------- SERVIZI: icone grandi, duotone, vive all'hover ---------- */
.card{position:relative; isolation:isolate;}
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), rgba(185,162,255,.2), transparent 70%);
  opacity:0; transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){ .card:hover::before{opacity:1;} }
.card-icon{
  width:68px; height:68px; border-radius:20px;
  background:linear-gradient(145deg, rgba(185,162,255,.22), rgba(122,77,240,.08));
  border:1px solid rgba(185,162,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px rgba(122,77,240,.18);
  color:var(--acc);
  margin-bottom:22px;
  transition:transform .4s var(--ease-out), box-shadow .4s ease;
}
.dicon{width:42px; height:42px; display:block; overflow:visible;}
.dicon .y{stroke:var(--yellow); color:var(--yellow);}
.dicon [fill="currentColor"].y{fill:var(--yellow);}
.card-featured .card-icon{width:84px; height:84px; border-radius:24px;}
.card-featured .dicon{width:54px; height:54px;}
@media (hover:hover) and (pointer:fine){
  .card:hover .card-icon{transform:translateY(-4px) rotate(-6deg) scale(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px rgba(122,77,240,.4);}
  .card:hover .dicon .y{filter:drop-shadow(0 0 6px rgba(252,198,101,.7));}
}
/* i badge "Core" diventano un dettaglio giallo */
.card-tag{background:var(--yellow-soft); color:var(--yellow); border-color:rgba(252,198,101,.35);}
.card-featured .card-tag{background:var(--yellow); color:#1A0F36; border-color:var(--yellow);}
/* grande icona-filigrana decorativa */
.card .dicon-ghost{display:none;}

/* ---------- CASE STUDY: icone pulite ---------- */
.case-study-stats{gap:12px;}
.case-study-stat{
  padding:12px 16px 12px 12px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  gap:14px;
}
.case-study-stat .icon{
  width:44px; height:44px; padding:11px; flex:0 0 44px;
  border-radius:12px;
  background:var(--yellow-soft); border:1px solid rgba(252,198,101,.3);
  color:var(--yellow);
}
.case-study-stat p{margin:0; font-size:15px;}

/* ---------- COUNTER: un unico blocco, numeri allineati, niente divisori ---------- */
.numeri{padding:70px 0;}
.numeri .numeri-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  width:calc(100% - 48px); max-width:1132px; margin:0 auto; padding:38px 20px;
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(122,77,240,.22), transparent 70%),
    var(--surface);
  border:1px solid var(--line-strong);
  border-radius:24px;
}
.numero{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  align-content:flex-start; text-align:center;
  padding:6px 12px; border:none;
}
.numero:first-child{border:none;}
.numero-icon{
  order:-1; flex:0 0 100%; width:auto; height:auto; margin:0 0 14px;
  background:none; border:none; animation:none; color:var(--yellow);
  display:flex; justify-content:center;
}
.numero-icon .icon{width:30px; height:30px;}
.numero .num{font-size:clamp(38px,4.6vw,60px); line-height:1; color:#fff; font-variant-numeric:tabular-nums;}
.numero .suffix{font-size:clamp(18px,2vw,26px); margin-left:6px; color:var(--yellow); text-transform:uppercase; letter-spacing:.02em;}
.numero p{flex:0 0 100%; margin-top:10px; color:var(--muted); font-size:14px; font-weight:500;}
@media (max-width:900px){
  .numeri .numeri-grid{grid-template-columns:repeat(2,1fr); row-gap:26px; padding:30px 12px;}
  .numero, .numero:first-child, .numero:nth-child(2){border:none;}
}

/* ---------- PORTFOLIO: card a tutta immagine, testo in sovrimpressione ---------- */
.progetti-grid{grid-template-columns:repeat(3,1fr); gap:18px;}
.progetto{
  aspect-ratio:4/5; display:block; background:var(--surface-2);
  border:1px solid var(--line);
}
.progetto-media{position:absolute; inset:0; height:100%; background:var(--surface-2);}
.progetto-media img{transition:transform .7s var(--ease-out);}
.progetto-media::after{
  background:linear-gradient(180deg, rgba(10,6,18,0) 35%, rgba(10,6,18,.78) 72%, rgba(10,6,18,.96) 100%);
}
.progetto-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:none; padding:22px 22px 20px; display:flex; flex-direction:column; align-items:flex-start;
}
.progetto-tag{
  background:rgba(10,6,18,.55); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--yellow); padding:5px 10px; border-radius:999px; font-size:11px; margin-bottom:10px;
}
.progetto-info h3{font-size:19px; line-height:1.15; margin-bottom:0; color:#fff;}
.progetto-info p{
  font-size:13.5px; line-height:1.5; color:rgba(238,233,250,.85);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  max-height:0; opacity:0; margin-top:0;
  transition:max-height .45s var(--ease-out), opacity .35s ease, margin-top .35s ease;
}
.progetto-arrow{
  top:14px; right:14px; width:42px; height:42px;
  background:var(--yellow); color:#1A0F36;
  opacity:0; transform:translate(-6px,6px) scale(.9);
  transition:opacity .25s ease, transform .35s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .progetto:hover .progetto-info p{max-height:60px; opacity:1; margin-top:10px;}
  .progetto:hover .progetto-arrow{opacity:1; transform:none;}
  .progetto:hover .progetto-media img{transform:scale(1.06);}
}
.progetto:focus-visible{outline:2px solid var(--yellow); outline-offset:3px;}
@media (hover:none){
  .progetto-arrow{opacity:1; transform:none; width:36px; height:36px;}
  .progetto-info p{max-height:none; opacity:1; margin-top:8px; -webkit-line-clamp:2;}
}
@media (max-width:900px){
  .progetti-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .progetto{aspect-ratio:4/5;}
}
@media (max-width:560px){
  .progetti-grid{grid-template-columns:1fr;}
  .progetto{aspect-ratio:4/4.4;}
}

/* Brans Bold e' molto condensato: titoli un po' piu' grandi per restare leggibili */
.section-title{font-size:clamp(34px,5.2vw,64px); line-height:1.02; letter-spacing:.015em;}
.card h3{font-size:27px; letter-spacing:.02em;}
.card-featured h3{font-size:clamp(30px,3.4vw,42px);}
.progetto-info h3{font-size:24px; letter-spacing:.02em;}
.step h3{font-size:28px;}
.cta-inner h2{font-size:clamp(34px,5vw,56px);}
.modal-content h3{font-size:clamp(28px,3.8vw,40px);}
.platform-chip span{font-size:22px;}
.footer-col h4{font-size:19px;}
.game-promo-text h2{font-size:clamp(28px,4vw,42px);}
.numero .num{font-size:clamp(54px,6.4vw,84px);}
.numero .suffix{font-size:clamp(26px,2.8vw,38px); margin-left:8px;}
.numero .suffix{font-size:clamp(32px,3.4vw,46px);}
/* le cover sono 5:4: le card seguono lo stesso rapporto, cosi' i loghi non vengono tagliati */
.progetto, .progetto{aspect-ratio:5/4;}
@media (max-width:900px){ .progetto{aspect-ratio:5/4;} }
@media (max-width:560px){ .progetto{aspect-ratio:5/4;} }
.progetto-media::after{background:linear-gradient(180deg, rgba(10,6,18,0) 48%, rgba(10,6,18,.82) 78%, rgba(10,6,18,.96) 100%);}
.progetto-info{padding:18px 20px 18px;}
.progetto-info h3{font-size:22px;}

/* ---------- PORTFOLIO v2: immagine intera sopra, testo sotto (nessun logo tagliato) ---------- */
.progetto, .progetto{aspect-ratio:auto; display:flex; flex-direction:column; background:var(--surface);}
.progetto-media{position:relative; inset:auto; height:auto; aspect-ratio:5/4; flex:0 0 auto; border-bottom:1px solid var(--line);}
.progetto-media::after{display:none;}
.progetto-info{
  position:static; background:none; padding:18px 20px 20px; align-items:flex-start; flex:1;
}
.progetto-tag{background:var(--yellow-soft); border:1px solid rgba(252,198,101,.3); backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--yellow); margin-bottom:10px;}
.progetto-info h3{font-size:23px; margin-bottom:8px;}
.progetto-info p{max-height:none; opacity:1; margin-top:0; color:var(--muted); font-size:13.5px; -webkit-line-clamp:2;}
@media (hover:hover) and (pointer:fine){
  .progetto:hover .progetto-info p{max-height:none; margin-top:0;}
  .progetto:hover{border-color:rgba(252,198,101,.45);}
}