/* ARKsite — home lunga: apertura col plastico, poi le sezioni che scorrono sopra.
   Si appoggia a home.css (variabili, pulsanti, barra) e ne toglie il "tutto fisso". */
:root{ --paper:#f6f5f1; --card:#ffffff; --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.16,1.12,.3,1) }
@media (prefers-color-scheme: dark){ :root{ --paper:#161616; --card:#1d1d1c } }

html{scroll-behavior:smooth}
html, body.landing{height:auto}
body.landing{overflow-x:hidden; overflow-y:auto}
.landing .veil{background:radial-gradient(ellipse 50% 34% at 50% 27%, rgba(var(--veil),.82) 0%, rgba(var(--veil),.5) 48%, rgba(var(--veil),0) 100%)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.brand{font-size:19px; letter-spacing:-.03em}

/* barra di avanzamento */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:5; pointer-events:none}
.progress i{display:block; height:100%; background:var(--ink); transform:scaleX(0); transform-origin:0 50%}

/* ---------- barra: vetro quando si scorre ---------- */
.landing .top{padding-bottom:12px; transition:background .3s ease, border-color .3s ease; border-bottom:1px solid transparent}
.landing .top.solid{background:var(--glass); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2); border-bottom-color:var(--line)}
.links{display:flex; gap:4px; position:absolute; left:50%; transform:translateX(-50%)}
.links a{font-size:13px; color:var(--ink-2); text-decoration:none; padding:8px 12px; border-radius:999px; transition:color .2s, background .2s}
.links a:hover, .links a.on{color:var(--ink); background:var(--line)}
@media (max-width:980px){ .links{display:none} }

/* ---------- apertura ---------- */
.landing .hero{position:relative; inset:auto; min-height:100vh; min-height:100svh; display:block; padding:0; pointer-events:auto; z-index:1}
.hero-in{display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(86px, 12vh, 140px) 20px 0; will-change:transform, opacity, filter; transform-origin:50% 20%}
.landing h1{font-size:clamp(60px, 12.5vw, 172px)}
.h1-w{display:inline-block}
.landing .lead{margin-top:16px}
.landing .cta{margin-top:24px}
.scroll-cue{position:absolute; left:50%; bottom:max(34px, calc(env(safe-area-inset-bottom) + 24px)); transform:translateX(-50%); width:22px; height:34px;
  border:1.5px solid var(--ink-3); border-radius:12px; z-index:2; opacity:.7}
.scroll-cue i{position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px; border-radius:2px; background:var(--ink-2); animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0); opacity:0} 25%{opacity:1} 70%{transform:translateY(11px); opacity:0} 100%{opacity:0}}

/* il titolo entra lettera per lettera, poi il resto */
.h1-w .ch{display:inline-block; animation:chIn 1.1s var(--spring) both; animation-delay:calc(var(--i) * 55ms)}
@keyframes chIn{from{opacity:0; transform:translateY(60%) rotate(8deg) scale(.9); filter:blur(10px)} to{opacity:1; transform:none; filter:none}}
.hero-in > :not(h1){animation:rise 1s var(--ease) both}
.hero-in > :nth-child(2){animation-delay:.45s} .hero-in > :nth-child(3){animation-delay:.55s}
.hero-in > :nth-child(4){animation-delay:.65s} .hero-in > :nth-child(5){animation-delay:.75s}
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

/* ---------- il foglio che copre il plastico ---------- */
.page{position:relative; z-index:3; background:var(--paper); border-radius:32px 32px 0 0; box-shadow:0 -30px 60px rgba(0,0,0,.06); transform-origin:50% 0}
.sec{max-width:1180px; margin:0 auto; padding:clamp(80px, 12vw, 150px) 20px 0}
.sec-h{max-width:720px}
.kicker{margin:0 0 14px; font:500 11.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.sec h2, .hs h2, .an h2, .final h2{margin:0; font-weight:600; font-size:clamp(32px, 4.6vw, 58px); line-height:1.04; letter-spacing:-.04em}
.sec-h > p:not(.kicker), .an-h > p:not(.kicker){margin:18px 0 0; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:620px}
h3{margin:0; font-size:17px; font-weight:600; letter-spacing:-.015em}

/* ---------- comparse ---------- */
.rv{opacity:0; transform:perspective(900px) translateY(60px) rotateX(14deg) scale(.96); filter:blur(6px);
  transition:opacity 1s var(--ease), transform 1.1s var(--spring), filter 1s var(--ease); transition-delay:var(--d, 0s)}
.rv.in{opacity:1; transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); filter:none}
.tilt.in.live{transition:opacity 1s var(--ease), transform .35s var(--ease), filter 1s var(--ease); transition-delay:0s}
/* titoli: le parole salgono da una fessura */
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .1em; margin-bottom:-.1em}
.split .w > span{display:inline-block; transform:translateY(105%) rotate(6deg); transform-origin:0 100%;
  transition:transform 1.1s var(--spring); transition-delay:calc(var(--i) * 45ms)}
.split.in .w > span{transform:none}

/* ---------- numeri ---------- */
.band.stats{max-width:1180px; margin:0 auto; padding:64px 20px 0; display:grid; grid-template-columns:repeat(4, 1fr)}
.stat{position:relative; padding:8px 24px 18px 22px; border-left:1px solid var(--line)}
.stat:first-child{border-left:0; padding-left:0}
.stat::after{content:""; position:absolute; left:22px; bottom:0; height:2px; width:0; background:var(--ink); transition:width 1.4s var(--ease) .3s}
.stat:first-child::after{left:0}
.stat.in::after{width:40px}
.stat b{display:block; font-size:clamp(44px, 5.4vw, 72px); font-weight:300; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:10px; font-size:13.5px; line-height:1.45; color:var(--ink-2); max-width:220px}
@media (max-width:760px){ .band.stats{grid-template-columns:1fr 1fr; row-gap:28px} .stat:nth-child(3){border-left:0; padding-left:0} .stat:nth-child(3)::after{left:0} }

/* ---------- passi ---------- */
.steps{list-style:none; margin:52px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.step{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:22px 22px 26px}
.step .num{font:500 12px var(--mono); color:var(--ink-3)}
.step h3{margin-top:18px}
.step p{margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--ink-2)}
.art{height:150px; margin-top:14px; border-radius:14px; background:var(--paper); position:relative; overflow:hidden}
.art-map{background:
  linear-gradient(90deg, transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%) 0 0/38px 38px,
  linear-gradient(0deg, transparent 49.5%, var(--line) 49.5%, var(--line) 50.5%, transparent 50.5%) 0 0/38px 38px, var(--paper)}
.art-map .ring{position:absolute; left:50%; top:50%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; border:1.5px dashed var(--ink-2); animation:spin 18s linear infinite}
.art-map .pin{position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--ink)}
.art-map .pin::after{content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid var(--ink); animation:ping 2.2s var(--ease) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{from{transform:scale(.4); opacity:.8} to{transform:scale(2.2); opacity:0}}
.art-design{background:#fff}
.art-design i{position:absolute; inset:8px; background-size:contain; background-repeat:no-repeat; background-position:center; opacity:0; animation:swap 12s infinite}
.art-design i:nth-child(1){background-image:url(an/noise_plan.webp)}
.art-design i:nth-child(2){background-image:url(an/sunhours_plan.webp); animation-delay:3s}
.art-design i:nth-child(3){background-image:url(an/svf_plan.webp); animation-delay:6s}
.art-design i:nth-child(4){background-image:url(an/radiation_plan.webp); animation-delay:9s}
@keyframes swap{0%{opacity:0; transform:scale(1.08) rotate(-8deg)} 6%{opacity:1} 25%{opacity:1} 31%{opacity:0; transform:scale(1) rotate(0)} 100%{opacity:0}}
.art-export i{position:absolute; left:50%; top:50%; width:78px; height:104px; margin:-52px 0 0 -39px; border-radius:6px; background:var(--card);
  border:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,.08); animation:fan 4.5s var(--ease) infinite alternate}
.art-export i::before{content:""; position:absolute; left:10px; right:10px; top:12px; height:48px; border-radius:50%; background:conic-gradient(#c55a12, #f5c35e, #4a5a78, #7b86a0, #c55a12)}
.art-export i::after{content:""; position:absolute; left:10px; right:26px; bottom:14px; height:4px; border-radius:2px; background:var(--line); box-shadow:0 -9px 0 var(--line)}
.art-export i:nth-child(1){--r:-14deg; --x:-44px}
.art-export i:nth-child(2){--r:0deg; --x:0px; z-index:1}
.art-export i:nth-child(3){--r:14deg; --x:44px}
@keyframes fan{from{transform:none} to{transform:translateX(var(--x)) rotate(var(--r))}}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }

/* ---------- esempi: scorrimento orizzontale agganciato ---------- */
.hs{position:relative; margin-top:clamp(80px, 12vw, 150px)}
.hs-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:36px}
.hs-h{padding:0 max(20px, calc((100vw - 1180px) / 2 + 20px)); max-width:none}
.hs-h > *{max-width:720px}
.hs-track{display:flex; gap:20px; padding:0 max(20px, calc((100vw - 1180px) / 2 + 20px)); will-change:transform; width:max-content}
.ex{flex:0 0 clamp(300px, 30vw, 420px); background:var(--card); border:1px solid var(--line); border-radius:24px; overflow:hidden; display:flex; flex-direction:column;
  transform:skewX(var(--sk, 0deg)); transition:transform .5s var(--ease)}
.ex-img{position:relative; aspect-ratio:5 / 4; background:#fff; overflow:hidden}
.ex-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .6s var(--ease), transform 1.2s var(--ease), clip-path .9s var(--ease)}
.ex-img img.p{padding:4%; clip-path:circle(0% at 50% 50%)}
.ex.plan .ex-img img.p{clip-path:circle(75% at 50% 50%)}
.ex.plan .ex-img img.m{opacity:0; transform:scale(.9) rotate(-6deg)}
.ex:hover .ex-img img.m{transform:scale(1.05)}
.tog{position:absolute; top:12px; right:12px; display:flex; padding:3px; border-radius:999px; background:rgba(255,255,255,.8);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(0,0,0,.08); z-index:1}
.tog button{border:0; background:none; font:500 12px var(--sans); color:#55554f; height:28px; padding:0 12px; border-radius:999px; cursor:pointer}
.tog button[aria-pressed="true"]{background:#1b1b1a; color:#fff}
.ex-b{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1}
.ex-b .city{font:500 11.5px var(--mono); color:var(--ink-3); letter-spacing:.02em}
.ex-b p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.scale{margin-top:auto; padding-top:10px}
.scale .bar{height:8px; border-radius:4px}
.scale .ends{display:flex; justify-content:space-between; margin-top:6px; font:400 11px var(--mono); color:var(--ink-3)}
@media (max-width:900px){
  .hs-pin{position:static; height:auto; overflow:visible}
  .hs-track{width:auto; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; transform:none !important}
  .hs-track::-webkit-scrollbar{display:none}
  .ex{flex-basis:82%; scroll-snap-align:center}
}

/* ---------- analisi: un sito, undici letture ---------- */
.an{position:relative; margin:clamp(80px, 12vw, 150px) 12px 0; border-radius:36px; background:var(--an-bg); color:var(--an-fg);
  padding:clamp(70px, 10vw, 130px) 0 clamp(60px, 8vw, 100px); --ink-2:var(--an-mute); --ink-3:var(--an-soft); --line:var(--an-line); overflow:clip}
/* grigio chiaro di giorno, nero nella modalita' scura */
:root{--an-bg:#e4e4e2; --an-fg:#1b1b1a; --an-mute:#3d3d3a; --an-soft:#5a5a56; --an-line:rgba(27,27,26,.1); --an-stroke:rgba(27,27,26,.28);
  --an-chip-bg:rgba(255,255,255,.55); --an-chip-bd:rgba(27,27,26,.1); --an-chip-fg:#3a3a37; --an-qf:brightness(.8) saturate(1.25)}
@media (prefers-color-scheme: dark){ :root{--an-bg:#0e0e0d; --an-fg:#f1f0ec; --an-mute:#c6c5be; --an-soft:#a5a49e; --an-line:rgba(255,255,255,.1);
  --an-stroke:rgba(255,255,255,.35); --an-chip-bg:rgba(255,255,255,.04); --an-chip-bd:rgba(255,255,255,.12); --an-chip-fg:#d6d5cf; --an-qf:brightness(1.25) saturate(1.1)} }
.an::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:radial-gradient(60% 40% at 20% 0%, var(--glow, rgba(235,160,52,.22)), transparent 70%)}
.an-h{position:relative; max-width:1180px; margin:0 auto; padding:0 20px}
.an h2 em{font-style:normal}
.an h2 em .w > span{background:linear-gradient(90deg, #f5c35e, #dc7a1c, #c83b3b, #6e92bd); -webkit-background-clip:text; background-clip:text; color:transparent}
.an-body{position:relative; max-width:1180px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:7fr 5fr; gap:56px}
.an-stage-wrap{position:sticky; top:12vh; height:76vh; align-self:start; margin-top:4vh}
.an-stage{position:relative; height:100%; border-radius:30px; background:#fff; overflow:hidden; transform:perspective(1400px) rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg));
  transition:transform .4s var(--ease), box-shadow 1s ease; box-shadow:0 40px 120px -30px var(--glow, rgba(235,160,52,.35))}
.an-imgs img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10% 5% 16%;
  clip-path:circle(0% at 50% 48%); transform:scale(1.12) rotate(4deg); filter:blur(8px);
  transition:clip-path 1.2s var(--ease), transform 1.4s var(--spring), filter 1s var(--ease)}
.an-imgs img.on{clip-path:circle(80% at 50% 48%); transform:none; filter:none; z-index:2}
.an-imgs img.was{clip-path:circle(80% at 50% 48%); transform:scale(.9); filter:blur(3px); z-index:1; opacity:.6; transition:transform 1.2s var(--ease), filter 1s, opacity 1s}
.an-inset{position:absolute; right:22px; bottom:66px; width:clamp(96px, 11vw, 150px); aspect-ratio:1; border-radius:50%; background:#fff; z-index:3;
  box-shadow:0 10px 30px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06); overflow:hidden}
.an-inset img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:rotate(-90deg) scale(.6); transition:opacity .7s var(--ease), transform 1s var(--spring)}
.an-inset img.on{opacity:1; transform:none}
.an-hud{position:absolute; left:24px; top:22px; right:24px; display:flex; align-items:baseline; gap:14px; z-index:3; color:#1b1b1a}
.an-count{font:500 12px var(--mono); color:#62625c}
.an-count b{font-size:28px; font-weight:500; color:#1b1b1a; letter-spacing:-.04em}
.an-name{font-size:14px; font-weight:600}
.an-ticks{position:absolute; left:24px; right:24px; bottom:24px; display:flex; gap:5px; z-index:3}
.an-ticks button{flex:1; height:22px; border:0; padding:0; background:none; cursor:pointer; position:relative}
.an-ticks button::before{content:""; position:absolute; left:0; right:0; top:10px; height:3px; border-radius:2px; background:rgba(0,0,0,.1); transition:background .4s}
.an-ticks button.done::before{background:rgba(0,0,0,.35)}
.an-ticks button.on::before{background:var(--c, #1b1b1a)}
.an-list{list-style:none; margin:0; padding:0}
.an-item{min-height:58vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; filter:blur(1.5px); transform:translateX(20px);
  transition:opacity .6s var(--ease), filter .6s var(--ease), transform .8s var(--ease)}
.an-item.on{opacity:1; filter:none; transform:none}
.an-idx{font-size:clamp(70px, 9vw, 120px); font-weight:700; line-height:.9; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px var(--an-stroke)}
.an-item.on .an-idx{-webkit-text-stroke:0; background:var(--grad); -webkit-background-clip:text; background-clip:text}
.an-grp{display:inline-flex; align-items:center; gap:8px; margin-top:18px; font:500 11.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--an-soft)}
.an-grp i{width:8px; height:8px; border-radius:50%; background:var(--c)}
.an-item h3{margin-top:8px; font-size:clamp(28px, 3vw, 40px); font-weight:600; letter-spacing:-.035em; line-height:1.05}
.an-q{margin:14px 0 0; font-size:clamp(18px, 1.7vw, 22px); line-height:1.35; letter-spacing:-.01em; font-weight:500;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; filter:var(--an-qf)}
.an-d{margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--an-mute); max-width:440px}
.an-scale{margin-top:22px; max-width:360px}
.an-scale .bar{height:6px; border-radius:3px; background:var(--grad); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s var(--ease) .2s}
.an-item.on .an-scale .bar{transform:none}
.an-scale .ends{display:flex; justify-content:space-between; margin-top:7px; font:400 11px var(--mono); color:var(--an-soft)}
.an-more{position:relative; max-width:1180px; margin:clamp(40px, 6vw, 80px) auto 0; padding:0 20px}
.chips{display:flex; flex-direction:column; gap:10px; margin:6px -20px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.chip-row{overflow:hidden}
.chip-track{display:flex; gap:10px; width:max-content; animation:marq 60s linear infinite}
.chip-row.rev .chip-track{animation-direction:reverse; animation-duration:70s}
.chip-track span{white-space:nowrap; height:44px; display:inline-flex; align-items:center; padding:0 20px; border-radius:999px; border:1px solid var(--an-chip-bd);
  background:var(--an-chip-bg); font-size:14px; color:var(--an-chip-fg)}
.an-note{margin:28px 0 0; font:400 12px var(--mono); color:var(--an-soft)}
@media (max-width:900px){
  .an{margin-left:8px; margin-right:8px; border-radius:28px}
  .an-body{grid-template-columns:1fr; gap:0}
  .an-stage-wrap{top:64px; height:46vh; margin-top:28px; z-index:2}
  .an-stage{border-radius:22px}
  .an-inset{width:84px; bottom:52px; right:14px}
  .an-item{min-height:56vh; justify-content:flex-start; padding-top:6vh}
  .an-idx{font-size:56px}
}

/* ---------- fonti che scorrono ---------- */
.marquee{margin-top:40px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.track{display:flex; gap:10px; width:max-content; animation:marq 48s linear infinite}
.track span{white-space:nowrap; height:42px; display:inline-flex; align-items:center; padding:0 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); font-size:14px; color:var(--ink-2)}
.marquee:hover .track, .chips:hover .chip-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 5px))}}

/* ---------- esportazione ---------- */
.outs{margin-top:48px; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.out{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:22px}
.fmt{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px}
.fmt span{font:500 12px var(--mono); padding:5px 10px; border-radius:8px; background:var(--ink); color:var(--bg)}
.out p{margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--ink-2)}
@media (max-width:860px){ .outs{grid-template-columns:1fr} }

/* ---------- crediti ---------- */
.plans{margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:880px}
.plan{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:26px; display:flex; flex-direction:column}
.plan.pro{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.plan .big{margin:10px 0 0; font-size:34px; font-weight:300; letter-spacing:-.04em}
.plan .big b{font-weight:600}
.plan ul{list-style:none; margin:18px 0 24px; padding:0; flex:1}
.plan li{font-size:14px; line-height:1.5; padding:8px 0 8px 22px; border-top:1px solid var(--line); position:relative; color:var(--ink-2)}
.plan.pro li{color:inherit; opacity:.92; border-top-color:rgba(127,127,127,.25)}
.plan li::before{content:""; position:absolute; left:2px; top:15px; width:9px; height:5px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg)}
.plan .btn{align-self:flex-start}
.plan.pro .btn.dark{background:var(--bg); color:var(--ink); border-color:var(--bg)}
@media (max-width:700px){ .plans{grid-template-columns:1fr} }

/* ---------- chiusura ---------- */
.final{max-width:1180px; margin:0 auto; padding:clamp(110px, 15vw, 200px) 20px clamp(80px, 10vw, 120px); text-align:center}
.final h2.big{font-size:clamp(44px, 8vw, 118px); line-height:.98; letter-spacing:-.055em; max-width:1000px; margin:0 auto}
.final .cta{justify-content:center; margin-top:36px}
.foot{max-width:1180px; margin:0 auto; padding:22px 20px max(26px, env(safe-area-inset-bottom)); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); font:400 12px var(--mono); color:var(--ink-3)}
.foot b{font-weight:700; color:var(--ink)}
.foot a{color:inherit}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv, .split .w > span{opacity:1; transform:none; filter:none; transition:none}
  .h1-w .ch, .hero-in > *, .track, .chip-track, .art-map .ring, .art-map .pin::after, .art-export i, .scroll-cue i{animation:none}
  .art-design i{animation:none} .art-design i:first-child{opacity:1}
  .an-imgs img, .an-item, .an-inset img{transition:none}
}

/* ---------- simulatori: sole e vento ---------- */
.sim{margin-top:56px; display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:center}
.sim.alt{grid-template-columns:5fr 7fr}
.sim.alt .sim-media{order:2}
.sim-media{position:relative; border-radius:28px; overflow:hidden; background:#eef0f1; aspect-ratio:1120 / 700;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.35); transform:perspective(1200px) rotateY(var(--my, 0deg)); transition:transform .5s var(--ease)}
.sim.alt .sim-media{--my:0deg}
.sim-v{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.02)}
.sim-badge{position:absolute; left:16px; top:16px; display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px;
  background:rgba(255,255,255,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font:500 11.5px var(--mono); color:#1b1b1a; letter-spacing:.02em}
.sim-badge i{width:8px; height:8px; border-radius:50%; background:#e0463a; box-shadow:0 0 0 0 rgba(224,70,58,.6); animation:live 1.6s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(224,70,58,.55)} 100%{box-shadow:0 0 0 10px rgba(224,70,58,0)}}
.sim-n{font:500 12px var(--mono); color:var(--ink-3)}
.sim-txt h3{margin-top:10px; font-size:clamp(26px, 2.6vw, 34px); letter-spacing:-.035em; line-height:1.05}
.sim-q{margin:12px 0 0 !important; font-size:18px !important; font-weight:500; line-height:1.35; color:var(--ink) !important; letter-spacing:-.01em}
.sim-txt > p{margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--ink-2)}
.sim:first-of-type .sim-q{background:linear-gradient(90deg, #dc7a1c, #f5c35e); -webkit-background-clip:text; background-clip:text; color:transparent !important}
.sim.alt .sim-q{background:linear-gradient(90deg, #27406b, #6e92bd); -webkit-background-clip:text; background-clip:text; color:transparent !important}
.sim-facts{list-style:none; margin:20px 0 0; padding:0}
.sim-facts li{font-size:14px; line-height:1.5; color:var(--ink-2); padding:9px 0; border-top:1px solid var(--line)}
.sim-facts b{color:var(--ink); font-weight:600}
.sim-note{margin:36px 0 0; font:400 12px var(--mono); color:var(--ink-3)}
@media (prefers-color-scheme: dark){
  .sim:first-of-type .sim-q{background:linear-gradient(90deg, #f0a24a, #f7d27e); -webkit-background-clip:text; background-clip:text}
  .sim.alt .sim-q{background:linear-gradient(90deg, #8fb3dd, #c9dcf0); -webkit-background-clip:text; background-clip:text}
}
@media (max-width:860px){
  .sim, .sim.alt{grid-template-columns:1fr; gap:22px; margin-top:40px}
  .sim.alt .sim-media{order:0}
}
@media (prefers-reduced-motion: reduce){ .sim-badge i{animation:none} }