@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

:root {
  --bg: #0a0f18;
  --bg-alt: #10192a;
  --card: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.12);
  --text: #e8eefc;
  --muted: #a9b5d1;
  --accent: #5eead4;
  --accent-2: #60a5fa;
  --shadow: 0 20px 60px rgba(0,0,0,0.35);
  --radius: 16px;
  --max: 1120px;
  --warning: #fbbf24;
  --danger: #f87171;
  --space-section: 1.5rem;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,0.18), transparent 30%),
    radial-gradient(circle at top right, rgba(94,234,212,0.14), transparent 26%),
    linear-gradient(180deg, #07101c 0%, var(--bg) 100%);
  color: var(--text);
  line-height: 1.5;
}

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

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

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--accent);
  color: #05111c;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  z-index: 1000;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
}

/* Accessibility: visible focus states */
a:focus-visible,
.btn:focus-visible,
.lang-switch a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.container {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}

/* ---------- Header / hero (mobile base) ---------- */

.hero {
  padding-top: var(--space-section);
}

.topbar-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(21, 84, 152, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.site-logo {
  display: block;
  flex-shrink: 0;
}

.site-logo img {
  display: block;
  height: 40px;
  width: auto;
}



/* ==========================================================================
   Lightbox — native <dialog> + Invoker Commands API (command/commandfor)
   No JavaScript. No CSP changes needed (plain HTML attributes, not scripts).
   Append this block to styles.css, after the Media components section.
   ========================================================================== */

/* The trigger button wrapping the small inline image — strip button chrome
   so it looks like a plain clickable image, not a form control. */
.lightbox-trigger {
  all: unset;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.lightbox-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The modal itself — deliberately no `position` override here.
   Browsers default a modal <dialog> to `position: fixed`, which keeps it
   anchored to the viewport instead of the page's document flow — that's
   what prevents the "closing the dialog jumps the scroll position"
   problem. Overriding it (e.g. to `relative`) reintroduces that bug. */
dialog.lightbox {
  border: none;
  padding: 0;
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  overflow: auto;
}

dialog.lightbox::backdrop {
  background: rgba(5, 10, 20, 0.85);
  backdrop-filter: blur(4px);
}

dialog.lightbox img {
  display: block;
  width: 100%;
  height: auto;
}

/* Inner wrapper carries the position: relative anchor instead of the
   dialog itself, so the close button can still be absolutely positioned
   without touching the dialog's own (default, fixed) positioning. */
.lightbox-inner {
  position: relative;
}

.lightbox-close {
  all: unset;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(10, 15, 24, 0.7);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--accent);
  color: #05111c;
}

.lightbox-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-top: var(--space-section);
}

.brand,
.hero-card,
.card,
.product,
.contact-box {
  border: 1px solid var(--card-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

.brand {
  padding: 1.25rem;
}

.eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--accent);
}

h1, h2, h3, p {
  margin-top: 0;
}

h3 {
  font-size: 1.33rem;
}

h1 {
  font-size: 1.7rem;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.lead {
  font-size: 1rem;
  color: var(--muted);
  max-width: 62ch;
}

/* .lead-wide lives in the Text utilities section further down the file */

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05111c;
}

.btn.secondary {
  background: rgba(255,255,255,0.05);
  border-color: var(--card-border);
}

.hero-card {
  padding: 1.5rem;
}

.hero-card h2 {
  margin-bottom: 1rem;
  font-size: 1.33rem;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.8rem;
  color: var(--muted);
}

.contact-list dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact-list dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.contact-list div {
  display: grid;
  gap: 0.15rem;
}

.mini-note {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--card-border);
  color: var(--muted);
}

/* ---------- Sections (mobile base) ---------- */

.section {
  margin-top: var(--space-section);
}

.alt {
  background: rgba(255,255,255,0.02);
}

.section-heading {
  margin-bottom: 1.5rem;
}

.section-heading h2 {
  font-size: 1.4rem;
  margin-bottom: 0;
}

.card-grid,
.product-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.card,
.product {
  padding: 1.4rem;
}

.card p,
.product p,
.contact-box p {
  color: var(--muted);
}

.contact-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.4rem;
}

.footer {
  padding-bottom: 2rem;
  margin-top: var(--space-section);
  color: var(--muted);
  font-size: 0.75rem;
}

.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--card-border);
  padding-top: 1rem;
}

/* ==========================================================================
   Media components — reusable across pages
   Add this block to styles.css (e.g. after the .footer-grid rules,
   before the min-width media queries — or keep as its own section
   with its own breakpoints, as written below).
   ========================================================================== */

/* Base: every media wrapper shares this. Always pair with a <picture>
   containing AVIF/WebP/JPG sources and a real <img> with width/height. */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03); /* visible placeholder color while loading */
}

.media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 1. Banner — full-width, edge-to-edge within the container ---------- */
/* No border/shadow: meant to bleed visually into the page, not sit as a card. */

.media-banner {
  aspect-ratio: 16 / 9;
  width: 100%;
}

@media (min-width: 900px) {
  .media-banner {
    aspect-ratio: 21 / 9;
  }
}

/* ---------- 2. Card — framed, matches .card / .product visual language ---------- */

.media-card {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

/* Optional caption beneath a .media-card — wrap in a <figure>/<figcaption> */
.media-caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- 3. Split — image + text side by side (mobile-first stacked) ---------- */
/* Structure:
   <div class="media-split">
     <div class="media">...<picture>...</picture></div>
     <div class="media-split-content"><h2>...</h2><p>...</p></div>
   </div>
   Add "media-split-reverse" to the outer div to flip image/text order
   on wide screens (image on the right instead of left). On mobile,
   image always comes first regardless of the modifier. */

.media-split {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}

.media-split .media {
  aspect-ratio: 4 / 3;
}

.media-split-content h2,
.media-split-content h3 {
  margin-bottom: 0.75rem;
}

.media-split-content p {
  color: var(--muted);
}

@media (min-width: 900px) {
  .media-split {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .media-split .media {
    aspect-ratio: 3 / 2;
  }

  .media-split-reverse .media {
    order: 2;
  }

  .media-split-reverse .media-split-content {
    order: 1;
  }
}

/* ---------- min-width: 640px ---------- */

@media (min-width: 640px) {
  :root {
    --radius: 20px;
	--space-section: 2.5rem;
  }

  .site-logo img {
    height: 60px;
  }

  .brand {
    padding: 2rem;
  }

  h1 {
    font-size: 1.95rem;
  }

  .section-heading h2 {
    font-size: 1.55rem;
  }

  .contact-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem;
  }

  .footer-grid {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------- min-width: 900px ---------- */

@media (min-width: 900px) {
  .site-logo img {
    height: 84px;
  }

  h1 {
    font-size: 2.37rem;
  }

  .section-heading h2 {
    font-size: 1.78rem;
  }

  .hero-grid {
    grid-template-columns: 1.6fr 0.9fr;
  }

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

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
/* ==========================================================================
   Additional media layout variants
   Append to the existing "Media components" section in styles.css.
   ========================================================================== */

/* ---------- 4. Split ratio modifiers ----------
   Add alongside "media-split" (and optionally "media-split-reverse").
   The ratio always describes the IMAGE's share — combining a ratio
   class with media-split-reverse keeps that ratio attached to the
   image even though it moves to the other side.

   Usage:
     <div class="media-split media-split-3-1"> ... image gets 3/4 width
     <div class="media-split media-split-1-3"> ... image gets 1/4 width
     <div class="media-split media-split-3-1 media-split-reverse">
       ... image still gets 3/4 width, now on the right
*/

@media (min-width: 900px) {
  .media-split-3-1 {
    grid-template-columns: 3fr 1fr;
  }

  .media-split-3-1.media-split-reverse {
    grid-template-columns: 1fr 3fr;
  }

  .media-split-1-3 {
    grid-template-columns: 1fr 3fr;
  }

  .media-split-1-3.media-split-reverse {
    grid-template-columns: 3fr 1fr;
  }
}

/* ---------- 5. Flanked — text column + image + text column ----------
   Structure (source order matters — write it in this order):
   <div class="media-flanked">
     <div class="media-split-content">...left text...</div>
     <div class="media">...<picture>...</picture></div>
     <div class="media-split-content">...right text...</div>
   </div>
   Reuses .media-split-content for both text columns — no separate
   text styling needed. On mobile, the image always shows first
   (stacked), followed by the two text blocks in their source order.
*/

.media-flanked {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}

.media-flanked .media {
  aspect-ratio: 4 / 3;
  order: 1;
}

.media-flanked .media-split-content:first-of-type {
  order: 2;
}

.media-flanked .media-split-content:last-of-type {
  order: 3;
}

@media (min-width: 900px) {
  .media-flanked {
    grid-template-columns: 1fr minmax(260px, 1fr) 1fr;
    gap: 2rem;
  }

  /* Taller aspect ratio than the 2-column split — the center image
     column is narrower here (roughly a third of the width instead of
     half), so a landscape 3:2 crop would look short and squeezed. */
  .media-flanked .media {
    aspect-ratio: 4 / 5;
    order: 2;
  }

  .media-flanked .media-split-content:first-of-type {
    order: 1;
  }

  .media-flanked .media-split-content:last-of-type {
    order: 3;
  }
}

/* ==========================================================================
   Lists — base ul/ol, compact inline (pill) list, checklist
   Append to styles.css.
   ========================================================================== */

/* ---------- 1. Base — plain <ul> / <ol>, accent-colored markers ---------- */
/* No class needed — applies to any bare <ul>/<ol> in content (cards,
   media-split-content, etc). .contact-list already overrides this safely
   since class selectors beat bare-tag selectors regardless of order. */

ul, ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--muted);
}

ul li,
ol li {
  margin-top: 0.4rem;
}

ul li:first-child,
ol li:first-child {
  margin-top: 0;
}

ul::marker,
ol::marker,
ul li::marker,
ol li::marker {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- 2. Compact inline — pill-style tags, wraps horizontally ---------- */
/* Usage: <ul class="list-inline"><li>Tag one</li><li>Tag two</li></ul> */

.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-inline li {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.85rem;
  color: var(--text);
}

/* ---------- 3. Checklist — accent checkmark instead of a bullet ---------- */
/* Usage: <ul class="list-check"><li>Included item</li></ul> */

.list-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.list-check li {
  position: relative;
  margin-top: 0;
  padding-left: 1.75rem;
  color: var(--muted);
}

.list-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ==========================================================================
   Back to top — pure HTML/CSS, no JavaScript
   Append to styles.css.
   ========================================================================== */

/* Smooth scroll for the href="#" anchor below (and any other in-page anchors) */
html {
  scroll-behavior: smooth;
}

/* Base button — always visible, works in every browser, zero risk. */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05111c;
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
}

.back-to-top:hover {
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Optional enhancement — fade in only after scrolling down ----------
   Wrapped in @supports: browsers without this (Firefox stable, as of
   mid-2026, still ships it behind a disabled-by-default flag) simply
   keep the always-visible base button above. Nothing breaks either way.
   Adjust the 400px/600px range to taste — button starts fading in at
   400px scrolled, fully visible by 600px. */

@supports (animation-timeline: scroll()) {
  .back-to-top {
    opacity: 0;
    animation: reveal-back-to-top linear;
    animation-timeline: scroll(root);
    animation-range: 400px 600px;
    animation-fill-mode: both;
  }
}

@keyframes reveal-back-to-top {
  from {
    opacity: 0;
    pointer-events: none;
  }
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Respect reduced-motion preference — skip the smooth scroll animation */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   FAQ Accordion — native <details>/<summary>, no JavaScript.
   Keyboard and screen-reader behavior (expanded/collapsed state) is
   handled natively by the browser — no ARIA attributes needed.
   Append to styles.css.
   ========================================================================== */

.faq {
  display: grid;
  gap: 1rem;
}

.faq-item {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  overflow: hidden;
}

.faq-item[open] {
  box-shadow: var(--shadow);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  font-weight: 700;
  color: var(--text);
}

/* Remove the default disclosure triangle in both engines */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: "";
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Custom "+" marker that rotates into an "×" when open */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--muted);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .faq-item summary {
    padding: 1.1rem 1.5rem;
  }

  .faq-answer {
    padding: 0 1.5rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

/* ==========================================================================
   Alert / notice callout — four variants (info, success, warning, danger)
   Append to styles.css.
   ========================================================================== */

/* Screen-reader-only utility — hides text visually while keeping it
   readable by assistive tech. Used below so the alert's *type* (not
   just its color) is announced, per WCAG 1.4.1 (don't rely on color
   alone to convey meaning). Reusable anywhere else you need it. */
.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;
}

.alert-stack {
  display: grid;
  gap: 1rem;
}

.alert {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  border-left-width: 4px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 1.5rem;
}

.alert-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

.alert-content strong {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.alert-content p {
  margin: 0;
  color: var(--muted);
}

.alert-content p + p {
  margin-top: 0.5rem;
}

/* ---------- Variants ---------- */

.alert-info {
  border-left-color: var(--accent-2);
}

.alert-info .alert-icon {
  background: rgba(96, 165, 250, 0.18);
  color: var(--accent-2);
}

.alert-success {
  border-left-color: var(--accent);
}

.alert-success .alert-icon {
  background: rgba(94, 234, 212, 0.18);
  color: var(--accent);
}

.alert-warning {
  border-left-color: var(--warning);
}

.alert-warning .alert-icon {
  background: rgba(251, 191, 36, 0.18);
  color: var(--warning);
}

.alert-danger {
  border-left-color: var(--danger);
}

.alert-danger .alert-icon {
  background: rgba(248, 113, 113, 0.18);
  color: var(--danger);
}

/* ==========================================================================
   Badge / tag pill — small inline label, e.g. attached to a card heading
   Append to styles.css. Fully self-contained, no dependency on other
   components.
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  margin-left: 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- Variants ---------- */

.badge-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05111c;
}

.badge-neutral {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--card-border);
  color: var(--text);
}

.badge-warning {
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--warning);
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.badge-alarm {
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--danger);
}

/* ==========================================================================
   Blockquote / testimonial
   Append to styles.css. Fully self-contained.
   Markup pattern (the <footer>/<cite> combination is the pattern shown
   in the WHATWG spec itself for attributing a quote to its source):
     <blockquote class="testimonial">
       <p>Quote text.</p>
       <footer>— <cite>Nome Cliente</cite>, Città</footer>
     </blockquote>
   ========================================================================== */

.testimonial {
  position: relative;
  margin: 0;
  padding: 2.25rem 1.5rem 1.5rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: var(--shadow);
}

/* Decorative opening quote mark. U+201C is covered by the self-hosted
   Inter subset's unicode-range (U+2000-206F), so no fallback-font risk. */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.75rem;
  left: 1.5rem;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.4;
}

.testimonial p {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
}

.testimonial p:last-of-type {
  margin-bottom: 0.75rem;
}

.testimonial footer {
  color: var(--muted);
  font-size: 0.9rem;
}

.testimonial footer cite {
  font-style: normal; /* browsers italicize <cite> by default; override to match the site's non-italic style */
  font-weight: 700;
  color: var(--text);
}

/* Grid for showing several testimonials together, mobile-first */
.testimonial-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* ==========================================================================
   Breadcrumb navigation
   Append to styles.css.
   Markup follows the WAI-ARIA Breadcrumb pattern: the current page is
   marked aria-current="page" and is plain text, not a link. The "/"
   separator is CSS-generated (::after), so it's purely visual and
   never read aloud by screen readers or copy-pasted with the text.

   <nav class="breadcrumb" aria-label="Breadcrumb">
     <ol>
       <li><a href="/">Home</a></li>
       <li><a href="/servizi/">Servizi</a></li>
       <li aria-current="page">Assistenza IT</li>
     </ol>
   </nav>
   ========================================================================== */

.breadcrumb {
  margin: 0 0 1.5rem;
}

/* Explicitly resets everything the base list rules (Lists component)
   would otherwise apply — list-style, padding, colored ::marker —
   since this is a real <ol> and would inherit those by default. */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  color: var(--card-border);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.breadcrumb li[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}

.breadcrumb-row {
  padding-bottom: 0.75rem;
}

.breadcrumb-row .breadcrumb {
  margin: 0; /* the component's own default 1.5rem bottom margin isn't needed here — this row's own padding handles the spacing instead */
}

/* ==========================================================================
   Language switcher dropdown — Popover API (popover/popovertarget)
   No JavaScript. Native light-dismiss (click outside closes it) and
   Escape-key support come free from the browser.

   Deliberately NOT using CSS anchor positioning to place the panel —
   that feature's real-world cross-browser maturity is still unclear
   (conflicting version claims across sources, and MDN's own docs, as
   of May 2026, flag a live open Firefox bug for it). Using plain
   position: fixed instead, tuned to the topbar's known height at each
   breakpoint — simple, and has been reliable for decades.

   IMPORTANT: the top offsets below (4.5rem / 5.5rem / 6.5rem) are
   estimates based on the topbar's approximate height at each
   breakpoint — check visually after deploying and adjust these three
   values if the panel sits a little too high or too low under the
   real topbar.

   Markup:
     <div class="lang-menu">
       <button popovertarget="lang-popover" popovertargetaction="toggle"
               class="lang-trigger" aria-label="Cambia lingua">IT</button>
       <div id="lang-popover" popover class="lang-menu-panel">
         <a href="index.html" lang="it" hreflang="it" aria-current="page">Italiano</a>
         <a href="index.en.html" lang="en" hreflang="en">English</a>
         <a href="index.es.html" lang="es" hreflang="es">Español</a>
       </div>
     </div>
   ========================================================================== */

.lang-trigger {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lang-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lang-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Highlight the trigger while its popover is open. :has() is mature
   (shipped across all engines since late 2023) — safe to rely on. */
.lang-menu:has([popover]:popover-open) .lang-trigger {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05111c;
  border-color: transparent;
}

.lang-menu-panel[popover] {
  position: fixed;
  top: 4.5rem;
  right: max(1rem, calc((100vw - var(--max)) / 2 + 1rem));
  left: auto;
  bottom: auto;
  margin: 0;
  min-width: 160px;
  padding: 0.5rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--text);
  box-shadow: var(--shadow);
}

.lang-menu-panel:popover-open {
  display: grid;
}

.lang-menu-panel a {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: calc(var(--radius) - 8px);
  color: var(--text);
  font-size: 0.9rem;
}

.lang-menu-panel a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lang-menu-panel a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.lang-menu-panel a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}

@media (min-width: 640px) {
  .lang-menu-panel[popover] {
    top: 5.5rem;
  }
}

@media (min-width: 900px) {
  .lang-menu-panel[popover] {
    top: 6.5rem;
  }
}

/* Short landscape viewports (mobile phones rotated sideways) —
   independent of the width-based breakpoints; targets height
   scarcity specifically, not screen width. Must come AFTER the
   min-width: 640px / 900px blocks — a landscape phone often
   satisfies those too, and this needs to win the override. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-logo img {
    height: 32px;
  }
  
  .topbar-wrap {
   background: rgba(10, 15, 24, 0.5);
   backdrop-filter: blur(3px);
  }

  .topbar {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
	background: none;
  }

  /* Breadcrumbs dropped entirely here — not enough vertical room
     to justify a second row on top of the logo/lang-switch row. */
  .breadcrumb-row {
    display: none;
  }

  /* Topbar is now shorter (no breadcrumb row beneath it), so the
     panel's offset shrinks to match — estimate, check visually. */
  .lang-menu-panel[popover] {
    top: 2.75rem;
  }
}

/* ==========================================================================
   Responsive data table -- horizontal scroll wrapper + style toolkit
   Append to styles.css.

   Uses border-collapse: separate (not collapse) deliberately: collapse
   mode has a well-documented cross-browser incompatibility with
   border-radius on individual cells (inconsistent per-corner results).
   With separate mode, the border/radius live on the <table> element
   itself, which behaves like any ordinary box.

   <caption> gets special handling: it is architecturally part of the
   CSS "table wrapper box", NOT the "table grid box" that border-radius
   and overflow:hidden apply to on a <table> element -- so it never
   gets rounded/clipped along with the rest of the table automatically.
   :has() is used to detect caption presence and hand the top corners
   off to the caption instead when one exists.
   ========================================================================== */

main {
  overflow-x: hidden; /* merge into your existing top-of-file html/body rule */
}

.table-scroll-hint {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
}

@media (min-width: 640px) {
  .table-scroll-hint {
    display: none;
  }
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}

/* When a table contains a <caption>, the caption -- not the grid --
   becomes the visual top of the card, so the table hands its own top
   edge and top rounding off to the caption (below). :has() is mature
   (shipped across all engines since late 2023) -- safe to rely on. */
.table-scroll table:has(caption) {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.table-scroll caption {
  text-align: left;
  padding: 1rem;
  font-weight: 700;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border); /* internal seam to thead -- a plain straight line, not near a rounded corner, so no clipping artifact */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* Internal grid -- each cell contributes its own right + bottom edge
   (its "shared" side with the next cell). The table's own outer
   border supplies the left/right/bottom edges of the whole grid
   (and the top edge too, when there's no caption). */
.table-scroll th,
.table-scroll td {
  border-right: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  padding: 0.75rem 1rem;
  text-align: left;
}

.table-scroll tr > *:last-child {
  border-right: none;
}

.table-scroll tbody tr:last-child > * {
  border-bottom: none;
}

.table-scroll thead th {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.table-scroll tbody th {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.table-scroll tbody td {
  color: var(--muted);
  font-weight: 400;
  text-align: center;
}

.table-scroll tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

.table-scroll tbody tr:hover td {
  background: rgba(255, 255, 255, 0.07);
}

/* ---------- Background color utilities -- apply to any th/td ---------- */

.table-scroll .bg-accent {
  background: rgba(94, 234, 212, 0.12);
}

.table-scroll .bg-accent-2 {
  background: rgba(96, 165, 250, 0.12);
}

.table-scroll .bg-warning {
  background: rgba(251, 191, 36, 0.12);
}

.table-scroll .bg-danger {
  background: rgba(248, 113, 113, 0.12);
}

.table-scroll .bg-neutral {
  background: rgba(255, 255, 255, 0.07);
}

.table-scroll .featured {
  background: rgba(94, 234, 212, 0.1);
}

/* ==========================================================================
   Style modifiers -- add as an extra class on .table-scroll,
   e.g. <div class="table-scroll table-minimal">
   ========================================================================== */

/* ---------- table-minimal: no outer frame, horizontal row lines only ---------- */

.table-scroll.table-minimal table {
  border: none;
  border-radius: 0;
}

.table-scroll.table-minimal caption {
  border: none;
  border-bottom: 1px solid var(--card-border);
  border-radius: 0;
}

.table-scroll.table-minimal th,
.table-scroll.table-minimal td {
  border-right: none;
}

.table-scroll.table-minimal thead th {
  border-bottom: 2px solid var(--card-border);
}

/* ---------- table-bordered-outer: only the outer frame, no internal lines ---------- */

.table-scroll.table-bordered-outer th,
.table-scroll.table-bordered-outer td {
  border: none;
}

/* ---------- table-compact: tighter padding for dense data ---------- */

.table-scroll.table-compact th,
.table-scroll.table-compact td {
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

/* ---------- table-no-stripe: flat background, no zebra rows ---------- */

.table-scroll.table-no-stripe tbody tr:nth-child(even) td {
  background: transparent;
}

/* ---------- table-align-center: every cell centered (e.g. spec sheets) ---------- */

.table-scroll.table-align-center th,
.table-scroll.table-align-center td {
  text-align: center;
}

/* ==========================================================================
   Print stylesheet
   Append to styles.css.

   Strategy: redefine the core design tokens (--bg, --text, --accent, etc.)
   inside @media print -- since most of the site's colors reference these
   variables, this cascades a print-safe black-on-white palette through
   nearly every component automatically, without touching each one.
   A few colors were written as hardcoded hex values rather than tokens
   earlier in this project (button text, badge text) -- those get
   explicit overrides below since the token redefinition can't reach them.
   ========================================================================== */

@media print {

  @page {
    margin: 2cm;
  }

  /* ---------- Token redefinition -- cascades through most components ---------- */
  :root {
    --bg: #ffffff;
    --bg-alt: #ffffff;
    --card: transparent;
    --card-border: #999999;
    --text: #000000;
    --muted: #333333;
    --accent: #000000;
    --accent-2: #000000;
    --warning: #000000;
    --danger: #000000;
    --shadow: none;
  }

  /* body's background is a literal multi-stop gradient (hardcoded rgba
     values, not tokens) -- the :root redefinition above can't reach it,
     needs its own explicit override. */
  body {
    background: #ffffff;
    color: #000000;
  }

  /* ---------- Strip decorative/interactive chrome not meaningful on paper ---------- */

  .skip-link,
  .topbar-wrap,
  .breadcrumb-row,
  .back-to-top,
  .lang-menu,
  dialog.lightbox,
  .table-scroll-hint {
    display: none !important;
  }

  /* Decorative effects that don't render meaningfully (or waste ink) on paper */
  * {
    box-shadow: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
  }

  /* ---------- Known hardcoded (non-token) colors -- explicit fixes ---------- */

  .btn {
    background: none !important;
    color: #000000 !important;
    border: 1px solid #000000;
  }

  .badge-accent {
    background: none !important;
    color: #000000 !important;
    border: 1px solid #000000;
  }

  /* ---------- FAQ: force all answers visible regardless of [open] state ---------- */
  /* Fighting the browser's own native <details> hiding behavior requires
     !important here -- a narrow, deliberate exception, not a general habit. */

  .faq-item:not([open]) .faq-answer {
    display: block !important;
  }

  .faq-item summary::after {
    display: none; /* the +/x marker is meaningless once everything is forced open */
  }

  /* ---------- Show link destinations, since paper can't be clicked ---------- */
  /* Skips internal same-page anchors (#...) -- only external/tel/mailto
     links get their destination printed after the link text. */

  a[href^="http"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #333333;
  }

  /* ---------- Print typography: avoid awkward page breaks ---------- */

  h1, h2, h3 {
    break-after: avoid;
  }

  .card,
  .product,
  .testimonial,
  .alert,
  .faq-item {
    break-inside: avoid;
  }

  /* ---------- Table: keep header row from repeating oddly, allow the
     table itself to break across pages if it's long ---------- */

  .table-scroll {
    overflow-x: visible;
  }

  thead {
    display: table-header-group; /* repeats the header row on each printed page if the table spans more than one */
  }
}

/* ==========================================================================
   Text utilities -- widths, sizes, and standout effects
   Append to styles.css.
   ========================================================================== */

/* Nicer default line-breaking, site-wide. Both are safe, mature features:
   unsupported browsers (mainly Firefox for "pretty") just fall back to
   normal wrapping -- no visual breakage either way. */
h1, h2, h3 {
  text-wrap: balance;
}

@supports (text-wrap: pretty) {
p {
  text-wrap: pretty;
}
}

/* ---------- Width variants ---------- */

.lead-wide {
  max-width: 75ch; /* longer intro paragraphs -- still readable, just
                       less tightly capped than .lead's 62ch */
}

.text-body {
  max-width: 75ch;
  color: var(--text);
}

/* ---------- Size scale ---------- */

.text-sm {
  font-size: 0.85rem;
}

.text-lg {
  font-size: 1.15rem;
}

.text-xl {
  font-size: 1.4rem;
}

/* ---------- Inline color utilities ---------- */

.text-accent {
  color: var(--accent);
}

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

/* ---------- Gradient text -- for a short standout phrase, not paragraphs ---------- */

.text-gradient {
  color: var(--accent); /* fallback if background-clip:text isn't rendered */
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Highlighter-style inline background ---------- */

.text-highlight {
  background: rgba(94, 234, 212, 0.16);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ---------- Drop cap -- opening paragraph of long-form content ---------- */
/* Usage: <p class="text-dropcap">Testo che inizia con una lettera grande...</p> */

.text-dropcap::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.85;
  font-weight: 700;
  color: var(--accent);
  padding-right: 0.08em;
  padding-top: 0.05em;
}

/* ---------- Statement -- large centered standalone declaration, no attribution ---------- */
/* Usage: <p class="statement">Una frase che merita di respirare da sola.</p> */

.statement {
  max-width: 42ch;
  margin: 0 auto;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

@media (min-width: 640px) {
  .statement {
    font-size: 1.9rem;
  }
}

/* ---------- Small layout utilities ---------- */

.text-center {
  text-align: center;
}

.hero-actions-center {
  justify-content: center;
}

/* ==========================================================================
   Main navigation -- desktop dropdown (hover/focus-within) + mobile
   full-screen panel (Popover API).

   Mobile uses Popover, not <details>, deliberately: .topbar-wrap has
   backdrop-filter set, and any ancestor with backdrop-filter/transform
   breaks position:fixed's viewport anchoring (the same bug fixed earlier
   for the language-switcher dropdown). Popovers render in the browser's
   top layer, immune to that -- <details> content stays in normal flow
   and would inherit the same bug here.

   Desktop dropdowns use position:absolute anchored to their own .li
   (which has position:relative set locally) -- that's a closer, more
   specific containing block than .topbar-wrap, so the backdrop-filter
   issue does not apply there.

   Append to styles.css.
   ========================================================================== */

/* ---------- Desktop nav bar (900px+) ---------- */

.main-nav {
  display: none;
}

.main-nav > ul > li {
  margin-top: 0;
}

@media (min-width: 900px) {
  .main-nav {
    display: block;
  }
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > ul > li {
  position: relative;
}

.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.92rem;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible {
  color: var(--accent);
}

.main-nav > ul > li > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  gap: 1.75rem;
  min-width: 460px;
  padding: 1.25rem;
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 200;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  display: flex;
}

.submenu-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.submenu-heading {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 0.3rem;
}

.submenu-col a {
  color: var(--muted);
  font-size: 0.88rem;
  padding: 0.25rem 0;
}

.submenu-col a:hover,
.submenu-col a:focus-visible {
  color: var(--text);
}

/* ---------- Mobile hamburger trigger ---------- */

.mobile-nav-toggle {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
}

.mobile-nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Mobile full-screen panel ---------- */

.mobile-nav-panel[popover] {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 1.5rem;
  border: none;
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
}

.mobile-nav-close {
  all: unset;
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
}

.mobile-nav-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mobile-nav-panel nav {
  margin-top: 3.5rem;
}

.mobile-nav-panel > nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.mobile-nav-panel > nav > ul > li > a {
  display: block;
  padding: 0.9rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--card-border);
}

@media (min-width: 900px) {
  .mobile-nav-toggle,
  .mobile-nav-panel {
    display: none;
  }
}

/* Nested accordions for each hub's children -- reuses the same
   marker-hiding technique as the FAQ component. */
.mobile-submenu {
  border-bottom: 1px solid var(--card-border);
}

.mobile-submenu summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}

.mobile-submenu summary::-webkit-details-marker {
  display: none;
}

.mobile-submenu summary::marker {
  content: "";
}

.mobile-submenu summary::after {
  content: "+";
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.mobile-submenu[open] summary::after {
  transform: rotate(45deg);
}

.mobile-submenu ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0.75rem 1rem;
  display: grid;
  gap: 0.5rem;
}

.mobile-submenu ul a {
  color: var(--muted);
  font-size: 0.95rem;
}

.mobile-submenu ul a:hover,
.mobile-submenu ul a:focus-visible {
  color: var(--text);
}

.mobile-lang-switch {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.mobile-lang-switch a {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 700;
}

.mobile-lang-switch a[aria-current="page"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #05111c;
  border-color: transparent;
}

/* Hide the standalone language popover on mobile -- it lives inside
   the mobile panel instead there. Shown again at 900px+. */
.lang-menu {
  display: none;
}

@media (min-width: 900px) {
  .lang-menu {
    display: block;
  }
}

/* ==========================================================================
   Link styles -- four tiers, by emphasis level
   Append to styles.css.

   The site-wide "a { text-decoration: none; color: inherit; }" reset
   from early in the project strips the browser's default link
   signal (blue + underline) -- these classes replace it with a
   deliberate, visible-at-rest alternative, so links never rely on
   hover alone to be discoverable.
   ========================================================================== */

/* ---------- 1. Inline text link -- links sitting inside running prose ---------- */

.link-inline {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.link-inline:hover {
  color: var(--accent-2);
}

.link-inline:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 2. Read-more link -- standalone "Scopri di pi\u00f9 \u2192" pattern ---------- */

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--accent);
  font-weight: 700;
  transition: transform 0.2s ease, color 0.2s ease;
}

.link-more:hover {
  color: var(--accent-2);
  transform: translateX(3px);
}

.link-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 3. Call-to-action link -- a real decision point, not just a reference ---------- */

.link-cta {
  display: inline-block;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.1rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.link-cta:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-2);
}

.link-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 4. Muted link -- low-priority asides, backlinks ---------- */

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

.link-muted:hover,
.link-muted:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.link-muted:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .link-more {
    transition: none;
  }
}

/* ==========================================================================
   Order utilities -- general-purpose visual reordering for grid/flex
   children, independent per breakpoint.

   Base classes (order-1 .. order-6) apply at every width, mobile-first,
   same as HTML's natural document order if left unset (default order
   is 0, so an element with no class sorts before/after siblings purely
   by DOM position).

   The 900px-scoped set (order-900-1 .. order-900-6) lets an element's
   order diverge specifically at desktop width, without touching
   mobile at all -- this is the general mechanism .media-split was
   missing, now available to any grid/flex layout, not hardcoded into
   one component.

   Deliberately built for exactly one breakpoint divergence (900px)
   since that's the only real, current need -- a 640px-scoped set
   could be added later via the identical pattern if a genuine case
   for it ever comes up; not building it speculatively now.
   ========================================================================== */

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }

@media (min-width: 900px) {
  .order-900-1 { order: 1; }
  .order-900-2 { order: 2; }
  .order-900-3 { order: 3; }
  .order-900-4 { order: 4; }
  .order-900-5 { order: 5; }
  .order-900-6 { order: 6; }
}

/* ==========================================================================
   Scan gallery — multi-angle image showcase (e.g. scan-quality demonstrations)
   Append to styles.css.
   ========================================================================== */
.scan-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: var(--space-section);
}

@media (min-width: 900px) {
  .scan-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* ==========================================================================
   Row spacing fix — stacked .media-split / .scan-gallery rows within one
   .section no longer rely on the section wrapper alone for vertical gaps.
   Uses the general sibling combinator (~) rather than adjacent (+) because
   each row's own <dialog> (display:none, but still a real DOM sibling)
   sits between rows and breaks adjacent-sibling matching.
   Append to styles.css.
   ========================================================================== */
.section .media-split ~ .media-split,
.section .media-split ~ .scan-gallery,
.section .scan-gallery ~ .media-split,
.section .scan-gallery ~ .scan-gallery,
.section .media-split ~ h2,
.section .media-split ~ p,
.section .scan-gallery ~ h2,
.section .scan-gallery ~ p {
  margin-top: var(--space-section);
}

/* ==========================================================================
   List spacing fix — ul.list-check was missing from the general-sibling
   spacing rule (see css-row-spacing-fix.css), so nothing following a list
   picked up a top margin, and the list itself had none of its own.
   Append to styles.css, alongside the earlier row-spacing-fix rule.
   ========================================================================== */
.section .media-split ~ ul.list-check,
.section .scan-gallery ~ ul.list-check,
.section ul.list-check ~ .media-split,
.section ul.list-check ~ .scan-gallery,
.section ul.list-check ~ h2,
.section ul.list-check ~ p {
  margin-top: var(--space-section);
}

/* ==========================================================================
   Hero lead-paragraph spacing fix — .lead's default browser bottom margin
   was stacking with .section's margin-top instead of collapsing into it,
   because main's overflow-x: hidden (added for the mobile table fix)
   creates a block-formatting-context that blocks margin collapsing across
   it. Zeroing .lead's own bottom margin removes the stray second source
   of spacing, restoring the site's "one margin creates one gap" rule.
   Append to styles.css, near the existing .lead rule (or replace it).
   ========================================================================== */
.lead {
  margin-bottom: 0;
}