:root{
--cf-bg: #0b1220;
--cf-card: rgba(255,255,255,0.06);
--cf-border: rgba(255,255,255,0.12);
--cf-text: rgba(255,255,255,0.92);
--cf-muted: rgba(255,255,255,0.70);
--cf-accent: #ffd54a;      /* giallo “flash” */
--cf-accent2: #41d17f;     /* verde “ok” */
--cf-danger: #ff5a6a;
}

body{
background:
radial-gradient(1200px 600px at 10% 10%, rgba(255,213,74,0.20), transparent 60%),
radial-gradient(1000px 500px at 90% 20%, rgba(65,209,127,0.18), transparent 60%),
radial-gradient(900px 500px at 30% 90%, rgba(71,120,255,0.14), transparent 55%),
var(--cf-bg);
color: var(--cf-text);
}
.navbar{
background: rgba(11,18,32,0.55) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--cf-border);
}
.brand-pill{
display:inline-flex; align-items:center; gap:10px;
padding: 8px 12px;
/*border: 1px solid var(--cf-border);
background: rgba(255,255,255,0.04);
border-radius: 999px;*/
color: var(--cf-text);
}
.logo-mark{
width: 135px;
/*
height: 28px;
border-radius: 10px;
background: linear-gradient(135deg, var(--cf-accent), #ff9f2f);
display:inline-block;
box-shadow: 0 10px 26px rgba(255,213,74,0.22);
*/
}
.hero{padding: 92px 0 26px;}
.hero h1{
letter-spacing: -0.5px;
line-height: 1.05;
}
.hero .lead{
color: var(--cf-muted);
max-width: 58ch;
}
.btn-accent{
background: var(--cf-accent);
border: 0;
color: #111827;
font-weight: 800;
}
.btn-accent:hover{ filter: brightness(0.96); }
.btn-ghost{
border: 1px solid var(--cf-border);
background: rgba(255,255,255,0.05);
color: var(--cf-text);
}

.glass{
background: rgba(255,255,255,0.05);
border: 1px solid var(--cf-border);
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.kpi-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.kpi{
padding: 14px 14px;
border-radius: 16px;
border: 1px solid var(--cf-border);
background: rgba(255,255,255,0.05);
}
.kpi .label{ color: var(--cf-muted); font-size: 0.9rem; }
.kpi .value{ font-size: 1.35rem; font-weight: 900; }
.tag{
font-size: 0.82rem;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--cf-border);
background: rgba(255,255,255,0.04);
color: var(--cf-muted);
display:inline-flex; gap:8px; align-items:center;
}

.section{padding: 54px 0;}

.section-title{
font-weight: 900;
letter-spacing: -0.3px;
}
.muted{ color: var(--cf-muted); }

.feature{
padding: 18px;
border-radius: 18px;
border: 1px solid var(--cf-border);
background: rgba(255,255,255,0.05);
height: 100%;
}
.feature .icon{
width: 44px; height: 44px; border-radius: 14px;
display:flex; align-items:center; justify-content:center;
background: rgba(255,255,255,0.06);
border: 1px solid var(--cf-border);
margin-bottom: 12px;
font-size: 20px;
}

.how-step{
padding: 16px;
border-radius: 18px;
border: 1px solid var(--cf-border);
background: rgba(255,255,255,0.05);
height: 100%;
}
.step-num{
width: 34px; height: 34px; border-radius: 12px;
display:flex; align-items:center; justify-content:center;
background: rgba(255,213,74,0.12);
border: 1px solid rgba(255,213,74,0.30);
color: var(--cf-accent);
font-weight: 900;
margin-bottom: 10px;
}

.pricing-card{
padding: 22px;
border-radius: 20px;
border: 1px solid var(--cf-border);
background: rgba(255,255,255,0.05);
height: 100%;
position: relative;
overflow: hidden;
}
.pricing-card.popular{
border-color: rgba(255,213,74,0.55);
box-shadow: 0 24px 60px rgba(255,213,74,0.12);
}
.badge-pop{
position:absolute;
top: 14px; right: 14px;
background: rgba(255,213,74,0.20);
border: 1px solid rgba(255,213,74,0.45);
color: var(--cf-accent);
font-weight: 800;
}
.price{
font-size: 2.1rem;
font-weight: 950;
letter-spacing: -0.6px;
}
.price small{
font-size: 0.95rem;
color: var(--cf-muted);
font-weight: 700;
}
.check li{ margin-bottom: 10px; color: var(--cf-muted); }
.check li strong{ color: var(--cf-text); }

.faq .accordion-item{
background: rgba(255,255,255,0.05);
border: 1px solid var(--cf-border);
border-radius: 16px !important;
overflow: hidden;
}
.faq .accordion-button{
background: transparent;
color: var(--cf-text);
font-weight: 800;
}
.faq .accordion-button:focus{ box-shadow:none; }
.faq .accordion-button:not(.collapsed){
background: rgba(255,255,255,0.05);
color: var(--cf-text);
}
.faq .accordion-body{ color: var(--cf-muted); }

footer{
border-top: 1px solid var(--cf-border);
padding: 26px 0;
color: var(--cf-muted);
}




/* ===== CassaFlash Hero Carousel (Bootstrap) ===== */
.cf-slider{ padding:0; }

/* swipe: consenti scroll verticale pagina + swipe orizzontale */
#heroCarousel .carousel-inner{ touch-action: pan-y; }




/* padding interno slide */
.cf-slider .carousel-item{ padding: 10px 2px 6px; }

/* altezza stabile + spazio per i dots */
.cf-slider .carousel-inner{
min-height: 300px;       /* evita “salti” tra slide */
padding-bottom: 34px;    /* spazio tra contenuto e dots */
}

/* dots: più staccati e coerenti */
.cf-slider .carousel-indicators{bottom: 0px;margin-bottom: 0;}
.cf-slider .carousel-indicators [data-bs-target]{width:10px; height:10px; border-radius:999px;border:1px solid var(--cf-border);background: rgba(255,255,255,.10);opacity: 1;}
.cf-slider .carousel-indicators .active{background: var(--cf-accent);border-color: transparent;}

/* ===== Mini UI (usata nelle slide 4/5/6) ===== */
.mini-ui-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.mini-cal{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; }
.cal-cell{
height:34px;
border-radius:10px;
border:1px solid var(--cf-border);
background: rgba(255,255,255,.03);
display:flex; align-items:center; justify-content:center;
position:relative; overflow:hidden;
}
.cal-cell.ok{ background: rgba(25,135,84,.18); border-color: rgba(25,135,84,.35); }
.cal-cell.bad{ background: rgba(220,53,69,.18); border-color: rgba(220,53,69,.35); }
.cal-cell.empty{ background: rgba(255,255,255,.02); }

.cal-cell .dot{width:8px; height:8px; border-radius:99px;background: rgba(255,255,255,.55);}
.cal-cell .plus{width:18px; height:18px; border-radius:99px;display:flex; align-items:center; justify-content:center;border:1px dashed var(--cf-border);color:#fff; opacity:.7;}

/* Slide 5: dettagli */
.mini-details .rowx{display:flex; align-items:center; justify-content:space-between;padding: 6px 0;}
.mini-details hr{ border-color: rgba(255,255,255,.10); margin:10px 0; }
.num.pos{ color: var(--cf-accent2); }
.num.neg{ color:#ff6b6b; }

/* Slide 6: stats */
.mini-stats{ display:grid; gap:12px; }
.statrow{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.big{ font-size:1.1rem; font-weight:900; }
.spark{ display:flex; gap:6px; align-items:flex-end; height:32px; width:140px; }


.spark span{
width:10px; border-radius:6px;
background: rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.08);
}

.note-pill{
margin-top: 12px;
padding: 10px 12px;
border-radius: 14px;
border:1px solid var(--cf-border);
background: rgba(255,255,255,.03);
display:flex; gap:10px; align-items:center;
}

/* ===== Animazioni “replay” (solo quando JS aggiunge .replay) ===== */
@keyframes pulse{
0%,100%{ transform: scale(1); opacity:.6; }
50%{ transform: scale(1.35); opacity:1; }
}
@keyframes growbar{
from{ width:0%; }
to{ width: var(--w); }
}
@keyframes barpop{
from{ height:0%; opacity:.4; transform: translateY(6px); }
to{ height: var(--h); opacity:1; transform: translateY(0); }
}

/* stato base: niente animazione (evita loop continuo) */
.cal-cell .dot{ animation:none; }
.bar span{ animation:none; width: var(--w); }
.spark span{ animation:none; height: var(--h); }

/* replay quando cambia slide */
.cal-cell .dot.replay{ animation: pulse 1.9s ease-in-out infinite; }
.bar span.replay{ animation: growbar 1.2s ease forwards; }
.spark span.replay{ animation: barpop .9s ease forwards; }

@media (max-width: 768px){
.cf-slider .carousel-item{ padding: 8px 0 0; }
.spark{ width:120px; }
}

@media (max-width: 992px){
.cf-slider .carousel-inner{ min-height: 240px; }
.kpi-grid{ grid-template-columns: 1fr; }
.hero{ padding-top: 86px; }
}