/* =========================================================
   LIQUID GLASS – strato estetico per tutto il sito
   Per tornare allo stile precedente: togli il <link> a glass.css
   ========================================================= */
:root{
  --g-bg: rgba(255,255,255,.055);
  --g-bg-strong: rgba(255,255,255,.09);
  --g-border: rgba(255,255,255,.16);
  --g-blur: blur(22px) saturate(180%);
  --g-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 0 22px rgba(188,19,254,.06), 0 18px 50px rgba(0,0,0,.55);
  --g-radius: 26px;
}

/* Bagliori viola fissi dietro al vetro (danno colore alla rifrazione) */
body::before{content:"";position:fixed;inset:-20vmax;z-index:0;pointer-events:none;
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, rgba(188,19,254,.20), transparent 60%),
    radial-gradient(35vmax 35vmax at 85% 70%, rgba(110,60,255,.16), transparent 60%),
    radial-gradient(30vmax 30vmax at 60% 10%, rgba(255,80,200,.10), transparent 60%);
  animation: gFloat 24s ease-in-out infinite alternate;}
@keyframes gFloat{to{transform:translate3d(4vmax,-3vmax,0) scale(1.08)}}

/* Superficie di vetro comune */
.box,.qform,.me,.sec-glass,
.w-feature,.w-card,.w-tl,
.a-stats,.a-step,.a-val,.a-edu-item,
.form-panel,.pitch-box,.method-card,.card{
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 45%, rgba(188,19,254,.05)) !important;
  -webkit-backdrop-filter: var(--g-blur) !important; backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-border) !important;
  box-shadow: var(--g-shadow) !important;
  border-radius: var(--g-radius) !important;
  position: relative; overflow: hidden;
}
/* Riflesso speculare in alto */
.box::after,.qform::after,.me::after,.w-feature::after,.w-card::after,.a-step::after,.a-val::after,.a-stats::after,.form-panel::after,.method-card::after,.pitch-box::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%);
  mix-blend-mode: screen; opacity:.7;}
/* Hover: il vetro si "accende" */
.box:hover,.w-card:hover,.a-step:hover,.a-val:hover,.method-card:hover,.w-feature:hover{
  border-color: rgba(224,170,255,.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 30px rgba(188,19,254,.14), 0 22px 60px rgba(0,0,0,.6), 0 0 34px rgba(188,19,254,.25) !important;}

/* Homepage: i pannelli scuri delle sezioni diventano trasparenti */
.sec::before{background: transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;}
.box.featured{border-color: rgba(224,170,255,.55) !important;}

/* Menu: pillola di vetro flottante */
.hero-nav{
  background: rgba(255,255,255,.06); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-border); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px rgba(0,0,0,.5);
  padding: 10px 22px !important; width: fit-content; margin-left:auto; margin-right:auto;}
.page-header{background: transparent !important; box-shadow:none !important;}
.page-header::after,.page-header::before{opacity:.35}
.hero-nav a{padding:4px 6px;border-radius:999px}
.hero-nav a.active{background: rgba(188,19,254,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); text-shadow:none !important; padding:4px 12px;}

/* Pulsanti di vetro */
.cta-btn,.w-btn,.a-btn,.pick-btn,.btn-submit,.q-submit{
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.45) !important;}
.cta-primary,.w-btn-primary,.a-btn,.q-submit,.btn-submit,.featured .pick-btn{
  background: linear-gradient(180deg, rgba(210,90,255,.85), rgba(160,20,240,.85)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 6px rgba(80,0,120,.35), 0 10px 30px rgba(188,19,254,.45) !important;}
.cta-ghost,.w-btn-ghost,.pick-btn{background: rgba(255,255,255,.07) !important;}
.cta-btn:hover,.w-btn:hover,.a-btn:hover,.pick-btn:hover{transform: translateY(-2px) scale(1.02);}

/* Chips, badge, tag, input */
.chip,.w-badge,.badge,.w-tags span{
  background: rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.18) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius:999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);}
.chip.on{background: linear-gradient(180deg, rgba(210,90,255,.8), rgba(160,20,240,.8)) !important; border-color: rgba(255,255,255,.35) !important;}
.q-input,.form-control{
  background: rgba(0,0,0,.28) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:14px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4) !important;}
.q-input:focus,.form-control:focus{border-color: rgba(224,170,255,.6) !important; box-shadow: 0 0 0 4px rgba(188,19,254,.18) !important;}
.faq details{background: rgba(255,255,255,.05) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border:1px solid var(--g-border) !important; border-radius:18px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2);}

/* Mockup e miniature dentro il vetro */
.w-browser,.w-thumb{border-radius:16px !important; border:1px solid rgba(255,255,255,.14) !important;}
.w-bar{background: rgba(255,255,255,.06) !important; border-bottom:1px solid rgba(255,255,255,.1) !important;}
.w-phone{border-color: rgba(255,255,255,.18) !important; border-radius:26px !important;}
.w-cta{border-style: dashed !important;}

/* WhatsApp in vetro verde */
.wa-float{background: linear-gradient(180deg, rgba(60,230,130,.9), rgba(30,190,95,.9)) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 30px rgba(0,0,0,.5) !important;}

/* Contenuti sopra i bagliori */
.matrix-hero,.sec,.site-foot,main,header,footer{position:relative;z-index:2}
#matrix{z-index:1 !important}

/* Mobile: meno blur per fluidità */
@media (max-width: 768px){
  :root{--g-blur: blur(14px) saturate(170%); --g-radius: 22px;}
  .hero-nav{padding: 8px 14px !important; gap: 8px !important;}
}
/* Chi preferisce meno trasparenza */
@media (prefers-reduced-transparency: reduce){
  .box,.qform,.w-card,.w-feature,.a-step,.a-val,.form-panel{background: rgba(20,16,28,.95) !important;}
}

.btn-submit,.q-submit,.cta-primary,.w-btn-primary,.a-btn{color:#fff !important;text-shadow:0 1px 2px rgba(60,0,90,.5)}
.btn-submit *,.q-submit *{color:#fff !important}
@media (max-width: 768px){
  .hero-nav{flex-wrap:nowrap !important; white-space:nowrap; gap:2px !important; padding:6px 8px !important; max-width:calc(100vw - 20px)}
  .hero-nav a{font-size:11px !important; letter-spacing:.5px !important; padding:6px 8px !important; margin:0 !important}
  .hero-nav a.active{padding:6px 10px !important}
}



/* Homepage: stesso header delle altre pagine */
.page-header .hero-nav{margin-bottom:0 !important}
body.home .page-header{position:fixed !important;top:0;left:0;width:100%}
body.home .matrix-hero{padding-top:64px}
html{scroll-padding-top:90px}

/* Homepage: il LED si accende scendendo nella pagina */
@keyframes ledOn{
  0%{opacity:0}8%{opacity:.9}12%{opacity:.05}22%{opacity:.8}26%{opacity:.1}
  40%{opacity:1}46%{opacity:.25}60%,100%{opacity:1}}
body.home .page-header::after,body.home .hero-nav::after{transition:opacity .35s ease}
body.home:not(.led-on) .page-header::after,
body.home:not(.led-on) .hero-nav::after{opacity:0 !important;animation:none !important;box-shadow:none !important}
body.home.led-on .page-header::after{animation:ledOn .9s linear both, glitchNeon 4s infinite normal .9s !important}
@media (max-width:768px){
  body.home.led-on .hero-nav::after{animation:ledOn .9s linear both, glitchNeon 4s infinite normal .9s !important}
}

/* Homepage: anche il vetro del menu compare insieme al LED */
body.home .hero-nav{transition:background .6s ease,border-color .6s ease,box-shadow .6s ease,-webkit-backdrop-filter .6s ease,backdrop-filter .6s ease}
body.home:not(.led-on) .hero-nav{background:transparent !important;border-color:transparent !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
@media (max-width:768px){
  body.home .page-header{transition:background .6s ease}
  body.home:not(.led-on) .page-header{background:transparent !important}
}
/* Homepage: anche la sfocatura dietro al menu parte con il LED */
body.home .page-header{transition:background .6s ease,-webkit-backdrop-filter .6s ease,backdrop-filter .6s ease}
body.home:not(.led-on) .page-header{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:transparent !important}

/* Pulsante pioggia di bit ON/OFF */
#matrix{transition:opacity .6s ease}
html.matrix-off #matrix{opacity:0 !important}
#matrix-toggle{position:fixed;left:18px;bottom:18px;z-index:9998;display:flex;align-items:center;gap:8px;
  height:42px;padding:0 14px 0 10px;border-radius:999px;cursor:pointer;color:#f3e8ff;
  font:700 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(188,19,254,.10));
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px rgba(0,0,0,.5),0 0 16px rgba(188,19,254,.25);
  transition:transform .2s,box-shadow .3s,opacity .3s}
#matrix-toggle:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 28px rgba(0,0,0,.55),0 0 24px rgba(188,19,254,.45)}
#matrix-toggle:focus-visible{outline:2px solid #e0aaff;outline-offset:3px}
.mt-ico{display:inline-flex;gap:1px;font:700 13px/1 'Courier New',monospace;color:#d85cff;text-shadow:0 0 8px #bc13fe}
.mt-ico i{font-style:normal;animation:mtBlink 1.4s infinite}
.mt-ico i+i{animation-delay:.7s}
@keyframes mtBlink{50%{opacity:.35}}
html.matrix-off #matrix-toggle{color:#a99bb8;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 24px rgba(0,0,0,.5)}
html.matrix-off .mt-ico{color:#6b5a7a;text-shadow:none}
html.matrix-off .mt-ico i{animation:none}
@media (max-width:768px){#matrix-toggle{left:12px;bottom:12px;height:38px;padding:0 10px}.mt-txt{display:none}}
@media (prefers-reduced-motion: reduce){.mt-ico i{animation:none}}

/* ===== MENU MOBILE IN BASSO (liquid glass, stile Instagram) ===== */
.m-tabbar{display:none}
@media (max-width:768px){
  .page-header{display:none !important}
  body:not(.home-page) .content-wrapper{padding-top:28px !important}
  body.home .matrix-hero{padding-top:0}
  .m-tabbar{display:flex;position:fixed;z-index:10000;left:50%;transform:translateX(-50%);
    bottom:calc(12px + env(safe-area-inset-bottom));width:min(420px,calc(100% - 24px));padding:6px;
    justify-content:space-between;border-radius:999px;
    background:linear-gradient(180deg,rgba(40,30,55,.78),rgba(14,9,22,.82) 60%,rgba(30,8,45,.84));
    -webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
    border:1px solid rgba(255,255,255,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.08),0 12px 36px rgba(0,0,0,.6),0 0 24px rgba(188,19,254,.18)}
  .m-tabbar a{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:7px 2px 6px;border-radius:999px;color:rgba(255,255,255,.62);text-decoration:none;
    font:600 10px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.2px;transition:color .3s;-webkit-tap-highlight-color:transparent}
  .m-tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .m-tabbar a.on{color:#fff}
  .m-tabbar a.on svg{transform:scale(1.08);filter:drop-shadow(0 0 6px rgba(216,92,255,.8));stroke:#e9b8ff}
  .m-tabbar a:active svg{transform:scale(.88)}
  .m-bubble{position:absolute;left:0;top:6px;bottom:6px;z-index:0;border-radius:999px;opacity:0;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(210,150,255,.10) 60%,rgba(188,19,254,.18));
    border:1px solid rgba(255,255,255,.28);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 6px rgba(188,19,254,.25),0 4px 14px rgba(188,19,254,.3);
    transition:transform .5s cubic-bezier(.3,1.35,.5,1),width .5s cubic-bezier(.3,1.35,.5,1),opacity .3s}
  /* spazio in fondo e pulsanti flottanti sopra la barra */
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  #matrix-toggle{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
  .wa-float,#wa-float{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){.m-bubble,.m-tabbar svg{transition:none}}
/* Desktop: le sezioni si fermano sotto al menu */
@media (min-width:769px){html{scroll-padding-top:0 !important}.sec{scroll-margin-top:-6px}}

/* ---- Menu PC: bolla di vetro (A) + punto LED (C) ---- */
@media (min-width:769px){
  .hero-nav.dn{position:relative}
  .hero-nav.dn a{position:relative;z-index:1;transition:color .3s,opacity .3s;opacity:.6}
  .hero-nav.dn a.dn-on,.hero-nav.dn a:hover{opacity:1;color:#fff}
  .hero-nav.dn a.active{background:none !important;box-shadow:none !important;padding:4px 6px}
  .dn-bubble{position:absolute;left:0;top:50%;height:calc(100% - 8px);margin-top:calc(-50% + 0px);translate:0 -50%;margin-top:0;z-index:0;border-radius:999px;pointer-events:none;opacity:0;
    background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(188,19,254,.22));
    border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 18px rgba(188,19,254,.45);
    -webkit-backdrop-filter:blur(8px) saturate(180%);backdrop-filter:blur(8px) saturate(180%);
    transition:transform .5s cubic-bezier(.3,1.35,.5,1),width .5s cubic-bezier(.3,1.35,.5,1),opacity .3s}
  .dn-dot{position:absolute;left:0;bottom:-1px;width:6px;height:6px;border-radius:50%;background:#fff;z-index:2;pointer-events:none;opacity:0;
    box-shadow:0 0 6px #fff,0 0 12px #bc13fe,0 0 22px #bc13fe;
    transition:transform .55s cubic-bezier(.3,1.35,.5,1),opacity .3s}
  body.home:not(.led-on) .dn-bubble,body.home:not(.led-on) .dn-dot{opacity:0 !important}
  body.home:not(.led-on) .hero-nav.dn a{opacity:1}
}
@media (max-width:768px){.dn-bubble,.dn-dot{display:none}}
/* Menu PC: solo punto LED (niente bolla) */
@media (min-width:769px){
  .hero-nav.dn .dn-bubble{display:none !important}
  .hero-nav.dn a.dn-on{text-shadow:0 0 10px rgba(188,19,254,.9) !important}
  .hero-nav.dn .dn-dot{bottom:1px}
}