/* Font ospitati qui (OFL): nessuna richiesta a Google. Solo il sottoinsieme latin, basta per italiano e inglese. */
@font-face{font-family:'Lexend';src:url(/fonts/lexend-variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/fonts/atkinson-hyperlegible-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/fonts/atkinson-hyperlegible-700.woff2) format('woff2');font-weight:700;font-display:swap}
/* Layout: titolo enorme a sinistra e simbolo che si disegna a destra; nastro di categorie a tutta larghezza; due porte; promesse in righe con titolo fermo a lato; chiamata finale su strong. */
:root{
  --bg:#FBF2EE; --surface:#FFFFFF; --soft:#F5E4DF; --ink:#2E2225; --muted:#5E4D51; --line:#EAD7D1;
  --primary:#F2A3B3; --strong:#A33A59;
  --c1:#F9D3D9; --c2:#FBD9BF; --c3:#FCE5A4; --c4:#DCE8CF; --c5:#E6DCF1; --star:#D9821F;
  --glow:rgb(242 163 179 / .55);
  --shadow:0 1px 2px rgb(60 35 30 / .06), 0 24px 48px -28px rgb(60 35 30 / .45);
  --f-disp:'Lexend', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --gut:clamp(20px, 4vw, 48px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:clamp(18px, .5vw + 15px, 20px);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--f-disp);letter-spacing:-.015em;margin:0;text-wrap:balance;overflow-wrap:normal;hyphens:manual}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--strong);outline-offset:4px;border-radius:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}
main{display:flex;flex-direction:column;gap:clamp(72px, 10vw, 136px)}

/* Testata */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;color:var(--strong);font:700 30px/1 var(--f-disp);letter-spacing:-.02em}
.brand svg{width:40px;height:40px}
.f-house{fill:var(--strong)} .f-heart{fill:var(--primary)} .f-bg{fill:var(--bg)}
.seg{display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--soft)}
.seg button{min-height:48px;min-width:60px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:700 18px/1 var(--f-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgb(60 35 30 / .18);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* Hero */
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(24px, 4vw, 56px);align-items:center;padding-block:clamp(8px, 3vw, 40px) 0}
.glow{position:absolute;left:78%;top:50%;width:min(640px, 120vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side, var(--glow), transparent);transform:translate(-50%,-50%);pointer-events:none;z-index:-1}
.h1{font-size:clamp(42px, 5.8vw, 88px);line-height:1.02;font-weight:700}
.h1 span{display:block}
.rot{display:grid;margin-top:14px;font:600 clamp(28px, 3.4vw, 48px)/1.15 var(--f-disp);letter-spacing:-.015em;color:var(--strong)}
.rot span{grid-area:1/1;opacity:0;transform:translateY(.55em);transition:opacity .45s ease, transform .6s var(--ease)}
.rot span.on{opacity:1;transform:none}
.rot span.out{opacity:0;transform:translateY(-.55em)}
.lead{margin-top:24px;max-width:34ch;font-size:clamp(20px, 1.6vw, 24px);color:var(--muted)}

/* Bottoni store */
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
.store{flex:0 1 auto;display:inline-flex;align-items:center;gap:14px;min-height:68px;padding:10px 30px 10px 24px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;transition:transform .25s var(--ease), box-shadow .25s}
.store:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.store svg{width:30px;height:30px;flex:none;fill:currentColor}
.store span{display:flex;flex-direction:column;line-height:1.1}
.store small{font-size:16px}
.store b{font:600 22px/1.2 var(--f-disp)}
.soon-row{flex-basis:100%}
.soon{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--c3);color:var(--ink);font-weight:700;font-size:17px}
.soon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.soon.ping{animation:ping .6s var(--ease)}
.stores.light .store{background:var(--bg);color:var(--ink)}

/* Simbolo */
.stage{position:relative;width:min(100%, 500px);aspect-ratio:1;max-width:100%;justify-self:center;display:grid;place-items:center}
.sun{position:absolute;top:1%;right:3%;width:21%;aspect-ratio:1;border-radius:50%;background:var(--c3)}
.disc{position:absolute;inset:7%;border-radius:50%;background:var(--surface);box-shadow:var(--shadow)}
.mark{position:relative;width:60%;height:auto;overflow:visible}
.h-fill{fill:var(--strong)}
.h-line{fill:none;stroke:var(--strong);stroke-width:12;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.half{fill:var(--primary);transform-box:fill-box;transform-origin:center}
.heart{transform-box:fill-box;transform-origin:50% 55%}

/* Nastro delle categorie (decorativo: le stesse categorie sono scritte nella sezione dopo) */
.ribbon{overflow:hidden;padding-block:8px;-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.track{display:flex;width:max-content}
.set{display:flex;gap:16px;padding-right:16px}
.cat{display:inline-flex;align-items:center;gap:12px;min-height:76px;padding:0 30px 0 24px;border-radius:999px;font:600 clamp(22px, 2.4vw, 30px)/1 var(--f-disp);letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.cat svg{width:30px;height:30px}
.k1{background:var(--c1)} .k2{background:var(--c2)} .k3{background:var(--c3)} .k4{background:var(--c4)} .k5{background:var(--c5)}
.ico{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Sezioni */
h2{font-size:clamp(34px, 4.6vw, 62px);line-height:1.05;font-weight:700}
.sec-head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(28px, 4vw, 48px)}
.sec-head p{font-size:clamp(20px, 1.6vw, 23px);color:var(--muted)}

/* Due porte */
.doors{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 400px), 1fr));gap:20px}
.door{--fill:var(--primary);position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:16px;min-height:360px;padding:clamp(28px, 4vw, 48px);border-radius:clamp(28px, 3vw, 40px);background:var(--surface);box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.door.offer{--fill:var(--c4)}
.door::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);transform:translateY(calc(100% - 12px));transition:transform .6s var(--ease)}
.door:hover::before,.door:focus-visible::before{transform:none}
.door-ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--soft)}
.door-ic svg{width:32px;height:32px}
.door h3{font-size:clamp(40px, 5.4vw, 76px);line-height:1;font-weight:700}
.door p{font-size:clamp(20px, 1.6vw, 23px);max-width:28ch}
.go{margin-top:auto;display:inline-flex;align-items:center;gap:14px;font:600 20px/1.2 var(--f-disp)}
.arrow{width:60px;height:60px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);transition:transform .4s var(--ease)}
.arrow svg{width:26px;height:26px}
.door:hover .arrow,.door:focus-visible .arrow{transform:translateX(8px)}

/* Promesse */
.trust{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px, 5vw, 72px);align-items:start}
.trust h2{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 32px)}
.prs{list-style:none;margin:0;padding:0}
.pr{view-timeline:--pr block;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px, 3vw, 36px);align-items:start;padding-block:clamp(28px, 3.5vw, 44px);border-top:2px solid var(--line)}
.pr:last-child{border-bottom:2px solid var(--line)}
.pr-ic{width:clamp(72px, 7vw, 96px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.pr-ic svg{width:52%;height:auto;overflow:visible;stroke-width:1.8}
.pr h3{font-size:clamp(28px, 3.2vw, 44px);line-height:1.12;font-weight:600}
.pr p{margin-top:12px;max-width:44ch;font-size:clamp(20px, 1.6vw, 23px);color:var(--muted)}
.star{fill:var(--star)}
.dot{fill:var(--ink);stroke:none}
.pulse{stroke:var(--strong);opacity:0;transform-box:fill-box;transform-origin:center}
.note{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:clamp(20px, 1.6vw, 22px)}
.note svg{width:30px;height:30px;flex:none;color:var(--strong)}

/* Chiamata finale */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px, 4vw, 56px);align-items:center;padding:clamp(36px, 6vw, 80px);border-radius:clamp(32px, 4vw, 56px);background:var(--strong);color:var(--bg)}
.cta h2{font-size:clamp(42px, 6vw, 84px)}
.cta p{margin-top:12px;max-width:32ch;font-size:clamp(20px, 1.8vw, 26px)}
.cta :focus-visible{outline-color:var(--bg)}
.cta-mk{width:clamp(150px, 22vw, 300px);height:auto;overflow:visible}

/* Piede */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:clamp(40px, 6vw, 72px);padding-block:24px 40px;border-top:2px solid var(--line);color:var(--muted);font-size:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px}
.foot a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--ink);text-underline-offset:4px}

@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
  .stage{order:-1;width:min(76vw, 320px)}
  .glow{left:50%;top:20%}
  .trust{grid-template-columns:1fr}
  .trust h2{position:static}
  .cta{grid-template-columns:1fr}
  .cta-mk{order:-1;width:120px}
  .store{flex:1 1 240px}
}

/* Movimento */
@media (prefers-reduced-motion: no-preference){
  .disc{animation:pop .9s var(--ease) both}
  .sun{animation:rise 1.2s var(--ease) .5s both}
  .h-line{animation:draw 1.7s cubic-bezier(.6,0,.3,1) .2s both}
  .h-fill{animation:fade .7s ease 1.3s both}
  .half-l{animation:in-l .9s var(--ease) 1.6s both}
  .half-r{animation:in-r .9s var(--ease) 1.6s both}
  .heart{animation:beat 5s ease-in-out 2.45s infinite}
  .cta-mk .heart{animation-delay:0s}
  .h1 span,.rot,.lead,.hero .stores{animation:up .8s var(--ease) both}
  .h1 .l1{animation-delay:.1s} .h1 .l2{animation-delay:.22s} .rot{animation-delay:.34s} .lead{animation-delay:.46s} .hero .stores{animation-delay:.58s}
  .track{animation:marquee 70s linear infinite}
  .ribbon:hover .track{animation-play-state:paused}
  .pulse{animation:pulse 2.6s ease-out infinite}
  @supports (animation-timeline: view()){
    .reveal{animation:up linear both;animation-timeline:view();animation-range:entry 5% entry 70%}
    .pr .d{stroke-dasharray:1;animation:draw linear both;animation-timeline:--pr;animation-range:entry 30% cover 45%}
    .shackle{animation:close linear both;animation-timeline:--pr;animation-range:cover 38% cover 52%}
    .star{animation:fillin linear both;animation-timeline:--pr;animation-range:cover 32% cover 50%}
  }
}
@media (prefers-reduced-motion: reduce){
  .track{width:auto;flex-wrap:wrap;justify-content:center}
  .set{flex-wrap:wrap;justify-content:center;padding:0}
  .dup{display:none}
  .rot span{transition:none}
  .door::before,.arrow,.store{transition:none}
}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}}
@keyframes in-l{from{transform:translateX(-420px) rotate(-10deg);opacity:0}}
@keyframes in-r{from{transform:translateX(420px) rotate(10deg);opacity:0}}
@keyframes beat{0%,16%,100%{transform:scale(1)}5%{transform:scale(1.1)}10%{transform:scale(.97)}}
@keyframes pop{from{transform:scale(.85);opacity:0}}
@keyframes rise{from{transform:translateY(45%);opacity:0}}
@keyframes up{from{transform:translateY(28px);opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pulse{from{transform:scale(.55);opacity:.9}to{transform:scale(1.45);opacity:0}}
@keyframes close{from{transform:translateY(-3.5px)}}
@keyframes fillin{from{fill-opacity:0}}
@keyframes ping{40%{transform:scale(1.1)}}

/* Pagine di testo: privacy, termini, aiuto. Una colonna stretta, testo grande, niente contenuti nascosti. */
.brand img{width:40px;height:40px}
.doc{max-width:46rem;padding-block:clamp(8px, 2vw, 32px) 0}
.back{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-weight:700;color:var(--strong);text-underline-offset:4px}
.back svg{width:24px;height:24px;flex:none}
.doc h1{margin-top:16px;font-size:clamp(40px, 5vw, 64px);line-height:1.05;font-weight:700}
.updated{margin-top:12px;color:var(--muted)}
.doc h2{margin-top:clamp(44px, 5vw, 60px);font-size:clamp(28px, 3vw, 38px);line-height:1.15;font-weight:600;scroll-margin-top:24px}
.doc h3{margin-top:32px;font-size:clamp(22px, 2.2vw, 26px);line-height:1.25;font-weight:600;scroll-margin-top:24px}
.doc p,.doc li,.doc dd{font-size:clamp(19px, 1.4vw, 21px);line-height:1.6}
.doc p{margin-top:14px}
.doc ul,.doc ol{display:grid;gap:8px;margin:14px 0 0;padding-left:1.4em}
.doc a{color:var(--strong);text-decoration-thickness:2px;text-underline-offset:4px}
.brief{margin-top:28px;padding:clamp(22px, 3vw, 32px);border-radius:28px;background:var(--surface);box-shadow:var(--shadow)}
.brief h2{margin-top:0;font-size:clamp(24px, 2.4vw, 30px)}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0;list-style:none}
.doc .toc a{display:inline-flex;align-items:center;min-height:52px;padding:0 20px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line);color:var(--ink);font-weight:700;text-decoration:none}
.doc .toc a:hover{box-shadow:inset 0 0 0 2px var(--strong)}
.vendors{display:grid;gap:12px;margin:18px 0 0}
.vendors div{padding:18px 22px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line)}
.vendors dt{font:600 21px/1.3 var(--f-disp)}
.vendors dd{margin:6px 0 0}
.page{display:block}
.todo{padding:0 6px;border-radius:6px;background:var(--c3);color:var(--ink);font-weight:700}
.doc a.write{display:inline-flex;align-items:center;gap:12px;min-height:60px;margin-top:20px;padding:0 28px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 20px/1.2 var(--f-disp);text-decoration:none}
.write svg{width:24px;height:24px;flex:none}
.doc .note-it{margin-top:28px;color:var(--muted)}