*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --red:#E31B23;
  --red-glow:rgba(227,27,35,0.18);
  --red-border:rgba(227,27,35,0.35);
  --bg:#0d0d0d;
  --bg2:#111111;
  --bg3:#161616;
  --bgcard:#141414;
  --text:#e8e5e4;
  --mid:#9a9795;
  --dim:#4a4947;
  --border:rgba(255,255,255,0.06);
  --border2:rgba(255,255,255,0.1);
  --fd:"Barlow Condensed",sans-serif;
  --fb:"DM Sans",sans-serif;
  --fl:"Courier Prime",monospace;
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--fb);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--red)}

/* ── GRAIN OVERLAY ── */
body::after{
  content:"";position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9998;opacity:.6
}

/* ── SCROLL PROGRESS ── */
#spb{position:fixed;top:0;left:0;height:2px;background:var(--red);width:0%;z-index:9999;transition:width .08s linear}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;height:70px;
  transition:background .5s,border-color .5s
}
nav.scrolled{background:rgba(13,13,13,.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.nav-logo{
  font-family:var(--fd);font-weight:900;font-size:21px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;text-decoration:none;
  display:flex;align-items:center;gap:10px
}
.nav-dot{width:7px;height:7px;background:var(--red);border-radius:50%;animation:dotpulse 2s ease-in-out infinite}
@keyframes dotpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.75)}}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-family:var(--fl);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--red)}
.nav-cta{
  background:var(--red);color:#fff;border:none;
  padding:10px 22px;font-family:var(--fl);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:opacity .2s,transform .2s
}
.nav-cta:hover{opacity:.82;transform:scale(1.03)}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
.nav-burger span{display:block;width:22px;height:1px;background:#fff;transition:all .3s}

/* ── REVEAL SYSTEM ── */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:translateY(0)}
.rvl{opacity:0;transform:translateX(-44px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rvl.in{opacity:1;transform:translateX(0)}
.rvr{opacity:0;transform:translateX(44px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rvr.in{opacity:1;transform:translateX(0)}
.rvc{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.16,1,.3,1)}
.rvc.in{clip-path:inset(0 0 0% 0)}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}.d5{transition-delay:.6s}.d6{transition-delay:.72s}

/* ── HERO ── */
.hero{min-height:100vh;padding-top:70px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.06;mix-blend-mode:luminosity}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 65% 50%, rgba(227,27,35,.07) 0%,transparent 65%),
    linear-gradient(to bottom, var(--bg) 0%,transparent 25%,transparent 75%,var(--bg) 100%)
}
.hero-inner{
  position:relative;z-index:1;max-width:1440px;margin:0 auto;
  padding:80px 52px;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center
}
.hero-eyebrow{
  display:flex;align-items:center;gap:16px;margin-bottom:28px;
  animation:heroFade .7s cubic-bezier(.16,1,.3,1) .25s both
}
.hero-eyebrow::before{content:"";width:36px;height:1px;background:var(--red);flex-shrink:0}
.eyebrow-txt{font-family:var(--fl);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid)}
.hero-h1{
  font-family:var(--fd);font-weight:900;
  font-size:clamp(58px,5.8vw,94px);
  line-height:.9;letter-spacing:-.01em;text-transform:uppercase;color:#fff;
  margin-bottom:28px
}
.hero-h1 .l1{animation:heroFade .8s cubic-bezier(.16,1,.3,1) .5s both}
.hero-h1 .l2{animation:heroFade .8s cubic-bezier(.16,1,.3,1) .65s both}
.hero-h1 .l3{animation:heroFade .8s cubic-bezier(.16,1,.3,1) .8s both;color:var(--red);font-style:italic}
.hero-sub{
  font-size:16px;color:var(--mid);line-height:1.65;max-width:420px;
  padding-left:18px;border-left:1px solid var(--border2);
  margin-bottom:44px;
  animation:heroFade .8s cubic-bezier(.16,1,.3,1) 1s both
}
.hero-ctas{display:flex;gap:20px;flex-wrap:wrap;animation:heroFade .8s cubic-bezier(.16,1,.3,1) 1.2s both}
.btn-p{
  background:var(--red);color:#fff;border:none;
  padding:15px 30px;font-family:var(--fl);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;display:flex;align-items:center;gap:10px;
  transition:transform .25s,box-shadow .35s
}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(227,27,35,.32)}
.btn-s{
  background:transparent;color:var(--text);
  border:1px solid var(--border2);
  padding:15px 30px;font-family:var(--fl);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:border-color .2s,color .2s,transform .2s
}
.btn-s:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
@keyframes heroFade{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
.hero-visual{animation:heroScale 1.2s cubic-bezier(.16,1,.3,1) 1.4s both}
@keyframes heroScale{from{opacity:0;transform:scale(.97) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* Before/After slider */
.ba-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--border2)}
.ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before-pane{
  position:absolute;top:0;left:0;bottom:0;width:50%;overflow:hidden;
  border-right:2px solid var(--red);z-index:2;
  transition:width .08s linear
}
.ba-before-pane img{position:absolute;top:0;left:0;width:200%;height:100%;max-width:none;object-fit:cover;filter:grayscale(1);opacity:.55}
.ba-lbl{position:absolute;font-family:var(--fl);font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:4px 10px;backdrop-filter:blur(8px);z-index:5}
.ba-lbl.b4{top:14px;left:14px;background:rgba(0,0,0,.65);color:var(--mid);border:1px solid rgba(255,255,255,.12)}
.ba-lbl.af{top:14px;right:14px;background:rgba(227,27,35,.18);color:var(--red);border:1px solid rgba(227,27,35,.35)}
.ba-handle{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:10;width:34px;height:34px;
  background:var(--bg);border:2px solid var(--red);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:ew-resize;box-shadow:0 0 22px rgba(227,27,35,.45);
  transition:left .08s linear
}
.hero-visual-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;padding:0 2px
}
.visual-dots{display:flex;gap:5px;align-items:center}
.vd{width:6px;height:6px;border-radius:50%;background:var(--border2)}
.vd.active{width:8px;height:8px;background:var(--red);animation:dotpulse 1.5s infinite}

/* ── TICKER ── */
.ticker{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:15px 0;background:var(--bg2)}
.ticker-track{display:flex;gap:56px;animation:tick 22s linear infinite;white-space:nowrap}
.ticker-item{
  font-family:var(--fl);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:18px;flex-shrink:0
}
.ticker-item::before{content:"×";color:var(--red);font-size:13px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SCENE (STICKY PROBLEM/SOLUTION) ── */
.scene-outer{height:220vh;position:relative}
.scene-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.scene-pane{
  position:absolute;inset:0;
  display:flex;align-items:center;
  padding:80px 52px;
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)
}
.sp-problema{background:var(--bg)}
.sp-soluzione{background:var(--bg2);opacity:0;transform:translateY(24px);pointer-events:none}
.sp-soluzione.show{opacity:1;transform:translateY(0);pointer-events:auto}
.sp-inner{
  max-width:1440px;margin:0 auto;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center
}
.sp-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sp-eyebrow::before{content:"";width:28px;height:1px;background:var(--red)}
.sp-h2{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(38px,3.8vw,62px);text-transform:uppercase;line-height:.97;color:#fff;margin-bottom:22px
}
.sp-h2 em{font-style:italic;color:var(--dim)}
.sp-body{font-size:16px;color:var(--mid);line-height:1.65}
.sp-ghost{
  font-family:var(--fd);font-weight:900;
  font-size:clamp(110px,13vw,190px);line-height:1;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.04);user-select:none;text-align:right
}
.sp-soluzione .sp-ghost{-webkit-text-stroke:1px rgba(227,27,35,.1)}
.sp-body-box{border-left:2px solid var(--red);padding-left:20px}

/* ── 4 PILLARS ── */
.pillars{padding:120px 0;background:var(--bg);overflow:hidden}
.ph,.pg{max-width:1440px;margin:0 auto;padding:0 52px}
.ph{margin-bottom:70px}
.sec-eye{display:inline-flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-eye::before{content:"";width:28px;height:1px;background:var(--red)}
.sec-h2{
  font-family:var(--fd);font-weight:800;
  font-size:clamp(44px,4.8vw,78px);text-transform:uppercase;line-height:.93;color:#fff;margin-bottom:18px
}
.sec-sub{font-size:16px;color:var(--mid);max-width:520px;line-height:1.6}
.pg{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pillars-outro{
  position:relative;z-index:2;
  /*background:#080808;*/
  padding:86px 52px 130px;
  text-align:center;
}
.pillars-outro-inner{max-width:860px;margin:0 auto}
.pillars-outro-txt{
  font-family:var(--fd);font-weight:600;
  font-size:clamp(20px,2.3vw,29px);line-height:1.32;
  color:rgba(244,241,237,.92);
  margin-bottom:34px;
}
.pillar{
  background:var(--bgcard);border:1px solid var(--border);
  padding:56px 52px;min-height:420px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;transition:border-color .4s
}
.pillar::after{
  content:"";position:absolute;top:0;right:0;width:1px;height:0;
  background:var(--red);transition:height .6s cubic-bezier(.16,1,.3,1)
}
.pillar:hover::after{height:100%}
.pillar:hover{border-color:rgba(227,27,35,.18)}
.pillar:nth-child(2),.pillar:nth-child(4){margin-top:56px}
.p-num{font-family:var(--fl);font-size:10px;letter-spacing:.2em;color:var(--dim);margin-bottom:22px;transition:color .3s}
.pillar:hover .p-num{color:var(--red)}
.p-ico{font-size:44px;color:rgba(255,255,255,.14);margin-bottom:20px;transition:color .3s}
.pillar:hover .p-ico{color:rgba(255,255,255,.5)}
.p-title{
  font-family:var(--fd);font-weight:800;font-size:34px;
  text-transform:uppercase;line-height:.97;color:#fff;margin-bottom:18px
}
.p-body{font-size:14px;color:var(--dim);line-height:1.65;flex:1}
.p-arr{display:flex;justify-content:flex-end;margin-top:36px}
.p-arr span{font-size:22px;color:var(--dim);transition:color .3s,transform .3s}
.pillar:hover .p-arr span{color:var(--red);transform:translateX(6px)}

/* ── PERCORSI (horizontal scroll) ── */
.percorsi-out{height:480vh;position:relative}
.percorsi-stick{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:80px 0
}
.ph2{padding:0 52px;margin-bottom:52px}
.trk-wrap{overflow:hidden;padding:0 52px}
.trk{display:flex;gap:20px;will-change:transform}
.card-p{
  background:var(--bgcard);border:1px solid var(--border);
  padding:44px 36px;flex:0 0 310px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .3s
}
.card-p:hover{border-color:rgba(227,27,35,.25)}
.card-p.feat{border-color:rgba(227,27,35,.38)}
.feat-badge{
  position:absolute;top:0;right:0;background:var(--red);color:#fff;
  font-family:var(--fl);font-size:8px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px
}
.p-name{
  font-family:var(--fd);font-weight:800;font-size:30px;text-transform:uppercase;
  color:#fff;margin-bottom:8px
}
.p-tag{font-size:12px;color:var(--dim);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.p-list{list-style:none;flex:1;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.p-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--mid)}
.p-list li::before{content:"—";color:var(--red);flex-shrink:0;font-size:11px;margin-top:2px}
.pbtn{
  width:100%;padding:11px;font-family:var(--fl);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;transition:all .2s
}
.pbtn-o{background:transparent;color:var(--dim);border:1px solid var(--border)}
.pbtn-o:hover{border-color:var(--red);color:var(--red)}
.pbtn-f{background:var(--red);color:#fff;border:1px solid var(--red)}
.pbtn-f:hover{opacity:.84}
.perc-prog{
  display:flex;align-items:center;gap:18px;padding:0 52px;margin-top:36px
}
.prog-bar{flex:1;height:1px;background:var(--border);position:relative;overflow:hidden}
.prog-fill{position:absolute;top:0;left:0;height:100%;background:var(--red);width:0%;transition:width .08s linear}

/* ── PRIMA/DOPO ── */
.proof{padding:120px 0;background:var(--bg2);overflow:hidden}
.proof-h,.proof-g{max-width:1440px;margin:0 auto;padding:0 52px}
.proof-h{text-align:center;margin-bottom:72px}
.proof-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.proof-c{position:relative}
.proof-c:nth-child(2){margin-top:56px}
.proof-vis{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--bgcard)}
.split-v{display:flex;flex-direction:column;height:100%}
.split-v .pt,.split-v .pb{flex:1;position:relative;overflow:hidden}
.split-v .pt img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.55}
.split-v .pb img{width:100%;height:100%;object-fit:cover}
.split-h{display:flex;height:100%}
.split-h .pl,.split-h .pr{flex:1;position:relative;overflow:hidden}
.split-h .pl img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.55}
.split-h .pr img{width:100%;height:100%;object-fit:cover}
.divv{width:2px;background:var(--red);flex-shrink:0}
.divh{height:2px;background:var(--red);flex-shrink:0}
.logo-vis{display:flex;flex-direction:column;height:100%;background:var(--bg3)}
.logo-b{flex:1;display:flex;align-items:center;justify-content:center;filter:grayscale(1);opacity:.35;padding:28px}
.logo-a{flex:1;display:flex;align-items:center;justify-content:center;padding:28px}
.proof-lbl{
  position:absolute;font-family:var(--fl);font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:4px 9px
}
.plbl-b{top:12px;left:12px;background:rgba(0,0,0,.7);color:var(--mid);border:1px solid rgba(255,255,255,.1)}
.plbl-a{bottom:12px;right:12px;background:var(--red);color:#fff}
.proof-meta{margin-top:18px}
.proof-meta h4{
  font-family:var(--fd);font-weight:700;font-size:19px;text-transform:uppercase;
  color:#fff;margin-bottom:5px;transition:color .3s
}
.proof-c:hover .proof-meta h4{color:var(--red)}
.proof-meta p{font-size:12px;color:var(--dim)}

/* ── METODO ── */
.metodo{background:var(--bg);padding:120px 0}
.m-inner{max-width:1440px;margin:0 auto;padding:0 52px}
.m-head{margin-bottom:72px}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}
.step{
  padding:44px 36px 44px 0;border-right:1px solid var(--border);
  position:relative;opacity:.3;
  transition:opacity .6s ease
}
.step:last-child{border-right:none;padding-right:0}
.step.on{opacity:1}
.step-line{
  position:absolute;top:-1px;left:0;height:2px;
  background:var(--red);width:0%;
  transition:width .9s cubic-bezier(.16,1,.3,1)
}
.step.on .step-line{width:100%}
.step-num{
  font-family:var(--fd);font-weight:900;font-size:76px;
  text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1px var(--border2);
  line-height:1;margin-bottom:22px;
  transition:-webkit-text-stroke .5s
}
.step.on .step-num{color:var(--red);-webkit-text-stroke:1px var(--red)}
.step-title{
  font-family:var(--fd);font-weight:700;font-size:21px;
  text-transform:uppercase;color:#fff;margin-bottom:14px
}
.step-body{font-size:13px;color:var(--dim);line-height:1.6}





























/* ── CTA FINALE ── */
.cta-fin{padding:160px 0;background:var(--bg);position:relative;overflow:hidden;text-align:center}
.cta-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:700px;height:700px;
  background:radial-gradient(circle, rgba(227,27,35,.11) 0%,transparent 65%);
  pointer-events:none
}
.cta-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.cta-ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cta-ring:nth-child(1){width:380px;height:380px;border:1px solid rgba(255,255,255,.035)}
.cta-ring:nth-child(2){width:600px;height:600px;border:1px solid rgba(255,255,255,.025)}
.cta-ring:nth-child(3){width:860px;height:860px;border:1px solid rgba(227,27,35,.06)}
.cta-in{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:0 52px}
.cta-h2{
  font-family:var(--fd);font-weight:900;
  font-size:clamp(52px,7vw,108px);text-transform:uppercase;
  line-height:.9;color:#fff;margin-bottom:30px
}
.cta-accent{color:var(--red);display:block}
.cta-sub{font-size:17px;color:var(--mid);max-width:560px;margin:0 auto 44px;line-height:1.65}
.cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--red);color:#fff;border:none;
  padding:18px 44px;font-family:var(--fl);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:transform .3s,box-shadow .35s
}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 22px 56px rgba(227,27,35,.38)}

/* ── FOOTER ── */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:44px 52px}
.f-in{max-width:1440px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.f-logo{font-family:var(--fd);font-weight:900;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.f-links{display:flex;gap:28px;list-style:none}
.f-links a{font-family:var(--fl);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--red)}
.f-copy{font-family:var(--fl);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* ── MOBILE ── */
@media(max-width:768px){
  nav{padding:0 24px}
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .hero-inner{grid-template-columns:1fr;padding:50px 24px 60px;gap:40px}
  .hero-h1{font-size:58px}
  .hero-visual{display:none}
  .scene-outer{height:260vh}
  .scene-pane{padding:64px 24px}
  .sp-inner{grid-template-columns:1fr;gap:32px}
  .sp-ghost{display:none}
  .pillars,.ph,.pg{padding:80px 0}
  .ph{padding:0 24px 48px}
  .pg{padding:0 24px;grid-template-columns:1fr}
  .pillars-outro{padding:56px 24px 72px}
  .pillar:nth-child(2),.pillar:nth-child(4){margin-top:0}
  .percorsi-out{height:auto}
  .percorsi-stick{position:relative;height:auto;padding:80px 0}
  .ph2,.perc-prog{padding:0 24px}
  .trk-wrap{padding:0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .trk{transform:none!important}
  .proof-h,.proof-g{padding:0 24px}
  .proof-g{grid-template-columns:1fr;gap:28px}
  .proof-c:nth-child(2){margin-top:0}
  .m-inner{padding:0 24px}
  .m-grid{grid-template-columns:1fr 1fr}
  .step-num{font-size:54px}
  .step{padding:28px 16px 28px 0}
  
  
  
  .cta-in{padding:0 24px}
  .cta-h2{font-size:48px}
  footer{padding:32px 24px}
  .f-in{flex-direction:column;align-items:flex-start;gap:18px}
}



/* STORY MODE OVERRIDES */
:root{
  --ease:cubic-bezier(.16,1,.3,1);
  --cream:#f4f1ed;
  --scene-pr:0;
  --hero-pr:0;
  --split:54%;
}

.hero{
  min-height:100svh;
  isolation:isolate;
  background:
    radial-gradient(circle at 74% 46%, rgba(227,27,35,.18), transparent 26%),
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(140deg,#050505 0%,#101010 48%,#070707 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:92px 92px;
  mask-image:radial-gradient(circle at 68% 46%,#000 0%,transparent 68%);
  opacity:.42;
  transform:translateY(var(--hero-grid-y,0px));
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -10% -18% -10%;
  height:36%;
  z-index:0;
  background:linear-gradient(to top,var(--bg) 0%,transparent 100%);
  pointer-events:none;
}
.hero-bg{
  transform:translateY(var(--hero-bg-y,0px)) scale(var(--hero-scale,1.04));
  opacity:.9;
}
.hero-bg img{opacity:.075;filter:contrast(1.08) grayscale(1)}
.hero-inner{min-height:calc(100svh - 70px);position:relative}
.hero-inner>div:first-child{position:relative;z-index:2}
.hero-h1{color:var(--cream)}
.hero-h1 div{display:block;will-change:transform,opacity}
.hero-sub{font-size:17px;color:rgba(244,241,237,.72)}
.hero-visual{
  position:relative;
  transform:translateY(var(--hero-visual-y,0px));
  will-change:transform;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-1;
  background:radial-gradient(circle,rgba(227,27,35,.22),transparent 58%);
  filter:blur(18px);
  opacity:.78;
}
.ba-wrap{
  border-color:rgba(255,255,255,.12);
  box-shadow:0 36px 90px rgba(0,0,0,.46),0 0 0 1px rgba(227,27,35,.08);
  transform:perspective(1000px) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg));
  will-change:transform;
}
.ba-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.12) 46%,transparent 58%);
  transform:translateX(-130%);
  animation:scanLight 3.2s var(--ease) 1.35s both;
  pointer-events:none;
}
.ba-before-pane{width:var(--split);transition:none}
.ba-handle{left:var(--split);transition:none}
.ba-before-pane img{filter:grayscale(1) contrast(.9);opacity:.52}
.ba-after{filter:saturate(1.04) contrast(1.05)}
@keyframes scanLight{0%{transform:translateX(-130%)}42%,100%{transform:translateX(130%)}}

.sectors{
  position:relative;
  overflow:hidden;
  padding:72px 0 78px;
  background:linear-gradient(180deg,var(--bg) 0%,#111 100%);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.sectors::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 16% 50%,rgba(227,27,35,.12),transparent 32%);
  pointer-events:none;
}
.sectors-head{
  max-width:1440px;
  margin:0 auto 34px;
  padding:0 52px;
  display:grid;
  grid-template-columns:.72fr 1fr;
  gap:72px;
  align-items:end;
  position:relative;
  z-index:1;
}
.sectors-title{
  font-family:var(--fd);
  font-weight:800;
  font-size:clamp(38px,4vw,64px);
  line-height:.95;
  text-transform:uppercase;
  color:#fff;
}
.sectors-copy{
  color:var(--mid);
  line-height:1.65;
  max-width:560px;
}
.ticker{
  background:transparent;
  border:0;
  padding:0;
  position:relative;
  z-index:1;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-track{gap:14px;animation:tick 30s linear infinite}
.ticker-item{
  color:rgba(244,241,237,.78);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  padding:11px 18px;
  border-radius:999px;
  backdrop-filter:blur(18px);
}
.ticker-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 14px rgba(227,27,35,.55)}

.scene-outer{
  height:380vh;
  background:#080808;
  --scene-pr:0;
}
.scene-sticky{
  background:
    radial-gradient(circle at var(--scene-x,20%) 46%,rgba(227,27,35,var(--scene-glow,.05)),transparent 28%),
    linear-gradient(180deg,#080808 0%,#111 100%);
}
.scene-pane{will-change:opacity,transform,filter,clip-path}
.sp-problema{
  filter:grayscale(var(--problem-gray,0)) brightness(var(--problem-bright,1));
}
.sp-problema .sp-h2,.sp-problema .sp-body,.sp-problema .sp-eyebrow{
  transform:translateY(var(--problem-text-y,0px));
  transition:transform .1s linear;
}
.sp-soluzione{
  clip-path:inset(18% 0 0 0);
  transform:translateY(40px) scale(.985);
}
.sp-soluzione.show{
  clip-path:inset(0 0 0 0);
  transform:translateY(0) scale(1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.sp-h2{max-width:760px}
.sp-soluzione .sp-h2{color:var(--cream);text-shadow:0 0 36px rgba(227,27,35,.14)}
.sp-body-box{
  background:linear-gradient(90deg,rgba(227,27,35,.08),transparent);
  padding:20px 0 20px 22px;
}

/* ── SCENE THIRD PANE (bianco / testo nero) ── */
.sp-terza{
  background:var(--cream);
  opacity:0;
  transform:translateY(40px) scale(.985);
  pointer-events:none;
}
.sp-terza.show{
  opacity:1;
  transform:translateY(0) scale(1);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.04);
}
.sp-terza .sp-h2{color:#0d0d0d}
.sp-terza .sp-body{color:#4a4947}
.sp-terza .sp-body-box{background:linear-gradient(90deg,rgba(227,27,35,.06),transparent)}
.sp-terza .sp-ghost{-webkit-text-stroke:1px rgba(13,13,13,.1)}

.pillars{
  padding:0;
  background:linear-gradient(180deg,var(--bg) 0%,#0b0b0b 100%);
}
.pillars-stage{
  max-width:1440px;
  margin:0 auto;
  padding:0 52px;
  display:grid;
  grid-template-columns:minmax(300px,.72fr) minmax(0,1fr);
  gap:82px;
  align-items:start;
}
.pillars .ph{
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:0;
  padding:0;
}
.pillars .pg{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:24vh 0 20vh;
}
.pillar,
.pillar:nth-child(2),
.pillar:nth-child(4){
  margin:0 0 24vh!important;
  min-height:58vh;
  padding:58px;
  opacity:.32;
  transform:translateY(36px) scale(.965);
  border-color:rgba(255,255,255,.07);
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    var(--bgcard);
  box-shadow:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
  will-change:opacity,transform;
}
.pillar:last-child{margin-bottom:12vh!important}
.pillar.active{
  opacity:1;
  transform:translateY(0) scale(1);
  border-color:rgba(227,27,35,.52);
  box-shadow:0 28px 80px rgba(0,0,0,.38),0 0 44px rgba(227,27,35,.1);
  background:
    radial-gradient(circle at 88% 16%,rgba(227,27,35,.16),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),
    var(--bgcard);
}
.pillar.active::after{height:100%}
.pillar.active .p-num{color:var(--red)}
.pillar.active .p-ico{color:rgba(255,255,255,.72);transform:translateY(-4px)}
.pillar.active .p-title{color:var(--cream)}
.p-num{font-size:11px}
.p-ico{transition:color .4s var(--ease),transform .4s var(--ease)}
.p-title{font-size:clamp(31px,3vw,46px)}
.p-body{max-width:520px;color:rgba(244,241,237,.58)}

.percorsi-out{height:430vh;background:#0b0b0b}
.percorsi-stick{
  background:
    radial-gradient(circle at 14% 22%,rgba(227,27,35,.1),transparent 24%),
    linear-gradient(180deg,#0b0b0b 0%,#111 100%);
}
.ph2{display:flex;align-items:end;justify-content:space-between;gap:52px}
.ph2 .sec-sub{max-width:480px}
.trk-wrap{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.trk{gap:24px;align-items:stretch}
.card-p{
  flex:0 0 min(390px,78vw);
  min-height:465px;
  opacity:.42;
  transform:scale(.94) translateY(18px);
  border-color:rgba(255,255,255,.08);
  transition:opacity .45s var(--ease),transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.card-p.is-active{
  opacity:1;
  transform:scale(1) translateY(0);
  border-color:rgba(227,27,35,.42);
  box-shadow:0 26px 72px rgba(0,0,0,.42),0 0 36px rgba(227,27,35,.08);
}
.card-p.feat{
  border-color:rgba(227,27,35,.32);
  background:
    linear-gradient(180deg,rgba(227,27,35,.075),transparent 38%),
    var(--bgcard);
}
.feat-badge{background:rgba(227,27,35,.92)}
.p-audience{
  font-family:var(--fl);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(244,241,237,.55);
  margin-bottom:18px;
}
.p-list-title{
  font-family:var(--fl);
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:12px;
}
.prog-bar{height:2px;background:rgba(255,255,255,.08)}
.prog-fill{box-shadow:0 0 18px rgba(227,27,35,.5)}

.proof{
  padding:130px 0 150px;
  background:
    radial-gradient(circle at 82% 8%,rgba(227,27,35,.11),transparent 28%),
    var(--bg2);
}
.proof-h{position:sticky;top:84px;z-index:1;margin-bottom:36px;pointer-events:none}
.proof-g{
  grid-template-columns:1fr;
  max-width:1160px;
  gap:18vh;
}
.proof-c{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(260px,.46fr);
  gap:46px;
  align-items:end;
  min-height:78vh;
  opacity:.28;
  transform:translateY(52px) scale(.98);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.proof-c:nth-child(even){grid-template-columns:minmax(260px,.46fr) minmax(0,1.08fr)}
.proof-c:nth-child(even) .proof-vis{order:2}
.proof-c.in{
  opacity:1;
  transform:translateY(0) scale(1);
}
.proof-vis{
  aspect-ratio:16/10;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 90px rgba(0,0,0,.38);
}
.proof-vis::after{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:8;
  background:linear-gradient(90deg,#151515,#0d0d0d);
  transform:translateX(0);
  transition:transform 1.1s var(--ease) .12s;
  pointer-events:none;
}
.proof-c:nth-child(2) .proof-vis::after{transform:translateY(0)}
.proof-c.in .proof-vis::after{transform:translateX(102%)}
.proof-c:nth-child(2).in .proof-vis::after{transform:translateY(-102%)}
.proof-meta{
  padding:0 0 18px;
  align-self:end;
}
.proof-meta h4{font-size:clamp(25px,2.5vw,38px);line-height:.95;margin-bottom:12px}
.proof-meta p{font-size:14px;line-height:1.65;color:rgba(244,241,237,.58)}

.metodo{
  height:220vh;
  padding:0;
  background:linear-gradient(180deg,var(--bg) 0%,#080808 100%);
}
.m-inner{
  position:sticky;
  top:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.m-head{display:flex;align-items:end;justify-content:space-between;gap:52px}
.m-grid{position:relative}
.m-grid::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  height:2px;
  width:var(--method-fill,0%);
  background:var(--red);
  box-shadow:0 0 18px rgba(227,27,35,.5);
  transition:width .1s linear;
}
.step{
  opacity:.22;
  transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.step.on{
  opacity:1;
  transform:translateY(0);
}
.step.on .step-title{color:var(--cream)}
.step.on .step-body{color:rgba(244,241,237,.66)}













.cta-fin{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:120px 0;
  background:
    radial-gradient(circle at 50% 48%,rgba(227,27,35,.16),transparent 32%),
    linear-gradient(180deg,#080808 0%,#030303 100%);
}
.cta-glow{opacity:.9;filter:blur(10px)}
.cta-h2{letter-spacing:0;color:var(--cream)}
.cta-sub{color:rgba(244,241,237,.68)}
.cta-btn{box-shadow:0 20px 62px rgba(227,27,35,.22)}

@media(max-width:768px){
  .hero{min-height:auto}
  .hero::before{opacity:.2;background-size:58px 58px}
  .hero-inner{min-height:auto}
  .sectors{padding:56px 0}
  .sectors-head{grid-template-columns:1fr;gap:18px;padding:0 24px;margin-bottom:28px}
  .sectors-title{font-size:42px}
  .sectors-copy{font-size:14px}
  .scene-outer{height:auto}
  .scene-sticky{position:relative;height:auto;overflow:visible}
  .scene-pane{position:relative;min-height:auto;opacity:1!important;transform:none!important;clip-path:none!important}
  .sp-soluzione,.sp-terza{opacity:1;pointer-events:auto}
  .pillars-stage{display:block;padding:0 24px}
  .pillars .ph{position:relative;height:auto;padding:82px 0 34px}
  .pillars .pg{padding:0 0 80px}
  .pillar,.pillar:nth-child(2),.pillar:nth-child(4){
    min-height:auto;
    margin:0 0 18px!important;
    padding:34px 28px;
    opacity:1;
    transform:none;
  }
  .ph2{display:block}
  .ph2 .sec-sub{margin-top:16px}
  .card-p{opacity:1;transform:none;min-height:auto}
  .proof{padding:84px 0}
  .proof-h{position:relative;top:auto;margin-bottom:44px}
  .proof-g{gap:34px}
  .proof-c,.proof-c:nth-child(even){
    display:block;
    min-height:auto;
    opacity:1;
    transform:none;
  }
  .proof-c:nth-child(even) .proof-vis{order:0}
  .proof-vis{aspect-ratio:4/5}
  .proof-meta{padding-top:18px}
  .metodo{height:auto;padding:0}
  .m-inner{position:relative;min-height:auto;padding:84px 24px}
  .m-head{display:block;margin-bottom:42px}
  .m-grid{grid-template-columns:1fr}
  .step{opacity:1;transform:none;border-right:0;border-bottom:1px solid var(--border);padding:30px 0}
  .step:last-child{border-bottom:0}
  
  
  
  
  .cta-fin{min-height:auto;padding:96px 0}
}



/* FINAL VISUAL TUNING */
.pillars .ph{z-index:2}
.pillars .ph .rv,.pillars .ph .rvl,.pillars .ph .rvr{
  opacity:1;
  transform:none;
}
.percorsi-stick{
  justify-content:flex-start;
  padding:96px 0 44px;
}
.ph2{margin-bottom:32px}
.card-p{
  min-height:355px;
  padding:34px;
}
.p-tag{
  margin-bottom:18px;
  padding-bottom:16px;
}
.p-audience{margin-bottom:14px}
.p-list{gap:9px;margin-bottom:18px}
.p-list li{font-size:12px}
.perc-prog{margin-top:24px}

@media(max-width:768px){
  .percorsi-stick{padding:80px 0}
  .card-p{min-height:auto;padding:44px 36px}
  .p-list li{font-size:13px}
}

/* PERCORSI READABILITY TUNING */
.percorsi-out{
  height:460vh;
}
.percorsi-stick{
  background:
    radial-gradient(circle at 14% 22%,rgba(227,27,35,.14),transparent 24%),
    linear-gradient(180deg,#090909 0%,#121212 100%);
}
.trk{
  gap:28px;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.card-p{
  flex-basis:min(430px,82vw);
  min-height:410px;
  padding:40px;
  opacity:.72;
  transform:scale(.975) translateY(8px);
  background:
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),
    #151515;
  border-color:rgba(255,255,255,.13);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  cursor:pointer;
  transition:
    opacity .28s var(--ease),
    transform .28s var(--ease),
    border-color .28s var(--ease),
    box-shadow .28s var(--ease),
    background .28s var(--ease);
}
.card-p.is-active,
.card-p:hover,
.card-p:focus-within{
  opacity:1;
  transform:scale(1) translateY(-6px);
  border-color:rgba(227,27,35,.62);
  box-shadow:0 30px 86px rgba(0,0,0,.46),0 0 46px rgba(227,27,35,.16);
  background:
    radial-gradient(circle at 86% 10%,rgba(227,27,35,.18),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.026)),
    #171717;
}
.card-p.feat{
  border-color:rgba(227,27,35,.48);
}
.card-p.feat:hover,
.card-p.feat.is-active{
  border-color:rgba(227,27,35,.76);
}
.card-p::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  opacity:0;
  transform:scaleX(.35);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.card-p:hover::after,
.card-p:focus-within::after,
.card-p.is-active::after{
  opacity:1;
  transform:scaleX(1);
}
.p-name{
  font-size:36px;
  line-height:.95;
  color:#fff;
  transition:color .28s var(--ease),transform .28s var(--ease);
}
.card-p:hover .p-name,
.card-p:focus-within .p-name,
.card-p.is-active .p-name{
  color:var(--cream);
  transform:translateY(-2px);
}
.p-tag{
  font-size:14px;
  line-height:1.45;
  color:rgba(244,241,237,.68);
  border-bottom-color:rgba(255,255,255,.12);
}
.p-audience{
  font-size:10px;
  line-height:1.55;
  color:rgba(244,241,237,.72);
}
.p-list-title{
  font-size:10px;
}
.p-list{
  gap:11px;
}
.p-list li{
  font-size:14px;
  line-height:1.45;
  color:rgba(244,241,237,.78);
}
.card-p:hover .p-list li,
.card-p:focus-within .p-list li,
.card-p.is-active .p-list li{
  color:rgba(244,241,237,.92);
}
.pbtn{
  padding:13px;
  font-size:10px;
  color:#fff;
  border-color:rgba(255,255,255,.16);
}
.pbtn-o{
  color:rgba(244,241,237,.66);
  background:rgba(255,255,255,.025);
}
.card-p:hover .pbtn-o,
.card-p:focus-within .pbtn-o{
  border-color:var(--red);
  color:#fff;
  background:rgba(227,27,35,.14);
}
.pbtn:hover{
  transform:translateY(-2px);
}
.prog-fill{
  transition:width .18s var(--ease);
}

@media(max-width:768px){
  .card-p{
    opacity:1;
    transform:none;
    min-height:auto;
    padding:36px 30px;
  }
  .card-p:hover,
  .card-p:focus-within,
  .card-p.is-active{
    transform:none;
  }
  .p-name{font-size:34px}
  .p-tag{font-size:14px}
  .p-list li{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ticker-track{animation:none!important}
}

/* KIWIDULCIS-INSPIRED MOTION VARIANT */
body.kiwi-motion{
  background:#090909;
}

body.kiwi-motion .hero{
  background:#080808;
}

body.kiwi-motion .hero::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:min(68vw,1180px);
  background:#e31b23;
  clip-path:polygon(0 0,82% 0,58% 100%,0 100%);
  transform-origin:left center;
  transform:scaleX(var(--hero-panel,1));
  opacity:.98;
  z-index:0;
  pointer-events:none;
  animation:heroPanelIn 1.1s cubic-bezier(.16,1,.3,1) .18s both;
}

body.kiwi-motion .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.14) 42%,rgba(0,0,0,.72) 100%);
}

body.kiwi-motion .hero-bg{
  z-index:0;
}

body.kiwi-motion .hero-bg img{
  opacity:.075;
  filter:contrast(1.08) grayscale(1);
}

body.kiwi-motion .hero-inner{
  z-index:2;
}

body.kiwi-motion .hero-h1 .l3{
  color:#f4f1ed!important;
  text-shadow:0 8px 34px rgba(0,0,0,.34);
}

body.kiwi-motion .hero-sub{
  color:rgba(255,255,255,.82);
  border-left-color:rgba(255,255,255,.26);
}

body.kiwi-motion .hero .btn-p{
  background:#080808;
  color:#fff;
}

body.kiwi-motion .hero .btn-s{
  color:#fff;
  border-color:rgba(255,255,255,.34);
  background:rgba(0,0,0,.12);
}

@keyframes heroPanelIn{
  from{transform:scaleX(.18) translateX(-18%);opacity:.1}
  to{transform:scaleX(1) translateX(0);opacity:.98}
}

body.kiwi-motion .material-symbols-outlined{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:1.15em;
  overflow:hidden;
  white-space:nowrap;
  line-height:1;
}

body.kiwi-motion .reel-play.material-symbols-outlined{
  max-width:34px;
}

body.kiwi-motion .btn-p .material-symbols-outlined,
body.kiwi-motion .pbtn .material-symbols-outlined,
body.kiwi-motion .cta-btn .material-symbols-outlined{
  width:1em;
  max-width:none;
  font-size:0!important;
}

body.kiwi-motion .btn-p .material-symbols-outlined::before,
body.kiwi-motion .pbtn .material-symbols-outlined::before,
body.kiwi-motion .cta-btn .material-symbols-outlined::before{
  content:"→";
  font-family:Arial, Helvetica, sans-serif;
  font-size:20px;
  line-height:1;
  font-weight:700;
}

body.kiwi-motion .pillars{
  height:470vh;
  padding:0;
  position:relative;
  overflow:visible;
  background:
    radial-gradient(circle at 72% 35%,rgba(227,27,35,.14),transparent 28%),
    linear-gradient(180deg,#090909 0%,#111 55%,#080808 100%);
}

body.kiwi-motion .pillars::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:86px 86px;
  mask-image:radial-gradient(circle at 60% 50%,#000 0%,transparent 72%);
  pointer-events:none;
  z-index:0;
}

body.kiwi-motion .pillars::before{
  mask-image:none;
  opacity:.28;
}

body.kiwi-motion .pillars-stage{
  position:sticky;
  top:0;
  height:100svh;
  max-width:none;
  padding:0 52px;
  display:grid;
  grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr);
  gap:clamp(34px,5vw,74px);
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

body.kiwi-motion .pillars .ph{
  position:relative;
  top:auto;
  height:auto;
  min-height:0;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  justify-content:center;
  z-index:2;
}

body.kiwi-motion .pillars .ph .sec-h2 span{
  text-shadow:0 0 24px rgba(227,27,35,.16);
}

body.kiwi-motion .pillars .ph::after{
  content:"01 / 04";
  display:block;
  margin-top:42px;
  font-family:var(--fl);
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(244,241,237,.52);
}

body.kiwi-motion .pillars .ph .sec-h2{
  max-width:520px;
  font-size:clamp(42px,4vw,64px);
  line-height:.92;
}

body.kiwi-motion .pillars[data-service="1"] .ph::after{content:"02 / 04"}
body.kiwi-motion .pillars[data-service="2"] .ph::after{content:"03 / 04"}
body.kiwi-motion .pillars[data-service="3"] .ph::after{content:"04 / 04"}

body.kiwi-motion .pillars .pg{
  position:relative;
  height:min(68vh,620px);
  min-height:500px;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  display:block;
  perspective:1300px;
  z-index:1;
}

body.kiwi-motion .pillar,
body.kiwi-motion .pillar:nth-child(2),
body.kiwi-motion .pillar:nth-child(4){
  position:absolute;
  inset:0;
  margin:0!important;
  min-height:0;
  padding:clamp(34px,3.8vw,54px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  opacity:0;
  pointer-events:none;
  transform:translate3d(34vw,0,0) rotateY(-14deg) scale(.86);
  transform-origin:50% 50%;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 86% 12%,rgba(227,27,35,.22),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.018)),
    #141414;
  box-shadow:0 34px 110px rgba(0,0,0,.42);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    border-color .7s cubic-bezier(.16,1,.3,1),
    box-shadow .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}

body.kiwi-motion .pillar.is-before{
  opacity:0;
  transform:translate3d(-18vw,0,0) rotateY(12deg) scale(.9);
}

body.kiwi-motion .pillar.active{
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,0) rotateY(0) scale(1);
  border-color:rgba(227,27,35,.68);
  box-shadow:0 42px 130px rgba(0,0,0,.58),0 0 70px rgba(227,27,35,.16);
}

body.kiwi-motion .pillar::before{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(255,255,255,.055);
  pointer-events:none;
}

body.kiwi-motion .p-num{
  font-size:clamp(62px,6vw,104px);
  line-height:.82;
  color:transparent;
  -webkit-text-stroke:1px rgba(227,27,35,.75);
  margin-bottom:20px;
}

body.kiwi-motion .p-ico{
  color:#fff;
  opacity:.86;
  margin-bottom:18px;
}

body.kiwi-motion .p-title{
  font-size:clamp(34px,4vw,60px);
  line-height:.9;
  color:#f4f1ed;
  max-width:560px;
  margin-bottom:18px;
}

body.kiwi-motion .p-body{
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.55;
  max-width:600px;
  color:rgba(244,241,237,.68);
}

body.kiwi-motion .p-arr{
  align-self:flex-end;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(227,27,35,.5);
  color:#fff;
  background:rgba(227,27,35,.14);
}

.reel-burst{
  position:relative;
  height:245vh;
  overflow:visible;
  background:
    radial-gradient(circle at 50% 55%,rgba(227,27,35,.18),transparent 34%),
    linear-gradient(180deg,#080808 0%,#151515 48%,#080808 100%);
}

.reel-sticky{
  position:sticky;
  top:0;
  height:100svh;
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:clamp(32px,6vw,86px);
  align-items:center;
  padding:0 52px;
  overflow:hidden;
}

.reel-copy{
  max-width:520px;
  z-index:2;
}

.reel-copy h2{
  font-family:var(--fd);
  font-weight:900;
  text-transform:uppercase;
  line-height:.88;
  color:#f4f1ed;
  font-size:clamp(46px,5.8vw,92px);
  margin:18px 0 24px;
}

.reel-copy h2 span{color:var(--red)}
.reel-copy p{font-size:16px;line-height:1.7;color:rgba(244,241,237,.64)}

.reel-stage{
  position:relative;
  height:min(76vh,760px);
  min-height:560px;
  display:grid;
  place-items:center;
}

.reel-stage::before{
  content:"";
  position:absolute;
  width:min(42vw,560px);
  aspect-ratio:1;
  border:1px solid rgba(227,27,35,.18);
  border-radius:50%;
  box-shadow:0 0 70px rgba(227,27,35,.12),inset 0 0 80px rgba(255,255,255,.025);
}

.reel-card{
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(132px,13vw,210px);
  aspect-ratio:9/16;
  margin-left:calc(clamp(132px,13vw,210px) / -2);
  margin-top:calc(clamp(132px,13vw,210px) * -0.888);
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  padding:10px;
  background:#050505;
  box-shadow:0 28px 80px rgba(0,0,0,.48);
  opacity:.24;
  transform:translate3d(0,0,0) rotate(0deg) scale(.76);
  transition:border-color .28s ease,box-shadow .28s ease;
  will-change:transform,opacity;
}

.reel-card:hover{
  border-color:rgba(227,27,35,.74);
  box-shadow:0 32px 95px rgba(0,0,0,.56),0 0 42px rgba(227,27,35,.18);
}

.reel-screen{
  position:relative;
  height:100%;
  border-radius:17px;
  overflow:hidden;
  background:
    linear-gradient(160deg,rgba(227,27,35,.86),rgba(255,255,255,.1) 42%,rgba(0,0,0,.94)),
    #151515;
}

.reel-card:nth-child(even) .reel-screen{
  background:
    linear-gradient(160deg,rgba(255,255,255,.86),rgba(227,27,35,.18) 42%,rgba(0,0,0,.94)),
    #151515;
}

.reel-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.72) 100%);
}

.reel-top{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--fl);
  font-size:8px;
  letter-spacing:.12em;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  z-index:2;
}

.reel-play{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(227,27,35,.92);
  color:#fff;
}

.reel-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:18px;
  z-index:2;
}

.reel-caption strong{
  display:block;
  font-family:var(--fd);
  font-size:clamp(20px,2.1vw,32px);
  line-height:.92;
  text-transform:uppercase;
  color:#fff;
}

.reel-caption span{
  display:block;
  margin-top:8px;
  font-family:var(--fl);
  font-size:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(244,241,237,.66);
}

body.kiwi-motion .proof{
  padding:0;
  background:
    radial-gradient(circle at 18% 22%,rgba(227,27,35,.16),transparent 28%),
    linear-gradient(180deg,#080808 0%,#111 50%,#070707 100%);
}

body.kiwi-motion .proof-h{
  position:sticky;
  top:70px;
  z-index:3;
  max-width:980px;
  margin:0 auto;
  padding:56px 24px 0;
  pointer-events:none;
}

body.kiwi-motion .proof-g{
  display:block;
  max-width:none;
  padding:0;
}

body.kiwi-motion .proof-c,
body.kiwi-motion .proof-c:nth-child(even){
  min-height:108svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.52fr);
  gap:clamp(28px,4vw,64px);
  align-items:end;
  padding:28vh 52px 10vh;
  opacity:.28;
  transform:translateY(48px) scale(.95);
  --proof-cut:100%;
  --proof-line:0%;
  --after-label-opacity:0;
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
}

body.kiwi-motion .proof-c:nth-child(even){
  grid-template-columns:minmax(360px,.52fr) minmax(0,1fr);
}

body.kiwi-motion .proof-c.motion-active,
body.kiwi-motion .proof-c.in{
  opacity:1;
  transform:translateY(0) scale(1);
}

body.kiwi-motion .proof-c:nth-child(even) .proof-vis{order:2}

body.kiwi-motion .proof-vis{
  height:min(72vh,760px);
  aspect-ratio:16/9;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 40px 130px rgba(0,0,0,.58);
}

body.kiwi-motion .proof-vis::after{display:none}

body.kiwi-motion .proof-c .plbl-a{
  opacity:var(--after-label-opacity,0);
  transform:translateY(6px);
  transition:opacity .28s ease,transform .28s ease;
}

body.kiwi-motion .proof-c.motion-active .plbl-a{
  transform:translateY(0);
}

body.kiwi-motion .split-v,
body.kiwi-motion .split-h,
body.kiwi-motion .logo-vis{
  position:absolute;
  inset:0;
  display:block;
  height:100%;
}

body.kiwi-motion .split-v .pt,
body.kiwi-motion .split-v .pb,
body.kiwi-motion .split-h .pl,
body.kiwi-motion .split-h .pr,
body.kiwi-motion .logo-b,
body.kiwi-motion .logo-a{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

body.kiwi-motion .split-v .pt img,
body.kiwi-motion .split-v .pb img,
body.kiwi-motion .split-h .pl img,
body.kiwi-motion .split-h .pr img{
  width:100%;
  height:100%;
  object-fit:cover;
}

body.kiwi-motion .split-v .pb,
body.kiwi-motion .split-h .pr,
body.kiwi-motion .logo-a{
  z-index:2;
  clip-path:inset(0 var(--proof-cut,48%) 0 0);
}

body.kiwi-motion .split-v .pt,
body.kiwi-motion .split-h .pl,
body.kiwi-motion .logo-b{
  z-index:1;
}

body.kiwi-motion .divh,
body.kiwi-motion .divv{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--proof-line,52%);
  width:2px;
  height:auto;
  background:var(--red);
  z-index:6;
  box-shadow:0 0 28px rgba(227,27,35,.55);
}

body.kiwi-motion .proof-meta{
  max-width:430px;
  padding:0 0 28px;
}

body.kiwi-motion .proof-meta h4{
  font-size:clamp(30px,3.2vw,50px);
  line-height:.88;
  margin-bottom:18px;
  overflow-wrap:break-word;
}

body.kiwi-motion .proof-meta p{
  font-size:16px;
  line-height:1.7;
  color:rgba(244,241,237,.66);
}

body.kiwi-motion .proof-c.motion-active .proof-meta h4{color:#f4f1ed}

body.kiwi-motion .cta-fin{
  background:
    radial-gradient(circle at 50% 10%,rgba(227,27,35,.22),transparent 34%),
    linear-gradient(180deg,#080808 0%,#190406 100%);
}

body.kiwi-motion .percorsi-stick{
  justify-content:flex-start;
  padding:52px 0 22px;
}

body.kiwi-motion .ph2{
  margin-bottom:22px;
}

body.kiwi-motion .ph2 .sec-h2{
  font-size:clamp(48px,4.8vw,76px);
  line-height:.9;
}

body.kiwi-motion .trk-wrap{
  padding:0 52px;
}

body.kiwi-motion .card-p{
  min-height:365px;
  padding:30px 34px 28px;
}

body.kiwi-motion .p-name{
  font-size:32px;
  margin-bottom:6px;
}

body.kiwi-motion .p-tag{
  margin-bottom:14px;
  padding-bottom:14px;
}

body.kiwi-motion .p-audience{
  margin-bottom:10px;
}

body.kiwi-motion .p-list{
  gap:8px;
  margin-bottom:14px;
}

body.kiwi-motion .p-list li{
  line-height:1.28;
}

body.kiwi-motion .pbtn{
  padding:11px;
}

body.kiwi-motion .perc-prog{
  margin-top:18px;
}

/* SECTION BACKGROUND STATES */
body.kiwi-motion{
  --chapter-enter:1;
  --page-bg:#090909;
  background:var(--page-bg);
  transition:background-color .12s linear;
}

body.kiwi-motion .sectors,
body.kiwi-motion .scene-outer,
body.kiwi-motion .pillars,
body.kiwi-motion .percorsi-out,
body.kiwi-motion .reel-burst,
body.kiwi-motion .proof,
body.kiwi-motion .metodo,
body.kiwi-motion .cta-fin{
  position:relative;
  isolation:isolate;
  background:transparent!important;
}


body.kiwi-motion .cta-fin{
  overflow:hidden;
}

body.kiwi-motion .scene-outer{
  background:transparent!important;
  height:380vh;
}

body.kiwi-motion .scene-sticky{
  background:transparent!important;
}

body.kiwi-motion .sp-problema{
  background:transparent!important;
}

body.kiwi-motion .sp-soluzione{
  background:#e31b23!important;
  clip-path:none!important;
}

body.kiwi-motion .sp-soluzione .sp-body{
  color:rgba(255,255,255,.82);
}

body.kiwi-motion .sp-terza{
  background:var(--cream)!important;
  clip-path:none!important;
}

body.kiwi-motion .sp-terza .sp-h2{
  color:#0d0d0d;
}

body.kiwi-motion .sp-terza .sp-body{
  color:#57544f;
}

body.kiwi-motion .sp-soluzione .sp-ghost{
  -webkit-text-stroke:1px rgba(0,0,0,.14);
}

body.kiwi-motion .sectors{
  border:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:148px 0 142px;
  background:#f4f1ed!important;
}

body.kiwi-motion .sectors-head,
body.kiwi-motion .sectors .ticker{
  width:100%;
}

body.kiwi-motion .sectors::before{
  display:none;
}

body.kiwi-motion .sectors-title,
body.kiwi-motion .sectors-copy{
  color:#0b0b0b;
}

body.kiwi-motion .sectors .eyebrow-txt{
  color:rgba(11,11,11,.54)!important;
}

body.kiwi-motion .ticker-item{
  color:#111;
  border-color:rgba(227,27,35,.22);
  background:rgba(255,255,255,.74);
  box-shadow:0 10px 34px rgba(0,0,0,.06);
}

body.kiwi-motion .pillars{
  background:transparent!important;
}

body.kiwi-motion .percorsi-out{
  background:transparent!important;
}

body.kiwi-motion .percorsi-stick{
  background:transparent!important;
}

body.kiwi-motion .percorsi-out .sec-h2 span,
body.kiwi-motion .metodo .sec-h2 span{
  color:#fff!important;
}

body.kiwi-motion .percorsi-out .sec-sub,
body.kiwi-motion .percorsi-out .eyebrow-txt{
  color:rgba(255,255,255,.82);
}

body.kiwi-motion .reel-burst{
  background:transparent!important;
}

body.kiwi-motion .reel-copy h2{
  color:#0b0b0b;
}

body.kiwi-motion .reel-copy p{
  color:rgba(11,11,11,.68);
}

body.kiwi-motion .reel-burst .eyebrow-txt{
  color:var(--red)!important;
}

body.kiwi-motion .proof{
  background:transparent!important;
}

body.kiwi-motion .metodo{
  background:transparent!important;
}

body.kiwi-motion .metodo .sec-h2,
body.kiwi-motion .metodo .sec-sub,
body.kiwi-motion .metodo .eyebrow-txt{
  color:#fff;
}

body.kiwi-motion .metodo .m-grid{
  border-top-color:rgba(255,255,255,.28);
}

body.kiwi-motion .metodo .m-grid::before{
  background:#fff;
}

body.kiwi-motion .metodo .step{
  border-right-color:rgba(255,255,255,.2);
  opacity:.48;
}

body.kiwi-motion .metodo .step.on{
  opacity:1;
}

body.kiwi-motion .metodo .step-num{
  color:rgba(255,255,255,.28);
  -webkit-text-stroke:1px rgba(255,255,255,.34);
}

body.kiwi-motion .metodo .step.on .step-num{
  color:#fff;
  -webkit-text-stroke:1px #fff;
}

body.kiwi-motion .metodo .step-title{
  color:rgba(255,255,255,.88);
}

body.kiwi-motion .metodo .step-body{
  color:rgba(255,255,255,.68);
}







body.kiwi-motion .cta-fin{
  background:linear-gradient(180deg, rgba(227,27,35,.95) 0%, rgba(227,27,35,.72) 48%, var(--bg) 100%)!important;
  padding-top:150px!important;
  padding-bottom:90px!important;
}

body.kiwi-motion .cta-fin .cta-accent{
  color:#080808!important;
}

body.kiwi-motion .cta-fin .cta-h2{
  color:#fff!important;
  font-size:clamp(50px,6.4vw,96px);
}

body.kiwi-motion .cta-fin .cta-sub{
  color:rgba(255,255,255,.82)!important;
}

body.kiwi-motion .cta-fin .cta-btn{
  background:#080808!important;
  color:#fff!important;
  border-color:#080808!important;
}

body.kiwi-motion .chapter-reveal{
  --chapter-enter:1;
  transform:scale(calc(.96 + var(--chapter-enter) * .04));
  clip-path:inset(
    calc((1 - var(--chapter-enter)) * 7%)
    calc((1 - var(--chapter-enter)) * 5%)
    calc((1 - var(--chapter-enter)) * 7%)
    calc((1 - var(--chapter-enter)) * 5%)
  );
  opacity:calc(.08 + var(--chapter-enter) * .92);
  transform-origin:center center;
  will-change:transform,clip-path,opacity;
}

body.kiwi-motion .chapter-warm{
  box-shadow:none;
}

@media(max-width:768px){
  body.kiwi-motion{
    overflow-x:hidden;
  }
  body.kiwi-motion .hero,
  body.kiwi-motion .hero-inner{
    overflow:hidden;
  }
  body.kiwi-motion .hero-inner>div:first-child,
  body.kiwi-motion .hero-eyebrow,
  body.kiwi-motion .hero-h1,
  body.kiwi-motion .hero-sub,
  body.kiwi-motion .hero-ctas{
    width:100%;
    max-width:100%;
  }
  body.kiwi-motion .hero-h1{
    font-size:clamp(36px,10vw,40px);
    line-height:.94;
    letter-spacing:0;
  }
  body.kiwi-motion .hero-sub{
    font-size:14px;
  }
  body.kiwi-motion .hero-ctas{
    gap:12px;
  }
  body.kiwi-motion .trk-wrap{
    overflow:visible;
    padding:0 24px;
    mask-image:none;
  }
  body.kiwi-motion .trk{
    display:grid;
    grid-template-columns:1fr;
    transform:none!important;
    gap:18px;
  }
  body.kiwi-motion .card-p{
    width:100%;
    flex:none;
  }
  body.kiwi-motion .perc-prog{
    display:none;
  }
  
  body.kiwi-motion .cta-in{
    width:100%;
    max-width:100%;
  }
  body.kiwi-motion .pillars{
    height:auto;
    padding:84px 0;
  }
  body.kiwi-motion .pillars-stage{
    position:relative;
    height:auto;
    display:block;
    padding:0 24px;
    overflow:visible;
  }
  body.kiwi-motion .pillars-stage::before,
  body.kiwi-motion .pillars-stage::after{
    display:none;
  }
  body.kiwi-motion .pillars .ph::after{display:none}
  body.kiwi-motion .pillars .pg{
    height:auto;
    min-height:0;
    display:grid;
    gap:18px;
    margin-top:38px;
    perspective:none;
  }
  body.kiwi-motion .pillar,
  body.kiwi-motion .pillar:nth-child(2),
  body.kiwi-motion .pillar:nth-child(4){
    position:relative;
    inset:auto;
    opacity:1;
    transform:none!important;
    pointer-events:auto;
    padding:34px 28px;
    min-height:auto;
    clip-path:none;
  }
  body.kiwi-motion .p-num{font-size:54px;margin-bottom:24px}
  body.kiwi-motion .p-title{font-size:38px}
  body.kiwi-motion .p-body{font-size:14px}
  body.kiwi-motion .chapter-reveal{
    transform:none!important;
    clip-path:none!important;
    opacity:1!important;
  }
  .reel-burst{
    height:auto;
    padding:84px 0;
  }
  .reel-sticky{
    position:relative;
    height:auto;
    display:block;
    padding:0 24px;
  }
  .reel-stage{
    height:auto;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:34px;
  }
  .reel-stage::before{display:none}
  .reel-card{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    margin:0;
    opacity:1!important;
    transform:none!important;
    border-radius:20px;
  }
  body.kiwi-motion .proof-h{
    position:relative;
    top:auto;
    padding:84px 24px 26px;
  }
  body.kiwi-motion .proof-h .sec-h2{
    font-size:clamp(38px,10vw,50px);
    line-height:.92;
    max-width:100%;
  }
  body.kiwi-motion .proof-c,
  body.kiwi-motion .proof-c:nth-child(even){
    min-height:auto;
    display:block;
    padding:36px 24px 58px;
    opacity:1;
    transform:none;
  }
  body.kiwi-motion .proof-c:nth-child(even) .proof-vis{order:0}
  body.kiwi-motion .proof-vis{
    height:auto;
    aspect-ratio:4/5;
  }
  body.kiwi-motion .proof-meta{
    padding-top:22px;
  }
}

/* ============================================================
   SECONDARY PAGE (chi-siamo.html)
   ============================================================ */

/* ── Generic sub-page hero ── */
.page-hero{
  padding:158px 52px 90px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(227,27,35,.16), transparent 30%),
    linear-gradient(160deg,#070707 0%,#101010 55%,#0a0a0a 100%);
}
.page-hero-in{max-width:900px;margin:0 auto;position:relative;z-index:1}
.page-hero .hero-h1{margin-bottom:22px}
.page-hero .hero-sub{max-width:640px}

/* ── CHI SIAMO: blocchi numerati (naming / colori / simbolo) ── */
.cs-section{padding:110px 0;background:var(--bg)}
.cs-in{max-width:1180px;margin:0 auto;padding:0 52px}
.cs-lead{max-width:680px;margin:0 auto 76px;text-align:center}
.cs-lead .sec-eye{justify-content:center}
.cs-lead .sec-h2{margin-bottom:16px}
.cs-lead .sec-sub{max-width:100%;margin:0 auto}
.cs-block{display:grid;grid-template-columns:.36fr 1fr;gap:56px;padding:48px 0;border-top:1px solid var(--border)}
.cs-block:last-child{border-bottom:1px solid var(--border)}
.cs-block-num{
  font-family:var(--fd);font-weight:900;font-size:clamp(50px,6vw,86px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(227,27,35,.55)
}
.cs-block-title{
  font-family:var(--fd);font-weight:800;font-size:clamp(23px,2.4vw,32px);
  text-transform:uppercase;color:#fff;margin-bottom:16px;letter-spacing:.01em
}
.cs-block-body{font-size:15px;line-height:1.75;color:var(--mid);max-width:700px}
.cs-symbol-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.cs-symbol-card{background:var(--bgcard);border:1px solid var(--border);padding:28px 26px;transition:border-color .3s}
.cs-symbol-card:hover{border-color:rgba(227,27,35,.25)}
.cs-symbol-card h4{font-family:var(--fd);font-weight:700;font-size:17px;text-transform:uppercase;color:#fff;margin-bottom:10px}
.cs-symbol-card p{font-size:13px;line-height:1.7;color:var(--dim)}

/* ── CHI SIAMO: contatori animati ── */
.cs-counters{padding:90px 0;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cs-counters-grid{max-width:1180px;margin:0 auto;padding:0 52px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
.counter-num{display:block;font-family:var(--fd);font-weight:900;font-size:clamp(46px,6vw,80px);line-height:1;color:var(--red)}
.counter-lbl{display:block;margin-top:14px;font-family:var(--fl);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}

/* ── CHI SIAMO: team ── */
.cs-team-section{padding:110px 0;background:var(--bg)}
.cs-team-head{max-width:680px;margin:0 auto 70px;text-align:center}
.cs-team-head .sec-eye{justify-content:center}
.cs-team-head .sec-sub{max-width:100%;margin:0 auto}
.cs-team-grid{max-width:1180px;margin:0 auto;padding:0 52px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.team-card{background:var(--bgcard);border:1px solid var(--border);padding:40px 34px;position:relative;overflow:hidden;transition:border-color .4s}
.team-card::after{content:"";position:absolute;top:0;right:0;width:1px;height:0;background:var(--red);transition:height .6s cubic-bezier(.16,1,.3,1)}
.team-card:hover::after{height:100%}
.team-card:hover{border-color:rgba(227,27,35,.18)}
.team-avatar{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(227,27,35,.12);border:1px solid rgba(227,27,35,.4);
  color:var(--red);font-family:var(--fd);font-weight:800;font-size:19px;
  margin-bottom:26px;transition:color .3s,border-color .3s
}
.team-card:hover .team-avatar{color:#fff;background:var(--red)}
.team-name{font-family:var(--fd);font-weight:800;font-size:21px;text-transform:uppercase;color:#fff;margin-bottom:4px}
.team-role{font-family:var(--fl);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.team-body{font-size:13px;line-height:1.7;color:var(--dim)}



























@media(max-width:768px){
  .page-hero{padding:128px 24px 64px}
  .cs-section,.cs-team-section{padding:70px 0}
  .cs-in,.cs-team-grid,.cs-counters-grid{padding:0 24px}
  .cs-block{grid-template-columns:1fr;gap:20px;padding:34px 0}
  .cs-block-num{font-size:44px}
  .cs-symbol-grid{grid-template-columns:1fr}
  .cs-counters{padding:56px 0}
  .cs-counters-grid{grid-template-columns:1fr;gap:32px}
  .cs-team-grid{grid-template-columns:1fr;gap:16px}
  
  
  
}

/* ============================================================
   CONTATTI: dettagli + form
   ============================================================ */
.contact-section{padding:10px 0 150px;background:var(--bg)}
.contact-grid{
  max-width:1180px;margin:0 auto;padding:0 52px;
  display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start
}
.contact-info{display:flex;flex-direction:column;gap:32px}
.contact-info-item{border-left:2px solid var(--red);padding-left:18px}
.contact-info-lbl{font-family:var(--fl);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.contact-info-val{font-family:var(--fd);font-weight:700;font-size:21px;color:#fff;line-height:1.3}
.contact-info-val a{color:inherit;text-decoration:none;transition:color .2s}
.contact-info-val a:hover{color:var(--red)}
.contact-info-note{font-size:13px;color:var(--mid);line-height:1.6;margin-top:8px;max-width:320px}

.contact-form{display:flex;flex-direction:column;gap:18px}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-field{display:flex;flex-direction:column;gap:8px}
.contact-field label{font-family:var(--fl);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.contact-field input,.contact-field textarea{
  background:var(--bgcard);border:1px solid var(--border);color:#fff;
  padding:14px 16px;font-family:var(--fb);font-size:14px;
  transition:border-color .2s;outline:none;width:100%
}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:var(--dim)}
.contact-field input:focus,.contact-field textarea:focus{border-color:var(--red)}
.contact-field textarea{resize:vertical;min-height:120px;font-family:var(--fb)}
.contact-submit{align-self:flex-start;margin-top:4px;border:none;cursor:pointer}
.contact-form-note{font-size:12px;color:var(--red);min-height:16px}

@media(max-width:768px){
  .contact-section{padding:0 0 90px}
  .contact-grid{grid-template-columns:1fr;gap:44px;padding:0 24px}
  .contact-row{grid-template-columns:1fr}
}

/* ============================================================
   MODALE "PRENOTA UNA CALL"
   ============================================================ */
body.modal-lock{overflow:hidden}
.modal-overlay{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(8,8,8,.72);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.modal-overlay.open{
  opacity:1;visibility:visible;
  transition:opacity .3s ease,visibility 0s linear 0s;
}
.modal-box{
  position:relative;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  background:var(--bgcard);border:1px solid var(--border2);
  border-top:2px solid var(--red);
  padding:44px 40px 40px;
  transform:translateY(18px) scale(.98);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow:0 40px 120px rgba(0,0,0,.5);
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-close{
  position:absolute;top:18px;right:18px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border2);color:var(--mid);
  cursor:pointer;transition:border-color .2s,color .2s
}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal-eyebrow{margin-bottom:16px}
.modal-title{
  font-family:var(--fd);font-weight:800;font-size:clamp(24px,3vw,32px);
  text-transform:uppercase;line-height:1.02;color:#fff;margin-bottom:10px
}
.modal-sub{font-size:14px;color:var(--mid);line-height:1.6;margin-bottom:28px;max-width:440px}
.modal-quick-contacts{
  display:flex;flex-wrap:wrap;gap:12px 28px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--border)
}
.modal-quick{display:flex;flex-direction:column;gap:3px}
.modal-quick-lbl{font-family:var(--fl);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.modal-quick a{font-family:var(--fd);font-weight:700;font-size:16px;color:#fff;text-decoration:none;transition:color .2s}
.modal-quick a:hover{color:var(--red)}
.modal-quick-sede{flex:1 1 220px}
.modal-quick-address{font-family:var(--fb);font-size:13px;color:var(--mid);line-height:1.55}
.modal-box .map-card{margin-top:18px}

@media(max-width:768px){
  .modal-box{padding:34px 24px 30px}
}

/* ============================================================
   MAPPA (stile scuro, senza API key)
   ============================================================ */
.map-card{
  position:relative;margin-top:12px;
  border:1px solid var(--border);
  aspect-ratio:16/10;overflow:hidden;background:var(--bgcard)
}
.map-card iframe{
  width:100%;height:100%;border:0;display:block;
  filter:grayscale(.5) invert(.9) contrast(.83) brightness(.92) hue-rotate(180deg);
}
.map-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(227,27,35,.25);
}


/* === Creattivo: integrazione immagini definitive (ottobre 2026) === */
/* Hero: mascotte libera, senza confronto prima/dopo. */
body.kiwi-motion .hero-mascot-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#050505;
  box-shadow:0 32px 100px rgba(0,0,0,.42);
  transform:perspective(1000px) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg));
  will-change:transform;
}
body.kiwi-motion .hero-mascot-frame img{display:block;width:100%;height:100%;object-fit:cover}
body.kiwi-motion .hero-mascot-visual .hero-visual-meta{margin-top:14px}
body.kiwi-motion .hero-mascot-visual .eyebrow-txt{color:rgba(244,241,237,.58)}

/* Tre capitoli visuali a pieno schermo, con copy in primo piano. */
body.kiwi-motion .scene-pane{isolation:isolate;overflow:hidden}
body.kiwi-motion .sp-scene-image{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
body.kiwi-motion .scene-pane::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
body.kiwi-motion .sp-problema::before{
  background:linear-gradient(90deg,rgba(6,6,6,.96) 0%,rgba(6,6,6,.85) 32%,rgba(6,6,6,.2) 67%,transparent 100%);
}
body.kiwi-motion .sp-soluzione::before{
  background:linear-gradient(90deg,rgba(227,27,35,.94) 0%,rgba(227,27,35,.72) 35%,rgba(227,27,35,.04) 70%,transparent 100%);
}
body.kiwi-motion .sp-terza::before{
  background:linear-gradient(90deg,rgba(244,241,237,.94) 0%,rgba(244,241,237,.72) 35%,rgba(244,241,237,.04) 70%,transparent 100%);
}
body.kiwi-motion .scene-pane .sp-inner{position:relative;z-index:2}
body.kiwi-motion .scene-pane .sp-ghost{opacity:.35}

/* Composizioni illustrative 'prima/dopo' già unite nell'immagine originale.
   Non aggiungere un secondo divisore/maschera sopra quello già disegnato. */
body.kiwi-motion .proof-composite .proof-vis{
  height:auto;
  aspect-ratio:4/3;
  background:#0b0b0b;
}
body.kiwi-motion .proof-composite-img{
  display:block;width:100%;height:100%;position:absolute;inset:0;
  object-fit:contain;object-position:center;
}
body.kiwi-motion .proof-composite .plbl-a{
  opacity:1!important;
  transform:none!important;
}
@media (max-width:768px){
  body.kiwi-motion .hero-mascot-visual{
    display:block;
    width:100%;max-width:440px;
    margin:0 auto;
  }
  body.kiwi-motion .hero-mascot-frame{box-shadow:0 18px 60px rgba(0,0,0,.36)}
  body.kiwi-motion .hero-mascot-visual .hero-visual-meta{margin-top:8px}
  body.kiwi-motion .hero-mascot-visual .eyebrow-txt{font-size:9px}
  body.kiwi-motion .scene-pane{min-height:72svh;align-items:center}
  body.kiwi-motion .sp-scene-image{object-position:64% center;opacity:.25}
  body.kiwi-motion .sp-problema::before{background:linear-gradient(90deg,rgba(6,6,6,.94),rgba(6,6,6,.66))}
  body.kiwi-motion .sp-soluzione::before{background:linear-gradient(90deg,rgba(227,27,35,.93),rgba(227,27,35,.76))}
  body.kiwi-motion .sp-terza::before{background:linear-gradient(90deg,rgba(244,241,237,.94),rgba(244,241,237,.78))}
  body.kiwi-motion .scene-pane .sp-ghost{display:none}
  body.kiwi-motion .proof-composite .proof-vis{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  body.kiwi-motion .hero-mascot-frame{transform:none}
}

/* Allestimento Fisico: wipe allo scroll come Rebranding Identità.
   Il prima resta pienamente visibile, senza grayscale/opacità dei vecchi placeholder. */
body.kiwi-motion .proof-scroll-compare .split-v .pt img {
  filter: none;
  opacity: 1;
}


/* October 2026 - smooth 01>02 scroll scene: one scroll writer, no whole-frame filters.
   The existing .55s CSS tween made JS-linked opacity and transform lag behind
   scrolling; filter/grayscale was repainting an entire viewport every frame. */
@media (min-width:769px){
  body.kiwi-motion .scene-pane{
    transition:none;
    will-change:opacity,transform;
  }
  body.kiwi-motion .sp-problema{
    filter:none;
  }
  body.kiwi-motion .sp-problema .sp-h2,
  body.kiwi-motion .sp-problema .sp-body,
  body.kiwi-motion .sp-problema .sp-eyebrow{
    transition:none;
  }
}
/* The scroll controller already interpolates page RGB values; another CSS
   transition on the same background introduces lag and redundant repaints. */
body.kiwi-motion{transition:none}

/* Real short reel previews, only enabled when a data-reel-video URL is supplied. */
body.kiwi-motion .reel-screen{isolation:isolate}
body.kiwi-motion .reel-screen::before{z-index:1;pointer-events:none}
body.kiwi-motion .reel-video{
  display:block;
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition:opacity .24s ease;
}
body.kiwi-motion .reel-card.is-video-ready .reel-video{opacity:1}
@media (prefers-reduced-motion:reduce){
  body.kiwi-motion .reel-video{transition:none}
}

/* Darken embedded Instagram subtitles under our site-specific reel captions.
   Keep the real photography visible in the top two thirds of each card. */
body.kiwi-motion .reel-card[data-reel-video] .reel-screen::before{
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,transparent 27%,rgba(0,0,0,.14) 50%,rgba(0,0,0,.9) 82%,rgba(0,0,0,.96) 100%);
}