/* SispoTech institutional site. White pages, real screens, technical tone; the lamp colours appear
   only where they mean something. */
:root {
  --ink: #14202c;
  --ink-2: #4a5866;
  --line: #d9dfe5;
  --band: #f3f5f7;
  --navy: #12294a;
  --blue: #1f4f8a;
  --green: #2f9e5b;
  --yellow: #d9a21b;
  --red: #d0342c;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Outfit", "IBM Plex Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: #fff; color: var(--ink); font: 17px/1.6 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
h1, h2 { font-family: var(--cond); color: var(--navy); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 32px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font: 700 1.2rem var(--cond); }
.logo img { border-radius: 5px; }
.top nav { display: flex; gap: 26px; margin-left: auto; font-size: .95rem; }
.top nav a { color: var(--ink); text-decoration: none; }
.top nav a:hover { color: var(--blue); }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; background: var(--navy); color: #fff; border-radius: 4px; font-weight: 600; text-decoration: none; }
.btn:hover { background: var(--blue); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: .92rem; }
@media (max-width: 760px) {
  .top .wrap { gap: 12px; }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
}

section { padding: 76px 0; }
.band { background: var(--band); }
.lead { margin-top: 12px; color: var(--ink-2); }
.note { margin-top: 18px; color: var(--ink-2); font-size: .92rem; }

/* Opening */
.hero { padding: 56px 0 64px; }
.hero .wrap { display: grid; gap: 44px; }
.hero-text { max-width: 760px; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.hero .sub { margin-top: 20px; color: var(--ink-2); font-size: 1.1rem; max-width: 52ch; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.cta .link { font-weight: 600; }

/* Screens */
.shot { margin: 0; }
.shot img { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgb(18 41 74 / .12); background: #fff; }
.shot figcaption { margin-top: 10px; color: var(--ink-2); font-size: .88rem; }
.screens { margin-top: 32px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; }
.screen-text { max-width: 56ch; }
.screen-text h3 { font-size: 1.2rem; }
.screen-text h3 + p { margin-top: 8px; color: var(--ink-2); }
.screen-text p + h3 { margin-top: 28px; }
.shot.wide { margin-top: 48px; }
.shot a { display: block; }
.shot.phone img { border-radius: 18px; border: 6px solid #1c2733; }
@media (max-width: 760px) {
  .screens { grid-template-columns: 1fr; gap: 28px; }
  .shot.phone { max-width: 260px; }
}

/* Heading on the left, text on the right */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.split > p { font-size: 1.12rem; color: var(--ink); max-width: 60ch; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 18px; } }

/* Steps: a real sequence, so they are numbered */
.steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 3px solid var(--navy); padding-top: 14px; }
.steps li::before { content: "Passo " counter(s); display: block; margin-bottom: 6px; color: var(--ink-2); font-size: .85rem; }
.steps p { margin-top: 6px; color: var(--ink-2); font-size: .97rem; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Colours */
.colors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.colors li { display: grid; grid-template-columns: 22px 90px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.colors b { font-weight: 600; }
.lamp { width: 18px; height: 18px; border-radius: 50%; align-self: center; }
.lamp.g { background: var(--green); } .lamp.y { background: var(--yellow); } .lamp.r { background: var(--red); }
@media (max-width: 520px) { .colors li { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; } .colors li > .lamp { grid-column: 1; grid-row: 1; } .colors li > b { grid-column: 2; grid-row: 1; } .colors li > span:not(.lamp) { grid-column: 2; grid-row: 2; } }

/* Safety */
.dark { background: var(--navy); color: #fff; }
.dark h2 { color: #fff; }
.rules { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.rules div { border-top: 1px solid #4a6386; padding-top: 14px; }
.rules p { margin-top: 6px; color: #c8d4e2; font-size: .96rem; }
@media (max-width: 860px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rules { grid-template-columns: 1fr; } }

/* Technical data */
.specs { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.specs table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.specs caption { text-align: left; font-weight: 600; padding-bottom: 10px; color: var(--navy); }
.specs th, .specs td { text-align: left; vertical-align: top; padding: 10px 0; border-top: 1px solid var(--line); }
.specs th { width: 38%; padding-right: 16px; color: var(--ink-2); font-weight: 500; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } }

/* People */
.roles { margin-top: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.roles > div { border-top: 1px solid var(--line); padding-top: 14px; }
.roles ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: .96rem; }
.roles li + li { margin-top: 4px; }
@media (max-width: 860px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .roles { grid-template-columns: 1fr; } }

/* Pilot */
.pilot { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pilot > div { border-top: 1px solid var(--line); padding-top: 14px; }
.pilot strong { display: block; font: 700 1.6rem/1.1 var(--cond); color: var(--navy); }
.pilot p { margin-top: 6px; color: var(--ink-2); font-size: .97rem; }
@media (max-width: 760px) { .pilot { grid-template-columns: 1fr; } }

/* Contact */
.contact { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact a { display: block; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.contact a:hover { border-color: var(--blue); }
.contact small { display: block; color: var(--ink-2); font-size: .85rem; }
.contact b { display: block; margin-top: 2px; color: var(--navy); font-size: 1.05rem; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; } }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); font-size: .92rem; color: var(--ink-2); }
footer .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: start; }
footer .logo { font-size: 1.05rem; }
footer p { margin-top: 6px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
footer .legal { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { footer .wrap { grid-template-columns: 1fr; } }

/* Privacy page */
.doc { max-width: 760px; padding: 56px 0 80px; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.doc h2 { font-size: 1.35rem; margin-top: 36px; }
.doc p, .doc ul { margin-top: 12px; color: var(--ink); }
.doc ul { padding-left: 20px; }
.doc li + li { margin-top: 6px; }
.doc .updated { margin-top: 10px; color: var(--ink-2); font-size: .92rem; }

/* Buttons on dark and light backgrounds */
.btn.accent { background: var(--yellow); color: #1a1406; }
.btn.accent:hover { background: #c98f0f; }
.btn.outline { background: transparent; color: #fff; border: 1px solid rgb(255 255 255 / .55); }
.btn.outline:hover { background: rgb(255 255 255 / .1); }
.btn.ghost-dark { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn.ghost-dark:hover { background: var(--band); }
.btn.big { min-height: 54px; padding: 0 28px; font-size: 1.05rem; }
.top .wrap > .btn + .btn { margin-left: -20px; }
@media (max-width: 760px) { .top .ghost-dark { margin-left: auto; } .top .wrap > .btn + .btn { margin-left: 0; } }
@media (max-width: 420px) { .top .ghost-dark { display: none; } .top .accent { margin-left: auto; } }

/* Opening on a dark band; the panel screen overlaps the band below */
.dark-hero {
  padding: 64px 0 0; color: #fff; background-color: var(--navy);
  background-image: linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 44px 44px;
}
.dark-hero h1 { color: #fff; }
.dark-hero .sub { color: #c8d4e2; }
.dark-hero .hero-shot { position: relative; z-index: 1; margin-bottom: -150px; }
.dark-hero .hero-shot img { box-shadow: 0 24px 60px rgb(5 14 28 / .45); border-color: #0d1b2e; }

/* Product facts */
.facts { padding: 200px 0 64px; }
.facts .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.facts .wrap > div { border-top: 3px solid var(--yellow); padding-top: 16px; }
.facts strong { display: block; font: 700 2.4rem/1 var(--cond); color: var(--navy); }
.facts span { display: block; margin-top: 6px; color: var(--ink-2); font-size: .96rem; }
@media (max-width: 860px) { .facts .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dark-hero .hero-shot { margin-bottom: -60px; } .facts { padding-top: 100px; } }

/* Line icons */
.ico { display: block; width: 34px; height: 34px; margin-bottom: 12px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.steps li::before { display: none; }

/* Interactive demonstration */
.demo-band { background: linear-gradient(135deg, #12294a 0%, #1f4f8a 100%); color: #fff; overflow: hidden; }
.demo-band h2 { color: #fff; }
.demo-band .lead { color: #c8d4e2; font-size: 1.1rem; max-width: 52ch; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: center; }
.demo-steps { list-style: none; counter-reset: d; margin: 24px 0 30px; padding: 0; display: grid; gap: 12px; }
.demo-steps li { counter-increment: d; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 1.05rem; }
.demo-steps li::before { content: counter(d); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); color: #1a1406; font-weight: 700; }
.demo-phone { display: block; justify-self: center; }
.demo-phone img { width: 260px; border: 8px solid #0d1b2e; border-radius: 28px; box-shadow: 0 24px 60px rgb(5 14 28 / .5); transform: rotate(3deg); }
@media (max-width: 760px) {
  .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .demo-phone img { width: 210px; transform: none; }
}

/* ---- Richer layout: colour blocks with diagonal edges, big numbers, gradient icons, area chips ---- */
h2 { font-size: clamp(1.8rem, 3.8vw, 2.5rem); }
.dark-hero { position: relative; isolation: isolate; background: none; }
.dark-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: var(--navy);
  background-image: radial-gradient(circle at 85% 20%, rgb(242 179 27 / .18), transparent 40%), linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 88%);
}
.dark-hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); max-width: 18ch; }
.ico { width: 46px; height: 46px; stroke: url(#ig); stroke-width: 1.6; }
.facts strong { font-size: clamp(3rem, 6vw, 4.4rem); letter-spacing: -.01em; }
.facts .wrap > div { border-top: 0; padding-top: 0; }
.facts .ico { width: 40px; height: 40px; }
.roles > div { border-top: 0; background: var(--band); padding: 26px 24px; border-radius: 4px; }
.band .roles > div { background: #fff; }
.roles h3 { color: #b45309; font-size: 1.15rem; }
.roles li::marker { color: var(--yellow); }
.steps li { border-top: 0; padding: 26px 22px; background: var(--band); border-radius: 4px; }
.steps h3 { color: #b45309; }
.demo-band { position: relative; isolation: isolate; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); padding-top: 116px; }
.demo-band::after { content: ""; position: absolute; z-index: -1; width: 620px; height: 620px; right: -160px; bottom: -260px; border-radius: 50%; background: radial-gradient(circle, rgb(242 179 27 / .35), rgb(226 84 27 / .15) 55%, transparent 70%); }
.areas-band { background: linear-gradient(120deg, #12294a 0%, #1b3f73 60%, #b45309 140%); color: #fff; }
.areas-band h2 { color: #fff; }
.areas-band .lead { color: #c8d4e2; }
.chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chips li { padding: 10px 22px; border-radius: 999px; border: 2px solid transparent; background: linear-gradient(var(--navy), var(--navy)) padding-box, linear-gradient(90deg, #f2b31b, #e2541b) border-box; font-weight: 500; }
@media (max-width: 760px) { .dark-hero::before { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 84%); } .demo-band { clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); padding-top: 90px; } }

/* ---- Motion: blocks slide in as they enter the screen, screens settle, the areas strip keeps moving ---- */
h1, h2 { font-weight: 600; letter-spacing: -.015em; }
.facts strong { font-weight: 600; }
.steps li, .roles > div, .contact a, .facts .wrap > div { transition: transform .25s ease, box-shadow .25s ease; }
.steps li:hover, .roles > div:hover, .contact a:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgb(18 41 74 / .14); }
.btn { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgb(18 41 74 / .22); }
.shot a img { transition: transform .35s ease; }
.shot a:hover img { transform: scale(1.01); }

.marquee { margin-top: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .chips { margin: 0; flex-wrap: nowrap; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .chips { animation-play-state: paused; }
.marquee .chips li { white-space: nowrap; }
@keyframes marquee { to { transform: translateX(calc(-50% - 6px)); } }

/* Slide-in, driven by reveal.js (class "motion" on <html> only when the script runs). */
.motion .reveal { opacity: 0; transform: translateY(44px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .hero-shot.reveal { opacity: 1; transform: perspective(1400px) rotateX(14deg) scale(.94); transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.motion .hero-shot.reveal.in { transform: none; }
.motion .demo-phone.reveal { transform: rotate(10deg) translateY(70px); }
.motion .demo-phone.reveal.in { transform: none; }
.motion .in:nth-child(2) { transition-delay: .1s; }
.motion .in:nth-child(3) { transition-delay: .2s; }
.motion .in:nth-child(4) { transition-delay: .3s; }
.motion .steps li.in:hover, .motion .roles > div.in:hover, .motion .contact a.in:hover { transform: translateY(-6px); transition-delay: 0s; }
.top { transition: box-shadow .3s ease; }
.top.scrolled { box-shadow: 0 8px 26px rgb(18 41 74 / .14); }

/* Entrance of the opening, once */
.hero-text > * { animation: enter .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-text > :nth-child(2) { animation-delay: .12s; }
.hero-text > :nth-child(3) { animation-delay: .24s; }
@keyframes enter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee .chips { flex-wrap: wrap; width: auto; }
  .marquee .chips li[aria-hidden] { display: none; }
}

.btn { white-space: nowrap; }
@media (max-width: 760px) { .top .ghost-dark { display: none; } .top .accent { margin-left: auto; } }

/* Testimonials: one card per person, side by side; more cards scroll sideways */
.voices { background: #3a4552; }
.voices h2 { color: #fff; }
.voice-track { margin-top: 32px; display: grid; grid-auto-flow: column; grid-auto-columns: min(560px, 88%); gap: 24px; justify-content: center; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.voice { margin: 0; scroll-snap-align: center; background: #fff; border-radius: 4px; padding: 40px 40px 34px; display: grid; justify-items: center; text-align: left; }
.voice img { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; }
.voice blockquote { margin: 28px 0 0; }
.voice blockquote p { font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.voice figcaption { justify-self: stretch; display: grid; gap: 2px; margin-top: 24px; padding-left: 16px; border-left: 3px solid var(--yellow); }
.voice figcaption span { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 760px) { .voice { padding: 30px 24px 26px; } .voice img { width: 160px; height: 160px; } .voice-track { justify-content: start; } }
.voice-track:has(> .voice:only-child) { grid-auto-columns: min(560px, 100%); }