/* Fiico, sistema visivo "editoriale scuro".
   La tipografia porta il contenuto, il colore punta il dito, il fondo non decora mai.
   Foglio unico caricato dopo gli stili di pagina: appiattisce fondi, toglie aloni e ombre, imposta tipografia e palette. */
:root{
  --p-nero:#0B0B0D; --p-chiaro:#F4F3F7; --p-ink:#111114; --p-ora:#FF9509; --p-mag:#FF05F6; --p-rosa:#FF4383; --p-sec:#B0B0BA;
  --p-grad:linear-gradient(90deg,#FF9509,#FF05F6);
  --bg:#0B0B0D; --bg-2:#0B0B0D; --bg2:#0B0B0D;
  --card:#16161A; --ink:#FFFFFF; --ink-soft:#B0B0BA; --soft:#B0B0BA; --ink-faint:#B0B0BA; --faint:#B0B0BA;
  --line:rgba(255,255,255,.16); --line-2:rgba(255,255,255,.3); --line2:rgba(255,255,255,.3);
  --accent:#FF05F6; --grad:linear-gradient(90deg,#FF9509,#FF05F6); --shadow:none;
  --fdisp:"Poppins","Helvetica Neue",Arial,sans-serif; --fd:"Poppins","Helvetica Neue",Arial,sans-serif;
  --fbody:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fb:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --p-onbg:#FFFFFF; --p-tagbg:#FF05F6; --p-tagink:#FFFFFF;
}
html body{background:var(--p-nero)!important;background-image:none!important;color:var(--ink);font-family:var(--fbody);font-weight:400;line-height:1.45}

/* 1. Il fondo non decora mai */
#sky,#stars,.halo,#aura,.intro,#introcv,
.hero::before,.hero::after,.ctab::before,.whyfiico::before,.whyfiico::after,.final::before,body::after{display:none!important;content:none!important}
*{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#rocket{filter:none!important}
header,.hd,#hdr,header.scrolled{background:var(--p-nero)!important;border-bottom:1px solid var(--line)!important}
:focus-visible{outline:3px solid var(--p-ora);outline-offset:3px}

/* 2. Sezioni: si distinguono cambiando fondo */
section,.sec,.hero{background-image:none!important}
.s-light{background:var(--p-chiaro)!important;color:var(--p-ink);
  --ink:#111114;--ink-soft:#44444D;--soft:#44444D;--ink-faint:#5C5C66;--faint:#5C5C66;--card:#FFFFFF;
  --line:rgba(17,17,20,.16);--line-2:rgba(17,17,20,.34);--line2:rgba(17,17,20,.34);--p-onbg:#111114}
.s-mag{background:var(--p-mag)!important;color:#fff;
  --ink:#FFFFFF;--ink-soft:#FFFFFF;--soft:#FFFFFF;--ink-faint:#FFFFFF;--faint:#FFFFFF;--accent:#FFFFFF;--card:#FFFFFF;
  --line:rgba(255,255,255,.5);--line-2:#fff;--line2:#fff;--p-onbg:#FFFFFF;--p-tagbg:#FFFFFF;--p-tagink:#111114}
.s-ora{background:var(--p-ora)!important;color:var(--p-ink);
  --ink:#111114;--ink-soft:#111114;--soft:#111114;--ink-faint:#111114;--faint:#111114;--accent:#FFFFFF;--card:#FFFFFF;
  --line:rgba(17,17,20,.3);--line-2:#111114;--line2:#111114;--p-onbg:#111114;--p-tagbg:#FFFFFF;--p-tagink:#111114}
/* schede bianche sui fondi pieni: dentro torna l'inchiostro */
.s-mag .p-card,.s-ora .p-card{background:#fff!important;color:#111114;border:0!important;
  --ink:#111114;--ink-soft:#44444D;--soft:#44444D;--ink-faint:#5C5C66;--faint:#5C5C66;--accent:#FF05F6;--line:rgba(17,17,20,.16);--p-tagbg:#FF05F6;--p-tagink:#fff}

/* 3. Tipografia */
h1,h2,.p-title{font-family:"Poppins","Helvetica Neue",Arial,sans-serif!important;font-weight:800!important;
  line-height:1.03!important;letter-spacing:-.03em!important;text-wrap:balance;color:var(--ink)}
h3,h4{font-family:"Poppins","Helvetica Neue",Arial,sans-serif!important;font-weight:700!important;line-height:1.12!important;letter-spacing:-.02em!important}
h1{font-size:clamp(2.7rem,7.4vw,6.4rem)!important}
h2{font-size:clamp(2.1rem,5vw,4.2rem)!important}
p,li,dd,blockquote{line-height:1.45}
p{max-width:64ch}
b,strong{font-weight:700}
body,body *{text-align:left!important}
button,.btn,.cta,a.btn,.cfab,.xmenu button,input[type=submit],.cd12b,.cdbox,[class*="count"] b{text-align:center!important}
.p-hand{font-family:var(--fbody);font-style:normal;font-weight:700;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.2;color:var(--accent);text-transform:none;display:block;margin-top:14px}

/* una parola a colore: pieno, mai sfumato dietro al testo */
.grad,h1 em,h2 em,h1 .grad,h2 .grad{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor;
  color:var(--accent)!important;animation:none!important;font-style:normal}
/* il magenta regge solo grande e in grassetto: sotto i 24px torna il colore del testo */
p .grad,li .grad,small .grad,span.grad:not(h1 *):not(h2 *):not(h3 *){color:inherit!important;font-weight:700}
h3 .grad{color:var(--accent)!important}

/* 4. Componenti */
/* targhetta */
.eyebrow,.kicker,.p-tag,.tagline,.overline{display:inline-block!important;background:var(--p-tagbg)!important;color:var(--p-tagink)!important;
  font-family:var(--fbody)!important;font-weight:700!important;font-size:.74rem!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  line-height:1.2!important;padding:7px 11px!important;border-radius:8px!important;border:0!important;margin-bottom:22px}
.eyebrow::before,.eyebrow::after,.kicker::before,.kicker::after{display:none!important}
/* bottone a pastiglia */
.btn,a.cta,button[type=submit],input[type=submit]{background:var(--p-grad)!important;color:#111114!important;border:0!important;border-radius:999px!important;
  font-family:var(--fbody)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;transform:none}
.btn:hover,a.cta:hover{transform:none!important;filter:brightness(1.06)}
.btn.ghost,.btn-ghost,.btn.sec,.btn.alt,.btn2,a.ghost{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important}
.s-mag .btn,.s-ora .btn,.s-mag a.cta,.s-ora a.cta,.s-mag button[type=submit],.s-ora button[type=submit]{background:#111114!important;color:#fff!important}
.s-mag .btn.ghost,.s-ora .btn.ghost,.s-mag .btn-ghost,.s-ora .btn-ghost{background:transparent!important;color:var(--ink)!important;border-color:var(--ink)!important}
.s-mag .p-card .btn,.s-ora .p-card .btn{background:var(--p-grad)!important;color:#111114!important}
/* schede */
[class*="card"],.ctab,.box,.tile,.faq,.promo,.step,.plan,.pk{border-radius:14px!important;background-image:none!important}

/* 5. Respiro */
.sec,section.sec,.hero,.svc,.how,.shop,section.final{padding-top:clamp(72px,10vw,150px)!important;padding-bottom:clamp(72px,10vw,150px)!important}
.sec[style*="padding-top:0"]{padding-top:0!important}

/* footer */
.sitefoot{background:var(--p-nero)!important;border-top:1px solid var(--line)!important}
.sitefoot .weare{background:none!important;-webkit-text-fill-color:currentColor;color:var(--p-mag)!important;font-family:"Poppins",sans-serif!important;font-weight:800!important;font-size:1.6rem!important;letter-spacing:-.02em!important}
.sitefoot h4{font-family:var(--fbody)!important;font-weight:700!important;text-transform:uppercase;font-size:.78rem!important;letter-spacing:.08em!important}
.sitefoot .gameblink{animation:none!important;color:var(--p-mag)!important}
/* widget call */
.cfab{background:#111114!important;border:1.5px solid #fff!important}
.cfab .dot::after{display:none!important}
.cpop{border-radius:14px!important;background:#16161A!important}
.cpop h3 span{background:none!important;-webkit-text-fill-color:currentColor;color:var(--p-mag)!important}
.cpop .p1{background:var(--p-grad)!important;color:#111114!important}
.cpop-bg{background:rgba(11,11,13,.8)!important}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Home ===== */
.whyfiico{background:var(--p-nero)!important;border:0!important;color:var(--ink)!important}
.sechead h2,main>section .sechead h2,.final h2 .g,.about .big em,.ccard .metric{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;animation:none!important}
.sechead h2,main>section .sechead h2{color:var(--ink)!important}
.sechead h2 a{color:var(--accent)!important;text-decoration:none}
.about .big em{color:var(--accent)!important;font-style:normal}
.ccard .metric{color:#fff!important}
.s-mag h2 em,.s-mag h2 .grad{color:#111114!important}
.s-ora h2 em,.s-ora h2 .g,.s-ora h2 .grad{color:#fff!important}
.sechead,.sechead p,.hero .lead,.final .lead,.cform,.srvmore,.final .cta,.hero .cta{margin-left:0!important;margin-right:auto!important}
.sechead{max-width:none!important;display:block!important}
.sechead p{font-size:1.15rem;margin-top:22px}
.hero .cta,.final .cta{justify-content:flex-start!important}
.ticker,.mline{display:none!important}
.hero{min-height:0!important}
.hero h1{margin:6px 0 34px!important}
.hero .lead{font-size:clamp(1.1rem,1.6vw,1.35rem)!important;color:var(--ink-soft)}
.hero .manifesto{font-family:var(--fbody)!important;font-weight:700!important;letter-spacing:0!important;font-size:1.1rem!important}
/* metodo su magenta: i passaggi diventano schede bianche */
.s-mag .mstep,.s-mag .mstrip,.s-ora .contacts .ci{background:#fff!important;color:#111114!important;border:0!important;border-radius:14px!important;
  --ink:#111114;--ink-soft:#44444D;--ink-faint:#5C5C66;--accent:#FF05F6;--line:rgba(17,17,20,.16)}
.s-mag .mstep h3,.s-mag .mstep dd,.s-mag .mstrip strong{color:#111114!important}
.s-mag .mstep p,.s-mag .mstrip span{color:#44444D!important}
.s-mag .mstep dt{color:#111114!important;opacity:.6}
.mnum{-webkit-text-stroke:0!important;color:var(--p-mag)!important;font-family:"Poppins",sans-serif;font-weight:800;opacity:1!important}
/* clienti su chiaro: i loghi bianchi restano su tessere scure */
.s-light .fbrand{background:#111114!important;border:0!important}
/* contatti su arancio */
.s-ora .cform input,.s-ora .cform textarea{background:#fff!important;border:0!important;color:#111114!important;border-radius:14px!important}
.s-ora .cform label,.s-ora .cform .consent{color:#111114!important}
.s-ora .cform .consent a,.s-ora a.copy,.s-ora .copy{color:#111114!important;text-decoration:underline}
.s-ora .contacts .ci .lab{color:#5C5C66!important}.s-ora .contacts .ci .val{color:#111114!important}

section.sec.whyfiico,html body .whyfiico{background:var(--p-nero)!important;background-image:none!important;border:0!important}
.contacts .ci{padding:18px 20px!important}
.mapbg,.mapbg .grid,.mapwrap .scrim,.mapwrap{background:#16161A!important;background-image:none!important;border-color:var(--line)!important}

/* ===== Pagine interne ===== */
/* titoli dentro schede e articoli: restano Archivo, ma a misura di scheda */
:is(.pk,[class*="card"],.ctab,.box,.step,.plan,aside,li,details,.faq,.promo) :is(h1,h2){font-size:clamp(1.7rem,2.6vw,2.4rem)!important}
.ctab h2{font-size:clamp(2rem,4.4vw,3.6rem)!important}
article h2,.art h2,.body h2{font-size:clamp(1.7rem,3.2vw,2.6rem)!important;margin-top:1.6em}
article h1,.art h1,.body h1{font-size:clamp(2.4rem,6vw,5rem)!important}
article p,article li,.body p,.body li{max-width:65ch}
.s-mag p,.s-mag li{color:#fff!important}
.s-mag .p-card p,.s-mag .p-card li,.s-mag .mstep p{color:#44444D!important}
.s-ora p,.s-ora li{color:#111114!important}
div[style*="rgba(255,138,0,.14)"]{background:#16161A!important;border-radius:14px!important}
.s-light div[style*="rgba(255,138,0,.14)"]{background:#fff!important}
/* la CTA finale: niente riquadro, parla il fondo */
.s-mag .ctab{background:none!important;border:0!important;padding:0!important}
.ctab{background:#16161A!important}
.s-light .ctab{background:#fff!important}
.hero p,.hero .sub,.hero h1,.sec>.wrap>p{margin-left:0!important}

/* sezioni chiare: il testo e' sempre inchiostro, qualunque colore avesse la pagina */
.s-light :is(p,li,dd,dt,h1,h2,h3,h4,h5,strong,b,label,small,figcaption,blockquote,td,th){color:#111114!important}
.s-light :is(p,li,dd,small,figcaption){color:#33333B!important}
.s-light a:not(.btn):not(.cta){color:#111114!important}
.s-light :is(h1,h2,h3) :is(em,.grad),.s-light .num,.s-light .n{color:var(--p-mag)!important}
.s-light .eyebrow,.s-light .p-tag{color:#fff!important}
.s-light .btn:not(.ghost):not(.btn-ghost){color:#111114!important}
.s-light .btn.ghost,.s-light .btn-ghost{color:#111114!important;border-color:#111114!important}
.s-light [class*="card"],.s-light .box,.s-light .step{background:#fff!important;border:0!important}
.s-light .fbrand *{color:#fff!important}

/* ===== Versione chiara e Natale: stesso sistema su base chiara ===== */
html.light .whyfiico,html.light section.sec.whyfiico{background:var(--bg)!important}
html.light .mapbg,html.light .mapwrap,html.light .ctab,html.light .cpop,html.light div[style*="rgba(255,138,0,.14)"]{background:#fff!important}
html.light .cpop h3,html.light .cpop{color:#111114!important}
html.light .cfab{background:#fff!important;border-color:#111114!important;color:#111114!important}
html.light .ccard .metric{color:#fff!important}
a h2,a h1,a :is(h2,h1){font-size:clamp(1.4rem,2.1vw,1.9rem)!important}
section .ctab h2,section.s-mag .ctab h2,.s-mag h2{font-size:clamp(2.1rem,5vw,4.2rem)!important}
.ctab{align-items:flex-start!important}
header img.logo,.hd img.logo,.hd .logo{height:34px!important;width:auto!important}

/* ===== Luce neon: i colori Fiico accendono titoli, schede e icone ===== */
.hero #warp{display:block!important;opacity:.9}
h1 :is(em,.grad),h2 :is(em,.grad),.sechead h2 a{text-shadow:0 0 22px rgba(255,5,246,.55),0 0 60px rgba(255,5,246,.28)}
.s-light :is(h1,h2) :is(em,.grad),.s-mag :is(h1,h2) :is(em,.grad),.s-ora h2 :is(em,.g,.grad),html.light :is(h1,h2) :is(em,.grad){text-shadow:none}
[class*="card"],.pk,.mstep,.ctab,.faq{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
body:not(.x) :is(.scard,.pcard,.pk,.card,.wcard,.bcard,.dcard,.faq):hover{transform:translateY(-6px);border-color:rgba(255,5,246,.7)!important;
  box-shadow:0 0 0 1px rgba(255,5,246,.55),0 0 34px -4px rgba(255,5,246,.55),0 0 80px -20px rgba(255,149,9,.5)!important}
.sct,.pico{box-shadow:0 0 26px -2px rgba(255,5,246,.55),0 0 50px -12px rgba(255,149,9,.6)!important;border-radius:14px!important}
.sc1{background:linear-gradient(145deg,#FFB13D,#FF9509)!important;box-shadow:0 0 28px -2px rgba(255,149,9,.75)!important}
.sc2{background:linear-gradient(145deg,#FF5DF9,#FF05F6)!important;box-shadow:0 0 28px -2px rgba(255,5,246,.75)!important}
.sc3{background:linear-gradient(145deg,#FF7DA8,#FF4383)!important;box-shadow:0 0 28px -2px rgba(255,67,131,.75)!important}
.sc4{background:linear-gradient(145deg,#FF9509,#FF05F6)!important;box-shadow:0 0 28px -2px rgba(255,67,131,.7)!important}
.s-mag .btn,.s-ora .btn,.s-light .pico{box-shadow:none!important}
.eyebrow{box-shadow:0 0 22px -4px rgba(255,5,246,.7)}
.s-mag .eyebrow,.s-ora .eyebrow,.s-light .eyebrow{box-shadow:none}
.d3card.on,.ccard:hover{box-shadow:0 0 0 1px rgba(255,5,246,.6),0 0 46px -6px rgba(255,5,246,.6)!important}

/* ===== Contorni neon su sezioni e schede (non sui bottoni) ===== */
.btn,a.cta,.eyebrow{box-shadow:none!important}
/* ogni sezione scura si apre con un filo di luce Fiico e il suo alone */
section:not(.s-light):not(.s-mag):not(.s-ora):not(.hero),.sitefoot{
  background-image:linear-gradient(90deg,transparent,#FF9509 18%,#FF05F6 82%,transparent),radial-gradient(55% 150px at 50% 0,rgba(255,5,246,.20),transparent 70%),radial-gradient(40% 110px at 22% 0,rgba(255,149,9,.16),transparent 70%)!important;
  background-size:100% 2px,100% 150px,100% 110px!important;background-repeat:no-repeat!important;background-position:top center!important;border-top:0!important}
html.light section:not(.s-light):not(.s-mag):not(.s-ora):not(.hero),html.light .sitefoot{background-image:linear-gradient(90deg,transparent,#FF9509 18%,#FF05F6 82%,transparent)!important;background-size:100% 2px!important}
/* schede: bordo a sfumatura sempre acceso, alone che cresce al passaggio */
:is([class*="card"],.pk,.mstep,.mstrip,.ctab,.faq,.ci):not(.ccard):not(.d3card):not(.p-card){
  border:1.5px solid transparent!important;
  background:linear-gradient(#121216,#121216) padding-box,linear-gradient(120deg,#FF9509,#FF4383 50%,#FF05F6) border-box!important;
  box-shadow:0 0 22px -8px rgba(255,5,246,.55),0 0 44px -18px rgba(255,149,9,.5)!important}
body:not(.x) :is([class*="card"],.pk,.mstep,.ctab,.faq,.ci):not(.ccard):not(.d3card):hover{transform:translateY(-5px);
  box-shadow:0 0 36px -4px rgba(255,5,246,.75),0 0 90px -18px rgba(255,149,9,.65)!important}
/* sui fondi pieni e chiari le schede restano bianche e senza alone */
:is(.s-light,.s-mag,.s-ora) :is([class*="card"],.pk,.mstep,.mstrip,.ctab,.faq,.ci),html.light :is([class*="card"],.pk,.mstep,.mstrip,.ctab,.faq,.ci):not(.ccard):not(.d3card){
  background:#fff!important;border:1.5px solid transparent!important;box-shadow:none!important}
html.light :is([class*="card"],.pk,.mstep,.ctab,.faq,.ci):not(.ccard):not(.d3card){background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#FF9509,#FF4383 50%,#FF05F6) border-box!important}
.s-mag .ctab{background:none!important;border:0!important}
.s-light .fbrand{background:#111114!important}

/* ===== I due colori hanno due mestieri: l'arancio fa agire, il magenta indica ===== */
.btn,a.cta,button[type=submit],input[type=submit],.cpop .p1{background:#FF9509!important;background-image:none!important;color:#111114!important;text-transform:uppercase!important;letter-spacing:.03em!important;font-weight:700!important}
.btn.ghost,.btn-ghost,.btn.sec,.btn.alt,.btn2,a.ghost,.cpop .p2{background:transparent!important;color:#fff!important;border:2px solid #fff!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.s-light .btn.ghost,.s-light .btn-ghost,html.light .btn.ghost,html.light .btn-ghost,html.light .cpop .p2{color:#111114!important;border-color:#111114!important}
.s-ora .btn,.s-ora a.cta,.s-ora button[type=submit],.s-mag .btn,.s-mag a.cta,.s-mag button[type=submit]{background:#111114!important;color:#fff!important}
.s-mag .btn.ghost,.s-mag .btn-ghost{background:transparent!important;color:#fff!important;border-color:#fff!important}
.s-ora .btn.ghost,.s-ora .btn-ghost{background:transparent!important;color:#111114!important;border-color:#111114!important}
.s-mag .p-card .btn,.s-ora .p-card .btn{background:#FF9509!important;color:#111114!important}
/* etichette e stati non cliccabili: mai arancio */
.wf-lab,.liveblink,.badge{color:#FF05F6!important}
.s-ora .wf-lab,.s-ora .liveblink{color:#111114!important}
.mnum,.wnum{color:#FF05F6!important}

/* fondi pieni e chiari: schede sempre bianche con testo inchiostro (vince sul bordo neon) */
section:is(.s-light,.s-mag,.s-ora) :is([class*="card"],.pk,.mstep,.mstrip,.ctab,.faq,.ci):not(.ccard):not(.d3card):not(.fbrand):not(.zz):not(.zy){
  background:#fff!important;border:1.5px solid transparent!important;box-shadow:none!important;color:#111114!important}
section:is(.s-mag,.s-ora) :is(.mstep,.mstrip,.ci,[class*="card"]):not(.ccard):not(.d3card):not(.zz):not(.zy) :is(h3,h4,dd,strong,b,.val){color:#111114!important}
section:is(.s-mag,.s-ora) :is(.mstep,.mstrip,.ci,[class*="card"]):not(.ccard):not(.d3card):not(.zz):not(.zy) :is(p,span,dt,li,.lab){color:#44444D!important}
section.s-mag .ctab:not(.zz):not(.zy):not(.zx):not(.zw){background:none!important;border:0!important}
section.s-mag .pico,section.s-ora .pico{background:#FF05F6!important;box-shadow:none!important}
section.s-mag .pico svg{stroke:#fff!important;color:#fff!important}
html body .mapwrap .scrim{background:none!important;background-color:transparent!important}
html body .mapbg .grid{background-color:transparent!important}

/* banner cookie: il padding delle sezioni .sec non deve toccare i bottoni */
.fcc-btn,.fcc-btn.sec,.fcc-btn.pri{padding:12px 16px!important}
.fcc-btn.pri{background:#FF9509!important;background-image:none!important;color:#111114!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.fcc-btn.sec{border:2px solid #fff!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.03em!important}