/* ============================================================
   IOCOS — Homepage pubblica
   Impianto "corporate / consulting": hero a due colonne, poi una
   sequenza di fasce (band) — ognuna con la sua illustrazione in
   stile hero, layout alternato e sfondo alternato chiaro/crema per
   dare ritmo senza stancare. Palette chiara e calda dal logo
   (arancio #ff751a, teal #1fad97). Riusa i token di
   services-public.css (caricato prima di questo file).

   Robustezza: il contenuto è SEMPRE visibile. Le animazioni si
   attivano solo quando il JS aggiunge html.hp-js; senza JS o con
   prefers-reduced-motion tutto resta al suo posto.
   ============================================================ */

/* ---------- reveal-on-scroll: nasconde SOLO con JS attivo ---------- */
.hp-reveal{opacity:1; transform:none;}
html.hp-js .hp-reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  will-change:opacity, transform;
}
html.hp-js .hp-reveal.in-view{opacity:1; transform:none;}
/* le illustrazioni entrano da più lontano, con un filo di scala */
html.hp-js .hp-split-media.hp-reveal{transform:translateY(52px) scale(.978);}
html.hp-js .hp-split-media.hp-reveal.in-view{transform:none;}

/* ---------- parallasse allo scroll (solo miglioria: JS imposta il transform) ---------- */
[data-parallax]{will-change:transform;}
@media (prefers-reduced-motion:reduce){ [data-parallax]{transform:none !important;} }

/* ---------- ingresso hero: pura animazione CSS al caricamento ---------- */
@keyframes hp-rise{from{opacity:0; transform:translateY(20px);}to{opacity:1; transform:none;}}
.hp-hero-copy > *{opacity:0; animation:hp-rise .7s cubic-bezier(.16,.8,.24,1) forwards;}
.hp-hero-copy > *:nth-child(1){animation-delay:.05s;}
.hp-hero-copy > *:nth-child(2){animation-delay:.14s;}
.hp-hero-copy > *:nth-child(3){animation-delay:.23s;}
.hp-hero-copy > *:nth-child(4){animation-delay:.32s;}
.hp-hero-visual{opacity:0; animation:hp-rise .9s cubic-bezier(.16,.8,.24,1) .3s forwards;}

@media (prefers-reduced-motion:reduce){
  html.hp-js .hp-reveal{opacity:1; transform:none; transition:none;}
  .hp-hero-copy > *, .hp-hero-visual{opacity:1; animation:none;}
  .hp-eyebrow .dot{animation:none;}
  .hp-spiral-svg{animation:none;}
}

/* ---------- spirale ipnotica dietro l'hero ---------- */
@keyframes hp-spin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes hp-spin-rev{from{transform:translate(-50%,-50%) rotate(360deg);}to{transform:translate(-50%,-50%) rotate(0deg);}}
.hp-hero-spiral{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  mask-image:radial-gradient(circle at 50% 46%, #000 45%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 45%, transparent 78%);
}
.hp-spiral-svg{
  position:absolute; top:46%; left:50%; fill:none; stroke-width:.55;
  transform:translate(-50%,-50%);
}
.hp-spiral-1{width:min(1300px,170vmin); height:min(1300px,170vmin); opacity:.16; animation:hp-spin 100s linear infinite;}
.hp-spiral-2{width:min(880px,118vmin); height:min(880px,118vmin); opacity:.24; animation:hp-spin-rev 62s linear infinite;}
.hp-spiral-3{width:min(500px,68vmin); height:min(500px,68vmin); opacity:.34; animation:hp-spin 34s linear infinite;}

/* ============================================================
   HERO — due colonne, chiaro   (invariato: piace così)
   ============================================================ */
.hp-hero{position:relative; padding:150px 24px 40px; overflow:hidden;}
.hp-hero-grid{
  position:relative; z-index:1;
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hp-hero-copy{max-width:560px;}
.hp-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--link); border:1px solid var(--border-2); background:var(--surface);
  padding:7px 14px; border-radius:999px; margin-bottom:24px; box-shadow:var(--shadow-sm);
}
.hp-eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 10px var(--teal); animation:pulse 1.8s ease-in-out infinite;
}
.hp-hero h1{
  margin:0 0 20px;
  font-size:clamp(34px,4.8vw,58px); line-height:1.08; font-weight:800; letter-spacing:-.02em;
  color:var(--text);
}
.hp-hero h1 .acc{color:var(--accent-2); position:relative; white-space:nowrap;}
.hp-hero h1 .acc::after{
  content:''; position:absolute; left:0; right:0; bottom:.08em; height:.14em;
  background:linear-gradient(90deg, var(--accent), var(--teal)); border-radius:2px; opacity:.4;
}
.hp-lead{max-width:520px; margin:0 0 30px; font-size:16.5px; color:var(--text-dim);}
.hp-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.hp-actions .pub-cta{padding:12px 24px; font-size:14px;}
.hp-hero-visual img{display:block; width:100%; height:auto; border-radius:22px;}

@media (max-width:940px){
  .hp-hero{padding:132px 20px 32px;}
  .hp-hero-grid{grid-template-columns:1fr; gap:36px;}
  .hp-hero-copy{max-width:none;}
  .hp-hero-visual img{max-height:340px; object-fit:cover; object-position:top center;}
  .hp-hero-spiral{
    mask-image:radial-gradient(circle at 50% 22%, #000 42%, transparent 72%);
    -webkit-mask-image:radial-gradient(circle at 50% 22%, #000 42%, transparent 72%);
  }
  .hp-spiral-svg{top:22%;}
  .hp-spiral-1{width:min(760px,150vmin); height:min(760px,150vmin); opacity:.13;}
  .hp-spiral-2{width:min(540px,108vmin); height:min(540px,108vmin); opacity:.20;}
  .hp-spiral-3{width:min(320px,64vmin); height:min(320px,64vmin); opacity:.28;}
}

/* ============================================================
   FASCIA NUMERI — sovrapposta al fondo dell'hero
   ============================================================ */
.hp-stats-strip{position:relative; z-index:5; margin:-58px 0 0; padding:0 0 8px;}
.hp-stats-glow{
  position:absolute; inset:-60px 0 -40px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 620px 260px at 20% 30%, rgba(255,117,26,.35), transparent 65%),
    radial-gradient(ellipse 620px 300px at 82% 70%, rgba(31,173,151,.38), transparent 65%);
  filter:blur(10px);
}
.hp-stats-tilt{
  width:min(1640px,130vw); margin:0 auto;
  transform:rotate(-1.15deg); transform-origin:center;
}
.hp-stats-inner{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:linear-gradient(120deg,#101a17 0%,#151826 55%,#231208 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  box-shadow:0 46px 90px -34px rgba(5,10,15,.65), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.hp-stats-inner::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.09) 45%, transparent 60%);
  background-size:220% 220%; background-position:0% 0%;
  animation:hp-stats-sheen 7s ease-in-out infinite;
}
.hp-stats-inner::after{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:1;
  background:linear-gradient(90deg, var(--accent), var(--teal), var(--accent-2), var(--accent));
  background-size:300% 100%; animation:hp-stats-border 6s linear infinite;
}
@keyframes hp-stats-sheen{
  0%,100%{background-position:0% 0%;}
  50%{background-position:100% 100%;}
}
@keyframes hp-stats-border{
  0%{background-position:0% 0%;} 100%{background-position:300% 0%;}
}
.hp-stat{
  position:relative; z-index:2; padding:32px 26px;
  border-left:1px solid rgba(255,255,255,.1);
  transition:transform .25s ease, background .25s ease;
}
.hp-stat:hover{transform:translateY(-4px); background:rgba(255,255,255,.03);}
.hp-stat:first-child{border-left:0;}
.hp-stat-num{
  display:block; font-family:var(--font-mono); font-weight:800; line-height:1;
  font-size:clamp(28px,3.6vw,42px); margin-bottom:10px;
  background:linear-gradient(120deg, #fff 0%, #fff 55%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hp-stat-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
@media (max-width:820px){
  .hp-stats-tilt{width:100%; transform:none;}
  .hp-stats-inner{grid-template-columns:repeat(2,1fr); border-radius:20px;}
  .hp-stat:nth-child(3){border-left:0;}
  .hp-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1);}
}
@media (max-width:460px){
  .hp-stats-inner{grid-template-columns:1fr;}
  .hp-stat{border-left:0;}
  .hp-stat:nth-child(n+2){border-top:1px solid rgba(255,255,255,.1);}
}
@media (prefers-reduced-motion:reduce){
  .hp-stats-inner::before, .hp-stats-inner::after{animation:none;}
}

/* ============================================================
   BAND — fascia full-bleed, contenuto centrato a 1180
   ============================================================ */
.hp-band{padding:82px 0;}
.hp-band > *{
  box-sizing:border-box; width:100%;
  max-width:1180px; margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px;
}
.hp-band > * + *{margin-top:46px;}
.hp-band--tint{background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.hp-band--dark{background:linear-gradient(160deg, #171a24 0%, #0e1017 100%); color:#fff; padding:96px 0;}

.hp-band h2{
  font-size:clamp(25px,3.3vw,40px); line-height:1.14; font-weight:800; letter-spacing:-.01em;
  margin:0 0 16px; color:var(--text);
}
.hp-band--dark h2{color:#fff;}
.hp-band--dark .section-kicker{color:rgba(255,255,255,.5);}
.hp-section-lead{color:var(--text-dim); max-width:640px; margin:0 0 4px; font-size:15.5px;}
.hp-band-head{max-width:1180px;}
.hp-band-head--center{margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center;}
.hp-band-head--center .section-kicker{justify-content:center;}
.hp-band-head--center .hp-section-lead{margin-left:auto; margin-right:auto;}
.hp-band-foot{margin-top:32px;}

/* ============================================================
   PARTNER — loghi strumenti/piattaforme con cui lavoriamo
   ============================================================ */
.hp-partners-grid{
  margin-top:46px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:32px 40px;
  align-items:center; justify-items:center;
}
.hp-partner-logo{display:flex; align-items:center; justify-content:center; height:52px; width:100%;}
.hp-partner-logo img{
  max-height:38px; max-width:140px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.55;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease;
}
.hp-partner-logo:hover img{filter:grayscale(0); opacity:1; transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){
  .hp-partner-logo:hover img{transform:none;}
}

/* ---------- split: illustrazione + testo, lato alternato ---------- */
.hp-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.hp-split--flip .hp-split-media{order:2;}
.hp-split-media img{display:block; width:100%; height:auto; border-radius:20px;}
.hp-split-copy .section-kicker{margin-bottom:12px;}
.hp-split-copy p{margin:0 0 16px; font-size:16px; color:var(--text-dim); max-width:54ch;}
.hp-split-copy p:last-child{margin-bottom:0;}

@media (max-width:900px){
  .hp-split{grid-template-columns:1fr; gap:30px;}
  .hp-split-media{order:2;}            /* su mobile: sempre testo prima, immagine dopo */
  .hp-split--flip .hp-split-media{order:2;}
  .hp-split-media img{max-width:520px; margin:0 auto;}
}

/* ---------- pilastri (approccio) ---------- */
.hp-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.hp-pillar{border-top:2px solid var(--accent); padding-top:16px;}
.hp-pillar h3{margin:0 0 6px; font-size:16px; font-weight:700; color:var(--text);}
.hp-pillar p{margin:0; font-size:13.5px; line-height:1.6; color:var(--text-dim);}
@media (max-width:720px){.hp-pillars{grid-template-columns:1fr; gap:0;} .hp-pillar{border-top:1px solid var(--border); padding:18px 0;} .hp-pillar:first-child{border-top:0;}}

/* ============================================================
   METODO — griglia ordinata di step numerati
   ============================================================ */
/* ---------- metodo: 5 pannelli, ingresso da destra allo scroll ----------
   Usa lo stesso reveal-on-scroll già collaudato nel resto della pagina
   (.hp-reveal, IntersectionObserver con rete di sicurezza a 2.5s, sempre
   visibile senza JS o con prefers-reduced-motion): qui solo la direzione
   di ingresso cambia, da destra verso sinistra invece che dal basso. */
.hp-method-wheel{position:relative; margin-top:46px;}
.hp-method-stage{
  position:relative;
  background:linear-gradient(180deg, var(--surface-2) 0%, transparent 8%, transparent 92%, var(--surface-2) 100%);
  border-radius:28px;
}
.hp-method-panel{
  box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  margin:18px auto; padding:44px clamp(24px,4vw,56px); max-width:760px;
  background:var(--surface); border:1px solid var(--border-2); border-radius:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 26px -20px rgba(20,20,40,.14);
}
html.hp-js .hp-method-panel.hp-reveal{transform:translateX(64px);}
html.hp-js .hp-method-panel.hp-reveal.in-view{transform:none;}
.hp-method-n-big{
  font-family:var(--font-mono); font-weight:800; line-height:1;
  font-size:clamp(42px,6vw,76px); color:var(--accent); margin-bottom:16px;
  background:linear-gradient(120deg, var(--accent), var(--teal));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 14px 22px rgba(20,20,40,.1));
}
.hp-method-n-wrap{display:inline-block;}
.hp-method-copy{display:block;}
.hp-method-panel h3{margin:0 0 12px; font-size:clamp(20px,2.4vw,27px); font-weight:800; color:var(--text);}
.hp-method-copy > p{margin:0; font-size:15.5px; line-height:1.65; color:var(--text-dim); max-width:56ch;}
.hp-method-out{
  margin-top:20px !important; padding-top:14px;
  border-top:1px dashed var(--border-2);
  display:flex; flex-direction:column; gap:3px;
  font-size:13.5px; line-height:1.5; color:var(--text);
}
.hp-method-out span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
}

@media (max-width:720px){
  .hp-method-panel{margin:10px 0; padding:26px 22px;}
  html.hp-js .hp-method-panel.hp-reveal{transform:translateX(28px);}
}

/* ============================================================
   SERVIZI — griglia di card categoria
   ============================================================ */
.hp-svc-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:16px;}
.hp-svc-card{
  --cat:var(--teal);
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:26px 24px; text-decoration:none; color:var(--text);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hp-svc-card:hover{
  border-color:color-mix(in srgb, var(--cat) 55%, var(--border-2));
  box-shadow:0 22px 44px -20px color-mix(in srgb, var(--cat) 45%, transparent);
  transform:translateY(-3px);
}
.hp-svc-card-top{display:flex; align-items:center; justify-content:space-between;}
.hp-svc-ic{
  width:44px; height:44px; border-radius:11px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:color-mix(in srgb, var(--cat) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--cat) 22%, var(--border));
}
.hp-svc-n{font-family:var(--font-mono); font-size:12px; color:var(--text-mute);}
.hp-svc-card h3{margin:0; font-size:17.5px; font-weight:700; color:var(--text);}
.hp-svc-card > p{margin:0; flex:1; font-size:13.5px; line-height:1.6; color:var(--text-dim);}
.hp-svc-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:12px; color:var(--text-mute);
}
.hp-svc-arrow{font-size:16px; color:var(--cat); transition:transform .2s ease;}
.hp-svc-card:hover .hp-svc-arrow{transform:translateX(5px);}
.hp-band-foot .pub-cta{display:inline-block;}

/* ============================================================
   PERCHÉ IOCOS — "ruota" ipnotica a profondità, non più a griglia rigida
   ============================================================ */
.hp-why-band{position:relative; overflow:hidden;}
.hp-why-spiral{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 74%);
}
.hp-why-spiral-svg{
  width:min(1100px,140vmin); height:min(1100px,140vmin); fill:none; stroke-width:.5; opacity:.1;
  animation:hp-why-spin 80s linear infinite;
}
@keyframes hp-why-spin{to{transform:rotate(360deg);}}

.hp-why-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px 28px;
  perspective:1400px;
}
.hp-why-card{
  position:relative; background:transparent; border:none; border-radius:0;
  padding:8px 6px 8px 0; display:flex; flex-direction:column; gap:12px;
  transform-style:preserve-3d; will-change:transform, opacity; --y:0px;
  animation:hp-why-orbit 10s ease-in-out infinite; animation-delay:var(--d, 0s);
}
.hp-why-card::before{
  content:''; display:block; width:34px; height:2px; border-radius:2px; margin-bottom:2px;
  background:linear-gradient(90deg, var(--accent), var(--teal));
  opacity:.7;
}
.hp-why-card:nth-child(even){--y:16px;}
.hp-why-card:nth-child(odd){--y:-10px;}
.hp-why-ic{
  width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:22px; animation:hp-why-ic 10s ease-in-out infinite; animation-delay:var(--d, 0s);
}
.hp-why-card h3{
  margin:0; font-weight:700; color:var(--text);
  font-size:16.5px; animation:hp-why-heading 10s ease-in-out infinite; animation-delay:var(--d, 0s);
}
.hp-why-card p{margin:0; font-size:13.5px; line-height:1.6; color:var(--text-dim);}

@keyframes hp-why-orbit{
  0%,100%{transform:translateY(var(--y,0px)) translateZ(-36px) rotateY(-5deg) scale(.95); opacity:.74;}
  50%{transform:translateY(var(--y,0px)) translateZ(26px) rotateY(3deg) scale(1.04); opacity:1;}
}
@keyframes hp-why-ic{
  0%,100%{transform:scale(1); opacity:.9;}
  50%{transform:scale(.7); opacity:.6;}
}
@keyframes hp-why-heading{
  0%,100%{font-size:16.5px;}
  50%{font-size:19px;}
}

@media (max-width:720px){
  .hp-why-card:nth-child(even), .hp-why-card:nth-child(odd){transform:none;}
  .hp-why-grid{perspective:none;}
  .hp-why-card{animation:hp-why-orbit-soft 10s ease-in-out infinite; animation-delay:var(--d, 0s);}
  @keyframes hp-why-orbit-soft{0%,100%{opacity:.82; transform:none;} 50%{opacity:1; transform:none;}}
}

@media (prefers-reduced-motion:reduce){
  .hp-why-spiral-svg{animation:none;}
  .hp-why-card, .hp-why-ic, .hp-why-card h3{animation:none; transform:none;}
  .hp-why-card:nth-child(even), .hp-why-card:nth-child(odd){transform:none;}
}

/* ============================================================
   COME LAVORIAMO — lista con spunte
   ============================================================ */
.hp-check-list{list-style:none; margin:18px 0 0; padding:0;}
.hp-check-list li{
  position:relative; padding:14px 0 14px 28px; border-top:1px solid var(--border);
  font-size:14.5px; line-height:1.55; color:var(--text);
}
.hp-check-list li:last-child{border-bottom:1px solid var(--border);}
.hp-check-list li::before{
  content:'✓'; position:absolute; left:0; top:13px; color:var(--teal); font-weight:800; font-size:13px;
}

/* ============================================================
   FAQ — accordion nativo <details>
   ============================================================ */
.hp-faq{display:grid; grid-template-columns:.82fr 1.18fr; gap:44px 56px; align-items:start;}
.hp-faq-head h2{margin:0 0 12px;}
.hp-faq-head p{margin:0; font-size:14.5px; color:var(--text-dim);}
.hp-faq-list{margin-top:0;}
.hp-faq-item{border-top:1px solid var(--border-2);}
.hp-faq-item:last-child{border-bottom:1px solid var(--border-2);}
.hp-faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-size:15.5px; font-weight:700; color:var(--text);
}
.hp-faq-item summary::-webkit-details-marker{display:none;}
.hp-faq-item summary::after{
  content:'+'; flex:none; font-family:var(--font-mono); font-size:19px; font-weight:400;
  color:var(--accent); transition:transform .2s ease;
}
.hp-faq-item[open] summary::after{content:'–';}
.hp-faq-item p{margin:0 0 20px; font-size:14.5px; line-height:1.65; color:var(--text-dim); max-width:62ch;}
@media (max-width:820px){.hp-faq{grid-template-columns:1fr; gap:24px;}}

/* ============================================================
   TECNOLOGIE — striscia marquee sobria
   ============================================================ */
.hp-tools .section-kicker{margin-bottom:16px;}
.hp-marquee{
  overflow:hidden; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hp-marquee-track{display:flex; width:max-content; animation:hp-marquee 42s linear infinite;}
.hp-marquee:hover .hp-marquee-track{animation-play-state:paused;}
.hp-marquee-item{
  flex:none; padding:0 26px; font-family:var(--font-mono); font-size:13px;
  color:var(--text-dim); white-space:nowrap; display:flex; align-items:center; gap:26px;
}
.hp-marquee-item::after{content:'/'; color:var(--text-mute); opacity:.5;}
@keyframes hp-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .hp-marquee{-webkit-mask-image:none; mask-image:none;}
  .hp-marquee-track{animation:none; width:auto; flex-wrap:wrap; justify-content:center; gap:6px 0;}
}

/* ============================================================
   CTA finale
   ============================================================ */
.hp-cta-inner{max-width:1180px;}
.hp-cta h2{margin:14px 0 16px; max-width:20ch;}
.hp-cta p{margin:0 0 32px; max-width:520px; font-size:16px; color:rgba(255,255,255,.7);}
.hp-cta .pub-cta{padding:13px 28px; font-size:14.5px;}