/* ==========================================================================
SINAPPS — Redesign "Prova" · sistema visivo ispirato a oryzo.ai
Un oggetto protagonista (il fulmine), scene cinematiche, superfici morbide.
========================================================================== */
/* Font di brand (00_BRAND_IDENTITY/FONT): Helvetica Neue = voce (titoli, claim, menu) · Helvetica = testo e interfaccia */
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-UltraLight.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-Thin.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:url("../fonts/HelveticaNeue-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica";src:url("../fonts/Helvetica-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica";src:url("../fonts/Helvetica-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica";src:url("../fonts/Helvetica-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica";src:url("../fonts/Helvetica-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
--night:#05040f;
--night-2:#0c0a2a;
--night-3:#15123f;
--cream:#f3f2fa;
--cream-2:#e6e3f4;
--cream-3:#d9d5ee;
--ink:#0a0830;
--ink-2:#2b2769;
--blue:#3500f7;
--blue-2:#5a3bff;
--blue-3:#8b78ff;
--lime:#caff00;
--lime-2:#a8d400;
--pink:#f100f1;
--muted:rgba(243,242,250,.62);
--muted-2:rgba(243,242,250,.4);
--line:rgba(243,242,250,.14);
--glass:rgba(255,255,255,.06);
--glass-line:rgba(255,255,255,.14);
--display:"Helvetica Neue",Helvetica,Arial,sans-serif; /* voce: claim, titoli, menu */
--sans:Helvetica,"Helvetica Neue",Arial,sans-serif; /* testo: paragrafi, descrizioni */
--mono:Helvetica,"Helvetica Neue",Arial,sans-serif; /* interfaccia: label, pill, meta (Helvetica, maiuscolo spaziato) */
--e-out:cubic-bezier(.16,1,.3,1);
--e-ui:cubic-bezier(.4,0,.1,1);
--e-inout:cubic-bezier(.645,.045,.355,1);
--gutter:clamp(20px,3vw,44px);
--pill:100px;
--r-card:22px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:auto}
body{background:var(--night);color:var(--cream);font-family:var(--sans);font-size:15px;line-height:1.35;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.no-scroll{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0;font-weight:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
/* ---------- Tipografia ----------
Gerarchia ripresa da sinapps.it: Helvetica Neue Bold per i claim, Light/Thin per titoli e
testi introduttivi, Medium per i titoletti; Helvetica per paragrafi e interfaccia. */
.display{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:.95}
.d-xxl{font-size:clamp(4.2rem,11vw,12rem);font-weight:700;letter-spacing:-.045em;line-height:.86}
.d-xl{font-size:clamp(3rem,7.2vw,7.6rem);font-weight:700;letter-spacing:-.04em;line-height:.92}
.d-l{font-size:clamp(2.2rem,4.6vw,4.8rem);font-weight:700;letter-spacing:-.035em;line-height:.96}
.d-m{font-size:clamp(1.7rem,2.8vw,2.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.04}
.d-s{font-size:clamp(1.2rem,1.6vw,1.5rem);font-weight:500;letter-spacing:-.015em;line-height:1.1}
.lead{font-family:var(--sans);font-size:clamp(1.05rem,1.35vw,1.35rem);line-height:1.35;font-weight:300}
.lead b{font-weight:700}
.label{font-family:var(--mono);font-size:.7rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.label-s{font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.muted{color:var(--muted)}
.lime{color:var(--lime)}
.pink{color:var(--pink)}
.blue{color:var(--blue-3)}
.fn{color:var(--lime);font-size:.5em;vertical-align:super;margin-left:.1em;font-weight:500}
.caps{text-transform:uppercase}
.wm{display:block;width:100%;height:auto}
/* ---------- Bottoni / pill ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 22px;border-radius:var(--pill);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border:1px solid var(--glass-line);color:var(--cream);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .3s var(--e-ui),color .3s var(--e-ui),border-color .3s var(--e-ui),transform .3s var(--e-ui)}
.pill:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.pill.lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.pill.lime:hover{background:#dbff4a;border-color:#dbff4a}
.pill.blue{background:var(--blue);border-color:var(--blue);color:var(--cream)}
.pill.blue:hover{background:var(--blue-2);border-color:var(--blue-2)}
.pill.ink{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pill.ink:hover{background:var(--ink-2);border-color:var(--ink-2)}
.pill.sm{height:34px;padding:0 14px;font-size:.6rem}
.pill .arr{font-family:var(--sans);font-size:1rem;line-height:1}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor}
/* ---------- Superfici ---------- */
.glass{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-card);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card{border-radius:var(--r-card);padding:clamp(20px,2.4vw,34px)}
.cross{position:absolute;width:12px;height:12px;pointer-events:none;opacity:.5}
.cross::before,.cross::after{content:"";position:absolute;background:currentColor}
.cross::before{left:0;top:5px;width:12px;height:1px}
.cross::after{left:5px;top:0;width:1px;height:12px}
.cross.tl{left:-6px;top:-6px}.cross.tr{right:-6px;top:-6px}.cross.bl{left:-6px;bottom:-6px}.cross.br{right:-6px;bottom:-6px}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,");opacity:.55;mix-blend-mode:screen}
/* ---------- Canvas & sfondo ---------- */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bg{position:fixed;inset:0;z-index:-1;background:
radial-gradient(60% 50% at 70% 30%,rgba(53,0,247,.55),transparent 70%),
radial-gradient(40% 40% at 15% 85%,rgba(241,0,241,.16),transparent 70%),
radial-gradient(50% 45% at 85% 90%,rgba(202,255,0,.08),transparent 70%),
linear-gradient(180deg,#07061a 0%,#05040f 100%)}
.bg::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");mix-blend-mode:screen;opacity:.7}
.bolt-fallback{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:0;pointer-events:none}
.bolt-fallback svg{width:52vw;filter:drop-shadow(0 0 60px rgba(53,0,247,.6))}
body.no-webgl .bolt-fallback{display:flex}
/* ---------- Loader: logo che si compone + linea perimetrale + zoom-in ---------- */
.loader{position:fixed;inset:0;z-index:1000;background:var(--night);display:flex;align-items:center;justify-content:center;transition:background-color .9s var(--e-inout) .35s,visibility 0s linear 1.4s}
.loader.out{visibility:hidden}
.loader.zoom{background-color:rgba(5,4,15,0)}
.ld-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity .45s var(--e-ui)}
.ld-edge rect{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.loader.zoom .ld-edge{opacity:0}
.ld-logo{width:min(72vw,560px);will-change:transform,opacity;transform-origin:50% 50%}
.loader.zoom .ld-logo{transform:scale(18);opacity:0;transition:transform 1.25s cubic-bezier(.76,0,.24,1),opacity .5s var(--e-ui) .6s}
.ld-svg{width:100%;height:auto;overflow:visible;display:block}
.ld-svg .bolt{fill:var(--blue);fill-rule:evenodd;fill-opacity:var(--fill,0);stroke:var(--blue);stroke-width:7;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}
.ld-svg .lt{fill:var(--cream);fill-opacity:var(--lf,0);stroke:var(--cream);stroke-width:1.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--ld,0))}
.ld-count{position:absolute;left:var(--gutter);bottom:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--lime);font-variant-numeric:tabular-nums;transition:opacity .35s}
.loader.zoom .ld-count{opacity:0}
/* la pagina entra con un leggero zoom-in mentre il logo esce di scena */
body.ld #nastro,body.ld .page{opacity:0;transform:scale(1.045);transform-origin:50% 42%}
body.ld.is-ready #nastro,body.ld.is-ready .page{opacity:1;transform:none;transition:opacity 1s var(--e-out) .15s,transform 1.5s var(--e-out)}
@media (prefers-reduced-motion:reduce){.loader.zoom .ld-logo{transition-duration:.3s}.ld-logo{transition:none}}
/* ---------- HUD ---------- */
.hud-top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);pointer-events:none;mix-blend-mode:normal}
.hud-top>*{pointer-events:auto}
.hud-top .logo{width:clamp(120px,10.5vw,158px);color:var(--cream);transition:color .4s}
.hud-top .logo .logo-full{width:100%;height:auto;overflow:visible;display:block}
.logo-full .bolt{fill:none;stroke:var(--blue);stroke-width:8;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(53,0,247,.55))}
.logo-full .lt{fill:currentColor}
body.ld .hud-top .logo{opacity:0;transform:scale(1.18) translate(-6px,-4px);transform-origin:0 0}
body.ld .hud-top .logo.in,.hud-top .logo.in{opacity:1;transform:none;transition:opacity .9s var(--e-out),transform 1.1s var(--e-out)}
.hud-top nav{display:flex;gap:26px}
.hud-top nav a{position:relative;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 0;transition:color .3s}
.hud-top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-out)}
.hud-top nav a:hover,.hud-top nav a.on{color:var(--cream)}
.hud-top nav a.on::after{transform:scaleX(1)}
body.on-light .hud-top .logo,body.on-light .hud-top nav a.on,body.on-light .hud-top nav a:hover{color:var(--ink)}
body.on-light .logo-full .bolt{filter:none}
body.on-light .hud-top nav a{color:rgba(10,8,48,.55)}
.hud-status{position:fixed;right:0;top:50%;z-index:50;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--cream);padding:14px 7px;border-radius:0 6px 6px 0;display:flex;gap:10px;align-items:center;transition:background .4s,color .4s}
.hud-status .dot{background:var(--blue);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.hud-scroll{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:opacity .5s,color .4s}
.hud-scroll .ring{width:22px;height:22px;border:1px solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:11px;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
body.on-light .hud-scroll{color:rgba(10,8,48,.6)}
.hud-hint{position:fixed;left:var(--gutter);bottom:22px;z-index:50;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity .5s;pointer-events:none}
.hud-hint.on{opacity:1}
.hud-hint .hand{display:block;font-size:20px;font-family:var(--sans);margin-bottom:8px}
/* ---------- Nastro & battute ---------- */
#nastro{position:relative;z-index:1}
.beat{position:relative;height:calc(var(--dur) * 100vh)}
.beat .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.beat.flow{height:auto}
.beat.flow .stage{position:relative;height:auto;overflow:visible}
.layer{position:absolute;opacity:0;transform:translateY(24px);transition:opacity .7s var(--e-out),transform .8s var(--e-out);will-change:opacity,transform}
.layer.on{opacity:1;transform:none}
.layer.fade{transform:none}
.layer.scale{transform:scale(.94)}
.layer.scale.on{transform:scale(1)}
.light{background:var(--cream);color:var(--ink)}
.light .muted{color:rgba(10,8,48,.6)}
/* ===== 1 · Intro ===== */
#intro .kicker{left:var(--gutter);top:22vh;width:min(70vw,1000px)}
#intro .kicker .label{margin-bottom:10px;color:var(--cream)}
#intro .kicker .wordmark{width:min(52vw,720px);color:var(--cream);filter:drop-shadow(0 20px 60px rgba(0,0,0,.4))}
#intro .desc{right:var(--gutter);top:26vh;width:min(30vw,380px);font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.55vw,1.5rem);line-height:1.25;letter-spacing:-.01em}
#intro .badge{left:var(--gutter);bottom:26vh;width:220px;padding:20px;font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.2;letter-spacing:-.01em}
#intro .badge .label-s{display:block;margin-top:14px;color:var(--muted)}
#intro .claim{left:var(--gutter);bottom:9vh;width:220px;text-align:center;font-family:var(--display);font-weight:500;font-size:.82rem;line-height:1.3;color:var(--muted)}
/* ===== 2 · Non è solo un logo ===== */
#logo .ghost{left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:700;font-size:clamp(3rem,13vw,15rem);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(243,242,250,.12);white-space:nowrap;transition:opacity .6s}
#logo .ghost.on{transform:translate(-50%,-50%)}
#logo .head{left:var(--gutter);top:42vh;width:min(36vw,520px)}
#logo .desc{right:var(--gutter);top:40vh;width:min(30vw,400px);font-family:var(--display);font-weight:500;font-size:clamp(1rem,1.35vw,1.3rem);line-height:1.3}
#logo .foot{right:var(--gutter);bottom:8vh;text-align:right;color:var(--muted)}
#logo .foot b{color:var(--lime);font-weight:400}
/* ===== 3 · Ragionamento ===== */
#pensiamo .halo{position:absolute;inset:0;pointer-events:none;background:
radial-gradient(70% 40% at 50% -10%,rgba(202,255,0,.22),transparent 70%),
radial-gradient(40% 30% at 0% 50%,rgba(53,0,247,.35),transparent 70%),
radial-gradient(40% 30% at 100% 50%,rgba(241,0,241,.22),transparent 70%);opacity:0;transition:opacity 1s}
#pensiamo .halo.on{opacity:1}
#pensiamo .title{left:50%;top:14vh;transform:translate(-50%,24px);text-align:center;width:100%}
#pensiamo .title.on{transform:translate(-50%,0)}
#pensiamo .title .sub{display:block;margin-top:14px;color:var(--lime)}
#pensiamo .caption{right:var(--gutter);bottom:12vh;width:min(30vw,360px);font-family:var(--display);font-weight:500;font-size:.9rem;line-height:1.35;text-transform:uppercase;letter-spacing:.02em}
#pensiamo .svc{left:var(--gutter);bottom:12vh;width:min(30vw,360px)}
#pensiamo .svc li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-family:var(--display);font-weight:500;font-size:1rem}
#pensiamo .svc li:last-child{border-bottom:1px solid var(--line)}
#pensiamo .svc li span:last-child{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--muted);align-self:center}
/* ===== 4 · Magia (Facciamo) ===== */
#facciamo .big{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,11vw,12rem);letter-spacing:-.05em;line-height:.9;color:var(--cream);text-shadow:0 0 60px rgba(202,255,0,.5),0 0 120px rgba(202,255,0,.25);white-space:nowrap;pointer-events:none}
#facciamo .big.on{transform:translateY(-50%)}
#facciamo .big small{display:block;font-size:.19em;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);text-shadow:none;color:var(--muted);margin-bottom:.4em}
#facciamo .chat{left:50%;bottom:9vh;transform:translate(-50%,20px);width:min(90vw,560px);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 20px;border-radius:var(--pill);background:rgba(5,4,15,.7);border:1px solid var(--glass-line);backdrop-filter:blur(16px)}
#facciamo .chat.on{transform:translate(-50%,0)}
#facciamo .chat .q{flex:1;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#facciamo .chat .q b{color:var(--lime);font-weight:400}
/* ===== 5 · Imprevedibilità (Diffondiamo) ===== */
#diffondiamo .panel{left:var(--gutter);top:16vh;width:min(32vw,380px);padding:26px}
#diffondiamo .panel .ic{width:34px;height:34px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--lime)}
#diffondiamo .panel .label{margin-bottom:14px}
#diffondiamo .panel p{font-family:var(--display);font-weight:500;font-size:.95rem;line-height:1.4;color:var(--cream)}
#diffondiamo .head{left:var(--gutter);bottom:10vh;width:min(40vw,520px);text-transform:uppercase}
#diffondiamo .formula{right:var(--gutter);bottom:10vh;text-align:right;display:flex;align-items:baseline;gap:18px}
#diffondiamo .formula .f{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.2vw,2.2rem);letter-spacing:-.02em}
#diffondiamo .list{right:var(--gutter);top:16vh;width:min(26vw,300px);text-align:right}
#diffondiamo .list li{padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:500;font-size:.95rem}
/* ===== 6 · Scheda tecnica (light) ===== */
#specs .stage{background:var(--cream);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter)}
#specs .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px}
#specs .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#specs .sc{position:relative;border-radius:var(--r-card);padding:28px;min-height:min(48vh,440px);display:flex;flex-direction:column;overflow:hidden;background:var(--cream-2);opacity:0;transform:translateY(30px);transition:opacity .7s var(--e-out),transform .9s var(--e-out)}
#specs .grid.on .sc{opacity:1;transform:none}
#specs .grid.on .sc:nth-child(2){transition-delay:.12s}#specs .grid.on .sc:nth-child(3){transition-delay:.24s}
#specs .sc.blue{background:var(--blue);color:var(--cream)}
#specs .sc.blue .muted{color:rgba(243,242,250,.7)}
#specs .sc .t{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;line-height:1;text-transform:uppercase;margin-bottom:18px;max-width:80%}
#specs .sc p{font-size:.9rem;line-height:1.4;max-width:88%}
#specs .sc .num{position:absolute;right:-10px;bottom:-30px;font-family:var(--display);font-weight:700;font-size:clamp(7rem,15vw,16rem);letter-spacing:-.06em;line-height:1;opacity:.18}
#specs .sc .ill{margin:auto 0 18px;display:flex;justify-content:center}
#specs .sc .ill svg{width:60%;color:var(--blue)}
#specs .sc .pills{margin:auto 0 18px;display:flex;flex-direction:column;align-items:center;gap:6px}
#specs .sc .pills span{padding:8px 16px;border-radius:var(--pill);background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
#specs .sc .pills span:nth-child(2){background:var(--blue)}#specs .sc .pills span:nth-child(3){background:var(--ink-2)}#specs .sc .pills span:nth-child(4){background:var(--lime);color:var(--ink)}
#specs .sc .foot{margin-top:auto;font-size:.9rem;line-height:1.4}
/* ===== 7 · Lo dicono i lavori (galleria orizzontale) ===== */
#lavori .stage{display:flex;align-items:center}
#lavori .track{display:flex;gap:16px;padding-left:var(--gutter);will-change:transform;align-items:center}
#lavori .track .it{position:relative;flex:0 0 auto;width:clamp(260px,32vw,520px);aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--night-2)}
#lavori .track .it.w{width:clamp(320px,44vw,720px);aspect-ratio:16/10}
#lavori .track .it img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out)}
#lavori .track .it:hover img{transform:scale(1.04)}
#lavori .track .it .cap{position:absolute;left:18px;bottom:16px;right:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
#lavori .track .it .cap .n{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
#lavori .track .it .cap .label-s{color:rgba(243,242,250,.8)}
#lavori .track .it::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,4,15,.75))}
#lavori .track .it .cap{z-index:2}
#lavori .track .word{flex:0 0 auto;font-family:var(--display);font-weight:700;font-size:clamp(4rem,12vw,13rem);letter-spacing:-.05em;line-height:.9;color:var(--cream);padding:0 2vw;white-space:nowrap}
#lavori .track .word small{display:block;font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.14em;color:var(--muted);margin-bottom:12px}
#lavori .track .word.lime{color:var(--lime)}
/* ===== 8 · Compatibile con ogni settore (blue) ===== */
#settori .stage{background:var(--blue);color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter)}
#settori .stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 120%,rgba(202,255,0,.25),transparent 70%)}
#settori .head{position:relative;text-align:center;margin-bottom:6vh}
#settori .head .label{margin-bottom:16px;color:rgba(243,242,250,.8)}
#settori .row{position:relative;display:flex;justify-content:center;gap:clamp(10px,2vw,28px);align-items:flex-end}
#settori .ob{width:clamp(120px,15vw,240px);text-align:center;opacity:0;transform:translateY(40px);transition:opacity .7s var(--e-out),transform .9s var(--e-out)}
#settori .row.on .ob{opacity:1;transform:none}
#settori .row.on .ob:nth-child(2){transition-delay:.08s}#settori .row.on .ob:nth-child(3){transition-delay:.16s}#settori .row.on .ob:nth-child(4){transition-delay:.24s}#settori .row.on .ob:nth-child(5){transition-delay:.32s}
#settori .ob .im{aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
#settori .ob .im img{width:100%;height:100%;object-fit:cover}
#settori .ob .base{width:100%;height:18px;margin:-6px auto 14px;background:var(--lime);border-radius:50%;filter:blur(1px);opacity:.9;transform:scaleX(.9)}
#settori .ob .label-s{display:block;color:rgba(243,242,250,.85)}
/* ===== 10 · Outro / contatti (flow) ===== */
#contatti{position:relative;background:transparent;padding:18vh var(--gutter) 0;overflow:hidden}
#contatti .glow{position:absolute;inset:auto -10% -30% -10%;height:70%;background:radial-gradient(50% 60% at 50% 100%,rgba(53,0,247,.55),transparent 70%);pointer-events:none}
#contatti .top{position:relative;display:grid;grid-template-columns:120px 1fr;gap:var(--gutter);align-items:start;margin-bottom:16vh}
#contatti .top .mark{width:80px;color:var(--lime)}
#contatti .top h2{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,3rem);letter-spacing:-.035em;line-height:1;text-transform:uppercase;max-width:900px}
#contatti .top h2+h2{margin-top:.6em}
#contatti .top .cta{margin-top:34px;display:flex;justify-content:flex-end}
#contatti .grid{position:relative;display:grid;grid-template-columns:200px 1fr 1fr;gap:var(--gutter);align-items:start}
#contatti .built{padding:20px;font-family:var(--display);font-weight:700;font-size:.8rem;line-height:1.3;text-transform:uppercase;letter-spacing:.02em}
#contatti .built .pill{margin-top:16px}
#contatti .news .label{margin-bottom:14px}
#contatti .news form{display:flex;align-items:center;border-bottom:1px solid var(--line);max-width:460px}
#contatti .news input{flex:1;background:transparent;border:0;color:var(--cream);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;padding:12px 0;outline:0;text-transform:uppercase}
#contatti .news input::placeholder{color:var(--muted-2)}
#contatti .news button{font-size:18px}
#contatti .links{display:grid;grid-template-columns:1fr 1fr;gap:26px var(--gutter)}
#contatti .links .k{display:block;color:var(--muted-2);margin-bottom:8px}
#contatti .links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;display:block;padding:3px 0;transition:color .3s}
#contatti .links a:hover{color:var(--lime)}
#contatti .bottom{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:14vh;color:var(--muted-2)}
#contatti .bottom .legal{display:flex;gap:22px}
#contatti .bottom .disc{max-width:420px;text-align:right;line-height:1.5}
/* ---------- Video modal ---------- */
.modal{position:fixed;inset:0;z-index:900;background:rgba(5,4,15,.92);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.modal.on{opacity:1;visibility:visible}
.modal video{width:min(90vw,1200px);aspect-ratio:16/9;border-radius:16px;background:#000}
.modal .x{position:absolute;right:var(--gutter);top:22px}
/* ---------- Responsive ---------- */
@media (max-width:1000px){
.hud-top nav{display:none}
.hud-status{display:none}
#intro .kicker{top:16vh}
#intro .kicker .wordmark{width:80vw}
#intro .desc{right:auto;left:var(--gutter);top:auto;bottom:34vh;width:min(80vw,440px);font-size:1rem}
#intro .badge{display:none}
#intro .claim{display:none}
#logo .head{top:22vh;width:80vw}
#logo .desc{right:auto;left:var(--gutter);top:auto;bottom:16vh;width:80vw}
#logo .foot{display:none}
#pensiamo .svc{display:none}
#pensiamo .caption{right:auto;left:var(--gutter);width:80vw;bottom:10vh}
#diffondiamo .panel{width:80vw;top:14vh}
#diffondiamo .list{display:none}
#diffondiamo .head{width:80vw;bottom:14vh}
#diffondiamo .formula{display:none}
#specs .grid{grid-template-columns:1fr;gap:10px}
#specs .sc{min-height:0;padding:20px}
#specs .sc .ill,#specs .sc .pills{display:none}
#settori .row{flex-wrap:wrap}
#settori .ob{width:28vw}
#contatti .top{grid-template-columns:1fr}
#contatti .grid{grid-template-columns:1fr}
#contatti .bottom{flex-direction:column;align-items:flex-start}
#contatti .bottom .disc{text-align:left}
}
@media (prefers-reduced-motion:reduce){
.layer{transition:none}
}
/* ===== 1b · Showreel (stile lusion): copy + card a sinistra → la card si fissa al centro e si espande ===== */
#reel .reel-copy{left:var(--gutter);top:16vh;width:min(46vw,640px);will-change:transform,opacity}
#reel .reel-copy .label{margin-bottom:18px}
#reel .reel-text{right:var(--gutter);top:19vh;width:min(32vw,440px);will-change:transform,opacity}
#reel .reel-text .lead{color:var(--muted);margin-bottom:26px}
#reel .reel-text .pill .dot{margin-right:2px}
#reel .reel-card{position:absolute;left:var(--gutter);top:52vh;width:34vw;height:19vw;border-radius:18px;overflow:hidden;background:#0c0b1f;cursor:pointer;will-change:width,height,transform;box-shadow:0 40px 90px rgba(0,0,0,.45);transform-origin:50% 50%}
#reel .reel-card video{width:100%;height:100%;object-fit:cover;opacity:.92;transition:filter .6s var(--e-ui);transform:scale(1.02)}
#reel .reel-card.full video{filter:blur(4px) brightness(.55) saturate(.85)}
#reel .reel-card::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(5,4,15,.15),rgba(5,4,15,.55));pointer-events:none;opacity:0;transition:opacity .6s}
#reel .reel-card.full::after{opacity:1}
#reel .reel-card .cross{color:var(--cream);opacity:0;transition:opacity .5s}
#reel .reel-card.full .cross{opacity:.7}
#reel .reel-btn{position:absolute;left:50%;top:50%;width:clamp(56px,6.4vw,92px);height:clamp(56px,6.4vw,92px);border-radius:50%;background:var(--cream);color:var(--night);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--e-out),background .3s;will-change:transform}
#reel .reel-btn span{font-size:clamp(14px,1.4vw,22px);padding-left:.15em}
#reel .reel-card.full .reel-btn{transform:translate(-50%,-50%) scale(1)}
#reel .reel-card.full:hover .reel-btn{background:var(--lime);transform:translate(-50%,-50%) scale(1.06)}
/* con WebGL la card è disegnata nel canvas (piano deformabile): il DOM resta solo come area di click, bottone e crocette */
body.reel-gl #reel .reel-card{background:none;box-shadow:none;overflow:visible;transform:none;will-change:auto}
body.reel-gl #reel .reel-card video,body.reel-gl #reel .reel-card::after{opacity:0!important;transition:none}
body.reel-gl #reel .reel-card .cross{opacity:0;transform:scale(0) rotate(0deg);transition:opacity .45s var(--e-out),transform .6s var(--e-out)}
body.reel-gl #reel .reel-card.full .cross{opacity:.7;transform:scale(1) rotate(180deg)}
body.reel-gl #reel .reel-card .cross.tr{transition-delay:.08s}body.reel-gl #reel .reel-card .cross.br{transition-delay:.16s}body.reel-gl #reel .reel-card .cross.bl{transition-delay:.24s}
@media (max-width:1000px){
#reel .reel-copy{top:12vh;width:86vw}
#reel .reel-text{display:none}
#reel .reel-card{width:60vw;height:36vw;top:44vh}
}
/* ==========================================================================
FOOTER (impianto Monogrid: CTA, tre colonne + colonna destra, logotipo gigante)
========================================================================== */
.site-footer{position:relative;z-index:2;background:var(--blue);color:var(--cream);padding:90px var(--gutter) 0;overflow:hidden}
.site-footer .col-head{display:flex;align-items:center;gap:.6em;padding-bottom:12px;border-bottom:1px solid rgba(243,242,250,.35);margin-bottom:22px}
.site-footer .col-head::before{content:"/.";font-family:var(--mono);font-size:inherit;line-height:1}
.footer-cta{max-width:900px;margin-bottom:64px}
.footer-cta h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1.4rem + 3.4vw,4.8rem);letter-spacing:-.04em;line-height:.98;margin-bottom:12px}
.footer-cta .big-link{display:inline-block;font-family:var(--display);font-weight:500;font-size:clamp(1.8rem,1.3rem + 2.4vw,3.4rem);letter-spacing:-.03em;text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:2px;transition:color .3s var(--e-ui)}
.footer-cta .big-link:hover{color:var(--lime)}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);align-items:start}
.f-menu{grid-column:span 2}.f-ext{grid-column:span 2}.f-contact{grid-column:span 4}
.f-right{grid-column:span 4;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.f-menu li a,.f-ext li a{display:block;font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1rem + .55vw,1.45rem);line-height:1.5;transition:color .3s var(--e-ui)}
.f-menu li a:hover,.f-ext li a:hover,.f-contact a:hover,.f-right .top:hover,.f-right .links a:hover{color:var(--lime)}
.f-menu li a.is-current{color:var(--night)}
.f-ext .arrow-ext::after{content:" ↗";font-weight:400}
.f-contact p{margin-bottom:12px;font-size:.92rem;line-height:1.35}
.f-contact b{font-weight:500}
.f-contact a{text-decoration:underline;text-underline-offset:.15em}
.f-right .top{display:inline-flex;gap:6px;align-items:center;text-decoration:underline;text-underline-offset:.2em}
.f-right select{font:inherit;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;background:var(--night);color:var(--cream);border:1px solid var(--night);border-radius:100px;padding:6px 12px}
.f-right .legal{display:flex;flex-direction:column;gap:2px;text-align:right}
.f-right .links{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.f-right .certs{display:flex;gap:10px;justify-content:flex-end}
.f-right .certs span{border:1px solid rgba(243,242,250,.5);border-radius:100px;padding:4px 10px}
.footer-wordmark{margin:70px calc(var(--gutter) * -1) 0;height:clamp(90px,17vw,250px);overflow:hidden;color:var(--night)}
.footer-wordmark svg{width:100%;height:auto;transform:translateY(8%)}
/* outro della landing: resta lo statement, il resto passa al footer */
#contatti .top{margin-bottom:0;padding-bottom:12vh}
@media (max-width:1100px){
.f-menu,.f-ext{grid-column:span 3}.f-contact{grid-column:span 6}
.f-right{grid-column:span 12;align-items:flex-start;text-align:left;margin-top:30px}
.f-right .legal,.f-right .links,.f-right .certs{text-align:left;justify-content:flex-start}
}
@media (max-width:900px){
.footer-grid{grid-template-columns:1fr 1fr}
.f-menu,.f-ext{grid-column:span 1}.f-contact,.f-right{grid-column:span 2}
}
/* header sopra le superfici blu (footer, settori): logo e nav in crema */
body.on-blue .logo-full .bolt{stroke:var(--cream);filter:none}
body.on-blue .hud-top nav a{color:rgba(243,242,250,.72)}
body.on-blue .hud-top nav a.on,body.on-blue .hud-top nav a:hover{color:var(--cream)}
/* ==========================================================================
CHROME CONDIVISA — header come sinapps.it (logo · bandiere · pittogramma nel cerchio),
menu laterale nero da destra, transizioni, progress, "/."
========================================================================== */
.sl::before{content:"/. "}
.hud-right{display:flex;align-items:center;gap:30px}
/* selettore lingua a bandiere (tendina) */
.lang{position:relative}
.lang-cur{display:flex;align-items:center;gap:0;background:none;border:0;padding:0;cursor:pointer;color:var(--cream)}
.lang .flag{width:20px;height:15px;display:block;border-radius:1px}
.lang-cur .chev{color:var(--cream);opacity:.85}
.lang-list{position:absolute;left:0;top:100%;padding-top:4px;display:none;flex-direction:column;gap:4px}
.lang:hover .lang-list,.lang.open .lang-list{display:flex}
.lang-list a{display:block;padding:2px 0;opacity:.9;transition:opacity .2s}.lang-list a:hover{opacity:1}
/* pittogramma hamburger: cerchio 50px con due barre, si riempie di blu al passaggio, diventa una X quando è aperto */
.menu-btn{position:relative;width:50px;height:50px;border-radius:50%;border:2px solid var(--blue);background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--blue);transition:border-color .3s,color .3s}
.menu-btn::before{content:"";position:absolute;inset:1px;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .3s var(--e-out),background .3s}
.menu-btn:hover::before{transform:scale(1)}
.menu-btn:hover{color:#fff}
.menu-btn .bars{position:relative;width:25px;height:12px;display:block;z-index:1}
.menu-btn .bars i{position:absolute;left:0;width:100%;height:2.2px;background:currentColor;border-radius:1px;top:0;transition:transform .35s var(--e-out),top .35s var(--e-out)}
.menu-btn .bars i+i{top:auto;bottom:0}
body.menu-open .menu-btn{border-color:#fff;color:#fff}
body.menu-open .menu-btn::before{background:#fff}
body.menu-open .menu-btn:hover{color:#000}
body.menu-open .menu-btn .bars i{top:5px;transform:rotate(45deg)}
body.menu-open .menu-btn .bars i+i{top:5px;bottom:auto;transform:rotate(-45deg)}
body.on-blue .menu-btn{border-color:var(--cream);color:var(--cream)}
body.on-blue .menu-btn::before{background:var(--cream)}
body.on-blue .menu-btn:hover{color:var(--blue)}
body.on-light .lang-cur,body.on-light .lang-cur .chev{color:var(--ink)}
/* pannello laterale */
.menu-backdrop{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .4s}
body.menu-open .menu-backdrop{opacity:1;pointer-events:auto}
.menu{position:fixed;top:0;right:0;bottom:0;z-index:45;width:405px;max-width:calc(100% - 80px);background:#000;color:#fff;padding:115px 30px 30px 35px;overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform .45s var(--e-inout),visibility 0s .45s}
body.menu-open .menu{transform:none;visibility:visible;transition:transform .5s var(--e-out),visibility 0s}
.menu ul{list-style:none;margin:0;padding:0}
.m-list>li{position:relative}
.m-list a{display:block;font-family:var(--display);font-weight:200;font-size:25px;line-height:40px;color:#fff;padding-left:5px;padding-right:44px;text-transform:capitalize;transition:color .25s}
.m-list a:hover,.m-list a.is-current{color:var(--lime)}
.m-tgl{position:absolute;right:0;top:8px;width:24px;height:24px;background:none;border:0;padding:0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.m-tgl .chev{transition:transform .3s var(--e-out);transform:rotate(-90deg)}
.has-sub.open>.m-tgl .chev{transform:none}
.menu .m-sub{display:none;padding-left:42px}
.has-sub.open>.m-sub{display:block}
.m-sub>li{position:relative}
.m-sub>li>a{font-size:26px;line-height:41.6px}
.menu .m-sub .m-sub{padding-left:22px}
.m-sub .m-sub>li>a{font-size:18px;line-height:28.8px}
.m-sub .m-tgl{top:9px}
/* header sopra il pannello aperto */
body.menu-open .hud-status,body.menu-open .hud-scroll,body.menu-open .hud-hint{opacity:0!important;pointer-events:none}
/* transizione di uscita verso un'altra pagina */
body.leaving #nastro,body.leaving .page{opacity:0;transform:translateY(-16px);transition:opacity .4s var(--e-inout),transform .45s var(--e-inout)}
/* loader breve tra le pagine */
body.ld-fast .loader.zoom .ld-logo{transition-duration:.8s,.35s}
body.ld-fast.is-ready #nastro,body.ld-fast.is-ready .page{transition:opacity .6s var(--e-out) .05s,transform .9s var(--e-out)}
/* avanzamento di lettura (pagine interne) */
.progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:60;pointer-events:none}
.progress b{display:block;height:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
/* footer: CTA in voce Sinapps, lingua, certificazioni linkate */
.footer-cta .label{margin-bottom:14px;color:rgba(243,242,250,.8)}
.footer-cta .hello{display:flex;gap:.6em;margin-top:18px;font-family:var(--display);font-weight:300;font-size:clamp(1rem,.8rem + 1vw,1.5rem);color:rgba(243,242,250,.7)}
.footer-cta .hello span+span::before{content:"· ";opacity:.6}
.f-lang{display:flex;gap:12px;align-items:center;color:rgba(243,242,250,.8)}
.f-lang a{color:inherit}.f-lang a.on{color:var(--cream);text-decoration:underline;text-underline-offset:.2em}.f-lang a:hover{color:var(--lime)}
.f-right .certs a{border:1px solid rgba(243,242,250,.5);border-radius:100px;padding:4px 10px;transition:border-color .3s,color .3s}
.f-right .certs a:hover{border-color:var(--lime);color:var(--lime)}
@media (max-width:1000px){
.hud-right{gap:20px}
.menu-btn{width:30px;height:30px}
.menu-btn .bars{width:16px;height:8px}
.menu-btn .bars i{height:1.8px}
body.menu-open .menu-btn .bars i,body.menu-open .menu-btn .bars i+i{top:3px}
.menu{padding-top:96px}
.footer-cta .hello{flex-wrap:wrap}
}
/* ===== 4b · Lavori in evidenza (flow; struttura e ritmo della "Featured Work" di lusion.co) ===== */
#featured{position:relative;background:transparent;padding:14vh var(--gutter) 12vh}
#featured .stage{overflow:visible}
.fw-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--gutter)}
.fw-title{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7.2vw,7.4rem);letter-spacing:-.035em;line-height:.92;margin-left:-.04em;overflow:hidden}
.fw-title .w{display:inline-block;white-space:nowrap}
.fw-title .c{display:inline-block;transform:translateY(1.1em) rotate(7deg);transform-origin:0 100%;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.fw-head.on .fw-title .c{transform:none}
.fw-note{max-width:min(28vw,320px);color:var(--muted);line-height:1.5}
.fw-note .ln{display:block;overflow:hidden}
.fw-note .ln span{display:block;transform:translateY(105%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.fw-head.on .fw-note .ln span{transform:none}
.fw-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2vw;row-gap:5em;margin-top:8vh;will-change:transform;perspective:900px;perspective-origin:50% 50%}
.fw-head,.fw-cta-wrap{will-change:transform}
.fw-item{display:block;color:var(--cream);cursor:pointer;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform}
.fw-main{position:relative;padding-top:65%;opacity:0;transform:translateX(var(--fx,-5vw)) rotate(var(--fr,-2.9deg));transition:opacity 1.2s var(--e-out),transform 2s cubic-bezier(.16,1,.3,1);will-change:transform}
.fw-item.on .fw-main{opacity:1;transform:none}
.fw-img{position:absolute;inset:0;border-radius:15px;overflow:hidden;background:#0c0b1f;transform-origin:50% 50%;will-change:transform}
.fw-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform 1.4s cubic-bezier(.16,1,.3,1);will-change:transform}
.fw-img::after{content:"";position:absolute;inset:0;background:var(--night);opacity:var(--dim,0);pointer-events:none;transition:opacity .2s linear}
.fw-item:hover .fw-img img{transform:scale(1.08) translate(var(--px,0),var(--py,0))}
.fw-foot{position:relative;width:100%}
.fw-l1{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:1.5em 0 .9em;min-height:1.3em;line-height:1.5}
.fw-l2{position:relative;font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3vw,3.2rem);line-height:1.05;letter-spacing:-.02em;height:1.1em;overflow:hidden;left:-.03em}
.fw-arrow{position:absolute;left:-1em;top:0;width:.8em;height:1em;line-height:1;display:flex;align-items:center;color:var(--lime);transform:translateX(0);transition:transform .7s var(--e-out)}
.fw-l2-inner{position:relative;display:flex;transition:transform .7s var(--e-out)}
.fw-l2-inner .l{display:flex;flex-direction:column;transform:translateY(-500%);transition:transform .9s cubic-bezier(.87,0,.13,1)}
.fw-l2-inner .l span{display:block;height:1em;line-height:1}
.fw-l2-inner .l.sp{width:.28em}
.fw-item.on .fw-l2-inner .l{transform:none}
@media (hover:hover){
.fw-item:hover .fw-l2-inner{transform:translateX(1.5em)}
.fw-item:hover .fw-arrow{transform:translateX(1em)}
}
.fw-cta-wrap{margin-top:18vh;display:flex;justify-content:center}
.fw-cta{opacity:0;transform:translateY(136%) rotate(9deg);transform-origin:0 50%;transition:opacity .9s var(--e-out),transform 1.2s cubic-bezier(.16,1,.3,1)}
.fw-cta.on{opacity:1;transform:none}
@media (max-width:1000px){
#featured{padding:10vh var(--gutter) 10vh}
.fw-head{grid-template-columns:1fr}
.fw-title{font-size:clamp(2.4rem,13vw,4.6rem)}
.fw-note{max-width:100%;margin-top:1.4em}
.fw-list{grid-template-columns:1fr;row-gap:2.6em;margin-top:6vh}
.fw-main{transform:translateX(0) rotate(0) translateY(24px)}
.fw-l2{font-size:clamp(1.6rem,6.5vw,2.6rem)}
.fw-cta-wrap{margin-top:16vh}
}