/* SfriBox · stile comune di teaser e sito beta (colori e font dal brand book) */
:root{
  --cobalto:#1F3FD1; --notte:#0E1A4F; --crema:#F2E6CF; --oro:#D4932F;
  --kraft:#E9DCC0; --scoppio:#FF5A36; --bianco:#FFFFFF; --grigio:#565E80;
  --display:"Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:17px;line-height:1.5;color:var(--notte);background:var(--crema);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--oro);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.label{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
h1,h2,h3,.price{font-family:var(--display);font-weight:400;line-height:1.05}
h2{font-size:clamp(32px,5vw,48px);margin-bottom:12px}
.lead{font-size:clamp(18px,2.2vw,21px);max-width:38em}
section{padding:72px 0}
.btn{display:inline-block;font-weight:700;font-size:17px;text-decoration:none;border-radius:999px;padding:14px 26px}
.btn-crema{background:var(--crema);color:var(--cobalto)}
.btn-crema:hover{background:var(--bianco)}
.btn-cobalto{background:var(--cobalto);color:var(--bianco)}
.btn-cobalto:hover{background:var(--notte)}
.badge{display:inline-block;background:var(--scoppio);color:var(--notte);padding:6px 12px;border-radius:6px}

/* la box del logo, disegnata in CSS */
.obox{position:relative;aspect-ratio:1;width:100%}
.obox .box{position:absolute;inset:8%;border:clamp(30px,6vw,62px) solid var(--crema);border-radius:22%}
.obox .nug{position:absolute;inset:34%;background:var(--oro);border-radius:42% 48% 40% 46%;transform:rotate(-8deg)}

/* ---------- teaser ---------- */
.teaser{min-height:100vh;min-height:100svh;background:var(--cobalto);color:var(--crema);display:flex;flex-direction:column}
.teaser main{flex:1;display:flex;align-items:center;padding:48px 0}
.teaser .inner{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.teaser .logo{height:clamp(46px,7vw,72px);width:auto;margin-bottom:40px}
.teaser h1{font-size:clamp(48px,8vw,96px);margin:18px 0 22px}
.teaser .lead{margin-bottom:34px}
.teaser .obox{max-width:420px;justify-self:center}
.teaser .obox .nug{animation:sfrigola 3.2s ease-in-out infinite}
@keyframes sfrigola{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-4deg) scale(1.04)}}
.social{display:flex;flex-wrap:wrap;gap:12px}
.social a{font-weight:700;text-decoration:none;border:2px solid var(--crema);border-radius:999px;padding:12px 22px}
.social a:hover{background:var(--crema);color:var(--cobalto)}
.teaser footer{padding:20px 0 24px;font-size:12px;opacity:.75}
@media (prefers-reduced-motion:reduce){.teaser .obox .nug{animation:none}}

/* ---------- sito: testata e menu ---------- */
.beta-bar{background:var(--scoppio);color:var(--notte);text-align:center;padding:6px 12px}
.site-head{background:var(--cobalto);color:var(--crema);position:sticky;top:0;z-index:10}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.site-head .home img{height:36px;width:auto}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{font-weight:600;font-size:15px;text-decoration:none;padding:8px 12px;border-radius:999px}
.site-nav a:hover{background:rgba(242,230,207,.15)}
.site-nav a[aria-current="page"]{background:var(--crema);color:var(--cobalto)}

/* intestazione delle pagine interne */
.page-head{background:var(--cobalto);color:var(--crema);padding:56px 0 64px}
.page-head h1{font-size:clamp(40px,7vw,72px);margin:14px 0 14px}

/* home */
.hero{background:var(--cobalto);color:var(--crema);padding:40px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}
.hero .badge{margin-bottom:22px}
.hero h1{font-size:clamp(46px,8vw,88px);margin-bottom:22px}
.hero .lead{margin-bottom:32px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.apps{color:var(--crema);opacity:.85;font-size:15px}
.hero .obox{max-width:420px;justify-self:center}
.hero .tag{position:absolute;right:0;bottom:6%;background:var(--notte);color:var(--crema);padding:12px 16px;border-radius:10px;transform:rotate(4deg)}
.hero .tag b{display:block;font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:0;text-transform:none}

/* schede box */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.card{background:var(--bianco);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px;border:2px solid transparent}
.card.star{border-color:var(--cobalto);position:relative}
.card.star::before{content:"La più presa";position:absolute;top:-13px;left:20px;background:var(--scoppio);color:var(--notte);font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:5px}
.card h3{font-size:28px;color:var(--cobalto)}
.card .who{font-weight:700}
.card p{font-size:15px;flex:1}
.price{font-size:44px;color:var(--cobalto)}
.price small{font-size:55%}
.card .label{color:var(--grigio)}
.extra{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.extra div{background:var(--kraft);border-radius:14px;padding:18px 20px;font-size:15px}
.note{margin-top:20px;font-size:13px;color:var(--grigio)}

/* listino alla carta */
.listino{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 40px;margin-top:32px}
.listino h3{font-size:26px;color:var(--cobalto);margin-bottom:10px}
.listino ul{list-style:none}
.listino li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #DDD3BF}
.listino li span:last-child{font-weight:700;white-space:nowrap}

/* blocchi scuri */
.dark{background:var(--notte);color:var(--crema)}
.blue{background:var(--cobalto);color:var(--crema)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:40px}
.steps .n{font-family:var(--display);font-size:52px;color:var(--oro);line-height:1}
.steps h3{font-family:var(--body);font-weight:800;font-size:20px;margin:10px 0 6px}
.steps p{font-size:15px;opacity:.9}
.manifesto blockquote{font-size:clamp(20px,2.6vw,26px);line-height:1.45;max-width:34em}
.manifesto blockquote p+p{margin-top:16px}
.manifesto .end{font-family:var(--display);font-size:clamp(34px,5vw,52px);margin-top:28px;line-height:1.05}

/* zona e righe informative */
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.rows{list-style:none;margin-top:20px;display:grid;gap:10px}
.rows li{background:var(--bianco);border-radius:12px;padding:14px 18px;display:flex;justify-content:space-between;gap:12px}
.rows li span:last-child{font-weight:700;text-align:right}
.radar{aspect-ratio:1;max-width:380px;width:100%;justify-self:center;border-radius:50%;background:radial-gradient(circle,var(--oro) 0 7%,transparent 7.5%),repeating-radial-gradient(circle,transparent 0 15%,rgba(31,63,209,.18) 15% 15.6%),var(--kraft);position:relative}
.radar span{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);color:var(--cobalto)}

/* faq e testi */
.faq{max-width:46em;margin-top:24px}
.faq details{background:var(--bianco);border-radius:14px;padding:18px 22px;margin-bottom:12px}
.faq summary{font-weight:700;font-size:18px;cursor:pointer}
.faq details p{margin-top:10px}
.prose{max-width:44em}
.prose h2{font-size:clamp(26px,4vw,34px);margin:36px 0 10px}
.prose p,.prose ul{margin-bottom:14px}
.prose ul{padding-left:22px}
.todo{background:var(--kraft);border-left:4px solid var(--scoppio);border-radius:8px;padding:14px 18px;margin:20px 0;font-size:15px}

/* piede */
.site-foot{background:var(--notte);color:var(--crema);padding:48px 0 36px;font-size:14px}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.site-foot img{height:36px;width:auto;margin-bottom:14px}
.site-foot p{opacity:.85;max-width:36em}
.site-foot p+p{margin-top:8px}
.site-foot .links{display:grid;gap:8px}
.legal{margin-top:32px;padding-top:20px;border-top:1px solid rgba(242,230,207,.2);opacity:.7;font-size:12px}

@media (max-width:900px){
  .hero-grid,.two,.teaser .inner{grid-template-columns:1fr}
  .hero .obox,.teaser .obox{max-width:280px;order:-1}
  .grid4,.steps{grid-template-columns:1fr 1fr}
  .grid3,.listino{grid-template-columns:1fr}
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px;padding-bottom:8px}
  .site-nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;justify-content:flex-start;scrollbar-width:none}
  .site-nav a{white-space:nowrap}
}
@media (max-width:560px){
  body{font-size:16px}
  section{padding:56px 0}
  .wrap{padding:0 16px}
  .hero{padding-bottom:56px}
  .hero .obox,.teaser .obox{max-width:220px}
  .teaser .logo{margin-bottom:28px}
  .teaser .inner{gap:28px}
  .grid4,.steps,.extra{grid-template-columns:1fr}
}