/* ==========================================================================
   FastCable homepage stylesheet
   All visual, responsive and interaction rules live here; no external
   stylesheet is used.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Registered custom property and design tokens
   -------------------------------------------------------------------------- */

/* Registered so the scroll timeline (and the JS fallback) can animate it. */
@property --fc-speed {
  syntax: '<integer>';
  inherits: true;
  initial-value: 100;
}

:root {
  --fc-ink: #090b12;
  --fc-panel: #12141d;
  --fc-panel-raised: #1a1d28;
  --fc-paper: #f5f2ed;
  --fc-text: #f3f0eb;
  --fc-muted: #b8bac4;
  --fc-orange: #ff8a34;
  --fc-red: #e6401b;
  --fc-wine: #620018;
  --fc-line: rgba( 255, 255, 255, 0.14 );
  --fc-content-width: 72rem;
  --fc-header-height: 5.5rem;
  --fc-speed: 100;
  --fc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Last-resort guard against page-level horizontal overflow. */
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var( --fc-ink );
  color: var( --fc-text );
  font-family: var( --fc-font-sans );
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
  line-height: 1.15;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  touch-action: manipulation;
}

::selection {
  background-color: var( --fc-orange );
  color: var( --fc-ink );
}

/* Measured and monospaced values keep digits stable while they update. */
.fc-gauge__number,
.fc-gauge__unit,
.fc-gauge__number::after,
.fc-split__value,
.fc-table td,
.fc-table th,
.fc-console__value,
.fc-console__label,
.fc-news__time {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var( --fc-orange );
  outline-offset: 2px;
}

/* Skip link: hidden until focused. */
.fc-skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY( -300% );
  background-color: var( --fc-orange );
  color: var( --fc-ink );
  font-weight: 600;
  text-decoration: none;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
}

.fc-skip-link:focus {
  transform: none;
  outline: 2px solid var( --fc-paper );
  outline-offset: 2px;
}

/* Anchor destinations clear the sticky header. */
#main-content,
#rete,
#tecnologia,
#capacita,
#supporto,
#clienti,
#notizie {
  scroll-margin-top: calc( var( --fc-header-height ) + 1rem );
}

/* --------------------------------------------------------------------------
   3. Decorative backdrop: sparse stars, telemetry grid, signal arcs.
      Pure decoration: never carries information, never interactive.
   -------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient( 1px 1px at 42px 96px, rgba( 255, 255, 255, 0.5 ), transparent 55% ),
    radial-gradient( 1px 1px at 188px 264px, rgba( 255, 255, 255, 0.32 ), transparent 55% ),
    radial-gradient( 1.5px 1.5px at 330px 62px, rgba( 255, 255, 255, 0.4 ), transparent 55% ),
    radial-gradient( 1px 1px at 452px 388px, rgba( 255, 255, 255, 0.28 ), transparent 55% ),
    radial-gradient( 1px 1px at 96px 448px, rgba( 255, 255, 255, 0.24 ), transparent 55% ),
    radial-gradient( 1.5px 1.5px at 404px 176px, rgba( 255, 138, 52, 0.35 ), transparent 55% ),
    linear-gradient( to right, rgba( 255, 255, 255, 0.033 ) 1px, transparent 1px ),
    linear-gradient( to bottom, rgba( 255, 255, 255, 0.033 ) 1px, transparent 1px );
  background-size:
    520px 520px,
    520px 520px,
    520px 520px,
    520px 520px,
    520px 520px,
    520px 520px,
    76px 76px,
    76px 76px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient( circle at 88% 112%, transparent 0 30%, rgba( 255, 138, 52, 0.09 ) 30.4% 31%, transparent 31.6% ),
    radial-gradient( circle at 88% 112%, transparent 0 44%, rgba( 98, 0, 24, 0.55 ) 44.4% 45.2%, transparent 45.8% ),
    radial-gradient( circle at 88% 112%, transparent 0 58%, rgba( 255, 138, 52, 0.05 ) 58.4% 58.9%, transparent 59.4% );
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.fc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque fallback first, semitransparent enhancement second. */
  background-color: var( --fc-panel );
  background-color: rgba( 18, 20, 29, 0.92 );
  border-bottom: 1px solid var( --fc-line );
}

.fc-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var( --fc-content-width );
  margin: 0 auto;
  padding: 0.75rem clamp( 1rem, 3vw, 2rem );
  min-height: var( --fc-header-height );
}

.fc-logo-panel {
  display: flex;
  flex-direction: column;
  /* A fixed-height, width-auto logo must never be stretched on the cross
     axis, or its aspect ratio breaks inside the panel. */
  align-items: flex-start;
  justify-content: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

.fc-logo-panel img {
  display: block;
  height: 2.1rem;
  width: auto;
}

.fc-logo-panel--small img {
  height: 1.6rem;
}

.fc-logo-panel__micro {
  font-family: var( --fc-font-mono );
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var( --fc-muted );
}

/* On narrow screens the nav scrolls horizontally instead of collapsing. */
.fc-nav {
  flex: 1;
  min-width: 0;
}

.fc-nav__list {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

/* 40px minimum touch target, held in px so it keeps working at any
   root font size. */
.fc-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var( --fc-muted );
  transition: color 120ms ease-out, background-color 120ms ease-out;
}

.fc-nav a:hover {
  color: var( --fc-text );
  background-color: var( --fc-panel-raised );
}

/* --------------------------------------------------------------------------
   5. Section scaffold
   -------------------------------------------------------------------------- */

.fc-section {
  padding-block: clamp( 4rem, 9vw, 7.5rem );
}

.fc-section__inner {
  max-width: var( --fc-content-width );
  margin: 0 auto;
  padding-inline: clamp( 1rem, 3vw, 2rem );
}

.fc-section__eyebrow {
  margin: 0 0 1rem;
  font-family: var( --fc-font-mono );
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var( --fc-muted );
}

.fc-section__eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 2px;
  margin-right: 0.8rem;
  vertical-align: middle;
  background: linear-gradient( to right, var( --fc-red ), var( --fc-orange ) );
}

.fc-section__title {
  font-size: clamp( 1.7rem, 1.1rem + 2.6vw, 2.9rem );
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: clamp( 2rem, 5vw, 3.5rem );
}

/* --------------------------------------------------------------------------
   6. Hero: CSS-only cross-fading carousel with a pause control.
      Slides stack by z-index; the outgoing slide fades out over the
      incoming one, so the handover reads as a true cross-fade.
   -------------------------------------------------------------------------- */

.fc-hero {
  position: relative;
  overflow: hidden;
  background-color: var( --fc-panel );
  /* Contain the hero's z-index ladder in its own stacking context, so the
     slide cross-fade z-index can never escape above the scrim or text. */
  isolation: isolate;
}

/* Full-bleed contrast scrim: darkens the image across the entire hero width,
   so the constrained overlay text keeps AA contrast at every width with no
   vertical seam at the overlay edges. */
.fc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient( to top, rgba( 9, 11, 18, 0.96 ) 0%, rgba( 9, 11, 18, 0.92 ) 50%, rgba( 9, 11, 18, 0.34 ) 82%, transparent 100% );
}

.fc-hero__slides {
  position: absolute;
  inset: 0;
  /* Stacking context: the animated slide z-index stays inside the rail. */
  z-index: 0;
}

.fc-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 1;
  overflow: hidden;
  background-color: var( --fc-ink );
}

.fc-hero__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The per-figure caption is hidden while the imagery animates; the
   visible caption is painted by the site-level layer, which sits above
   the full-width scrim and can never be buried by the slide stacking.
   The animated figures are decorative, and the stable
   assistive-technology description is supplied by
   .fc-hero__rail-summary. Reduced motion and print restore these
   per-figure captions visually. */
.fc-hero__figure-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect( 0 0 0 0 );
  white-space: nowrap;
  border: 0;
}

/* One visible caption per active slide, on its own layer above the scrim. */
.fc-hero__site-captions {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.fc-hero__site-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  padding: 2.5rem 1.5rem 1rem;
  font-family: var( --fc-font-mono );
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var( --fc-text );
  background: linear-gradient( to top, rgba( 9, 11, 18, 0.94 ) 0%, rgba( 9, 11, 18, 0.85 ) 45%, rgba( 9, 11, 18, 0.45 ) 80%, transparent 100% );
  animation: fc-hero-caption-fade 20s linear infinite;
}

/* Each caption carries the matching negative delay of its slide. */
.fc-hero__site-caption:nth-child( 2 ) {
  animation-delay: -15s;
}

.fc-hero__site-caption:nth-child( 3 ) {
  animation-delay: -10s;
}

.fc-hero__site-caption:nth-child( 4 ) {
  animation-delay: -5s;
}

/* 20-second loop, 5 seconds per slide. The cross-fade stays on the slide;
   the Ken-Burns zoom runs on the image only, so captions never scale. */
.fc-hero__slide {
  animation: fc-hero-fade 20s linear infinite;
}

.fc-hero__slide img {
  animation: fc-hero-zoom 20s linear infinite;
}

.fc-hero__slide:nth-child( 2 ) {
  animation-delay: -15s;
}

.fc-hero__slide:nth-child( 3 ) {
  animation-delay: -10s;
}

.fc-hero__slide:nth-child( 4 ) {
  animation-delay: -5s;
}

/* Each image carries the matching negative delay of its slide. */
.fc-hero__slide:nth-child( 2 ) img {
  animation-delay: -15s;
}

.fc-hero__slide:nth-child( 3 ) img {
  animation-delay: -10s;
}

.fc-hero__slide:nth-child( 4 ) img {
  animation-delay: -5s;
}

@keyframes fc-hero-fade {
  0% {
    opacity: 1;
    z-index: 3;
  }

  24% {
    opacity: 1;
    z-index: 3;
  }

  27% {
    opacity: 0;
    z-index: 1;
  }

  97% {
    opacity: 0;
    z-index: 1;
    animation-timing-function: ease-in;
  }

  100% {
    opacity: 1;
    z-index: 3;
  }
}

/* Opacity only, never transform. Each caption fades in after its slide
   has settled and clears again before the crossfade starts, so at most
   one caption is ever visible and every handoff midpoint is blank. */
@keyframes fc-hero-caption-fade {
  0% {
    opacity: 0;
  }

  2% {
    opacity: 1;
  }

  23% {
    opacity: 1;
  }

  24% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fc-hero-zoom {
  0% {
    transform: scale( 1.06 );
    animation-timing-function: ease-out;
  }

  24% {
    transform: scale( 1 );
    animation-timing-function: linear;
  }

  27% {
    transform: scale( 1.03 );
    animation-timing-function: linear;
  }

  97% {
    transform: scale( 1.06 );
    animation-timing-function: ease-in;
  }

  100% {
    transform: scale( 1.06 );
  }
}

/* The checkbox pauses every slide, image and caption animation... */
#fc-hero-motion:checked ~ .fc-hero__slides .fc-hero__slide,
#fc-hero-motion:checked ~ .fc-hero__slides .fc-hero__slide img,
#fc-hero-motion:checked ~ .fc-hero__site-captions .fc-hero__site-caption {
  animation-play-state: paused;
}

/* ...as does focusing the rail with the keyboard. */
.fc-hero__slides:focus-within .fc-hero__slide,
.fc-hero__slides:focus-within .fc-hero__slide img,
.fc-hero__slides:focus-within ~ .fc-hero__site-captions .fc-hero__site-caption {
  animation-play-state: paused;
}

/* The rail paints beneath the scrim (z-index 0), so its own outline would
   be covered. Keyboard focus on the rail is instead shown by a ring on the
   hero's top layer. The ring is screen-only: print has no focus. */
@media screen and ( prefers-reduced-motion: no-preference ) {
  .fc-hero__slides:focus-visible {
    outline: none;
  }

  .fc-hero:has( .fc-hero__slides:focus-visible )::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    box-sizing: border-box;
    pointer-events: none;
    border: 2px solid var( --fc-orange );
  }
}

/* Reduced motion reflows the rail in-flow, uncovered, so it keeps its own
   inset outline there and the top-layer ring stays out of that layout. */
@media ( prefers-reduced-motion: reduce ) {
  .fc-hero__slides:focus-visible {
    outline: 2px solid var( --fc-orange );
    outline-offset: -2px;
  }
}

/* Visually hidden but focusable checkbox: the accessible motion toggle. */
.fc-hero__motion {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect( 0 0 0 0 );
  white-space: nowrap;
  border: 0;
}

/* Permanently hidden assistive-technology summary for the decorative hero rail. */
.fc-hero__rail-summary {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect( 0 0 0 0 );
  white-space: nowrap;
  border: 0;
}

.fc-hero__motion-control {
  position: absolute;
  right: clamp( 0.75rem, 2vw, 1.5rem );
  bottom: clamp( 0.75rem, 2vw, 1.5rem );
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var( --fc-line );
  border-radius: 8px;
  background-color: rgba( 9, 11, 18, 0.72 );
  color: var( --fc-text );
  font-family: var( --fc-font-mono );
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.fc-hero__motion-control:hover {
  border-color: var( --fc-orange );
}

/* State-dependent label text, pure CSS via the checkbox sibling. */
.fc-hero__motion-label--resume {
  display: none;
}

#fc-hero-motion:checked ~ .fc-hero__motion-control .fc-hero__motion-label--resume {
  display: inline;
}

#fc-hero-motion:checked ~ .fc-hero__motion-control .fc-hero__motion-label--pause {
  display: none;
}

#fc-hero-motion:focus-visible ~ .fc-hero__motion-control {
  outline: 2px solid var( --fc-orange );
  outline-offset: 2px;
}

.fc-hero__overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.1rem;
  min-height: clamp( 30rem, 68vh, 44rem );
  max-width: 56rem;
  margin: 0 auto;
  padding: clamp( 5rem, 10vw, 7rem ) clamp( 1.25rem, 4vw, 3rem ) clamp( 3.5rem, 7vw, 5rem );
}

.fc-hero__eyebrow {
  margin: 0;
  font-family: var( --fc-font-mono );
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var( --fc-orange );
  /* Constrained near-opaque plate: the orange eyebrow holds AA even over the
     brightest hero pixels at every width. */
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: 0.35rem 0.7rem;
  background-color: rgba( 9, 11, 18, 0.97 );
  border-radius: 8px;
}

.fc-hero__overlay h1 {
  font-size: clamp( 2rem, 1.15rem + 4.2vw, 4rem );
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.fc-hero__lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp( 1rem, 0.9rem + 0.5vw, 1.2rem );
  color: var( --fc-muted );
}

/* --------------------------------------------------------------------------
   7. Network section: feature cards
   -------------------------------------------------------------------------- */

.fc-network__grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
  gap: 1.25rem;
}

.fc-card {
  padding: 1.5rem 1.4rem;
  background-color: var( --fc-panel );
  border: 1px solid var( --fc-line );
  border-radius: 12px;
  transition: transform 140ms ease-out, border-color 140ms ease-out;
}

.fc-card:hover {
  transform: translateY( -3px );
  border-color: rgba( 255, 138, 52, 0.45 );
}

.fc-card__title {
  font-size: 1.12rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.fc-card__body {
  margin: 0;
  font-size: 0.95rem;
  color: var( --fc-muted );
}

/* --------------------------------------------------------------------------
   8. Technology section: hard sci-fi statements
   -------------------------------------------------------------------------- */

.fc-technology__grid {
  display: grid;
  grid-template-columns: repeat( 2, 1fr );
  gap: 0;
  border-top: 1px solid var( --fc-line );
}

.fc-technology__row {
  padding: 1.6rem 1.5rem 1.6rem 0;
  border-bottom: 1px solid var( --fc-line );
}

.fc-technology__row:nth-child( odd ) {
  padding-right: 2.5rem;
}

.fc-technology__row:nth-child( even ) {
  padding-left: 2.5rem;
  border-left: 1px solid var( --fc-line );
}

.fc-technology__name {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.fc-technology__body {
  margin: 0;
  font-size: 0.95rem;
  color: var( --fc-muted );
}

/* --------------------------------------------------------------------------
   9. Capacity: scroll gauge, nominal split, light-time table
   -------------------------------------------------------------------------- */

.fc-capacity__grid {
  display: grid;
  grid-template-columns: minmax( 0, 30rem ) minmax( 0, 1fr );
  gap: clamp( 2rem, 5vw, 4rem );
  align-items: start;
  margin-bottom: clamp( 3rem, 6vw, 4.5rem );
}

.fc-gauge {
  position: relative;
  margin: 0;
  padding: clamp( 1.25rem, 3vw, 2rem );
  background-color: var( --fc-panel );
  border: 1px solid var( --fc-line );
  border-radius: 14px;
}

/* Containing block for the absolutely-positioned readout: the dial, not the
   full figure, so the number tracks the hub at every width and can never
   collide with the caption. */
.fc-gauge__instrument {
  position: relative;
}

.fc-gauge__svg {
  display: block;
  width: 100%;
  height: auto;
}

.fc-gauge__track {
  fill: none;
  stroke: rgba( 255, 255, 255, 0.09 );
  stroke-width: 14;
}

/* The value arc maps --fc-speed (0-100) directly onto pathLength=100. */
.fc-gauge__value {
  fill: none;
  stroke: var( --fc-orange );
  stroke-width: 14;
  stroke-dasharray: 100;
  stroke-dashoffset: calc( ( 100 - var( --fc-speed ) ) * 1px );
}

.fc-gauge__ticks {
  fill: none;
  stroke: var( --fc-muted );
  stroke-width: 2;
  opacity: 0.55;
}

.fc-gauge__needle {
  fill: var( --fc-red );
  transform: rotate( calc( var( --fc-speed ) * 2.4deg - 120deg ) );
  transform-origin: 200px 190px;
  transform-box: view-box;
}

.fc-gauge__hub {
  fill: var( --fc-panel-raised );
  stroke: var( --fc-line );
  stroke-width: 2;
}

.fc-gauge__hub-dot {
  fill: var( --fc-orange );
}

/* Anchored against the instrument and centered on the hub (cy=190 of the
   320-unit viewBox), so it stays centered in the dial at every width. */
.fc-gauge__readout {
  position: absolute;
  left: 50%;
  top: 59.4%;
  transform: translate( -50%, -50% );
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.fc-gauge__number {
  font-family: var( --fc-font-mono );
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var( --fc-text );
}

.fc-gauge__unit {
  font-family: var( --fc-font-mono );
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var( --fc-muted );
}

.fc-gauge__caption {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var( --fc-muted );
}

.fc-capacity__note {
  margin: 0 0 1.75rem;
  max-width: 46ch;
  color: var( --fc-muted );
}

/* Static nominal split; bars are decorative proportions. */
.fc-split {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 34rem;
}

.fc-split__item {
  display: grid;
  grid-template-columns: minmax( 9rem, 13rem ) 1fr auto;
  align-items: center;
  gap: 1rem;
}

.fc-split__node {
  font-size: 0.92rem;
  font-weight: 500;
}

.fc-split__bar {
  height: 0.5rem;
  border-radius: 3px;
  background: linear-gradient( to right, var( --fc-wine ), var( --fc-orange ) );
  width: calc( var( --fc-share ) * 1% );
}

.fc-split__value {
  font-family: var( --fc-font-mono );
  font-size: 0.9rem;
  color: var( --fc-muted );
}

.fc-capacity__coverage-title {
  font-size: clamp( 1.3rem, 1rem + 1.4vw, 1.8rem );
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.fc-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var( --fc-line );
  border-radius: 12px;
  background-color: var( --fc-panel );
}

.fc-table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.fc-table th,
.fc-table td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var( --fc-line );
}

.fc-table thead th {
  font-family: var( --fc-font-mono );
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var( --fc-muted );
}

.fc-table tbody tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   10. Support: copy plus a read-only telemetry panel
   -------------------------------------------------------------------------- */

.fc-support__grid {
  display: grid;
  grid-template-columns: minmax( 0, 1fr ) minmax( 0, 28rem );
  gap: clamp( 2rem, 5vw, 4rem );
  align-items: start;
}

.fc-support__copy {
  margin: 0;
  max-width: 52ch;
  font-size: 1.05rem;
}

.fc-console {
  padding: 1.4rem 1.4rem 1.5rem;
  background-color: var( --fc-panel );
  border: 1px solid var( --fc-line );
  border-radius: 12px;
}

.fc-console__title {
  margin-bottom: 1.1rem;
  font-family: var( --fc-font-mono );
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var( --fc-muted );
}

.fc-console__rows {
  display: grid;
  gap: 0;
}

.fc-console__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var( --fc-line );
  font-family: var( --fc-font-mono );
  font-size: 0.9rem;
}

.fc-console__row:first-child {
  border-top: none;
}

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

.fc-console__value {
  color: var( --fc-text );
  text-align: right;
}

/* --------------------------------------------------------------------------
    11. Partners: text-only wordmarks, no real logos
   -------------------------------------------------------------------------- */

.fc-partners__intro {
  max-width: 56rem;
  margin: 0 0 2rem;
  color: var( --fc-muted );
  text-wrap: pretty;
}

.fc-clients__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var( --fc-line );
}

.fc-client {
  display: grid;
  grid-template-columns: minmax( 12rem, 22rem ) minmax( 8rem, 12rem ) minmax( 0, 1fr );
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var( --fc-line );
  border-radius: 0;
}

.fc-client__mark {
  font-family: var( --fc-font-mono );
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var( --fc-text );
}

.fc-client__role {
  font-family: var( --fc-font-mono );
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var( --fc-muted );
}

.fc-client__scope {
  font-size: 0.95rem;
  color: var( --fc-text );
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
    12. Bulletins: chronological log rows
   -------------------------------------------------------------------------- */

.fc-news__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var( --fc-line );
}

.fc-news__item {
  display: grid;
  grid-template-columns: minmax( 8rem, 10rem ) minmax( 0, 1fr );
  column-gap: 1.5rem;
  row-gap: 0.45rem;
  padding: 1.4rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var( --fc-line );
  border-radius: 0;
}

.fc-news__meta {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.fc-news__kind {
  font-family: var( --fc-font-mono );
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var( --fc-muted );
}

.fc-news__time {
  margin: 0;
  font-family: var( --fc-font-mono );
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var( --fc-orange );
}

.fc-news__title {
  grid-column: 2;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.fc-news__body {
  grid-column: 2;
  margin: 0;
  color: var( --fc-muted );
  text-wrap: pretty;
}

.fc-news__item--lead .fc-news__title {
  font-size: clamp( 1.3rem, 1rem + 1.1vw, 1.7rem );
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.fc-footer {
  position: relative;
  border-top: 1px solid var( --fc-line );
  background-color: var( --fc-panel );
}

.fc-footer__inner {
  max-width: var( --fc-content-width );
  margin: 0 auto;
  padding: clamp( 2.5rem, 6vw, 4rem ) clamp( 1rem, 3vw, 2rem ) clamp( 3rem, 7vw, 5rem );
  display: grid;
  gap: 1rem;
}

.fc-footer__copyright {
  margin: 0.5rem 0 0;
  font-family: var( --fc-font-mono );
  font-size: 0.9rem;
}

.fc-footer__statement {
  margin: 0;
  max-width: 70ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var( --fc-muted );
}

/* Decorative space mark, lower-right of the footer: pure ornament, never
   interactive, never selectable, and kept clear of the inner text by the
   footer's bottom padding. */
.fc-space-mark {
  position: absolute;
  right: clamp( 1rem, 3vw, 2rem );
  bottom: 1rem;
  color: rgba( 245, 242, 237, 0.72 );
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "MS Gothic", sans-serif;
  font-size: 1.125rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   14. Scroll gauge enhancement: CSS scroll-driven animation.
      Base presentation is a fully filled static gauge; this block only
      adds the 0 -> 100 sweep while the gauge approaches the viewport.
   -------------------------------------------------------------------------- */

@supports ( animation-timeline: view() ) {
  @media ( prefers-reduced-motion: no-preference ) {
    .fc-gauge {
      view-timeline-name: --fc-gauge-timeline;
      view-timeline-axis: block;
      animation: fc-gauge-progress 1ms linear both;
      animation-timeline: --fc-gauge-timeline;
      animation-range: cover 0% cover 50%;
    }

    @keyframes fc-gauge-progress {
      from {
        --fc-speed: 0;
      }

      to {
        --fc-speed: 100;
      }
    }
  }
}

/* In timeline-supporting browsers the numeric readout is drawn from a
   counter fed by the animated custom property; the static text node
   stays in the DOM as the fallback for other engines. */
@supports ( animation-timeline: view() ) {
  @media ( prefers-reduced-motion: no-preference ) {
    .fc-gauge__number {
      font-size: 0;
      counter-reset: fc-speed var( --fc-speed );
    }

    .fc-gauge__number::after {
      content: counter( fc-speed );
      font-size: 2.75rem;
      line-height: 1;
    }
  }
}

/* --------------------------------------------------------------------------
   15. Reduced motion: static hero rail, no autonomous movement
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* The pause control is meaningless without motion, so hide it entirely. */
  .fc-hero__motion,
  .fc-hero__motion-control {
    display: none;
  }

  /* The scrim is unnecessary: the overlay sits in normal flow below the
     rail, so it reads against the page background without a dark plate. */
  .fc-hero::before {
    display: none;
  }

  .fc-hero__site-captions {
    display: none;
  }

  /* Undo every visual-hide property and restore the in-slide caption. */
  .fc-hero__figure-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 2.5rem 1.5rem 1rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-family: var( --fc-font-mono );
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var( --fc-text );
    background: linear-gradient( to top, rgba( 9, 11, 18, 0.94 ) 0%, rgba( 9, 11, 18, 0.85 ) 45%, rgba( 9, 11, 18, 0.45 ) 80%, transparent 100% );
  }

  .fc-hero__slides {
    position: relative;
    inset: auto;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    aspect-ratio: 16 / 9;
  }

  .fc-hero__slide {
    position: relative;
    flex: 0 0 100%;
    opacity: 1;
    animation: none;
    scroll-snap-align: center;
  }

  /* In-flow text after the rail, never clipping h1/lede. Kept interactive so
     the h1 and lede stay selectable; the overlay does not overlap the rail,
     so the scroll-snap rail keeps its own drag/wheel input. */
  .fc-hero__overlay {
    position: relative;
    inset: auto;
    z-index: 4;
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   16. Responsive layout
   -------------------------------------------------------------------------- */

@media ( max-width: 48em ) {
  .fc-capacity__grid,
  .fc-support__grid {
    grid-template-columns: 1fr;
  }

  .fc-gauge {
    max-width: 26rem;
  }

  .fc-technology__grid {
    grid-template-columns: 1fr;
  }

  .fc-technology__row:nth-child( even ) {
    padding-left: 0;
    border-left: none;
  }

  .fc-technology__row:nth-child( odd ) {
    padding-right: 0;
  }

  .fc-client,
  .fc-news__item {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .fc-news__meta,
  .fc-news__title,
  .fc-news__body {
    grid-column: 1;
    grid-row: auto;
  }

  .fc-news__meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
  }

  .fc-hero__overlay {
    min-height: clamp( 28rem, 80vh, 40rem );
    /* End the lede above the caption band: keeps clear of the caption text
       and its reserved pause-control strip. */
    padding-bottom: calc( 44px + 4.5rem );
  }

  /* Reserve the pause control's band so it can never cover the caption. */
  .fc-hero__site-caption {
    padding-bottom: calc( 44px + 1.5rem );
    background: linear-gradient( to top, rgba( 9, 11, 18, 0.96 ) 0%, rgba( 9, 11, 18, 0.9 ) 55%, rgba( 9, 11, 18, 0.5 ) 88%, transparent 100% );
  }
}

/* Reduced motion + narrow viewport: the in-flow overlay must not keep the
   mobile min-height, or an empty band remains below the rail. The pause
   control is hidden in this mode, so its 44px reservation resets to the
   plain bottom padding on both the overlay and the caption. */
@media ( max-width: 48em ) and ( prefers-reduced-motion: reduce ) {
  .fc-hero__overlay {
    min-height: 0;
    padding-bottom: 3.5rem;
  }

  .fc-hero__figure-caption {
    padding-bottom: 1.5rem;
  }
}

@media ( max-width: 30em ) {
  /* Stacked header is much taller: anchors and the skip target must clear
     it. Same id list as the base rule, so this override wins on specificity. */
  #main-content,
  #rete,
  #tecnologia,
  #capacita,
  #supporto,
  #clienti,
  #notizie {
    scroll-margin-top: calc( 8rem + 1rem );
  }

  .fc-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-block: 0.6rem;
  }

  .fc-nav__list {
    padding-bottom: 0.2rem;
  }

  .fc-split__item {
    grid-template-columns: minmax( 7rem, 1fr ) auto;
    grid-template-rows: auto auto;
  }

  .fc-split__node {
    grid-column: 1;
    grid-row: 1;
  }

  .fc-split__value {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .fc-split__bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* --------------------------------------------------------------------------
   17. Forced colors: keep strokes, focus and critical text visible
   -------------------------------------------------------------------------- */

@media ( forced-colors: active ) {
  body {
    background: Canvas;
    color: CanvasText;
  }

  body::before,
  body::after {
    display: none;
  }

  .fc-card,
  .fc-console,
  .fc-table-scroll,
  .fc-gauge,
  .fc-hero__motion-control {
    background: Canvas;
    border-color: CanvasText;
  }

  /* Partner roster and bulletin rows stay transparent: only their bottom
     separators carry the forced-colors contrast. */
  .fc-client,
  .fc-news__item {
    background: transparent;
    border-bottom-color: CanvasText;
  }

  .fc-client__role,
  .fc-news__kind {
    color: CanvasText;
  }

  .fc-news__time {
    color: Highlight;
  }

  .fc-space-mark {
    color: CanvasText;
  }

  .fc-header {
    background: Canvas;
    border-bottom-color: CanvasText;
  }

  .fc-footer {
    background: Canvas;
    border-top-color: CanvasText;
  }

  .fc-hero::before {
    background: Canvas;
  }

  /* Above the full-width Canvas scrim, so the visible caption keeps
     contrast in the forced palette. */
  .fc-hero__site-caption {
    background: Canvas;
    color: CanvasText;
  }

  .fc-hero__slide figcaption {
    background: Canvas;
    color: CanvasText;
  }

  .fc-gauge__track {
    stroke: CanvasText;
    opacity: 0.4;
  }

  .fc-gauge__value {
    stroke: Highlight;
  }

  .fc-gauge__ticks {
    stroke: CanvasText;
    opacity: 1;
  }

  .fc-gauge__needle {
    fill: Highlight;
  }

  .fc-gauge__hub {
    fill: Canvas;
    stroke: CanvasText;
  }

  .fc-gauge__hub-dot {
    fill: Highlight;
  }

  .fc-split__bar {
    background: CanvasText;
  }

  /* Rail focus ring: forced-colors repaints the orange border explicitly. */
  .fc-hero:has( .fc-hero__slides:focus-visible )::after {
    border-color: Highlight;
  }

  .fc-skip-link,
  :focus-visible {
    outline: 2px solid Highlight;
  }
}

/* Forced colors + reduced motion: the scrim is hidden, so the in-flow
   overlay gets its own Canvas plate to stay readable against the page. */
@media ( forced-colors: active ) and ( prefers-reduced-motion: reduce ) {
  .fc-hero__overlay {
    background: Canvas;
    color: CanvasText;
  }
}

/* --------------------------------------------------------------------------
    18. Print: light background, static gauge, stacked hero figures
    -------------------------------------------------------------------------- */

@media print {
  html {
    scroll-behavior: auto;
    overflow-x: visible;
  }

  body {
    background: #fff;
    color: #000;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body::before,
  body::after,
  .fc-header,
  .fc-skip-link,
  .fc-hero::before,
  .fc-hero__motion,
  .fc-hero__motion-control,
  .fc-hero__site-captions,
  .fc-space-mark {
    display: none !important;
  }

  .fc-hero {
    overflow: visible;
    background: none;
  }

  .fc-hero__slides {
    position: relative;
    inset: auto;
    display: block;
    /* Reduced motion leaves aspect-ratio and overflow-x on the rail; without
       these, print clips the stack to a single 16/9 viewport. */
    aspect-ratio: auto;
    overflow: visible;
  }

  /* Print has no focus: suppress both possible rail indicators so a focused
     rail prints as a plain figure stack. The !important beats the screen-only
     ring, which carries a higher-specificity :has( ) selector. */
  .fc-hero__slides:focus-visible {
    outline: none;
  }

  .fc-hero::after {
    content: none !important;
  }

  .fc-hero__slide {
    position: relative;
    opacity: 1;
    margin-bottom: 1rem;
    page-break-inside: avoid;
    background: none;
  }

  /* Figures stack in normal flow: full-width image, caption below it. */
  .fc-hero__slide img {
    position: static;
    width: 100%;
    height: auto;
  }

  /* Undo every visual-hide property so all four captions print in normal
     document flow, black on white, below their images. */
  .fc-hero__slide figcaption {
    position: static;
    width: 100%;
    height: auto;
    margin: 0.4rem 0 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: #000;
    background: none;
  }

  .fc-hero__overlay {
    position: relative;
    z-index: auto;
    min-height: 0;
    background: none;
    padding: 1.5rem 0;
    color: #000;
  }

  .fc-hero__overlay h1,
  .fc-hero__lede,
  .fc-hero__eyebrow {
    color: #000;
  }

  /* No dark plate on the light print background. */
  .fc-hero__eyebrow {
    padding: 0;
    background: none;
  }

  .fc-section,
  .fc-footer {
    background: none;
  }

  .fc-card,
  .fc-console,
  .fc-table-scroll,
  .fc-gauge,
  .fc-client,
  .fc-news__item {
    background: none;
    border-color: #999;
  }

  /* Keep each roster or bulletin row on one page; the bottom separator
     stays the visible row boundary on paper. */
  .fc-client,
  .fc-news__item {
    break-inside: avoid;
    border-bottom-color: #999;
  }

  .fc-section,
  .fc-footer__inner,
  .fc-capacity__grid,
  .fc-support__grid {
    color: #000;
  }

  .fc-section__eyebrow,
  .fc-card__body,
  .fc-technology__body,
  .fc-capacity__note,
  .fc-support__copy,
  .fc-client__role,
  .fc-client__scope,
  .fc-news__kind,
  .fc-news__body,
  .fc-news__time,
  .fc-footer__statement,
  .fc-table thead th,
  .fc-split__value,
  .fc-console__title,
  .fc-console__label,
  .fc-console__value,
  .fc-gauge__caption,
  .fc-gauge__unit,
  .fc-logo-panel__micro {
    color: #333;
  }

  /* Force the gauge to print as the static full value. */
  .fc-gauge {
    --fc-speed: 100 !important;
  }

  /* Monochrome instrument on white paper: the light hub fill keeps the black
     readout readable, and track, ticks, value and needle stay dark enough. */
  .fc-gauge__track {
    stroke: #c9c9c9;
  }

  .fc-gauge__value {
    stroke: #333;
  }

  .fc-gauge__ticks {
    stroke: #555;
    opacity: 1;
  }

  .fc-gauge__needle {
    fill: #111;
  }

  .fc-gauge__hub {
    fill: #fff;
    stroke: #555;
  }

  .fc-gauge__hub-dot {
    fill: #333;
  }

  /* Hide the text node (the JS fallback may have rewritten it to an in-flight
     speed) and print a literal 100 instead. Wins over both the Chromium
     counter rule and the static node in the fallback engines. */
  .fc-gauge__number {
    font-size: 0;
    color: #000;
  }

  .fc-gauge__number::after {
    content: "100";
    font-size: 2.5rem;
    line-height: 1;
  }

  /* Light-time table: fits narrow A4 content widths without horizontal
     clipping or a leftover scroll strip. */
  .fc-table-scroll {
    overflow: visible;
  }

  .fc-table {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
  }

  .fc-table th,
  .fc-table td {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* No dash plate in print: removes the empty reserved gap before the label. */
  .fc-section__eyebrow::before {
    content: none;
  }

  a {
    color: #000;
  }
}