/* ============================================================================
   AdsWaves · REDLINE · services.css
   Stylesheet condiviso delle pagine servizio: chrome (nav/overlay/palette/footer)
   coerente con la homepage + layout pagina servizio riusabile.
   Carica DOPO tokens.css. Usato da /services/*.html.
   ========================================================================== */

/* ===== HEADER / NAV (coerente con homepage) ===== */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--bg);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out-soft);
}
.site-header::after { content: ""; position: absolute; inset: 0; box-shadow: var(--e1); opacity: 0; transition: opacity var(--dur-base) var(--ease-out-soft); pointer-events: none; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header.scrolled::after { opacity: 1; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-block: var(--s3); }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 1; }
.brand img { width: auto; }
.brand:hover img { opacity: .82; transition: opacity var(--dur-fast) var(--ease-out-soft); }
.brand-full { height: 38px; display: block; }
.brand-mark { height: 38px; display: none; }
@media (max-width: 640px) { .brand-full { display: none; } .brand-mark { display: block; } }

.nav-right { display: flex; align-items: center; gap: var(--s2); }
.kbar-trigger {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--fs-mono);
  color: var(--ink-mut); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 9px 14px; min-height: 44px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft);
}
.kbar-trigger:hover { border-color: var(--line-strong); color: var(--ink); }
.kbar-trigger kbd { font-family: var(--font-mono); font-size: .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink-mut); }
.explore-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  background: var(--ink); color: #fff; border: 0; border-radius: var(--r-btn);
  padding: 12px 20px; min-height: 44px; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out-soft), background var(--dur-fast) var(--ease-out-soft);
}
.explore-trigger:hover { background: #000; transform: translateY(-1px); }
.explore-trigger .bars { display: inline-flex; flex-direction: column; gap: 3px; }
.explore-trigger .bars span { width: 16px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--dur-base) var(--ease-in-out); }
.explore-trigger:hover .bars span:first-child { transform: translateX(3px); }
.nav-cta { display: inline-flex; }
@media (max-width: 980px) { .kbar-trigger .kbd-hint { display: none; } }
@media (max-width: 640px) { .explore-trigger span.label { display: none; } .nav-cta .btn { padding-inline: 16px; } }

/* ===== NAV OVERLAY ===== */
.nav-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--graphite); color: var(--on-graphite);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-in-out), visibility 0s var(--ease-in-out) var(--dur-slow);
  overflow-y: auto;
}
.nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-slow) var(--ease-in-out); }
.nav-overlay-top { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--gutter); border-bottom: 1px solid var(--graphite-line); }
.nav-overlay-top .brand img { filter: brightness(0) invert(1); height: 24px; }
.overlay-close {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: none; border: 1px solid var(--graphite-line); color: var(--on-graphite);
  border-radius: var(--r-pill); padding: 10px 18px; min-height: 44px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease-out-soft);
}
.overlay-close:hover { border-color: var(--on-graphite); }
.nav-pillars { align-self: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); max-width: var(--maxw); margin-inline: auto; width: 100%; padding: var(--s8) var(--gutter); }
.pillar-num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--red-bright); letter-spacing: var(--tracking-mono); }
.pillar-title { font-family: var(--font-display); font-weight: 800; color: var(--on-graphite); font-size: var(--fs-h2); margin: var(--s3) 0 var(--s5); line-height: 1; }
.pillar-title a { position: relative; padding-bottom: 4px; }
.pillar-title a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out-quint); }
.pillar-title a:hover::after, .pillar-title a:focus-visible::after { transform: scaleX(1); }
.pillar ul { display: flex; flex-direction: column; gap: var(--s2); }
.pillar ul a { display: inline-flex; align-items: center; gap: var(--s2); color: var(--on-graphite-mut); font-size: var(--fs-lead); padding: 4px 0; transition: color var(--dur-fast) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft); }
.pillar ul a:hover, .pillar ul a:focus-visible { color: var(--on-graphite); transform: translateX(4px); }
.pillar ul a::before { content: "→"; color: var(--red-bright); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out-soft); }
.pillar ul a:hover::before, .pillar ul a:focus-visible::before { opacity: 1; }
.nav-overlay-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); padding: var(--s4) var(--gutter); border-top: 1px solid var(--graphite-line); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--on-graphite-mut); letter-spacing: var(--tracking-mono); }
.lang-sw { display: inline-flex; gap: 2px; background: rgba(255,255,255,.06); border-radius: var(--r-pill); padding: 3px; }
.lang-sw button { background: none; border: 0; cursor: pointer; color: var(--on-graphite-mut); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); padding: 8px 14px; border-radius: var(--r-pill); min-height: 44px; transition: background var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) var(--ease-out-soft); }
.lang-sw button[aria-current="true"] { background: var(--red); color: #fff; }
@media (max-width: 980px) { .nav-pillars { grid-template-columns: 1fr; gap: var(--s6); } }

/* ===== COMMAND PALETTE ===== */
.palette-scrim { position: fixed; inset: 0; z-index: var(--z-palette); background: rgba(20,15,15,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--s4) var(--s4); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out-soft), visibility 0s var(--ease-out-soft) var(--dur-base); }
.palette-scrim.open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out-soft); }
.palette { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e3); overflow: hidden; transform: translateY(-8px); transition: transform var(--dur-base) var(--ease-out-quint); }
.palette-scrim.open .palette { transform: none; }
.palette-input-wrap { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.palette-input-wrap svg { width: 18px; height: 18px; color: var(--ink-mut); flex: 0 0 auto; }
.palette input { flex: 1 1 auto; border: 0; outline: 0; background: none; font-family: var(--font-body); font-size: var(--fs-lead); color: var(--ink); }
.palette input::placeholder { color: var(--ink-mut); }
.palette-list { max-height: 46vh; overflow-y: auto; padding: var(--s2); }
.palette-list li { list-style: none; }
.palette-item { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; padding: 12px 14px; border-radius: var(--r-sm); cursor: pointer; background: none; border: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.palette-item .pi-kind { font-family: var(--font-mono); font-size: .68rem; letter-spacing: var(--tracking-mono); color: var(--ink-mut); margin-left: auto; text-transform: uppercase; }
.palette-item[aria-selected="true"], .palette-item:hover { background: var(--bg-2); color: var(--ink); }
.palette-item[aria-selected="true"] .pi-dot { background: var(--red); }
.pi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.palette-empty { padding: 18px 16px; color: var(--ink-mut); font-size: var(--fs-small); }
.palette-foot { display: flex; gap: var(--s4); padding: 10px var(--s5); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; color: var(--ink-mut); letter-spacing: var(--tracking-mono); }

/* ===== SHARED SECTION SCAFFOLD ===== */
.section { padding-block: clamp(64px, 9vw, 116px); }
.section--warm { background: var(--bg-warm); }
.sec-head { max-width: 60ch; margin-bottom: var(--s7); }
.sec-head h2 { font-size: var(--fs-h2); margin: var(--s3) 0 var(--s4); }
.sec-head p { color: var(--ink-soft); font-size: var(--fs-lead); }
.overline { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--red); }

/* ===== FOOTER ===== */
.site-footer { background: var(--graphite); color: var(--on-graphite-mut); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s6); padding-block: var(--s8); }
.site-footer .brand img { filter: brightness(0) invert(1); height: 24px; }
.footer-blurb { margin-top: var(--s4); max-width: 34ch; font-size: var(--fs-small); line-height: var(--lh-body); }
.footer-col h4 { color: var(--on-graphite); font-size: var(--fs-small); font-family: var(--font-mono); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; margin-bottom: var(--s4); }
.footer-col a, .footer-col p { display: block; color: var(--on-graphite-mut); font-size: var(--fs-small); padding: 4px 0; transition: color var(--dur-fast) var(--ease-out-soft); }
.footer-col a:hover { color: var(--on-graphite); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); border-top: 1px solid var(--graphite-line); padding-block: var(--s5); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   LAYOUT PAGINA SERVIZIO
   ========================================================================== */

/* Breadcrumb */
.breadcrumb { padding-top: var(--s6); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-mut); }
.breadcrumb a { color: var(--ink-mut); transition: color var(--dur-fast) var(--ease-out-soft); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb li[aria-current] { color: var(--ink); }
.breadcrumb .sep { color: var(--line-strong); }

/* Hero servizio */
.svc-hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); position: relative; overflow: hidden; }
.svc-hero .eyebrow { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-mut); }
.svc-hero .eyebrow .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.svc-hero h1 { font-size: var(--fs-h1); max-width: 16ch; margin: var(--s5) 0 0; }
.svc-hero h1 .accent { color: var(--red); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .svc-hero h1 .accent { background: linear-gradient(100deg, var(--red), var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.svc-hero .lead { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 56ch; margin-top: var(--s5); line-height: var(--lh-body); }
.svc-hero .lead [lang="it"] { color: var(--ink-mut); }
.svc-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.svc-hero .index-line { margin-top: var(--s7); }

/* Feature grid (cosa costruiamo) */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.feature { padding: var(--s6) var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--dur-base) var(--ease-out-soft), border-color var(--dur-base) var(--ease-out-soft); }
.feature:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.feature .f-ic { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-2); color: var(--red); margin-bottom: var(--s4); }
.feature .f-ic svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.feature p { color: var(--ink-soft); font-size: var(--fs-small); }

/* Platforms / chip-row */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.chip-row .chip { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 11px 20px; }

/* Redesign / panel scuro */
.panel-dark { background: var(--graphite); color: var(--on-graphite); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s7); align-items: center; }
.panel-dark h2 { color: #fff; font-size: var(--fs-h2); }
.panel-dark p { color: var(--on-graphite-mut); margin-top: var(--s4); font-size: var(--fs-lead); line-height: var(--lh-body); }
.panel-dark .panel-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn--inv { background: #fff; color: var(--ink); box-shadow: var(--e2); }
.btn--inv:hover { background: var(--bg-warm); transform: translateY(-2px); }
@media (max-width: 760px) { .panel-dark { grid-template-columns: 1fr; gap: var(--s5); } }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); counter-reset: step; }
.step { padding: var(--s6) var(--s5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
.step .s-num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--red); letter-spacing: var(--tracking-mono); }
.step h3 { font-size: var(--fs-h3); margin: var(--s2) 0; }
.step p { color: var(--ink-soft); font-size: var(--fs-small); }

/* Pricing band */
.pricing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); padding: clamp(28px, 4vw, 44px); background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--r-xl); }
.pricing .p-label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink-mut); }
.pricing .p-amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); letter-spacing: -0.02em; }
.pricing .p-amount .from { font-size: .5em; color: var(--ink-mut); font-weight: 600; }

/* FAQ */
.faq { display: grid; gap: var(--s3); max-width: 820px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: var(--s5); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.4em; line-height: 1; transition: transform var(--dur-base) var(--ease-out-soft); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 var(--s5) var(--s5); color: var(--ink-soft); line-height: var(--lh-body); }

/* Sibling services */
.siblings { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.sibling { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); font-family: var(--font-display); font-weight: 700; transition: transform var(--dur-base) var(--ease-out-soft), border-color var(--dur-base) var(--ease-out-soft); }
.sibling:hover { transform: translateY(-3px); border-color: var(--red); }
.sibling .arrow { color: var(--red); transition: transform var(--dur-base) var(--ease-spring); }
.sibling:hover .arrow { transform: translateX(4px); }

/* CTA band (riuso) */
.cta-band { background: var(--red); color: #fff; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s5); padding-block: clamp(48px, 7vw, 88px); }
.cta-band h2 { color: #fff; font-size: var(--fs-h2); max-width: 18ch; }
.cta-band p { color: #fff; margin-top: var(--s3); }

@media (max-width: 760px) {
  .feature-grid, .steps, .siblings { grid-template-columns: 1fr; }
}