/* Prevent micro-scroll + stabilize layout height */
html, body {
  height: 100%;
  overflow: hidden;
background: #0A1D3A !important;
  margin: 0;
}


*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --bg: #0A1D3A;                       /* Pantone 648C-like */
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);
  --hair: rgba(255,255,255,0.16);
  --accent: rgba(255,255,255,0.88);

  /* Smoked glass card (lighter + more blur) */
  --card: rgba(12, 16, 22, 0.38);      /* lighter than before */
  --blur: 16px;                        /* more glass */
  --radius: 18px;
  --max: 980px;
}

/* --- 5) Full-page wrapper --- */
.wrap {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px clamp(24px, 4vw, 56px);
  position: relative;
  overflow: hidden;

  background: var(--bg) !important;
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.2px;
}

/* --- 6) Background silhouette layer (stealth, but NOT killing the blue) --- */
.bg {
  position: absolute;
  inset: -10%;

  /* ONLY the silhouette image (no dark gradients on top) */
  background-image: url('assets/rosa-s3c3-grey_2560w.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 150%;

  opacity: 0.10;                       /* stealth */
  filter: saturate(0.95) brightness(1.20) contrast(1.05);
  pointer-events: none;
}

/* --- 7) Vignette for depth (SOFT, to avoid “blackout”) --- */
.wrap::after {
  content: "";
  position: absolute;
  inset: 0;

  /* Much lighter than before: keeps Pantone blue visible */
  background: radial-gradient(
  130% 110% at 50% 40%,
  rgba(0,0,0,0.00) 0%,
  rgba(0,0,0,0.10) 75%,
  rgba(0,0,0,0.14) 100%
);


  pointer-events: none;
}

/* HDR & 4K rendering optimization */

@media (min-width: 1600px),
       (dynamic-range: high) {

  .block h2,
  .kicker,
  .footer,
  .wrap > *:last-child {
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.012em;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  .card {
    box-shadow:
      0 26px 96px rgba(0,0,0,0.26),
      0 10px 28px rgba(0,0,0,0.16),
      0 1px 0 rgba(255,255,255,0.06) inset;
  }

  :root {
    --card: rgba(12,16,22,0.38);
  }
}

/* --- 8) Glass card --- */

.card {
  width: min(940px, 90vw);
  position: relative;
  z-index: 2;

  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);

  background: var(--card);
  /* Opzione A — micro highlight superiore */
  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,0.030),
    rgba(255,255,255,0.00) 22%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;

  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));

  padding: clamp(22px, 3.2vw, 44px);

  box-shadow:
    0 28px 92px rgba(0,0,0,0.30),
    0 10px 28px rgba(0,0,0,0.18),
    0 1px 0 rgba(255,255,255,0.06) inset;
}


/* --- 9) Logo --- */
.brand__logo {
  display: block;
  height: 42px;
  width: auto;
  opacity: 0.92;
  margin-bottom: 12px;
}

/* --- 10) Typography --- */
.kicker {
  margin: 12px 0 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

}

.tagline {
  margin: 0;
  font-weight: 300;
  line-height: 1.25;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: clamp(0.028em, 0.18vw, 0.048em);
}

.rule {
  border: 0;
  height: 1px;
  background: var(--hair);
  margin: 22px 0;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 3vw, 36px);
}

.block h2 {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-weight: 500;
}

.block p {
  margin: 0;
  line-height: 1.55;
opacity: 0.88;
}

.block:nth-child(4) p {
  opacity: 0.88;
}

/* --- Typography baseline inside the card (uniformity) --- */
.card {
  font-size: 13px;        /* baseline body size */
  line-height: 1.55;      /* baseline rhythm */
  font-weight: 400;       /* baseline weight */
}

/* ensure list + paragraphs inherit the same rhythm */
.block p,
.list li,
.mono,
.footer span {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* slightly tighten list feel (optional but usually helps) */
.list li {
  font-weight: 400;
}

.muted { color: var(--muted); }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.02em;
line-height: 1.55; }


/* --- 11) List + links --- */
.list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;

  /* Match OUR APPROVALS “technical mono” feel */
  font-family: inherit;
  letter-spacing: 0.02em;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
}

.list li {
  padding-left: 14px;
  position: relative;
opacity: 0.88; /* micro‑uniformazione della massa */}

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: rgba(255,255,255,0.55);
}

.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 0;
  padding-bottom: 1px;
}

.link:hover {
  border-bottom: 1px solid rgba(255,255,255,0.5);
}

/* --- 12) Footer inside the card --- */
.footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
letter-spacing: 0.016em;            /* leggero, non troppo */
  font-weight: 400;                   /* più nitido a questa dimensione */
    -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.footer .muted {
  color: rgba(255,255,255,0.78); /* stesso peso del copyright */
}

.footer .muted {
  letter-spacing: 0.008em;
}

/* (DISABLED) Footer basso esterno: non presente nell'HTML statico
.wrap > *:last-child {
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  letter-spacing: 0.014em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
/* Unlock scroll on mobile (portrait + landscape) */
@media (max-width: 900px) {
  html, body {
    overflow: auto;
    height: auto;
  }
}

*/--- 13) Mobile --- */

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; }
  .footer { 
    flex-direction: column;
    align-items: flex-start;  }
.card {padding-left: 28px;
    padding-right: 28px;
  }
}

/* --- 14) Accessibility helper --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}