/* Starlynex: riflessi viola, navigazione e movimento del marchio. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.header{background:#050408}
.header-inner{gap:26px}
.header .brand-motion{position:relative;isolation:isolate;display:flex;align-items:center;width:220px;min-height:52px;--brand-trip:110px;padding-left:44px}
.brand-wordmark{position:relative;z-index:2;width:176px!important;flex:none}
/* Keep the original 2.4s movement, then rest for 21.6s; match brand-clock.js. */
.brand-emblem{position:absolute;z-index:1;left:-6px;top:0;width:56px;height:52px;display:grid;place-items:center;pointer-events:none;animation:brand-pass 24s linear infinite;animation-delay:var(--brand-phase-delay,0ms)}
.brand-emblem img{width:56px;height:56px;object-fit:contain;animation:brand-spin 24s linear infinite;animation-delay:var(--brand-phase-delay,0ms)}
@keyframes brand-spin{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.4,0,.2,1)}3.75%,6.4583333%{transform:rotate(360deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}10%,100%{transform:rotate(720deg)}}
@keyframes brand-pass{0%,3.75%{transform:translateX(0);opacity:1;animation-timing-function:cubic-bezier(.4,0,.2,1)}6.4583333%{transform:translateX(var(--brand-trip));opacity:.38;animation-timing-function:cubic-bezier(.4,0,.2,1)}10%,100%{transform:translateX(0);opacity:1}}
.header nav{gap:24px}
.header nav>a:not(.nav-contact){position:relative}
.header nav>a:not(.nav-contact)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--motion-ease)}
.header nav>a:not(.nav-contact):hover::after,.header nav>a:not(.nav-contact):focus-visible::after,.header nav>a[aria-current=page]:not(.nav-contact)::after{transform:scaleX(1)}
.header nav .nav-contact{white-space:normal;max-width:185px;margin-left:0;font-size:13px;line-height:1.35;gap:15px;padding:12px 18px;min-height:54px}
.nav-contact>span{max-width:130px}
.nav-contact>svg{flex-shrink:0}
.header nav .nav-contact,.header nav .nav-contact *{text-decoration:none}
.footer-bottom{flex-wrap:wrap;gap:12px 28px}
.footer-signature{width:min(1280px,calc(100% - 96px));margin:auto;padding:46px 0 12px;overflow:hidden}
.footer-signature img{width:100%;opacity:.12;translate:0 var(--scroll-shift,0px)}
.motion-toggle{background:transparent;color:var(--on-dark);border:0;border-radius:6px;font-size:12px;padding:10px 0;min-height:40px;text-decoration:underline;text-underline-offset:4px}
.motion-toggle:hover{color:white}.motion-toggle[hidden]{display:none}
.hero-mark,.home-card-images,.challenge-trophy,.crm-preview,.qr-art,.double-product{translate:0 var(--scroll-shift,0px)}
[data-motion=off] .brand-emblem,[data-motion=off] .brand-emblem img{animation-play-state:paused}
[data-motion=off] .hero-mark,[data-motion=off] .home-card-images,[data-motion=off] .challenge-trophy,[data-motion=off] .crm-preview,[data-motion=off] .qr-art,[data-motion=off] .double-product,[data-motion=off] .footer-signature img{translate:none}
[data-motion=paused] .brand-emblem,[data-motion=paused] .brand-emblem img{animation-play-state:paused}
@media(min-width:1101px) and (max-width:1280px){.header nav{gap:18px}.header .brand-motion{width:200px;--brand-trip:100px}.brand-wordmark{width:156px!important}.header nav .nav-contact{max-width:175px;padding-inline:14px}.header-inner{gap:20px}}
@media(max-width:1100px){.header .brand-motion{width:205px;--brand-trip:102.5px}.brand-wordmark{width:161px!important}.header nav>a:not(.nav-contact)::after{left:14px;right:auto;width:45px;bottom:7px}.header nav .nav-contact{max-width:none;min-height:54px;gap:20px}.nav-contact>span{max-width:none}.footer-signature{width:calc(100% - 64px)}}
@media(max-width:760px){.header .brand-motion{width:194px;--brand-trip:98px;padding-left:42px;min-height:48px}.brand-wordmark{width:152px!important}.brand-emblem{left:-8px;top:-2px}.footer-signature{width:calc(100% - 40px);padding:32px 0 18px}.footer-bottom{gap:10px 20px}.motion-toggle{width:100%;text-align:left}.button{min-height:52px}}
@media(prefers-reduced-motion:reduce){.brand-emblem,.brand-emblem img{animation-play-state:paused!important}.hero-mark,.home-card-images,.challenge-trophy,.crm-preview,.qr-art,.double-product,.footer-signature img{translate:none!important}.button:hover,.header nav .nav-contact:hover,.menu-toggle:hover{transform:none}}

/* Document scrolling remains native; only its side rail is hidden. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
.scroll-progress{position:absolute;bottom:-1px;left:0;right:0;height:3px;overflow:hidden;pointer-events:none}
.scroll-progress span{display:block;width:100%;height:100%;background:#a876ff;transform:scaleX(0);transform-origin:left center}

/* Hero star: one turn on entry, then a new turn every five seconds. */
body[data-page=home] .landing-hero .hero-mark img{animation:hero-star-turn 5s linear infinite;animation-play-state:paused}
body[data-page=home] .hero-mark[data-in-view=true] img{animation-play-state:running}
@keyframes hero-star-turn{0%{transform:rotate(-5deg);animation-timing-function:cubic-bezier(.4,0,.2,1)}20%,100%{transform:rotate(355deg)}}
[data-motion=off] body[data-page=home] .hero-mark img{animation:none;transform:rotate(-5deg)}
[data-motion=paused] body[data-page=home] .hero-mark img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){body[data-page=home] .hero-mark img{animation:none!important;transform:rotate(-5deg)}}

/* Web service FAQ alternates with the preceding light section. */
.web-faq{background:var(--black);color:var(--white);color-scheme:dark}
.web-faq .faq{border-color:#45354f}
.web-faq .faq p{color:var(--on-dark)}
.web-faq .faq summary svg{color:var(--violet)}

.card-feedback{background:var(--black);color:var(--white);color-scheme:dark}
.card-feedback .steps li{border-color:#45354f}
.card-feedback .steps p{color:var(--on-dark)}
.card-feedback .step-number{color:var(--violet)}