/* Pagine dei servizi: stesso linguaggio visivo della home (colori, caratteri, pulsanti, menu),
   senza il film a scorrimento. In alto un breve video in loop del capitolo giusto. */
:root{
  --bg:#05080D; --bg-2:#0A1019; --bg-3:#0F1724;
  --ink:#EEF3F8; --muted:#8C98A6; --faint:#4A5563;
  --blue:#0066A8; --volt:#3AA0FF;
  --line:rgba(238,243,248,.09);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --display:"Archivo", "Arial Narrow", sans-serif;
  --sans:"IBM Plex Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 var(--sans);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.display{font-family:var(--display);font-stretch:125%;font-weight:800;letter-spacing:-.01em;line-height:.95;text-transform:uppercase}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- header (come la home) ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(16px,4vw,48px);color:#fff}
.site-header::before{content:"";position:absolute;inset:0 0 auto 0;height:170%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,6,10,.8),rgba(3,6,10,0))}
.brand{display:inline-block;background:#000;border-radius:14px;padding:10px 18px;
  box-shadow:0 2px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset}
.brand img{height:40px;width:auto}
@media (max-width:1024px){ .brand img{height:34px} .brand{padding:8px 14px} }
.nav{display:flex;align-items:center;gap:28px}
.nav a.link{font-weight:500;font-size:15px;text-shadow:0 1px 18px rgba(0,0,0,.55);opacity:.86;transition:opacity .2s}
.nav a.link:hover,.nav a.link[aria-current]{opacity:1}
.menu-btn{display:none}
@media (max-width:820px){
  .brand img{height:28px} .brand{padding:7px 12px;border-radius:12px}
  .brand,.menu-btn{position:relative;z-index:2}
  .menu-btn{display:grid;place-content:center;gap:5px;width:46px;height:46px;padding:0;border:0;border-radius:12px;cursor:pointer;
    background:#000;box-shadow:0 2px 18px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) inset}
  .menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease-out),opacity .2s}
  .menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-open .menu-btn span:nth-child(2){opacity:0}
  .menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{position:fixed;inset:0;z-index:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;
    padding:96px 28px 48px;background:var(--bg);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .menu-open .nav{opacity:1;visibility:visible}
  .nav a.link{display:flex;align-items:center;gap:14px;width:100%;padding:10px 0;opacity:1;text-shadow:none;
    font:800 clamp(26px,8vw,38px)/1.1 var(--display);font-stretch:118%;text-transform:uppercase;border-bottom:1px solid var(--line)}
  .nav a.link::before{content:"";width:18px;height:2px;flex:none;background:var(--volt);box-shadow:0 0 10px var(--volt)}
}

/* ---------- apertura con video ---------- */
.hero{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden;
  padding:140px clamp(16px,6vw,96px) clamp(48px,8vh,96px)}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(5,8,13,.55) 0%,rgba(5,8,13,0) 30%,rgba(5,8,13,.35) 55%,rgba(5,8,13,.94) 88%,var(--bg) 100%),
  linear-gradient(to right,rgba(5,8,13,.7),rgba(5,8,13,0) 65%)}
.hero .wrap{position:relative;z-index:2}
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#AFC0D2;display:flex;gap:10px;flex-wrap:wrap}
.crumbs a:hover{color:var(--volt)}
.hero .kicker{margin-top:22px}
/* il titolo si adatta alla parola piu lunga della pagina (--chars), cosi non esce mai dal bordo */
.hero h1{font-size:min(clamp(40px,7.2vw,110px),calc(86vw / (var(--chars,12) * .84)));margin-top:18px;text-shadow:0 6px 40px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;color:var(--volt);text-shadow:0 0 28px rgba(58,160,255,.55)}
.hero .lead{margin-top:22px;max-width:56ch;font-size:clamp(17px,1.5vw,20px);font-weight:600;color:#fff;border-left:2px solid var(--volt);padding-left:16px}

/* ---------- contenuti ---------- */
.wrap{width:100%;max-width:1280px;margin:0 auto}
.section{padding:clamp(64px,10vh,120px) clamp(16px,6vw,96px)}
.kicker{color:var(--volt);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:2px;background:var(--volt);box-shadow:0 0 12px var(--volt)}
.h-big{font-size:clamp(34px,5.4vw,80px);margin-top:20px}
.lead{margin-top:22px;max-width:60ch;color:#C6D0DA;font-size:clamp(17px,1.4vw,19px)}
.prose{margin-top:28px;max-width:68ch;color:#C6D0DA}
.prose p+p{margin-top:14px}
.prose b{color:#fff}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden}
.card{background:var(--bg);padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px}
.card svg{width:32px;height:32px;color:var(--volt)}
.card h3{font:700 19px/1.2 var(--display);font-stretch:112%;text-transform:uppercase}
.card p{color:var(--muted);font-size:15.5px}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid{grid-template-columns:1fr} }

.brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.brands span{font:600 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border-radius:999px;
  color:#DCE8F4;box-shadow:0 0 0 1px rgba(58,160,255,.45) inset;background:rgba(58,160,255,.08)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:56px}
.step{border-top:1px solid var(--line);padding-top:24px;position:relative}
.step::before{content:"";position:absolute;top:-1px;left:0;width:64px;height:2px;background:var(--volt);box-shadow:0 0 14px var(--volt)}
.step .n{font:800 clamp(52px,6vw,90px)/.9 var(--display);font-stretch:125%;color:transparent;-webkit-text-stroke:1px rgba(238,243,248,.28)}
.step h3{font:700 20px/1.2 var(--display);font-stretch:112%;text-transform:uppercase;margin-top:16px}
.step p{color:var(--muted);margin-top:8px;max-width:38ch}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

.photos{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(160px,20vw,280px);gap:10px;margin-top:48px}
.photos figure{margin:0;border-radius:14px;overflow:hidden;background:var(--bg-2);box-shadow:0 0 0 1px var(--line)}
.photos figure.big{grid-column:span 2;grid-row:span 2}
.photos img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){ .photos{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(130px,36vw,220px)} }
.photos.n2{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(260px,40vw,520px)}
@media (max-width:820px){ .photos.n2{grid-auto-rows:clamp(220px,62vw,420px)} }
.photos-note a{color:var(--volt)}
.photos-note{margin-top:14px;color:var(--faint);font-size:14px}

.faq{margin-top:40px;border-top:1px solid var(--line);max-width:860px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 2px;cursor:pointer;list-style:none;
  font:700 18px/1.3 var(--display);font-stretch:110%;color:#fff}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--volt)}
.faq-item summary::after{content:"+";font:300 28px/1 var(--sans);color:var(--volt);flex:none;transition:transform .25s var(--ease-out)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 2px 22px;color:var(--muted);max-width:66ch;font-size:16px}
.faq-item p a{color:var(--volt)}

.others{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.others a{padding:12px 18px;border-radius:999px;box-shadow:0 0 0 1px var(--line) inset;background:var(--bg-2);font-weight:600;font-size:15px}
.others a:hover{box-shadow:0 0 0 1px var(--volt) inset;color:var(--volt)}

/* ---------- chiamata finale ---------- */
.cta-box{background:radial-gradient(90% 90% at 50% 120%,rgba(0,102,168,.5),transparent 70%),var(--bg-2);border-radius:24px;
  box-shadow:0 0 0 1px var(--line);padding:clamp(36px,6vw,72px);text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-box h2{font-size:clamp(32px,5vw,68px)}
.cta-box h2 em{font-style:normal;color:var(--volt)}
.cta-box p{margin-top:18px;color:#C6D0DA;max-width:52ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;justify-content:center}
.hero .ctas{justify-content:flex-start}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;
  font-weight:600;font-size:16px;transition:transform .25s var(--ease-out),box-shadow .3s,background .3s}
.btn svg{width:20px;height:20px;flex:none}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 0 0 1px rgba(58,160,255,.6) inset,0 0 38px -4px rgba(58,160,255,.65)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(120,190,255,.9) inset,0 0 60px -2px rgba(58,160,255,.85)}
.btn.wa{background:#25D366;color:#04210F;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset,0 0 34px -6px rgba(37,211,102,.6)}
.btn.wa:hover{transform:translateY(-2px);background:#2EE070}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.22) inset}
.btn.ghost:hover{transform:translateY(-2px)}
@media (max-width:480px){
  .ctas{gap:8px} .ctas .btn{height:48px;padding:0 16px;font-size:15px;flex:1 1 auto;justify-content:center}
  .ctas .btn.primary{flex:1 1 100%}
}

/* ---------- piede (come la home) ---------- */
footer{border-top:1px solid var(--line);padding:48px clamp(16px,6vw,96px) 40px;background:var(--bg)}
.foot{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px 64px;justify-content:space-between;align-items:flex-start}
.foot .plate{display:inline-block;background:#000;border-radius:12px;padding:10px 16px;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.foot img{height:30px;width:auto}
.foot dl{display:grid;grid-template-columns:auto auto;gap:8px 20px;font-size:15px}
.foot dt{color:var(--faint);font:500 12px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.foot dd a:hover{color:var(--volt)}
.legal{max-width:1280px;margin:36px auto 0;color:var(--faint);font-size:13px}
.legal a:hover{color:var(--volt)}

@media (prefers-reduced-motion: reduce){ .nav,.menu-btn span,.btn{transition:none} }