/* MDB Milano – livello cinematografico per le pagine servizio (siti web, comunicazione politica).
   Lascia intatto il contenuto: cambia luce, ingresso e movimento. Attivo solo con html.sv-cine. */
html.sv-cine,html.sv-cine body{overflow-x:clip!important}
html.sv-cine{--sv-ease:cubic-bezier(.22,.61,.36,1);--sv-out:cubic-bezier(.16,1,.3,1)}
html.sv-cine body{background:#0a0a0a}

/* il sistema di comparsa del tema lascia invisibili i blocchi alti: qui lo sostituiamo */
html.sv-cine .animate-on-scroll{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
html.sv-cine [data-stagger]>*{opacity:1;transform:none}
html.sv-cine .sv-r{opacity:0;transform:translateY(30px)}
html.sv-cine .sv-r.sv-in{opacity:1;transform:none;transition:opacity 1s var(--sv-ease),transform 1.2s var(--sv-out);transition-delay:var(--sv-d,0s)}

/* ---------- aloni di luce al posto del nero ---------- */
html.sv-cine section{position:relative;isolation:isolate;background:transparent!important}
/* overflow-x:hidden del tema + aloni = sezioni che scorrono da sole e catturano la rotella: clip non crea un'area scorrevole */
html.sv-cine section:not(.landing-hero){overflow-x:clip!important;overflow-y:visible!important}
/* i bagliori decorativi del tema finiscono a filo sezione e creano bordi netti: li sostituiscono gli aloni */
html.sv-cine section::before{display:none!important}
html.sv-cine section::after{content:"";position:absolute;left:0;right:0;top:-16%;bottom:-16%;z-index:-1;pointer-events:none;background:var(--sv-aura);animation:svAura 26s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
@keyframes svAura{0%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.06)}100%{transform:translate3d(-1%,2%,0) scale(1.02)}}
html.sv-cine section:nth-of-type(4n+1){--sv-aura:radial-gradient(55% 55% at 85% 25%,rgba(139,92,246,.26),rgba(139,92,246,0) 70%),radial-gradient(45% 50% at 5% 85%,rgba(99,102,241,.2),rgba(99,102,241,0) 70%)}
html.sv-cine section:nth-of-type(4n+2){--sv-aura:radial-gradient(55% 50% at 0% 30%,rgba(99,102,241,.24),rgba(99,102,241,0) 70%),radial-gradient(40% 45% at 100% 80%,rgba(236,72,153,.13),rgba(236,72,153,0) 70%)}
html.sv-cine section:nth-of-type(4n+3){--sv-aura:radial-gradient(60% 45% at 50% 40%,rgba(139,92,246,.22),rgba(139,92,246,0) 70%),radial-gradient(40% 45% at 95% 95%,rgba(99,102,241,.18),rgba(99,102,241,0) 70%)}
html.sv-cine section:nth-of-type(4n){--sv-aura:radial-gradient(50% 55% at 10% 20%,rgba(139,92,246,.24),rgba(139,92,246,0) 70%),radial-gradient(45% 50% at 90% 70%,rgba(236,72,153,.14),rgba(236,72,153,0) 70%)}
/* barra numeri: niente bordo piatto */
html.sv-cine .stats-bar{border:0!important;box-shadow:none!important}

/* ---------- HERO ---------- */
html.sv-cine .landing-hero{min-height:100svh;display:flex;align-items:center;padding:150px clamp(20px,4vw,48px) 110px;overflow:hidden}
html.sv-cine .landing-hero::before{display:none}
html.sv-cine .landing-hero>*:not(.sv-visual){position:relative;z-index:2}
html.sv-cine .landing-hero-content{max-width:1280px;width:100%;margin:0 auto;text-align:left}
html.sv-cine .landing-hero .landing-badge{background:none;border:0;padding:0;color:#c4b5fd;font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none}
html.sv-cine .landing-hero h1{font-size:clamp(2.6rem,5.6vw,5.8rem)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:900!important;max-width:none;margin:22px 0 0;background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
html.sv-cine .landing-hero h1 .sv-line{display:block;overflow:hidden;padding-bottom:.06em}
html.sv-cine .landing-hero h1 .sv-line>span{display:inline-block;transform:translateY(105%)}
html.sv-cine .landing-hero h1 .sv-line:last-child>span{color:#c4b5fd;-webkit-text-fill-color:#c4b5fd}
html.sv-cine.sv-live .landing-hero h1 .sv-line>span{transform:none;transition:transform 1.2s var(--sv-out)}
html.sv-cine.sv-live .landing-hero h1 .sv-line:nth-child(2)>span{transition-delay:.12s}
html.sv-cine.sv-live .landing-hero h1 .sv-line:nth-child(3)>span{transition-delay:.24s}
html.sv-cine .landing-hero .landing-tagline{margin-top:30px;text-align:left;font-size:clamp(1.1rem,1.5vw,1.35rem);max-width:40ch;-webkit-text-fill-color:#e9e4ff;color:#e9e4ff;font-style:normal}
html.sv-cine .landing-hero .landing-description{margin:18px 0 0;text-align:left;max-width:56ch;font-size:1.05rem;line-height:1.65;color:#d4d4d8}
html.sv-cine .landing-hero .landing-cta-group{justify-content:flex-start;margin-top:36px}
html.sv-cine .landing-hero .landing-cta-primary,html.sv-cine .landing-hero .landing-cta-secondary{border-radius:999px}
html.sv-cine .landing-hero :is(.landing-badge,.landing-tagline,.landing-description,.landing-cta-group){opacity:0;transform:translateY(22px)}
html.sv-cine:not(.sv-live) .landing-hero h1{opacity:0}
html.sv-cine.sv-live .landing-hero :is(.landing-badge,.landing-tagline,.landing-description,.landing-cta-group){opacity:1;transform:none;transition:opacity 1s var(--sv-ease) .5s,transform 1.1s var(--sv-out) .5s}
html.sv-cine.sv-live .landing-hero .landing-cta-group{transition-delay:.65s,.65s}
html.sv-cine .sv-visual{position:absolute;z-index:1;top:0;right:0;bottom:0;width:58%;pointer-events:none}
html.sv-cine .landing-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(10,10,10,.95) 0%,rgba(10,10,10,.65) 36%,rgba(10,10,10,0) 64%),radial-gradient(55% 60% at 80% 35%,rgba(139,92,246,.28),rgba(139,92,246,0) 70%),radial-gradient(40% 50% at 10% 95%,rgba(99,102,241,.2),rgba(99,102,241,0) 70%)}
html.sv-cine .landing-hero{--sv-aura:none}
html.sv-cine .sv-visual canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s var(--sv-ease)}
html.sv-cine.sv-live .sv-visual canvas{opacity:1}

/* visual "siti web": una pagina che si compone da sola */
.sv-build{position:absolute;right:clamp(20px,5vw,90px);top:50%;width:min(560px,90%);transform:translateY(-50%) perspective(1400px) rotateY(-14deg) rotateX(6deg);border-radius:16px;background:#141224;overflow:hidden;opacity:0;transition:opacity 1.2s var(--sv-ease) .3s}
html.sv-live .sv-build{opacity:1}
.sv-build-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#1c1932}
.sv-build-bar i{width:10px;height:10px;border-radius:50%;background:#3b3657}
.sv-build-bar b{margin-left:12px;flex:1;height:18px;border-radius:9px;background:#26223f}
.sv-build-body{padding:22px;display:grid;gap:12px;grid-template-columns:repeat(6,1fr)}
.sv-build-body span{display:block;border-radius:8px;background:#2a2547;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--sv-out)}
.sv-build-body span.on{transform:none}
.sv-build-body .b-nav{grid-column:1/7;height:16px;background:#26223f}
.sv-build-body .b-h1{grid-column:1/5;height:44px;background:#8b5cf6}
.sv-build-body .b-h1b{grid-column:1/4;height:44px;background:#8b5cf6}
.sv-build-body .b-p{grid-column:1/6;height:10px}
.sv-build-body .b-p2{grid-column:1/5;height:10px}
.sv-build-body .b-btn{grid-column:1/3;height:34px;border-radius:999px;background:#a78bfa}
.sv-build-body .b-card{grid-column:span 2;height:92px;background:#221e3b}
.sv-build-meter{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#0f0d1c;color:#e9e4ff;font:600 .8rem Inter,sans-serif;opacity:0;transform:translateY(10px);transition:opacity .8s var(--sv-ease),transform .8s var(--sv-out)}
.sv-build-meter.on{opacity:1;transform:none}
.sv-build-meter i{width:10px;height:10px;border-radius:50%;background:#34d399}

/* ---------- NUMERI ---------- */
html.sv-cine .stats-bar .stat-number{font-size:clamp(2.8rem,5vw,4.6rem)!important;font-weight:900!important;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
html.sv-cine .stats-bar .stat-label{margin-top:10px;font-size:.95rem!important;letter-spacing:0!important;text-transform:none!important;color:#c4b5fd!important}

/* ---------- TITOLI DI SEZIONE ---------- */
html.sv-cine section h2{letter-spacing:-.035em}

/* ---------- RIQUADRI: velo di colore e reazione al passaggio ---------- */
html.sv-cine :is(.service-type-card,.benefit-card,.feature-card-enhanced,.pricing-card,.case-study-card,.testimonial-card,.pillar-card,.political-service-card,.audience-card,.faq-item-premium){transition:transform .5s var(--sv-out),background-color .3s}
@media(hover:hover){html.sv-cine :is(.service-type-card,.benefit-card,.feature-card-enhanced,.pricing-card,.case-study-card,.pillar-card,.political-service-card,.audience-card):hover{transform:translateY(-6px)}}

/* ---------- linea del metodo che si disegna scorrendo ---------- */
html.sv-cine .process-timeline::before{transform:translateX(-50%) scaleY(var(--sv-p,1));transform-origin:top}

/* ---------- CTA finale: luce che segue il mouse ---------- */
html.sv-cine :is(.cta-section,.cta-section-landing){--sv-aura:radial-gradient(60% 60% at var(--sx,50%) var(--sy,40%),rgba(139,92,246,.3),rgba(139,92,246,0) 70%),radial-gradient(40% 40% at 15% 100%,rgba(236,72,153,.14),rgba(236,72,153,0) 70%)}
html.sv-cine :is(.cta-section,.cta-section-landing) h2{font-size:clamp(2.6rem,6vw,5.6rem)!important;line-height:.95!important;letter-spacing:-.05em!important;font-weight:900!important}

@media(max-width:760px){
  html.sv-cine .landing-hero{align-items:flex-end;padding-top:44svh;padding-bottom:80px}
  html.sv-cine .sv-visual{width:100%;height:46svh;top:64px;bottom:auto}
  html.sv-cine .landing-hero::after{background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.6) 44%,rgba(10,10,10,.92) 54%,rgba(10,10,10,.75) 100%),radial-gradient(70% 40% at 60% 20%,rgba(139,92,246,.3),rgba(139,92,246,0) 70%)}
  .sv-build{right:50%;top:42%;width:68%;transform:translate(50%,-50%) perspective(1200px) rotateX(10deg)}
  .sv-build-body{padding:14px;gap:8px}
  .sv-build-body .b-h1,.sv-build-body .b-h1b{height:26px}
  .sv-build-body .b-btn{height:22px}
  .sv-build-body .b-card{height:52px}
  .sv-build-bar{height:28px}
  .sv-build-meter{right:10px;bottom:10px;padding:6px 10px;font-size:.7rem}
  html.sv-cine .landing-hero .landing-description,html.sv-cine .landing-hero .landing-tagline{padding:0!important}
  html.sv-cine .landing-hero .landing-cta-group{flex-direction:column;align-items:stretch}
  html.sv-cine .process-timeline::before{transform:scaleY(var(--sv-p,1))}
}
@media(prefers-reduced-motion:reduce){
  html.sv-cine section::after{animation:none}
  html.sv-cine .sv-r,html.sv-cine .landing-hero :is(.landing-badge,.landing-tagline,.landing-description,.landing-cta-group),html.sv-cine .landing-hero h1,html.sv-cine .landing-hero h1 .sv-line>span{opacity:1!important;transform:none!important;transition:none!important}
  .sv-build-body span{transform:none;transition:none}
  html.sv-cine .process-timeline::before{transform:translateX(-50%)}
}

/* ---------- visual: social (telefono con feed) ---------- */
.sv-phone{position:absolute;right:clamp(40px,10vw,180px);top:50%;width:min(300px,62%);aspect-ratio:9/18.5;transform:translateY(-50%) rotate(-6deg);border-radius:42px;background:#0f0d1c;box-shadow:0 0 0 10px #1c1932,0 0 0 11px #2d2850;overflow:hidden;opacity:0;transition:opacity 1.2s var(--sv-ease) .3s}
html.sv-live .sv-phone{opacity:1}
.sv-phone-notch{position:absolute;z-index:2;top:12px;left:50%;width:34%;height:22px;margin-left:-17%;border-radius:12px;background:#000}
.sv-feed{position:absolute;inset:0;padding:48px 14px 0;display:flex;flex-direction:column;gap:14px;animation:svFeed 14s linear infinite}
@keyframes svFeed{to{transform:translateY(-50%)}}
.sv-post{border-radius:16px;background:#1a1730;padding:12px}
.sv-post-h{display:flex;align-items:center;gap:8px}
.sv-post-h i{width:24px;height:24px;border-radius:50%;background:#8b5cf6}
.sv-post-h b{height:9px;width:44%;border-radius:5px;background:#2e2950}
.sv-post-img{margin-top:10px;aspect-ratio:1/1;border-radius:10px;background:radial-gradient(circle at 30% 30%,#a78bfa,#6366f1 60%,#312e81)}
.sv-post-img.b{background:radial-gradient(circle at 70% 40%,#f9a8d4,#ec4899 45%,#4c1d95)}
.sv-post-img.c{aspect-ratio:4/5;background:radial-gradient(circle at 40% 70%,#93c5fd,#6366f1 55%,#1e1b4b)}
.sv-post-l{margin-top:10px;height:8px;width:82%;border-radius:4px;background:#2e2950}
.sv-post-l.s{width:56%}
.sv-react{position:absolute;inset:0;pointer-events:none}
.sv-react span{position:absolute;bottom:12%;font:700 22px Inter,sans-serif;color:#f472b6;animation:svUp 2.6s var(--sv-ease) forwards}
.sv-react span:nth-child(3n){color:#c4b5fd;font-size:14px}
@keyframes svUp{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-260px) scale(1.1)}}

/* ---------- visual: ufficio stampa (pagina di giornale) ---------- */
.sv-paper{position:absolute;right:clamp(30px,8vw,150px);top:50%;width:min(420px,72%);aspect-ratio:3/3.7;transform:translateY(-50%) rotate(4deg);border-radius:6px;background:#efeaff;padding:26px 24px;display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity 1.2s var(--sv-ease) .3s}
html.sv-live .sv-paper{opacity:1}
.sv-paper-back{z-index:-1;transform:translateY(-48%) rotate(-5deg) translateX(-34px);background:#2a2547;padding:0}
.sv-paper-mast{height:22px;width:62%;margin:0 auto;border-radius:3px;background:#1b1730}
.sv-paper-rule{height:3px;background:#1b1730}
.sv-paper-head{display:flex;flex-direction:column;gap:8px}
.sv-paper-head span{height:22px;border-radius:3px;background:#8b5cf6;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--sv-out)}
.sv-paper-head span+span{width:68%}
.sv-paper.on .sv-paper-head span{transform:none}
.sv-paper.on .sv-paper-head span+span{transition-delay:.25s}
.sv-paper-cols{flex:1;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:12px}
.sv-paper-cols>div{display:flex;flex-direction:column;gap:7px}
.sv-paper-cols span{height:6px;border-radius:2px;background:#4b4566;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--sv-out);transition-delay:calc(.6s + var(--i) * .12s)}
.sv-paper-cols span:nth-child(3n){width:70%}
.sv-paper.on .sv-paper-cols span{transform:none}
.sv-paper-pic{border-radius:3px;background:radial-gradient(circle at 40% 35%,#c4b5fd,#6366f1 60%,#312e81);opacity:0;transition:opacity 1s var(--sv-ease) 1.2s}
.sv-paper.on .sv-paper-pic{opacity:1}

/* ---------- visual: grafica (marchio sulla griglia) ---------- */
.sv-mark{position:absolute;right:clamp(30px,8vw,150px);top:50%;width:min(440px,70%);transform:translateY(-50%);overflow:visible}
.sv-mark .g *{fill:none;stroke:rgba(196,181,253,.45);stroke-width:1;stroke-dasharray:1000;stroke-dashoffset:1000}
.sv-mark .m{fill:none;stroke:#fff;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:700;stroke-dashoffset:700}
.sv-mark .d{fill:#ec4899;transform:scale(0);transform-origin:200px 300px}
.sv-mark.on .g *{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--sv-ease)}
.sv-mark.on .g *:nth-child(2){transition-delay:.2s}.sv-mark.on .g *:nth-child(3){transition-delay:.4s}.sv-mark.on .g *:nth-child(4){transition-delay:.5s}.sv-mark.on .g *:nth-child(5){transition-delay:.7s}
.sv-mark.on .m{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--sv-out) 1.1s}
.sv-mark.on .d{transform:scale(1);transition:transform .7s cubic-bezier(.3,1.6,.5,1) 2.6s}
.sv-swatch{position:absolute;right:clamp(30px,8vw,150px);bottom:13%;display:flex;gap:10px}
.sv-swatch i{width:44px;height:44px;border-radius:50%;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.sv-swatch i:nth-child(1){background:#8b5cf6}.sv-swatch i:nth-child(2){background:#6366f1;transition-delay:.1s}.sv-swatch i:nth-child(3){background:#ec4899;transition-delay:.2s}.sv-swatch i:nth-child(4){background:#efeaff;transition-delay:.3s}
.sv-swatch.on i{transform:none}

/* ---------- visual: foto e video (mirino) ---------- */
.sv-cam{position:absolute;right:clamp(30px,6vw,110px);top:50%;width:min(560px,80%);aspect-ratio:16/10;transform:translateY(-50%);border-radius:14px;overflow:hidden;background:#0d0b18;opacity:0;transition:opacity 1.2s var(--sv-ease) .3s}
html.sv-live .sv-cam{opacity:1}
.sv-cam-scene{position:absolute;inset:0;filter:blur(18px);animation:svDrift 16s ease-in-out infinite alternate}
.sv-cam-scene i{position:absolute;border-radius:50%}
.sv-cam-scene i:nth-child(1){left:10%;top:20%;width:40%;height:60%;background:#6366f1}
.sv-cam-scene i:nth-child(2){left:52%;top:10%;width:34%;height:46%;background:#ec4899;opacity:.7}
.sv-cam-scene i:nth-child(3){left:40%;top:52%;width:44%;height:50%;background:#8b5cf6}
.sv-cam-scene i:nth-child(4){left:76%;top:58%;width:18%;height:26%;background:#fbbf24;opacity:.55}
.sv-cam-scene i:nth-child(5){left:4%;top:66%;width:20%;height:30%;background:#c4b5fd;opacity:.6}
@keyframes svDrift{to{transform:scale(1.15) translate(-4%,3%)}}
.sv-cam-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% + .5px),transparent calc(66.66% + .5px)),linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.sv-cam .c{position:absolute;width:30px;height:30px;border:3px solid #fff}
.sv-cam .tl{left:16px;top:16px;border-right:0;border-bottom:0}.sv-cam .tr{right:16px;top:16px;border-left:0;border-bottom:0}
.sv-cam .bl{left:16px;bottom:16px;border-right:0;border-top:0}.sv-cam .br{right:16px;bottom:16px;border-left:0;border-top:0}
.sv-cam-focus{position:absolute;left:48%;top:48%;width:78px;height:58px;margin:-29px 0 0 -39px;border:2px solid rgba(255,255,255,.7);transition:left .7s var(--sv-out),top .7s var(--sv-out),border-color .2s,transform .3s}
.sv-cam-focus.lock{border-color:#34d399;transform:scale(.88)}
.sv-cam-rec{position:absolute;left:28px;top:56px;display:flex;align-items:center;gap:8px;font:700 .8rem Inter,sans-serif;color:#fff}
.sv-cam-rec i{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:svBlink 1s steps(1) infinite}
@keyframes svBlink{50%{opacity:0}}
.sv-cam-tc{position:absolute;right:28px;top:56px;font:600 .82rem Inter,sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.sv-cam-info{position:absolute;left:28px;bottom:30px;font:600 .78rem Inter,sans-serif;color:rgba(255,255,255,.85)}

@media(max-width:760px){
  .sv-phone{right:50%;top:44%;width:44%;transform:translate(50%,-50%) rotate(-6deg)}
  .sv-paper{right:50%;top:42%;width:58%;transform:translate(50%,-50%) rotate(4deg);padding:16px 14px;gap:8px}
  .sv-paper-back{transform:translate(42%,-48%) rotate(-5deg)}
  .sv-mark{right:50%;top:40%;width:56%;transform:translate(50%,-50%)}
  .sv-swatch{right:50%;bottom:10%;transform:translateX(50%)}
  .sv-swatch i{width:28px;height:28px}
  .sv-cam{right:50%;top:42%;width:84%;transform:translate(50%,-50%)}
  .sv-cam-rec,.sv-cam-tc{top:40px}
}
@media(prefers-reduced-motion:reduce){
  .sv-feed,.sv-cam-scene,.sv-cam-rec i{animation:none}
  .sv-paper-head span,.sv-paper-cols span{transform:none}
  .sv-paper-pic{opacity:1}
}
html.sv-cine .landing-hero .social-icons-float{display:none!important}

/* ---------- telefono: il visual ha un suo spazio sopra il testo, mai sovrapposto ---------- */
@media(max-width:760px){
  html.sv-cine .landing-hero{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:84px 20px 72px}
  html.sv-cine .sv-visual{position:relative;inset:auto;width:100%;height:clamp(210px,36svh,340px);margin:0 0 22px;flex:none}
  html.sv-cine .landing-hero::after{background:radial-gradient(80% 30% at 50% 18%,rgba(139,92,246,.28),rgba(139,92,246,0) 70%)}
  .sv-build{right:auto;left:50%;top:50%;width:min(320px,86%);transform:translate(-50%,-50%) perspective(1200px) rotateX(10deg) scale(.74)}
  .sv-phone{right:auto;left:50%;top:50%;height:100%;width:auto;transform:translate(-50%,-50%) rotate(-6deg);box-shadow:0 0 0 6px #1c1932,0 0 0 7px #2d2850;border-radius:26px}
  .sv-phone-notch{top:8px;height:14px}
  .sv-feed{padding:30px 9px 0;gap:9px}
  .sv-post{padding:8px;border-radius:10px}
  .sv-paper{right:auto;left:50%;top:50%;height:94%;width:auto;transform:translate(-50%,-50%) rotate(4deg)}
  .sv-paper-back{transform:translate(-40%,-48%) rotate(-5deg)}
  .sv-mark{right:auto;left:50%;top:50%;height:100%;width:auto;transform:translate(-50%,-50%)}
  .sv-swatch{right:4%;left:auto;bottom:4%;transform:none;flex-direction:column;gap:6px}
  .sv-swatch i{width:22px;height:22px}
  .sv-cam{right:auto;left:50%;top:50%;width:100%;max-height:100%;transform:translate(-50%,-50%)}
  .sv-cam-rec,.sv-cam-tc{top:34px}
  .sv-cam-rec{left:24px}.sv-cam-tc{right:24px}
  .sv-cam-info{left:24px;bottom:22px}
}