/* TEKNE — hero "raggi X" + navbar (ottobre 2026). Caricato per ultimo: sovrascrive solo header e hero. */
:root{--hx-ease:cubic-bezier(.23,1,.32,1);--hx-io:cubic-bezier(.65,0,.35,1);--hx-cycle:16s}

/* ---------- Navbar: link a sinistra, logo al centro, Instagram + Parliamone a destra ---------- */
.header .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0}
.header .desktop-nav{grid-column:1;grid-row:1;margin:0;justify-content:flex-start;gap:38px}
.header .wordmark{grid-column:2;grid-row:1;justify-self:center;width:150px}
.header .nav-right{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.header .header-call{margin-left:12px}
.header .icon-link{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:background-color .25s ease}
.header .icon-link svg{width:21px;height:21px}
@media (hover:hover) and (pointer:fine){.header .icon-link:hover{background:rgba(127,140,150,.16)}}
.header .header-call{border:1px solid currentColor;border-radius:999px;padding:10px 22px;gap:12px;border-left-width:1px;transition:background-color .25s ease,color .25s ease,transform .16s ease-out}
.header .header-call svg{display:none}
.header .header-call:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.header .header-call:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}
.header .menu-toggle{grid-column:1;grid-row:1;display:none;position:relative;width:44px;height:44px;margin-left:-10px;padding:0;border:0;background:none}
.header .menu-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.header .menu-toggle i{position:absolute;left:10px;top:17px;width:24px;height:1.5px;border:0;background:currentColor;border-radius:2px;transform:none;transition:transform .45s var(--hx-ease),top .45s var(--hx-ease),width .45s var(--hx-ease)}
.header .menu-toggle i::after{display:none}
.header .menu-toggle i+i{top:25px;width:15px}
.menu-open .header .menu-toggle i{top:21px;transform:rotate(45deg)}
.menu-open .header .menu-toggle i+i{top:21px;width:24px;transform:rotate(-45deg)}

/* Home: trasparente sopra la scena, vetro chiaro solo fuori dalla hero */
.page-index .header{transition:background-color .5s ease,color .5s ease,border-color .5s ease}
.page-index.over-hero:not(.menu-open) .header{color:#fff;background:transparent;border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:none;backdrop-filter:none}
.page-index.over-hero:not(.menu-open) .header::before{content:'';position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(3,14,24,.32),transparent)}
.page-index.over-hero:not(.menu-open) .header .wordmark img{filter:brightness(0) invert(1)}
.page-index.over-hero:not(.menu-open) .header .header-call{border-color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){.page-index.over-hero .header .header-call:hover{background:#fff;color:var(--ink);border-color:#fff}}
.page-index:not(.over-hero) .header{background:rgba(246,248,248,.66);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);color:var(--ink);border-color:rgba(16,31,43,.08)}
.page-index:not(.over-hero) .header .wordmark img{filter:none}

/* Menu mobile: lastra di vetro a tutto schermo */
.mobile-nav{position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 22px 40px;color:#fff;background:rgba(5,18,29,.58);-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);box-shadow:none}
.mobile-nav:not([hidden]){animation:hx-menu .5s var(--hx-ease) both}
.mobile-nav>a{border-color:rgba(255,255,255,.18);font-size:32px}
.mobile-nav>a svg{width:22px}
.mobile-nav>a.mobile-phone{font-size:16px;margin-top:22px}
.mobile-nav p{color:#a9bccb}
.menu-open .header{color:#fff;background:transparent;border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .header .wordmark img{filter:brightness(0) invert(1)}
@keyframes hx-menu{from{opacity:0}}

@media (max-width:900px){
  .header .header-inner{grid-template-columns:44px 1fr 44px}
  .header .desktop-nav,.header .header-call{display:none}
  .header .menu-toggle{display:block}
  .header .wordmark{width:118px}
  .header .nav-right{gap:0}.header .icon-link{margin-right:-8px}.header .icon-fb{display:none}
}

/* ---------- Hero ---------- */
.hx-track{position:relative;z-index:0;height:175svh}
:where(.page-index main>section){position:relative;z-index:1}
.hx{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;color:#fff;background:var(--night);clip-path:inset(0 0 0 0 round 0px);will-change:clip-path}
.hx-media{position:absolute;inset:0;transform-origin:62% 40%;will-change:transform}
.hx-video,.hx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.hx-pan{display:none}
.hx-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(4,15,25,.62),rgba(4,15,25,.16) 44%,transparent 70%),linear-gradient(0deg,rgba(4,15,25,.5),transparent 40%)}
.hx-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--night);opacity:0}
.hx-glow{position:absolute;inset:0;z-index:4;pointer-events:none}
.hx-copy{position:absolute;z-index:3;left:0;right:0;bottom:120px;will-change:transform,opacity,filter}
.hx-mark{display:none}
.hx-copy h1{max-width:880px;font-size:clamp(56px,5.65vw,86px);line-height:1.03;letter-spacing:-.04em;text-wrap:balance}
.hx-copy p{color:#e6edf2;font-size:17px;line-height:1.65;margin-top:25px}
.hx-actions{display:flex;align-items:center;gap:16px;margin-top:32px}
.hx .hx-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border-radius:999px;padding:16px 22px 16px 26px;font-size:15px;line-height:1.4;transition:background-color .25s ease,border-color .25s ease,transform .16s ease-out}
.hx .hx-btn:active{transform:scale(.97)}
.hx .hx-btn svg{width:20px;height:20px;transition:transform .3s var(--hx-ease)}
.hx .hx-btn.solid{background:rgba(255,255,255,.95);color:var(--ink)}
.hx .hx-btn.glass{color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
@media (hover:hover) and (pointer:fine){.hx .hx-btn.solid:hover{background:#fff}.hx .hx-btn.glass:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}.hx .hx-btn:hover svg{transform:translateX(4px)}}
.hx-in{animation:hx-arrive 1.2s var(--hx-ease) both}.hx-in:nth-child(2){animation-delay:.06s}.hx-in:nth-child(3){animation-delay:.12s}.hx-in:nth-child(4){animation-delay:.18s}
@keyframes hx-arrive{from{transform:translateY(16px);opacity:0}}
.hx-note{position:absolute;z-index:3;right:var(--gutter);bottom:28px;font-size:11px;color:#a8bccb;opacity:.8}

/* La fascia dei marchi è il bordo della lastra che sale sopra la scena */
.page-index .brand-rail{overflow:visible;margin-top:-42svh;border-radius:32px 32px 0 0;padding:34px 0 34px;box-shadow:0 -40px 90px rgba(3,14,24,.28),inset 0 1px 0 rgba(255,255,255,.9)}
.page-index .brand-rail::after{content:'';position:absolute;z-index:-1;left:0;right:0;top:100%;height:44svh;background:var(--paper);pointer-events:none}
.page-index .brand-rail .rail-window{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.page-index .brand-rail .rail-window{opacity:0;transition:opacity 1.2s var(--hx-ease)}
.page-index .brand-rail.hx-arrived .rail-window{opacity:1}

/* ---------- Mobile: panorama 5K a tutto schermo, carrellata + scansione a raggi X ---------- */
@media (max-width:900px){
  .hx-video,.hx-poster{display:none}
  .hx-media{transform-origin:50% 45%}
  .hx-pan{display:block;position:absolute;top:0;left:0;height:100%;aspect-ratio:4400/2456;will-change:transform;transform:translate3d(calc(-31% + 50vw),0,0);animation:hx-pan var(--hx-cycle) var(--hx-io) infinite}
  .hx-pan picture,.hx-pan img{position:absolute;inset:0;width:100%;height:100%;display:block}
  .hx-x{position:absolute;inset:0;overflow:hidden;transform:translate3d(0,100%,0);animation:hx-rise var(--hx-cycle) var(--hx-io) infinite;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%);mask-image:linear-gradient(180deg,transparent 0,#000 7%)}
  .hx-x picture{transform:translate3d(0,-100%,0);animation:hx-counter var(--hx-cycle) var(--hx-io) infinite}
  .hx-scanwrap{position:absolute;inset:0;pointer-events:none;transform:translate3d(0,100%,0);animation:hx-rise var(--hx-cycle) var(--hx-io) infinite}
  .hx-scan{position:absolute;left:0;right:0;top:3.5%;height:2px;opacity:0;animation:hx-scan var(--hx-cycle) linear infinite;background:linear-gradient(90deg,transparent,rgba(190,232,255,.85) 20%,#fff 50%,rgba(190,232,255,.85) 80%,transparent);box-shadow:0 0 18px 4px rgba(150,215,255,.45),0 0 60px 12px rgba(120,200,255,.18)}
  .hx-shade{background:linear-gradient(0deg,rgba(4,16,26,.84),rgba(4,16,26,.48) 40%,transparent 66%),linear-gradient(180deg,rgba(3,23,37,.42),transparent 18%)}
  .hx-copy{bottom:64px}
  .hx-mark{display:block;width:min(50vw,230px);margin:0 0 24px}
  .hx-mark img{width:100%;height:auto;display:block;filter:brightness(0) invert(1) drop-shadow(0 6px 26px rgba(3,14,24,.35));opacity:.95}
  .hx-copy h1{font-size:clamp(39px,9.6vw,62px);line-height:1.05}
  .hx-copy p{font-size:14px;margin-top:16px;max-width:340px}
  .hx-actions{gap:10px;margin-top:22px;flex-wrap:wrap}
  .hx .hx-btn{font-size:13px;padding:13px 16px 13px 20px;gap:18px}
  .hx-note{bottom:22px;right:22px;font-size:10px}
  .page-index .brand-rail{border-radius:26px 26px 0 0;padding:26px 0}
}
@media (max-width:380px){.hx-copy h1{font-size:37px}}
@keyframes hx-pan{0%{transform:translate3d(calc(-31% + 50vw),0,0)}50%{transform:translate3d(calc(-75% + 50vw),0,0)}100%{transform:translate3d(calc(-31% + 50vw),0,0)}}
@keyframes hx-rise{0%,3%{transform:translate3d(0,100%,0)}26%,74%{transform:translate3d(0,-8%,0)}97%,100%{transform:translate3d(0,100%,0)}}
@keyframes hx-counter{0%,3%{transform:translate3d(0,-100%,0)}26%,74%{transform:translate3d(0,8%,0)}97%,100%{transform:translate3d(0,-100%,0)}}
@keyframes hx-scan{0%,3%{opacity:0}6%,22%{opacity:1}27%,73%{opacity:0}78%,93%{opacity:.8}97%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hx-in,.hx-pan,.hx-x,.hx-x picture,.hx-scan,.hx-scanwrap,.mobile-nav:not([hidden]){animation:none}
  .hx-scanwrap,.hx-video{display:none}.hx-track{height:auto}.page-index .brand-rail{margin-top:0}
  .page-index .brand-rail .rail-window{opacity:1}
}

/* Intro sezione impianti: testo a destra in simmetria con il titolo (stessa linea di base, allineato al margine destro) */
@media (min-width:901px){.services-intro{align-items:flex-end}.services-intro p{max-width:400px;text-align:right;text-wrap:balance;padding-bottom:.3em;color:var(--muted)}}