/* ====== StoryPlay Styles v1.4.8 ====== */
.sp-card{background:#fff;border-radius:1rem;border:1px solid #e5e7eb}
.sp-card-shadow{box-shadow:0 10px 25px rgba(0,0,0,.08)}
.sp-card-hover{transition:.3s ease;transition-property:transform,box-shadow}
.sp-card-hover:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.12)}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:9999px;transition:.2s;text-decoration:none;cursor:pointer}
.sp-btn-primary{background:#2563eb;color:#fff}.sp-btn-primary:hover{background:#1d4ed8}
.sp-container{max-width:80rem;margin:0 auto;padding:0 1rem}
@media (min-width:640px){.sp-container{padding:0 1.5rem}}
@media (min-width:1024px){.sp-container{padding:0 2rem}}
.aspect-16-9{position:relative;padding-bottom:56.25%}.aspect-16-9>*{position:absolute;inset:0}
.cta-emph{animation:ctaPulse 2.4s ease-in-out infinite}@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}50%{box-shadow:0 0 0 10px rgba(37,99,235,0)}}
.hero-visual{min-height:280px}@media (min-width:768px){.hero-visual{min-height:420px}}
.team-hero-card{border:2px solid #2563eb;border-radius:24px;background:#fff;box-shadow:0 18px 45px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);overflow:hidden}
.team-hero-media{position:relative;width:100%}
.team-hero-media::before{content:"";display:block;padding-bottom:62.5%}
@media (max-width:767px){.team-hero-media::before{padding-bottom:56.25%}}
.team-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.problem-plain{border:0;background:transparent;box-shadow:none}
.why-heading{display:inline-block;background:#2563eb;color:#fff;font-weight:800;border-radius:.5rem;padding:.25rem .6rem;font-size:1.125rem;line-height:1.4}

/* Features */
.feature-card h3,.feature-card p{color:#111827}
.feature-card i{color:#2563eb;display:block;margin:0 auto .5rem;width:28px;height:28px}

/* Testimonials */
.quote-simple{display:inline-block;width:22px;height:22px;color:#60a5fa;margin-bottom:.5rem}

/* FAQ minimal */
.faq-list details>summary{list-style:none}
.faq-list details>summary::-webkit-details-marker{display:none}

/* Full-bleed separator */
.sp-full-bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}

/* Arrows */
.sp-arrow-stack{display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
.sp-arrow-stack .arrow{will-change:transform,opacity;animation:spArrowFlow 1.8s cubic-bezier(.22,1,.36,1) infinite;animation-delay:var(--delay,0ms);transform:translateY(-10px);opacity:.0}
@keyframes spArrowFlow{0%{transform:translateY(-10px);opacity:0}20%{opacity:1}50%{transform:translateY(0);opacity:1}80%{transform:translateY(8px);opacity:.85}100%{transform:translateY(12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sp-arrow-stack .arrow{animation:none;opacity:.7;transform:none}}

/* Stripe con sfondo unico */
.sp-artstripe{position:relative;background:url('images/bg-white-art.jpg') center/cover no-repeat}
.sp-artstripe::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.sp-artstripe>*{position:relative;z-index:1}

/* KPI + callout */
.market-callout{background:#fff;border:1px solid rgba(0,0,0,.08);color:#111827}
.market-callout a{color:#2563eb;text-decoration:underline}

/* Icone/LABEL blu nelle card mercato */
.sp-artstripe #market .sp-card i,
.sp-artstripe #market .sp-card .text-3xl{color:#2563eb}
.sp-artstripe #market .sp-card p,
.sp-artstripe #market .sp-card a{color:#111827}

/* Video cards */
.market-video-card{position:relative;z-index:2}
.market-video-frame{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.market-video-frame.is-vertical{aspect-ratio:9/16;max-width:420px;margin:0 auto}
@media (min-width:1280px){.market-video-frame.is-vertical{max-width:460px}}
@media (max-width:767px){.market-video-frame.is-vertical{max-width:360px}}
.market-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Soft edges (maschera) */
.soft-edges{
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 76%, rgba(0,0,0,.15) 88%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 76%, rgba(0,0,0,.15) 88%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* Vignetta morbida sui bordi (fallback) */
.video-vignette::after,
.market-video-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 72%, rgba(0,0,0,.08) 88%, rgba(0,0,0,.15) 100%);
}

/* Footer */
.footer-dark{margin-top:2.5rem;padding-top:2rem;padding-bottom:1rem;border-top:1px solid rgba(255,255,255,.12)}
.footer-dark .footer-link{color:#fff;text-decoration:underline}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);color:#d1d5db;font-size:.8rem}
.footer-piva{text-align:right}

/* ===== FIX: Pricing hover glow ===== */
.sp-shadow-glow-blue:hover{box-shadow:0 20px 60px rgba(37,99,235,.35)!important;transform:translateY(-4px)}
.sp-shadow-glow-gold:hover{box-shadow:0 20px 60px rgba(245,158,11,.35)!important;transform:translateY(-4px)}

/* ===== FIX: Box tratteggiato “Ogni mese che aspetti…” ===== */
.market-callout .market-note{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.75rem 1rem;margin-top:.25rem;border-radius:.75rem;
  background:rgba(37,99,235,.08);
  border:1px dashed rgba(37,99,235,.5);
  font-weight:600;color:#111827;
}

/* ===== FIX: Feature cards – thumb + icone blu centrate ===== */
.feature-card{ text-align:center }
.feature-thumb{
  width:104px;height:104px;border-radius:14px;overflow:hidden;
  border:1px solid #e5e7eb;margin:0 auto 14px
}
.feature-thumb img{width:100%;height:100%;object-fit:cover}
.feature-card [data-lucide]{
  color:#2563eb !important; opacity:1 !important; stroke-width:2 !important;
  width:28px;height:28px;display:block;margin:0 auto 10px
}
.feature-card h3,.feature-card p{ color:#111827 }

/* ===== FIX: Hero video – soft edges più leggeri ===== */
.soft-edges{
  -webkit-mask-image:radial-gradient(ellipse at center,
    rgba(0,0,0,1) 88%, rgba(0,0,0,.4) 94%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse at center,
    rgba(0,0,0,1) 88%, rgba(0,0,0,.4) 94%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.video-vignette::after,
.market-video-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 80%, rgba(0,0,0,.06) 92%, rgba(0,0,0,.12) 100%);
}

/* Feature: linea leggera sotto i titoli */
.feature-sep{
  width:64px;height:2px;background:rgba(0,0,0,.12);
  margin:10px auto 12px;border-radius:2px;
}

/* Reel verticale: un po’ più piccolo */
.market-video-frame.is-vertical{ max-width:360px; }
@media (min-width:1280px){ .market-video-frame.is-vertical{ max-width:400px; } }
@media (max-width:767px){  .market-video-frame.is-vertical{ max-width:320px; } }

/* Feature: thumb +20% (taglia media) */
.feature-thumb{ width:160px; height:160px; }               /* ↑ da 132px */
@media(max-width:640px){ .feature-thumb{ width:136px; height:136px; } }

/* Market reel: rimuovi bordo/bianco della card contenitore */
.market-video-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Se vuoi zero alone ai bordi del video, disattiva anche la vignetta */
.market-video-frame::after{ display:none; }   /* ← opzionale: toglie alone soft */


/* --- FEATURES: override pulito --- */

/* 1) Card: bordo→foto ≈2px, più “longilinea” */
#features .feature-card{ padding:2px 2px 20px !important; }

/* 2) Foto molto più verticale (alta > larga) */
#features .feature-thumb{
  width:100%;
  aspect-ratio: 5/8;            /* più verticale di 3/4 */
  border-radius:12px;
  overflow:hidden;
  border:5px solid #ffffff;
  margin:0 0 10px;
}
#features .feature-thumb img{ width:100%; height:100%; object-fit:cover; }

/* Mobile: ancora più verticale (stile reel) */
@media (max-width:640px){
  #features .feature-thumb{ aspect-ratio: 9 / 16; }
}

/* 3) Divider: centrato davvero (no margini ereditati) */
#features .feature-card .feature-sep{
  width:64px; height:2px; background:rgba(0,0,0,.14);
  display:block; border-radius:2px;
  margin:6px auto 12px !important;   /* centra e stacca dal testo */
}
/* Neutralizza i margini laterali ereditati dal blocco testi */
#features .feature-card h3,
#features .feature-card p{ margin-left:10px; margin-right:10px; }
#features .feature-card .feature-sep{ margin-left:auto!important; margin-right:auto!important; }

/* ---------- OVERRIDES FINALI per assicurare verticalità (blocca conflitti) ---------- */
#features .feature-card .feature-thumb{
  width:100% !important;
  height:auto !important;          /* annulla eventuali height fisse (160px) */
  aspect-ratio: 5 / 5 !important;  /* verticale +20% */
}
#features .feature-card .feature-thumb img{
  object-fit:cover !important;
}

/* (opzionale) niente alone sul video hero se è presente la classe */
.team-hero-card.video-vignette::after{ display:none !important; }
.team-hero-video.soft-edges{
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* Priorità su link forzati neri dentro la stripe */
.sp-artstripe #market .sp-card a.sp-btn-primary { 
  color:#fff !important; 
}

/* mettilo in fondo a style.css */
html { scroll-behavior: smooth; }

/* Header glass scuro + offset contenuti */
#site-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
#mobile-menu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#app{padding-top:64px}
#site-header a{color:#fff}
#site-header.scrolled{background-color:rgba(0,0,0,.6)} /* più scuro on scroll */

/* Glass header temi */
.header-glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}
.header-dark{background:rgba(0,0,0,.40);color:#fff}
.header-dark .nav-link{color:#fff}
.header-dark .btn-ghost{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);color:#fff}
.header-light{background:rgba(255,255,255,.55);color:#111}
.header-light .nav-link{color:#111}
.header-light .btn-ghost{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.08);color:#111}
.mobile-panel{background:rgba(0,0,0,.70);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
#app{padding-top:64px}

/* Header più “ai lati” */
#site-header .header-wide{max-width:92rem;padding-left:.5rem;padding-right:.5rem}
@media (min-width:1024px){#site-header .header-wide{padding-left:.75rem;padding-right:.75rem}}

/* Link animati (underline blu) */
.nav-link{position:relative;transition:color .2s}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:#2563eb;transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav-link:hover{color:#2563eb}
.nav-link:hover::after{transform:scaleX(1)}

/* Temi header già esistenti */
.header-glass{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.1)}
.header-dark{background:rgba(0,0,0,.40);color:#fff}
.header-dark .nav-link{color:#fff}
.header-dark .btn-ghost{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);color:#fff}
.header-light{background:rgba(255,255,255,.55);color:#111}
.header-light .nav-link{color:#111}
.header-light .btn-ghost{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.08);color:#111}
.mobile-panel{background:rgba(0,0,0,.70);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}

/* Perché? — effetto evidenziatore giallo */
.why-heading{
  position:relative;
  display:inline-block;
  background:transparent !important;
  color:#111827;                 /* testo nero */
  font-weight:800;               /* come prima */
  padding:.05rem .1rem;          /* niente box */
  border-radius:0;               /* niente pill */
}

/* tratto evidenziatore “a mano” sotto al testo */
.why-heading::before{
  content:"";
  position:absolute;
  left:-6px; right:-6px;         /* supera il testo */
  bottom:0.12em;                 /* scorre un filo sotto alle lettere */
  height:0.6em;                  /* spessore del tratto */
  background:#ffef5a;            /* giallo evidenziatore */
  opacity:.9;
  transform:rotate(-1.2deg);     /* mano libera */
  border-radius:6px/10px;        /* bordi morbidi, non perfetti */
  filter:blur(.2px);             /* lieve “sbavatura” */
  z-index:-1;                    /* dietro al testo */
  box-shadow:
    0 0 0 1px rgba(255,239,90,.05) inset,
    0 1px 0 rgba(0,0,0,.02);     /* micro imperfezioni */
}

/* variante: tratti doppi lievemente sfalsati per più realismo */
.why-heading::after{
  content:"";
  position:absolute;
  left:-4px; right:-10px;
  bottom:0.18em;
  height:.28em;
  background:#fff173;
  opacity:.65;
  transform:rotate(-0.6deg);
  border-radius:4px/8px;
  z-index:-1;
}

/* se su sfondo scuro, rendi il giallo più saturo */
@media (prefers-color-scheme: dark){
  .why-heading::before{ background:#ffe84a; opacity:.95; }
  .why-heading::after{  background:#ffd94a; opacity:.7;  }
}
/* Perché? più grande (scalabile) */
.why-heading{
  font-size: clamp(0.8rem, 1.8vw + 0.8rem, 1.8rem); /* ~24px → 40px */
  line-height: 1.1;
}

/* leggero fine-tuning dell’evidenziatore con la nuova size */
.why-heading::before{
  bottom: 0.10em;   /* era 0.12em: più vicino al testo */
  height: 0.68em;   /* era 0.60em: copre meglio */
}
.why-heading::after{
  bottom: 0.16em;   /* segue il primo tratto */
}

/* HERO video: box più grande e “spinto” a sinistra per guadagnare respiro */
.hero-video-xl{ width:100%; }
@media (min-width:1024px){
  /* allargo il contenitore oltre la colonna e lo avvicino al margine sinistro */
  .hero-video-xl{ margin-left:-32px; width:calc(100% + 32px); }
  .hero-video-xl .team-hero-card{ max-width:880px; }
  .hero-video-xl .team-hero-media::before{ padding-bottom:60%; } /* un filo più alto */
}
@media (min-width:1280px){
  .hero-video-xl{ margin-left:-56px; width:calc(100% + 56px); }
  .hero-video-xl .team-hero-card{ max-width:940px; }
  .hero-video-xl .team-hero-media::before{ padding-bottom:62%; }
}

/* mantengo bordi/shadow più “importanti” per il box grande */
.hero-video-xl .team-hero-card{
  box-shadow:0 28px 70px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.12);
  border-width:2px;
}
/* Hero: griglia più larga a sinistra (video) e più stretta a destra (testo) */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr;          /* mobile */
}
@media (min-width:768px){
  .hero-grid{
    grid-template-columns: 1.25fr 0.85fr;  /* video più ampio del testo */
    column-gap: 3rem;
  }
}

/* HERO – sposta il video un po' a sinistra su desktop */
@media (min-width: 1024px){
  .hero-video-card.hero-video-xl{
    margin-left: -24px;   /* nudge a sinistra */
  }
}
@media (min-width: 1280px){
  .hero-video-card.hero-video-xl{
    margin-left: -44px;   /* un po' di più su schermi larghi */
  }
}
.hero-video-card.hero-video-xl{ max-width: 960px; }  /* opzionale */

/* === LOGHI: rail orizzontale scrollabile, stessa larghezza delle cards (sp-container) === */
.logo-marquee{
  position: relative;
  overflow-x: auto;                 /* scroll orizzontale */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  padding: 8px 0;
  scrollbar-width: none;            /* firefox: nascondi barre */
}
.logo-marquee::-webkit-scrollbar{ display:none }  /* webkit: nascondi barre */

.logo-track{
  display:flex;
  align-items:center;
  gap: clamp(3rem, 6vw, 7rem);      /* spazio tra loghi */
  width:max-content;
}

.client-logo{
  flex:0 0 auto;
  height: 72px;                     /* più grandi */
  width:auto; object-fit:contain;
  display:block; opacity:1;
  filter:none;
}
@media (min-width:1024px){
  .client-logo{ height: 84px; }
}

/* facoltativo: cursore “mano” mentre trascini */
.logo-marquee.dragging { cursor: grabbing; cursor: -webkit-grabbing; }
.logo-marquee { cursor: grab; cursor: -webkit-grab; }

/* ===== Logos strip ===== */
#press-logos { position: relative; }

/* stessa larghezza delle 3 card: già dato da .sp-container max-w-6xl */
.logos-viewport{
  overflow: hidden;
  /* fade laterale elegante, non invasivo */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.logos-track{
  display: inline-flex;
  align-items: center;
  gap: clamp(48px, 8vw, 96px);
  will-change: transform;
  animation: logosScroll 24s linear infinite;
}

.logos-viewport:hover .logos-track{ animation-play-state: paused; } /* pausa al passaggio mouse */

#press-logos img{
  height: clamp(34px, 4.5vw, 64px);   /* più grandi */
  width: auto;
  filter: grayscale(0);
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
  user-select: none;
  pointer-events: none;                /* utile per il drag */
}
#press-logos img:hover{
  transform: scale(1.04);
  opacity: 1;
}

/* loop infinito (la track contiene la sequenza duplicata) */
@keyframes logosScroll{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); } /* metà, perché la sequenza è duplicata */
}

/* rimuovi eventuale linea blu che capitava in mezzo */
#press-logos + .sp-full-bleed { display: none; }

/* cursore durante il drag */
.logos-viewport.grabbing { cursor: grabbing; }
.logos-viewport { cursor: grab; }