/* Tomo · minimal: carta chiara, inchiostro, un solo accento arancio. Pagine corte, una idea per pagina. */
:root{
  --bg:#F6F3EC; --card:#FFFFFF; --ink:#161512; --muted:#5F5A50; --line:#E2DDD2; --acc:#E4572E; --acc-soft:#FBE3DA; --ok:#2E8B57; --no:#B5412F;
  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:'Figtree',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#121110; --card:#1C1B19; --ink:#F2EEE6; --muted:#B3AC9F; --line:#2F2C28; --acc:#F07152; --acc-soft:#3A221B; --ok:#5CC08A; --no:#E07A66; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body);min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
.wrap{width:100%;max-width:980px;margin:0 auto;padding-inline:20px}
h1,h2,h3,p{margin:0}
h1,h2{text-wrap:balance}
h1{font:800 clamp(46px,9vw,92px)/.9 var(--display);text-transform:uppercase}
h1 em{font-style:normal;color:var(--acc)}
h2{font:800 clamp(30px,5vw,46px)/.95 var(--display);text-transform:uppercase}
h3{font:700 18px/1.3 var(--body)}
.k{font:500 12px var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.lead{font-size:20px;color:var(--muted);max-width:46ch}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;text-decoration:none;font:700 16px var(--body);border:0;border-radius:999px;padding:15px 26px;cursor:pointer}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.wide{width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

/* header: logo + 3 voci + bottone, sempre visibili */
.top{border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:22px;padding-block:14px;flex-wrap:wrap}
.logo{font:800 30px var(--display);text-transform:uppercase;text-decoration:none;letter-spacing:1px;margin-right:auto}
.nav{display:flex;gap:20px}
.nav a{text-decoration:none;font-weight:600;font-size:15px;color:var(--muted)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:0 2px 0 var(--acc)}
.top .btn{padding:10px 18px;font-size:14px}
@media (max-width:640px){.top-in{gap:12px}.nav{order:3;width:100%;justify-content:space-between}}

main{flex:1;padding-block:56px 72px}
.stack{display:flex;flex-direction:column;gap:22px}
.gap-l{margin-top:48px}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr)}}
.dev{justify-self:center;width:min(230px,60vw);aspect-ratio:62/98;border-radius:36px;background:var(--acc);padding:11px;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.dev .s{height:100%;border-radius:25px;background:#080807;color:#F4F1EA;padding:18px 15px;display:flex;flex-direction:column;justify-content:space-between}
.dev .t{font:500 10px var(--mono);color:#8E8A82}
.dev .c{font:800 54px/.9 var(--display)}
.dev .m{background:#F2A62B;color:#161512;border-radius:10px;padding:9px 10px;font:800 15px var(--display);text-transform:uppercase}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){.three{grid-template-columns:minmax(0,1fr)}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px}
.tile p{color:var(--muted);font-size:15px}
.tile .n{font:800 34px/1 var(--display);color:var(--acc)}

/* righe paura -> risposta */
.rows{border-top:1px solid var(--line)}
.r{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.r b{font:800 21px/1.1 var(--display);text-transform:uppercase}
.r span{color:var(--muted)}
@media (max-width:560px){.r{grid-template-columns:minmax(0,1fr);gap:4px}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat b{display:block;font:800 44px/1 var(--display);color:var(--acc)}
.stat span{font-size:14px;color:var(--muted)}
.quote{border-left:4px solid var(--acc);padding:6px 0 6px 18px;font-size:19px}

/* liste si/no: colori fissi, leggibili in chiaro e in scuro */
.yn{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.yn li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.yn li::before{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 12px var(--mono);color:#fff;margin-top:2px}
.yn li.y::before{content:"✓";background:var(--ok)}
.yn li.n::before{content:"✕";background:var(--no)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:700px){.cols{grid-template-columns:minmax(0,1fr)}}

/* come funziona */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s;list-style:none;padding:0;margin:0}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.steps li::before{content:counter(s);display:block;font:800 40px/1 var(--display);color:var(--acc)}
.steps b{display:block;font:800 24px var(--display);text-transform:uppercase;margin-top:6px}
.steps span{color:var(--muted);font-size:15px}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
@media (max-width:640px){.feat{grid-template-columns:minmax(0,1fr)}}
.feat div{padding:12px 0;border-bottom:1px solid var(--line)}
.feat b{display:block}
.feat span{color:var(--muted);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px dashed var(--muted);border-radius:999px;padding:7px 14px;font-weight:600;font-size:15px;color:var(--muted);text-decoration:line-through;text-decoration-color:var(--no)}
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
.spec div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px}
.spec small{display:block;font:500 11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.spec b{font-size:15px}

/* domande */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:800 24px/1 var(--display);color:var(--acc)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:8px}

/* lista d'attesa */
.join{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
@media (max-width:760px){.join{grid-template-columns:minmax(0,1fr)}}
.form{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0;min-width:0}
.fld label,.fld legend{font-weight:700;font-size:14px;color:var(--ink)}
.fld input,.fld select,.fld textarea{font:16px var(--body);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);width:100%}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:420px){.two{grid-template-columns:minmax(0,1fr)}}
.ck{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink)}
.ck input{margin-top:3px;width:18px;height:18px;accent-color:var(--acc);flex-shrink:0}
.ck.small{font-size:13px;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{font-weight:700;min-height:24px}
.msg.ok{color:var(--ok)}.msg.err{color:var(--no)}

.foot{border-top:1px solid var(--line);padding-block:22px;font-size:13px;color:var(--muted)}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
.foot a{color:var(--muted)}

/* animazione home: due Tomo si toccano, mamma approva */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:28px}
@media (max-width:760px){.demo{grid-template-columns:minmax(0,1fr)}}
.scene{position:relative;height:260px;overflow:hidden}
.mini{position:absolute;top:60px;width:74px;height:116px;border-radius:18px;padding:6px;box-shadow:0 12px 24px rgba(0,0,0,.15);animation-duration:9s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.mini span{display:flex;align-items:flex-end;height:100%;border-radius:12px;background:#080807;color:#F4F1EA;font:800 16px var(--display);text-transform:uppercase;padding:8px}
.mini.a{left:6%;background:var(--acc);animation-name:ma}
.mini.b{right:6%;background:#2F6B8A;animation-name:mb}
@keyframes ma{0%,8%{transform:translateX(0)}22%,26%{transform:translateX(calc(50% + 22px)) rotate(-4deg)}36%,100%{transform:translateX(0)}}
@keyframes mb{0%,8%{transform:translateX(0)}22%,26%{transform:translateX(calc(-50% - 22px)) rotate(4deg)}36%,100%{transform:translateX(0)}}
.tac{position:absolute;left:50%;top:20px;transform:translateX(-50%) scale(.5);font:800 34px var(--display);text-transform:uppercase;color:var(--acc);opacity:0;animation:tac 9s infinite}
@keyframes tac{0%,21%{opacity:0;transform:translateX(-50%) scale(.5)}24%{opacity:1;transform:translateX(-50%) scale(1.15)}32%{opacity:1;transform:translateX(-50%) scale(1)}38%,100%{opacity:0}}
.ask{position:absolute;left:50%;bottom:6px;width:min(250px,90%);transform:translate(-50%,30px);opacity:0;background:var(--bg);border:2px solid var(--acc);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;animation:ask 9s infinite}
.ask small{font:500 10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.ask b{font-size:15px}
.ask em{font-style:normal;align-self:flex-end;background:var(--ink);color:var(--bg);border-radius:10px;padding:6px 12px;font-weight:700;font-size:13px;animation:press 9s infinite}
@keyframes ask{0%,36%{opacity:0;transform:translate(-50%,30px)}42%,66%{opacity:1;transform:translate(-50%,0)}72%,100%{opacity:0;transform:translate(-50%,0)}}
@keyframes press{0%,58%{transform:scale(1)}61%{transform:scale(.9)}64%,100%{transform:scale(1)}}
.done{position:absolute;left:50%;top:22px;transform:translateX(-50%);font:800 34px var(--display);text-transform:uppercase;color:var(--ok);opacity:0;animation:done 9s infinite}
@keyframes done{0%,68%{opacity:0}74%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mini,.tac,.ask,.ask em,.done{animation:none}.ask,.done{opacity:1}.done{top:auto;bottom:110px}}
/* Desktop: più aria e testo più grande */
@media (min-width:1000px){
body{font-size:19px}
.wrap{max-width:1240px;padding-inline:48px}
main .wrap.stack{gap:34px;padding-block:72px 110px}
.top-in{padding-block:22px;gap:36px}
.nav{gap:30px}.nav a{font-size:17px}
.top .btn{padding:13px 24px;font-size:16px}
h1{font-size:clamp(80px,8vw,124px)}
h2{font-size:clamp(46px,4.4vw,64px)}
.lead{font-size:24px}
.hero{gap:72px;min-height:62vh}
.dev{transform:scale(1.25);transform-origin:center}
.three,.steps,.feat,.stats,.spec{gap:22px}
.tile,.steps li,.feat>div,.stat{padding:30px}
.tile h3{font-size:24px}
.tile p,.steps span,.feat span,.stat span,.spec b,.chips span{font-size:17px}
.gap-l{margin-top:72px}
.demo{padding:52px;gap:64px}
.scene{transform:scale(1.15);transform-origin:center}
.quote{font-size:24px}
.faq summary{font-size:20px}
.foot{font-size:15px}
}