/* BistroIQ marketing — shared styles. Anti-slop: una scala, un blu, un'ambra. */
:root{--bg:#FBF8F1;--dark:#0F2233;--dark2:#142B3D;--blu:#2E7DA8;--blu-l:#8FC1DC;--ambra:#B45309;--oro:#F2C078;--testo:#22313C;--muto:#6E7B85;--card:#fff;--tinta:#EAF1F6;--linea:#E4E0D6;--ok:#3E7D5A}
*{margin:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--testo);-webkit-font-smoothing:antialiased}
.eb{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--blu)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:var(--blu)}
h1,h2,h3,.serif{font-family:Georgia,serif;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;margin:12px 0 14px}
p.lead{color:var(--muto);font-size:16px;line-height:1.65;max-width:620px}
/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(251,248,241,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:Georgia,serif;font-weight:700;font-size:21px;color:var(--testo);text-decoration:none}.logo b{color:var(--blu);font-weight:700}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--muto);text-decoration:none;font-size:14px;font-weight:500}.nav-links a:hover{color:var(--testo)}
.burger{display:none;background:none;border:0;font-size:26px;color:var(--testo);cursor:pointer;line-height:1;padding:6px}
@media(max-width:840px){
 .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--linea);flex-direction:column;align-items:flex-start;padding:18px 24px;gap:16px}
 .nav-links.open{display:flex}
 .burger{display:block}
}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:13px 24px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn .t{position:relative;z-index:2}
.btn-p{background:var(--blu);color:#fff}.btn-p:hover{background:var(--dark2)}
.btn-o{background:transparent;color:var(--testo);border:1.5px solid var(--linea)}.btn-o:hover{border-color:var(--blu)}
.btn-g{background:var(--oro);color:var(--dark)}
.btn-sm{padding:9px 18px;font-size:14px}
/* hero scuro */
.hero-dark{position:relative;background:radial-gradient(1100px 500px at 75% -10%,#1d4360 0%,var(--dark) 55%);color:#fff;overflow:hidden;padding:44px 0 96px}
.hero-dark .gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(143,193,220,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(143,193,220,.09) 1px,transparent 1px);background-size:46px 46px;animation:scan 11s linear infinite;mask-image:radial-gradient(700px 420px at 70% 20%,#000 30%,transparent 75%)}
@keyframes scan{to{background-position:46px 46px}}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:gal 9s ease-in-out infinite alternate}
.orb.oa{width:340px;height:340px;background:#2E7DA8;top:-120px;right:6%}.orb.ob{width:260px;height:260px;background:#8a5a1e;bottom:-60px;left:4%;animation-delay:-4s}
@keyframes gal{to{transform:translateY(26px) scale(1.06)}}
.hero-dark>.wrap{position:relative}
.hero-dark h1{font-size:clamp(34px,4.8vw,58px);line-height:1.07;margin:14px 0 18px}
.hero-dark h1 em{font-style:normal;color:var(--oro)}
.hero-dark p{color:#C9D8E2;font-size:17px;line-height:1.65;max-width:560px}
.hero-dark .eb{color:var(--blu-l)}
/* sezioni */
section{padding:88px 0}
.sec-h{max-width:680px;margin-bottom:46px}
/* card */
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--linea);border-radius:18px;padding:26px;text-decoration:none;color:var(--testo);display:block;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(26,42,54,.1)}
.card h3{font-size:20px;margin:12px 0 8px}
.card p{color:var(--muto);font-size:14px;line-height:1.6}
.card .ic{width:40px;height:40px;border-radius:12px;background:var(--tinta);display:grid;place-items:center;font-size:17px}
.tagchip{display:inline-block;background:var(--tinta);color:var(--blu);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;letter-spacing:.06em}
.tagchip.free{background:#E3EFE7;color:var(--ok)}.tagchip.paid{background:#F7E8D4;color:var(--ambra)}
/* lista lezioni */
.lez{list-style:none}
.lez li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--linea);font-size:15px}
.lez .n{font-family:Georgia,serif;font-weight:700;color:var(--blu);min-width:28px}
.lez small{color:var(--muto);margin-left:auto;white-space:nowrap}
/* checklist */
.ck{list-style:none}.ck li{display:flex;gap:12px;padding:9px 0;font-size:15px;line-height:1.55}
.ck .c{color:var(--blu);font-weight:800}
/* cta band */
.cta-band{background:linear-gradient(135deg,var(--dark) 20%,#1d4360);border-radius:26px;color:#fff;padding:64px 48px;text-align:center;position:relative;overflow:hidden}
.cta-band .gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;animation:scan 12s linear infinite}
.cta-band>*{position:relative}
.cta-band h2{color:#fff}.cta-band p{color:#C9D8E2;max-width:540px;margin:0 auto 26px;line-height:1.6}
/* breadcrumb */
.crumbs{font-size:13px;color:var(--muto);margin-bottom:18px}.crumbs a{color:var(--muto);text-decoration:none}.crumbs a:hover{color:var(--blu)}
/* footer */
footer{padding:52px 0 30px;border-top:1px solid var(--linea)}
footer .wrap{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center}
footer small{color:var(--muto)}
footer .cols{display:flex;gap:40px;flex-wrap:wrap;font-size:14px}
footer .cols a{display:block;color:var(--muto);text-decoration:none;margin-top:8px}
footer .cols b{color:var(--testo)}
/* motion */
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
/* responsive */
@media(max-width:680px){section{padding:60px 0}.cta-band{padding:44px 22px;border-radius:18px}}


/* ===== LANDING WOW ===== */

/* Counter band: numeri che contano on scroll */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.stats-band b {
  opacity: 0;
  animation: count-up .6s ease forwards;
  animation-delay: var(--cd, 0ms);
}

/* Bento card: 3D tilt on mouse move */
.bento-tilt {
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Card corsi: entrance stagger */
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.grid3 .card {
  opacity: 0;
  animation: card-in .45s ease forwards;
}
.grid3 .card:nth-child(1) { animation-delay: 0ms; }
.grid3 .card:nth-child(2) { animation-delay: 70ms; }
.grid3 .card:nth-child(3) { animation-delay: 140ms; }
.grid3 .card:nth-child(4) { animation-delay: 210ms; }
.grid3 .card:nth-child(5) { animation-delay: 280ms; }
.grid3 .card:nth-child(6) { animation-delay: 350ms; }

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .stats-band b,.grid3 .card{opacity:1!important;animation:none!important;transform:none!important}
  .bento-tilt{transition:none}
}

/* ---- pagine legali (privacy / cookie) ---- */
.legal{max-width:760px}
.legal h2{font-family:Georgia,'Times New Roman',serif;font-size:22px;margin:26px 0 8px;color:var(--scuro)}
.legal p{color:#3c4a54;line-height:1.7;font-size:15.5px}
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.tbl th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muto);padding:10px 12px;border-bottom:2px solid var(--linea)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--linea);color:#3c4a54;vertical-align:top}

/* ---- sezione storia: scroll-scrub (tecnica scroll-world, asset reali) ---- */
.storia-container{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;max-width:1200px;margin:0 auto;padding:0 24px;align-items:start}
.storia-sticky{position:sticky;top:80px;height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center}
.storia-frame{position:absolute;opacity:0;transform:scale(.94);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.storia-frame.active{opacity:1;transform:scale(1)}
.storia-frame-phone{width:270px;border:8px solid #10151C;border-radius:32px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.storia-frame-phone img{display:block;width:100%;height:auto}
.storia-frame-desktop{width:min(640px,80%);border:8px solid #10151C;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.storia-frame-desktop img{display:block;width:100%;height:auto}
.storia-steps{display:flex;flex-direction:column;gap:0;padding:20vh 0 20vh}
.storia-step{min-height:60vh;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 20px;border-left:2px solid #232830;opacity:.35;transition:opacity .4s ease,border-color .4s ease}
.storia-step.active{opacity:1;border-left-color:var(--blu)}
.storia-step h3{color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:22px;margin:8px 0 10px}
.storia-step p{color:#9FB6C4;font-size:15px;line-height:1.6}
.storia-num{font-family:monospace;font-size:12px;color:var(--blu);letter-spacing:.2em}
.storia-progress{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.storia-dot{width:8px;height:8px;border-radius:50%;background:#232830;transition:background .3s}
.storia-dot.active{background:var(--blu)}
@media(max-width:840px){
  .storia-container{grid-template-columns:1fr;gap:24px}
  .storia-sticky{position:relative;top:0;height:auto;padding:40px 0 20px}
  .storia-frame{position:relative;opacity:0;margin-bottom:16px}
  .storia-frame-phone{width:220px;margin:0 auto}
  .storia-frame-desktop{width:100%;max-width:400px;margin:0 auto}
  .storia-step{min-height:auto;padding:16px 0 16px 20px}
  .storia-steps{padding:0}
  .storia-progress{display:none}
}