/* =========================================================
   ID PULSE — STYLE.CSS
   ========================================================= */

:root {
  --navy: #07152c;
  --navy-2: #0d2345;
  --black: #02060d;
  --blue: #159ee4;
  --cyan: #62d7ff;
  --red: #ff2a2a;
  --white: #ffffff;
  --light: #f3f6f9;
  --text: #0a1930;
  --muted: #667084;
  --border: rgba(7, 21, 44, 0.12);
  --shadow: 0 30px 90px rgba(7, 21, 44, 0.14);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.5;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* GLOBAL */

.section-pad {
  padding: 110px 7vw;
}

.section-heading {
  max-width: 980px;
  margin-bottom: 56px;
}

.centered-heading {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  margin-bottom: 20px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
}

.eyebrow.dark {
  color: var(--blue);
}

.lead {
  max-width: 850px;
  margin: 30px auto 0;
  color: #536074;
  font-size: clamp(20px, 2vw, 28px);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  transition: transform .25s ease, box-shadow .25s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

.button-small {
  min-height: 42px;
  padding: 0 21px;
  font-size: 12px;
}

.text-link {
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
}

/* HEADER */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 76px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(2, 8, 18, .72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 800;
  letter-spacing: .08em;
}

.brand-id {
  position: relative;
  font-size: 24px;
}

.brand-id::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 16px rgba(255,42,42,.9);
}

.brand-pulse {
  font-size: 21px;
  font-weight: 500;
}

.desktop-nav {
  display: flex;
  gap: 30px;
}

.desktop-nav a {
  color: rgba(255,255,255,.76);
  font-size: 13px;
  transition: color .2s ease;
}

.desktop-nav a:hover {
  color: var(--white);
}

/* HERO */

.hero {
  position: relative;
  min-height: 100vh;
  background:
    url("images/id-pulse-hero.png") center center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 54px 7vw;
}

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(2,6,13,.02) 35%, rgba(2,6,13,.72) 100%);
}

.hero-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* STATEMENT */

.statement {
  text-align: center;
  background: var(--white);
}

.statement h1 {
  font-size: clamp(46px, 7vw, 96px);
  line-height: .96;
  letter-spacing: -.06em;
}

.statement h1 span {
  color: var(--blue);
}

/* COMPARISON */

.comparison {
  background: #eef2f6;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}

.compare-card {
  min-height: 560px;
  padding: 52px;
  border-radius: 32px;
  box-shadow: var(--shadow);
}

.compare-card.traditional {
  background: var(--white);
}

.compare-card.pulse {
  color: var(--white);
  background:
    radial-gradient(circle at 85% 15%, rgba(21,158,228,.36), transparent 35%),
    linear-gradient(145deg, #07152c, #0e294e);
}

.card-kicker {
  margin-bottom: 34px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  opacity: .7;
}

.compare-card h2 {
  margin-bottom: 48px;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -.05em;
}

.compare-card ul {
  display: grid;
  gap: 17px;
}

.compare-card li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
}

.compare-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 900;
}

.business-quote {
  margin-top: 34px;
  padding: 34px 40px;
  border-radius: 24px;
  background: var(--white);
  display: flex;
  justify-content: space-between;
  gap: 36px;
  font-size: 19px;
  box-shadow: 0 15px 45px rgba(7,21,44,.08);
}

.business-quote strong {
  color: var(--blue);
}

/* CINEMATIC IMAGE STORIES */

.image-story {
  position: relative;
  min-height: 900px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.control-room {
  background-image: url("images/id-pulse-control-room.png");
}

.experience {
  background-image: url("images/03_experience-journey.png");
}

.led-wall {
  background-image: url("images/04_human-led-wall.png");
  justify-content: center;
  text-align: center;
}

.intelligence {
  background-image: url("images/06_live-event-intelligence.png");
}

.image-story-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,8,18,.93) 0%, rgba(2,8,18,.55) 38%, rgba(2,8,18,.06) 72%),
    linear-gradient(0deg, rgba(2,8,18,.9) 0%, rgba(2,8,18,.08) 64%);
}

.image-story-right .image-story-overlay {
  background:
    linear-gradient(270deg, rgba(2,8,18,.92) 0%, rgba(2,8,18,.55) 38%, rgba(2,8,18,.06) 72%),
    linear-gradient(0deg, rgba(2,8,18,.9) 0%, rgba(2,8,18,.08) 64%);
}

.led-wall .image-story-overlay {
  background:
    linear-gradient(0deg, rgba(2,8,18,.9) 0%, rgba(2,8,18,.06) 70%);
}

.story-panel {
  position: relative;
  z-index: 2;
  width: min(720px, 50%);
  margin: 0 0 7vw 7vw;
  padding: 40px;
  border-radius: 26px;
  background: rgba(4,14,30,.72);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 90px rgba(0,0,0,.35);
}

.image-story-right .story-panel {
  margin: 0 7vw 7vw auto;
}

.story-panel.centered {
  width: min(780px, calc(100% - 44px));
  margin: 0 auto 6vw;
}

.story-panel h2 {
  margin-bottom: 24px;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: .97;
  letter-spacing: -.055em;
}

.story-panel p:last-child {
  color: rgba(255,255,255,.72);
  font-size: 18px;
  line-height: 1.6;
}

/* PRODUCT / ECOSYSTEM IMAGES */

.functions-showcase,
.ecosystem {
  background: var(--white);
}

.functions-showcase h2,
.ecosystem h2,
.benefits h2,
.sectors h2 {
  font-size: clamp(44px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.055em;
}

.wide-image {
  width: 100%;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

/* BENEFITS */

.benefits {
  background: #eef2f6;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}

.benefit-grid article {
  padding: 34px;
  border-radius: 24px;
  background: var(--white);
  border: 1px solid rgba(7,21,44,.08);
  box-shadow: 0 12px 35px rgba(7,21,44,.06);
}

.benefit-grid span {
  display: block;
  margin-bottom: 42px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.benefit-grid h3 {
  margin-bottom: 14px;
  font-size: 24px;
}

.benefit-grid p {
  color: var(--muted);
}

/* SECTORS */

.sectors {
  background: var(--white);
}

.sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sector-list span {
  padding: 16px 24px;
  border-radius: 999px;
  background: #f4f7fa;
  border: 1px solid var(--border);
  font-size: 16px;
  font-weight: 800;
}

/* FINAL */

.finale {
  position: relative;
  min-height: 900px;
  background:
    url("images/08_final-hero-black.png") center center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 7vw 6vw;
  color: var(--white);
}

.finale-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(2,6,13,.96) 0%, rgba(2,6,13,.05) 68%);
}

.finale-card {
  position: relative;
  z-index: 2;
  width: min(850px, 100%);
  padding: 40px;
  border-radius: 28px;
  text-align: center;
  background: rgba(3,10,22,.72);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}

.finale-card h2 {
  margin-bottom: 24px;
  font-size: clamp(44px, 6vw, 80px);
  line-height: .98;
  letter-spacing: -.055em;
}

.finale-card p:not(.eyebrow) {
  max-width: 680px;
  margin: 0 auto 30px;
  color: rgba(255,255,255,.7);
  font-size: 18px;
}

/* FOOTER */

footer {
  padding: 34px 5vw;
  background: var(--black);
  color: rgba(255,255,255,.62);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  font-size: 12px;
}

footer p {
  text-align: center;
}

footer div {
  justify-self: end;
  display: flex;
  gap: 20px;
}

footer a:hover {
  color: var(--white);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .desktop-nav {
    display: none;
  }

  .comparison-grid,
  .benefit-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .story-panel {
    width: min(720px, calc(100% - 44px));
  }
}

@media (max-width: 800px) {
  .section-pad {
    padding: 78px 22px;
  }

  .site-header {
    height: 68px;
    padding: 0 20px;
  }

  .brand-id {
    font-size: 21px;
  }

  .brand-pulse {
    font-size: 18px;
  }

  .hero {
    min-height: 78vh;
    padding: 30px 20px;
    background-position: 54% center;
  }

  .hero-bottom {
    flex-direction: column;
    gap: 14px;
  }

  .comparison-grid,
  .benefit-grid {
    grid-template-columns: 1fr;
  }

  .compare-card {
    min-height: auto;
    padding: 36px 28px;
  }

  .business-quote {
    flex-direction: column;
    padding: 28px;
  }

  .image-story {
    min-height: 760px;
    background-position: 60% center;
  }

  .image-story-overlay,
  .image-story-right .image-story-overlay {
    background:
      linear-gradient(0deg, rgba(2,8,18,.98) 0%, rgba(2,8,18,.72) 46%, rgba(2,8,18,.08) 100%);
  }

  .story-panel,
  .image-story-right .story-panel,
  .story-panel.centered {
    width: auto;
    margin: 0 22px 34px;
    padding: 30px 24px;
  }

  .story-panel h2 {
    font-size: 42px;
  }

  .wide-image {
    border-radius: 18px;
  }

  .finale {
    min-height: 760px;
    padding: 0 22px 34px;
    background-position: 50% center;
  }

  .finale-card {
    padding: 30px 24px;
  }

  footer {
    grid-template-columns: 1fr;
    text-align: center;
  }

  footer div {
    justify-self: center;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .site-header .button-small {
    display: none;
  }

  .statement h1,
  .functions-showcase h2,
  .ecosystem h2,
  .benefits h2,
  .sectors h2 {
    font-size: 40px;
  }

  .hero {
    min-height: 70vh;
  }

  .image-story,
  .finale {
    min-height: 700px;
  }

  .story-panel h2,
  .finale-card h2 {
    font-size: 38px;
  }
}


/* =========================================================
   V2 — BRIGHTER VISUAL DIRECTION
   ========================================================= */

/* Hero: immagine più luminosa e meno coperta */
.hero-shade {
  background:
    linear-gradient(
      to bottom,
      rgba(2, 6, 13, 0.00) 0%,
      rgba(2, 6, 13, 0.02) 54%,
      rgba(2, 6, 13, 0.42) 100%
    );
}

/* Tutte le sezioni fotografiche respirano di più */
.image-story {
  isolation: isolate;
}

.image-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: brightness(1.12) saturate(1.06);
}

/* Overlay laterali meno pesanti */
.image-story-overlay {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(2, 8, 18, 0.68) 0%,
      rgba(2, 8, 18, 0.28) 42%,
      rgba(2, 8, 18, 0.00) 74%
    ),
    linear-gradient(
      0deg,
      rgba(2, 8, 18, 0.48) 0%,
      rgba(2, 8, 18, 0.00) 62%
    );
}

.image-story-right .image-story-overlay {
  background:
    linear-gradient(
      270deg,
      rgba(2, 8, 18, 0.68) 0%,
      rgba(2, 8, 18, 0.28) 42%,
      rgba(2, 8, 18, 0.00) 74%
    ),
    linear-gradient(
      0deg,
      rgba(2, 8, 18, 0.48) 0%,
      rgba(2, 8, 18, 0.00) 62%
    );
}

.led-wall .image-story-overlay {
  background:
    linear-gradient(
      0deg,
      rgba(2, 8, 18, 0.55) 0%,
      rgba(2, 8, 18, 0.00) 68%
    );
}

/* Pannelli più trasparenti, meno "scatola scura" */
.story-panel {
  background: rgba(4, 14, 30, 0.54);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

/* Finale più leggibile senza spegnere l'immagine */
.finale-overlay {
  background:
    linear-gradient(
      0deg,
      rgba(2, 6, 13, 0.76) 0%,
      rgba(2, 6, 13, 0.02) 66%
    );
}

.finale-card {
  background: rgba(3, 10, 22, 0.56);
  border-color: rgba(255,255,255,.16);
}

/* APPLE-STYLE DEVICE SECTION */
.functions-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(21,158,228,.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.functions-intro {
  max-width: 760px;
  margin: 26px auto 0;
  color: #687386;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;
}

.device-stage {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  padding: 34px;
  border-radius: 40px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(7,21,44,.08);
  box-shadow:
    0 40px 110px rgba(7,21,44,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.device-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,189,241,.20), rgba(61,189,241,0) 68%);
  filter: blur(18px);
  pointer-events: none;
}

.device-image {
  position: relative;
  z-index: 2;
  width: 100%;
  border-radius: 24px;
}

.function-chips {
  max-width: 1180px;
  margin: 32px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.function-chips span {
  padding: 14px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(7,21,44,.10);
  color: #11213a;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(7,21,44,.06);
}

@media (max-width: 800px) {
  .image-story::before {
    backdrop-filter: brightness(1.08) saturate(1.04);
  }

  .image-story-overlay,
  .image-story-right .image-story-overlay {
    background:
      linear-gradient(
        0deg,
        rgba(2,8,18,.78) 0%,
        rgba(2,8,18,.40) 46%,
        rgba(2,8,18,.00) 100%
      );
  }

  .story-panel {
    background: rgba(4,14,30,.64);
  }

  .device-stage {
    padding: 12px;
    border-radius: 22px;
  }

  .device-image {
    border-radius: 14px;
  }

  .function-chips span {
    padding: 11px 15px;
    font-size: 12px;
  }
}

/* =========================================================
   HERO VIDEO
   ========================================================= */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    url("images/id-pulse-hero.png") center center / cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 54px 7vw;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(2, 6, 13, 0.00) 0%,
      rgba(2, 6, 13, 0.02) 54%,
      rgba(2, 6, 13, 0.42) 100%
    );
}

.hero-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (max-width: 800px) {
  .hero-video {
    object-position: 55% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
}