:root{--bg:#aeb9c2;--bg2:#94a3ad;--red:#e21d2f;--yellow:#ffd21f;--radius:28px;--safe:clamp(18px,3vw,48px);--gap:clamp(14px,2vw,28px);--shadow:0 18px 50px rgba(0,0,0,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#fff}body{overscroll-behavior-y:contain}button,a{font:inherit}button{border:0;cursor:pointer}a{color:inherit;text-decoration:none}.touch-page{min-height:100vh;padding:var(--safe);background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.11),transparent 30%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.07),transparent 25%),linear-gradient(135deg,var(--bg),var(--bg2));position:relative;overflow-x:hidden}.touch-page.dark{background:#050505}.touch-page.light{background:#f5f5f1;color:#111}.dot-field:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.24;background-image:radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 1.2px);background-size:34px 34px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;position:sticky;top:0;z-index:30;padding:4px 0 14px;background:linear-gradient(to bottom,rgba(159,173,184,.98),rgba(159,173,184,.88),rgba(159,173,184,0))}.dark .topbar{background:linear-gradient(to bottom,rgba(5,5,5,.98),rgba(5,5,5,.88),rgba(5,5,5,0))}.light .topbar{background:linear-gradient(to bottom,rgba(245,245,241,.98),rgba(245,245,241,.88),rgba(245,245,241,0))}.brand{display:flex;align-items:center;gap:10px;font-size:clamp(12px,1vw,16px);letter-spacing:.12em;text-transform:uppercase;font-weight:700}.brand-mark{width:12px;height:30px;border-radius:999px;background:var(--red);display:inline-block;box-shadow:8px 0 0 var(--red)}.nav{display:flex;gap:10px}.icon-btn{min-width:52px;height:52px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.18);color:inherit;border:1px solid rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;gap:8px}.light .icon-btn{background:#fff;border-color:#ddd}.breadcrumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:clamp(11px,1vw,15px);opacity:.85;margin:0 0 14px}.breadcrumbs a,.breadcrumbs span{display:inline-flex;align-items:center;gap:8px}.breadcrumbs a:not(:last-child):after,.breadcrumbs span:not(:last-child):after{content:"›";opacity:.55}.eyebrow{font-size:clamp(11px,1vw,15px);letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--yellow)}.light .eyebrow{color:var(--red)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(46px,7vw,106px);line-height:.92;letter-spacing:-.055em;margin-bottom:.22em}h2{font-size:clamp(34px,4.8vw,76px);line-height:.96;letter-spacing:-.04em;margin-bottom:.25em}h3{font-size:clamp(20px,2.2vw,34px);line-height:1.08}p{font-size:clamp(16px,1.55vw,24px);line-height:1.42}.lead{font-size:clamp(19px,2vw,30px);max-width:44em}.center{text-align:center}.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:999px;background:#fff;color:#111;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.12)}.pill.red{background:var(--red);color:#fff}.pill.ghost{background:transparent;color:inherit;border:1px solid currentColor;box-shadow:none}.pill:active,.icon-btn:active,.tile:active,.card:active,.lens:active{transform:scale(.98)}.hero{min-height:calc(100vh - 110px);display:flex;align-items:center;justify-content:center;text-align:center;position:relative}.hero-inner{max-width:1100px;position:relative;z-index:2}.tap-icon{width:92px;height:92px;margin:28px auto 10px;border:3px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:44px;animation:pulse 1.9s ease-in-out infinite}@keyframes pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,210,31,.2)}50%{transform:scale(1.05);box-shadow:0 0 0 18px rgba(255,210,31,0)}}.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);align-items:stretch;margin-top:30px}.tile{border-radius:999px 999px 34px 34px;background:#fff;color:#111;min-height:430px;padding:34px 22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;box-shadow:var(--shadow);position:relative;overflow:hidden;text-align:center}.tile .cap{width:100%;aspect-ratio:1;border:2px solid #222;border-radius:50%;display:grid;place-items:center;padding:18px;font-weight:800;font-size:clamp(18px,1.6vw,26px)}.tile .ghost-body{flex:1;width:100%;display:grid;place-items:center;color:#999;font-size:72px}.tile:after{content:"Tocca";position:absolute;bottom:22px;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:#666}.section{padding:clamp(28px,5vh,70px) 0}.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.card{position:relative;border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.12);min-height:260px;padding:28px;color:inherit;border:1px solid rgba(255,255,255,.22);box-shadow:var(--shadow);text-align:left}.light .card{background:#fff;border-color:#ddd}.card .icon{font-size:64px;margin-bottom:22px}.card .tag{font-size:12px;text-transform:uppercase;letter-spacing:.13em;opacity:.65}.placeholder{border-radius:var(--radius);min-height:260px;display:grid;place-items:center;text-align:center;padding:28px;color:#fff;font-weight:800;font-size:clamp(18px,2vw,32px);letter-spacing:.03em;position:relative;overflow:hidden}.placeholder:before,.placeholder:after{content:"";position:absolute;border-radius:50%;opacity:.35}.placeholder:before{width:180px;height:180px;left:-40px;top:-50px;background:#fff}.placeholder:after{width:220px;height:220px;right:-50px;bottom:-70px;background:#000}.ph-red{background:linear-gradient(135deg,#d72638,#ff7b54)}.ph-blue{background:linear-gradient(135deg,#2b59c3,#5bc0eb)}.ph-cyan{background:linear-gradient(135deg,#3bb6b0,#9be8d8)}.ph-purple{background:linear-gradient(135deg,#6f2dbd,#b298dc)}.ph-green{background:linear-gradient(135deg,#2f8f46,#97d66c)}.ph-yellow{background:linear-gradient(135deg,#e0a800,#ffdd57)}.ph-pink{background:linear-gradient(135deg,#b83280,#ff8cc6)}.ph-orange{background:linear-gradient(135deg,#f97316,#facc15)}.ph-black{background:linear-gradient(135deg,#090909,#343434)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}.feature-list{display:grid;gap:16px;margin-top:22px}.feature{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}.light .feature{background:#fff;border-color:#ddd}.carousel-wrap{position:relative;margin-top:20px}.carousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px 6px 18px;touch-action:pan-x;-webkit-overflow-scrolling:touch}.carousel::-webkit-scrollbar{height:8px}.carousel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:999px}.carousel-card{flex:0 0 clamp(260px,34vw,470px);scroll-snap-align:center;border-radius:var(--radius);overflow:hidden;background:#fff;color:#111;box-shadow:var(--shadow);min-height:420px;display:flex;flex-direction:column}.carousel-card .visual{min-height:280px}.carousel-card .copy{padding:22px}.carousel-controls{display:flex;justify-content:center;gap:12px;margin-top:10px}.arrow-btn{width:58px;height:58px;border-radius:50%;background:#fff;color:#111;font-size:26px;box-shadow:var(--shadow)}.scroll-hint{text-align:center;font-size:13px;opacity:.68;margin-top:6px}.lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}.lens{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(18px,2vw,30px);font-weight:800;color:#fff;box-shadow:inset 0 0 0 8px rgba(255,255,255,.25),var(--shadow)}.color-list{display:grid;gap:12px;max-width:520px;margin:0 auto}.color-row{min-height:68px;padding:0 24px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800}.full-bleed{margin-left:calc(var(--safe) * -1);margin-right:calc(var(--safe) * -1);padding-left:var(--safe);padding-right:var(--safe)}.black-section{background:#060606;color:#fff;padding-top:70px;padding-bottom:70px}.light-section{background:#f8f8f4;color:#111;padding-top:70px;padding-bottom:70px}.droplet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:1000px;margin:30px auto}.drop{aspect-ratio:.75;clip-path:polygon(50% 0,94% 40%,82% 82%,50% 100%,18% 82%,6% 40%);display:grid;place-items:center;font-weight:800;color:#fff}.timeline{position:relative;max-width:1000px;margin:0 auto}.timeline:before{content:"";position:absolute;left:24px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.25)}.timeline-block{position:relative;padding:0 0 54px 76px}.timeline-block:before{content:"";position:absolute;left:14px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--red);box-shadow:0 0 0 8px rgba(226,29,47,.15)}.timeline-block h3{color:var(--red)}.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:24px}.modal.open{display:flex}.modal-panel{width:min(1100px,96vw);height:min(760px,92vh);background:#fff;color:#111;border-radius:30px;overflow:hidden;position:relative;display:grid;grid-template-columns:1.3fr .7fr;box-shadow:0 30px 100px rgba(0,0,0,.6)}.modal-visual{min-height:100%;display:grid;place-items:center;font-size:34px;font-weight:800;color:#fff;position:relative}.modal-copy{padding:46px;display:flex;flex-direction:column;justify-content:center}.modal-close{position:absolute;right:18px;top:18px;width:52px;height:52px;border-radius:50%;background:#eee;color:#111;font-size:28px;z-index:2}.modal-dots{display:flex;gap:8px;margin-top:14px}.modal-dots i{width:11px;height:11px;border-radius:50%;background:#ccc}.modal-dots i.on{background:#111}.footer{padding:26px 0 4px;font-size:11px;opacity:.6;text-align:center}.inline-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.stack{display:grid;gap:var(--gap)}.note{font-size:13px;opacity:.66}@media (orientation:portrait){.menu-grid{grid-template-columns:repeat(2,1fr)}.tile{min-height:360px}.hub-grid,.lens-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}.droplet-grid{grid-template-columns:repeat(3,1fr)}.modal-panel{grid-template-columns:1fr;grid-template-rows:1.1fr .9fr;height:94vh}}@media (max-width:700px){.menu-grid,.hub-grid,.lens-grid{grid-template-columns:1fr}.droplet-grid{grid-template-columns:repeat(2,1fr)}}


/* =========================================================
   PAGE TRANSITIONS
   Vanilla CSS + JS, pensate per Chromium 94 / Tizen.
   Solo transform e opacity per mantenere il carico leggero.
   Le transizioni cambiano ciclicamente a ogni navigazione.
   ========================================================= */

.page-transition{
  position:fixed;
  inset:-2px;
  z-index:9999;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,0,0);
  will-change:transform,opacity;
}

body.is-navigating{
  overflow:hidden;
}

/* FADE */
body.page-exit-fade .touch-page,
body.page-exit-fade > main{
  animation:pageFadeOut .42s ease both;
}
body.page-enter-fade .touch-page,
body.page-enter-fade > main{
  animation:pageFadeIn .50s ease both;
}
@keyframes pageFadeOut{
  from{opacity:1}
  to{opacity:0}
}
@keyframes pageFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* ZOOM IN */
body.page-exit-zoom-in .touch-page,
body.page-exit-zoom-in > main{
  animation:pageZoomInOut .46s cubic-bezier(.4,0,.2,1) both;
  transform-origin:center center;
}
body.page-enter-zoom-in .touch-page,
body.page-enter-zoom-in > main{
  animation:pageZoomInEnter .54s cubic-bezier(.2,.7,.2,1) both;
  transform-origin:center center;
}
body.page-exit-zoom-in .page-transition{
  visibility:visible;
  background:rgba(0,0,0,.22);
  animation:overlayFadeIn .46s ease both;
}
@keyframes pageZoomInOut{
  from{opacity:1;transform:scale3d(1,1,1)}
  to{opacity:.18;transform:scale3d(1.075,1.075,1)}
}
@keyframes pageZoomInEnter{
  from{opacity:.15;transform:scale3d(1.065,1.065,1)}
  to{opacity:1;transform:scale3d(1,1,1)}
}

/* ZOOM OUT */
body.page-exit-zoom-out .touch-page,
body.page-exit-zoom-out > main{
  animation:pageZoomOutOut .46s cubic-bezier(.4,0,.2,1) both;
  transform-origin:center center;
}
body.page-enter-zoom-out .touch-page,
body.page-enter-zoom-out > main{
  animation:pageZoomOutEnter .54s cubic-bezier(.2,.7,.2,1) both;
  transform-origin:center center;
}
body.page-exit-zoom-out .page-transition{
  visibility:visible;
  background:rgba(255,255,255,.12);
  animation:overlayFadeIn .46s ease both;
}
@keyframes pageZoomOutOut{
  from{opacity:1;transform:scale3d(1,1,1)}
  to{opacity:.12;transform:scale3d(.91,.91,1)}
}
@keyframes pageZoomOutEnter{
  from{opacity:.14;transform:scale3d(.92,.92,1)}
  to{opacity:1;transform:scale3d(1,1,1)}
}

/* SLIDE */
body.page-exit-slide-left .touch-page,
body.page-exit-slide-left > main{
  animation:pageSlideOut .44s cubic-bezier(.45,0,.25,1) both;
}
body.page-enter-slide-left .touch-page,
body.page-enter-slide-left > main{
  animation:pageSlideIn .52s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes pageSlideOut{
  from{opacity:1;transform:translate3d(0,0,0)}
  to{opacity:.15;transform:translate3d(-8vw,0,0)}
}
@keyframes pageSlideIn{
  from{opacity:.15;transform:translate3d(7vw,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* GRADIENT WIPE - WARM */
body.page-exit-wipe-warm .page-transition{
  visibility:visible;
  opacity:1;
  background:linear-gradient(115deg,#e21d2f 0%,#f97316 48%,#ffd21f 100%);
  animation:wipeFromLeft .52s cubic-bezier(.55,0,.25,1) both;
}
body.page-enter-wipe-warm .page-transition{
  visibility:visible;
  opacity:1;
  background:linear-gradient(115deg,#e21d2f 0%,#f97316 48%,#ffd21f 100%);
  animation:wipeToRight .58s cubic-bezier(.55,0,.25,1) both;
}

/* GRADIENT WIPE - COOL */
body.page-exit-wipe-cool .page-transition{
  visibility:visible;
  opacity:1;
  background:linear-gradient(115deg,#2b59c3 0%,#3bb6b0 48%,#6f2dbd 100%);
  animation:wipeFromRight .52s cubic-bezier(.55,0,.25,1) both;
}
body.page-enter-wipe-cool .page-transition{
  visibility:visible;
  opacity:1;
  background:linear-gradient(115deg,#2b59c3 0%,#3bb6b0 48%,#6f2dbd 100%);
  animation:wipeToLeft .58s cubic-bezier(.55,0,.25,1) both;
}

@keyframes wipeFromLeft{
  from{transform:translate3d(-102%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes wipeToRight{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(102%,0,0)}
}
@keyframes wipeFromRight{
  from{transform:translate3d(102%,0,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes wipeToLeft{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-102%,0,0)}
}
@keyframes overlayFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* Su browser/monitor meno performanti resta possibile disattivare
   globalmente le transizioni aggiungendo ?transitions=off all'URL. */
body.no-page-transitions .page-transition{
  display:none!important;
}
body.no-page-transitions .touch-page,
body.no-page-transitions > main{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
}