/* =========================================================
   Fonts — self-hosted (Inter + Playfair Display, Latin + Latin
   Extended subsets only, which is what Italian text needs). Pulled
   in locally instead of via Google Fonts' <link> so the page never
   depends on an external request to render its final type: nothing
   to wait on, nothing to fail over a flaky connection, no third
   party contacted on every visit.
========================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/Inter-400-800-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/Inter-400-800-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../assets/fonts/PlayfairDisplay-500-800-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../assets/fonts/PlayfairDisplay-500-800-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/PlayfairDisplay-500-italic-latin.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/PlayfairDisplay-500-italic-latin-ext.woff") format("woff");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   Alleanza Digitale — Design Tokens
========================================================= */
:root {
  /* Color */
  --color-bg: #FAF8F4;
  --color-bg-alt: #F1ECE3;
  --color-surface: #FFFFFF;
  --color-ink: #14171F;
  --color-ink-soft: #565C6B;
  --color-border: #E3DDD0;

  --color-dark: #0B0E17;
  --color-dark-elev: #141926;
  --color-dark-border: rgba(255, 255, 255, 0.09);
  --color-on-dark: #F4F2EC;
  --color-on-dark-soft: #A6ACBC;

  --color-accent: #2F5FFF;
  --color-accent-hover: #2249DB;
  --color-accent-text: #1E46D9;
  --color-accent-soft: rgba(47, 95, 255, 0.1);
  --color-accent-soft-dark: rgba(92, 134, 255, 0.16);

  /* Type */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale (8px rhythm) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* A gentler alternative to --ease-out: that curve front-loads
     almost all of its motion into the first ~150ms no matter how
     long the transition is set to run, which reads as a snap rather
     than a glide on anything with a noticeable scale or sideways
     move. This one spreads the deceleration across the full
     duration instead. */
  --ease-smooth: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  --header-h: 76px;
  --container-w: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* =========================================================
   Reset
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@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;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-4); }
}

/* =========================================================
   Reveal-on-scroll
   One shared mechanism (JS just toggles .is-visible — see main.js),
   but each section sets its own starting pose via the selectors
   further down this file, so the page doesn't repeat the exact same
   fade-up beat from top to bottom. Two rules of thumb that came out
   of an earlier round of bugs with this: a variant's pose only ever
   applies via :not(.is-visible), so it can never end up in a
   specificity fight with .reveal.is-visible resetting transform to
   none — and no variant touches clip-path on the .reveal element
   itself (see .about-editorial-clip below for why).
========================================================= */
.reveal {
  --reveal-dur: 650ms;
  --reveal-ease: var(--ease-out);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   Buttons & links
========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(47, 95, 255, 0.5);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -6px rgba(47, 95, 255, 0.55);
}
.btn-primary:active { transform: translateY(0); }

.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.btn-sm { padding: 0.65rem 1.25rem; font-size: 0.88rem; }
.btn-block { width: 100%; }

.link-inline {
  font-weight: 600;
  color: var(--color-accent-text);
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.link-inline:hover { border-color: currentColor; }

/* =========================================================
   Header
========================================================= */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(250, 248, 244, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  will-change: background;
}
.site-header.is-scrolled,
.site-header.nav-open {
  background: rgba(250, 248, 244, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-border);
}
.site-header.is-dark-section:not(.is-scrolled):not(.nav-open) {
  color: var(--color-on-dark);
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.logo {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.logo-img {
  height: 34px;
  width: auto;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* Cross-fades rather than an instant display:none/block swap — that
   hard cut is what read as an image "flashing" in and out right as
   the header clears the hero at the top of the page. The on-dark
   variant sits absolutely positioned over the on-light one (same
   image, same box) so the swap never shifts layout either. */
.logo-img-ondark {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.site-header.is-dark-section:not(.is-scrolled):not(.nav-open) .logo-img-onlight { opacity: 0; }
.site-header.is-dark-section:not(.is-scrolled):not(.nav-open) .logo-img-ondark { opacity: 1; }

.main-nav {
  display: none;
  gap: var(--space-4);
  font-size: 0.94rem;
  font-weight: 500;
}
.main-nav a { position: relative; padding: 0.4rem 0; opacity: 0.85; transition: opacity var(--dur-fast); }
.main-nav a:hover { opacity: 1; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.main-nav a:hover::after { transform: scaleX(1); }

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

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions .btn-sm { display: none; }
@media (min-width: 640px) {
  .header-actions .btn-sm { display: inline-flex; }
}

.nav-toggle {
  width: 44px; height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.mobile-nav {
  position: fixed;
  top: var(--header-h);
  inset-inline: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  gap: 0.25rem;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: 90;
}
.mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-nav a {
  padding: 0.9rem 0.5rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
}
.mobile-nav a:hover { background: var(--color-bg-alt); }
.mobile-nav .btn { margin-top: 0.5rem; }

@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

/* =========================================================
   Section basics
========================================================= */
.section {
  padding-block: var(--space-7);
  position: relative;
}
.section-alt { background: var(--color-bg-alt); }

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-5);
}
.section-head h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  margin-block: 0.5rem 0.9rem;
}
.section-lead {
  font-size: 1.08rem;
  color: var(--color-ink-soft);
  max-width: 56ch;
}

.eyebrow {
  display: inline-flex;
  align-items: stretch;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
/* A vertical rule instead of a horizontal dash: when the label wraps
   onto two lines (the hero eyebrow, on small screens), the rule
   stretches (align-items: stretch) to run alongside the full block —
   both lines — instead of sitting as a short stray mark next to just
   the first one. On single-line eyebrows it simply matches that one
   line's height, so the look stays consistent everywhere. */
.eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}
.eyebrow-dark { color: var(--color-accent-text); }

.section-dark {
  background: var(--color-dark);
  color: var(--color-on-dark);
  position: relative;
  overflow: hidden;
}
.section-dark .eyebrow { color: #8AA6FF; }
.section-dark .eyebrow::before { background: #8AA6FF; }

/* =========================================================
   Hero
========================================================= */
.hero {
  position: relative;
  background: var(--color-dark);
  color: var(--color-on-dark);
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--space-4));
  padding-bottom: var(--space-5);
}

@media (min-width: 960px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--space-6));
    padding-bottom: var(--space-7);
  }
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 60% 20%, black 40%, transparent 90%);
  mask-image: radial-gradient(ellipse 90% 70% at 60% 20%, black 40%, transparent 90%);
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(47, 95, 255, 0.28), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-5); align-items: start; }
}

.hero-title {
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.8rem);
  margin-bottom: var(--space-3);
}
.hero-title em {
  position: relative;
  font-style: italic;
  background: linear-gradient(100deg, #8AA6FF, #C9D5FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.8em;
  margin-left: 2px;
  vertical-align: -0.08em;
  background: #C9D5FF;
  animation: caret-blink 1s steps(1, end) infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { display: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--color-on-dark-soft);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.hero .link-inline { color: #C9D5FF; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.88rem;
  color: var(--color-on-dark-soft);
  border-top: 1px solid var(--color-dark-border);
  padding-top: var(--space-3);
}
.hero-trust strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--color-on-dark);
}

.hero-art { position: relative; }
.statue-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 746;
  margin-inline: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}
/* Mobile keeps its own compact size (see .hero-art-mobile below).
   On desktop, presence takes priority over lining the bottom edge up
   with any particular line of text: the grid row simply grows to fit
   it (no overlap risk with the next section), and it stays clear of
   the fixed header because .hero-inner aligns it to start, a touch
   below the title, not to the very top of the viewport. */
@media (min-width: 960px) {
  .statue-photo { max-width: 560px; }
}

/* =========================================================
   Problema
========================================================= */
.problem-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  position: relative;
}
@media (min-width: 768px) {
  .problem-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* A beaded dotted thread running behind the three icon circles, at
     their vertical centre — purely decorative, just enough to read
     as "a path through three points" without ranking them. Stays a
     single neutral accent regardless of each card's own tint below. */
  .problem-grid::before {
    content: "";
    position: absolute;
    top: 82px;
    left: 16%;
    right: 16%;
    height: 6px;
    background-image: radial-gradient(circle, var(--color-accent) 1.7px, transparent 1.8px);
    background-size: 14px 6px;
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0;
    z-index: 0;
    transition: opacity 600ms var(--ease-out);
    transition-delay: 150ms;
  }
  /* Stays invisible until at least one card has actually revealed —
     otherwise the thread just sits there fully drawn well before the
     cards scroll into view, and the two never feel connected. */
  .problem-grid:has(.problem-card.is-visible)::before {
    opacity: 0.4;
  }
}

/* Each card gets its own tint — same family as the brand accent, just
   a different shade — so the three read as related but distinct
   rather than identical clones. Purely chromatic: size, position and
   layout stay perfectly level between them. */
.problem-card:nth-child(1) { --card-accent: var(--color-accent); }
.problem-card:nth-child(2) { --card-accent: #5B4FE0; }
.problem-card:nth-child(3) { --card-accent: #1C8FA6; }

/* This grid pops in slightly scaled-up rather than sliding, so it
   reads differently from the sections around it. Duration is a touch
   longer than the default fade-up — a scale change reads as snappier
   than a slide at the same speed, so it needs the extra time to not
   feel like a flick. */
.problem-card.reveal {
  --reveal-dur: 850ms;
  --reveal-ease: var(--ease-smooth);
  /* Restated at this higher specificity (two classes) so it reliably
     wins over .problem-card's own transition above — same
     specificity, later in the file, would otherwise silently replace
     it and the reveal would snap in at hover speed instead of its
     own. The stagger delay is only on the reveal-facing properties
     (opacity/transform); the hover ones stay at 0 delay so hovering
     never feels laggy waiting for a stagger that was only ever meant
     for the initial entrance. */
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
    translate var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.problem-card.reveal:not(.is-visible) { transform: translateY(16px) scale(0.92); }

.problem-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  /* The hover lift uses the standalone `translate` property rather
     than `transform`, specifically so it doesn't share a property
     with the scroll-reveal pop below (which needs `transform` for
     its scale). Two different properties compose fine and can each
     keep their own transition speed; the same property listed twice
     with two different durations can't. */
  transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.problem-card:hover {
  translate: 0 -6px;
  box-shadow: 0 24px 48px -22px rgba(47, 95, 255, 0.32), 0 10px 22px -14px rgba(20, 23, 31, 0.14);
  border-color: color-mix(in srgb, var(--card-accent) 35%, var(--color-border));
}

/* Giant, semi-transparent numeral behind each card's content — the
   watermark treatment, back by request — tinted with that card's own
   accent so the variation shows here too. */
.problem-card::before {
  content: attr(data-index);
  position: absolute;
  top: -0.6rem;
  right: -0.25rem;
  font-family: var(--font-serif);
  font-size: 6.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--card-accent);
  opacity: 0.09;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.problem-card:hover::before { opacity: 0.14; transform: scale(1.04); }

.problem-icon {
  position: relative;
  z-index: 1;
  width: 68px; height: 68px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--card-accent);
  color: var(--card-accent);
  margin-bottom: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.problem-icon svg { width: 28px; height: 28px; }
.problem-card:hover .problem-icon {
  transform: scale(1.06);
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
}

.problem-card h3 { position: relative; z-index: 1; font-size: 1.15rem; margin-bottom: 0.5rem; }
.problem-card p { position: relative; z-index: 1; color: var(--color-ink-soft); font-size: 0.97rem; }

/* =========================================================
   Metodo
========================================================= */
.method-steps {
  display: grid;
  gap: var(--space-6) var(--space-3);
  position: relative;
}
@media (min-width: 860px) {
  .method-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: start; }
  /* A gently undulating dotted thread running through the three
     numbered circles — decorative rhythm only. It is perfectly
     symmetric (same wave repeated) so it never makes one step read
     as more important than another. */
  .method-steps::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 10%;
    right: 10%;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C25,0 25,20 50,10 C75,0 75,20 100,10' fill='none' stroke='%232F5FFF' stroke-width='4' stroke-dasharray='0.1 9' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 20px;
    opacity: 0;
    z-index: 0;
    transition: opacity 600ms var(--ease-out);
    transition-delay: 150ms;
  }
  /* Same reasoning as the problem-grid thread above: only draws once
     a step has actually revealed. */
  .method-steps:has(.method-step.is-visible)::before {
    opacity: 0.45;
  }
}

.method-step {
  position: relative;
  z-index: 1;
  text-align: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2.75rem var(--space-4) var(--space-4);
  /* translate rather than transform for the same reason as
     .problem-card above: keeps the hover lift out of the way of the
     scroll-reveal's own use of transform. */
  transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.section-alt .method-step { background: var(--color-surface); }
.method-step:hover {
  translate: 0 -4px;
  box-shadow: 0 20px 40px -20px rgba(20, 23, 31, 0.16);
}

/* Same size, same colour, same shadow on every step — the sequence is
   told by the connecting thread, not by singling out any one circle. */
.method-num {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent);
  box-shadow: 0 10px 22px -10px rgba(47, 95, 255, 0.55), 0 0 0 6px var(--color-bg-alt);
  z-index: 2;
}
.section-alt .method-num { box-shadow: 0 10px 22px -10px rgba(47, 95, 255, 0.55), 0 0 0 6px var(--color-surface); }

.method-body h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.method-body p { color: var(--color-ink-soft); font-size: 0.96rem; }

/* The three steps fan in from either side toward the middle one
   instead of all rising together — only shows up once there's room
   for three columns. Slower than the default fade-up for the same
   reason as the problem cards: a sideways glide over a short
   duration reads as a jump, not a motion. */
.method-step.reveal {
  --reveal-dur: 850ms;
  --reveal-ease: var(--ease-smooth);
  /* Same fix as .problem-card.reveal: restated here at higher
     specificity so it wins over .method-step's own hover transition
     instead of being silently replaced by it. */
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms),
    translate var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
@media (min-width: 860px) {
  .method-step.reveal:not(.is-visible):nth-child(1) { transform: translateY(8px) translateX(-30px); }
  .method-step.reveal:not(.is-visible):nth-child(3) { transform: translateY(8px) translateX(30px); }
}

/* =========================================================
   Chi siamo
========================================================= */
.dark-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 20% 40%, black 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 80% at 20% 40%, black 30%, transparent 85%);
  pointer-events: none;
}

/* Full-width editorial treatment: no photo, just generous typography
   over the dark grid pattern. */
.about-editorial {
  position: relative;
  max-width: 760px;
}
/* A slow upward wipe instead of a slide. The clip lives on an inner
   wrapper rather than on the .reveal element itself: a clip-path
   that collapses an element to zero visible height also makes it
   read as having zero area to IntersectionObserver in some engines,
   which would mean it can never be detected as "entered" — a
   deadlock where the trigger for revealing the block is the very
   thing hiding it from view. */
.about-editorial.reveal { --reveal-dur: 850ms; }
.about-editorial-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--reveal-dur, 850ms) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.about-editorial.reveal.is-visible .about-editorial-clip {
  clip-path: inset(0 0 0% 0);
}
@media (prefers-reduced-motion: reduce) {
  .about-editorial-clip { clip-path: none; }
}

.about-heading {
  color: var(--color-on-dark);
  margin-block: 0.75rem 2rem;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.12;
}
.about-heading em {
  font-style: italic;
  background: linear-gradient(100deg, #8AA6FF, #C9D5FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-lead {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.6rem);
  line-height: 1.45;
  color: var(--color-on-dark);
  max-width: 46ch;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-accent);
  margin-bottom: var(--space-4);
}

.about-body {
  color: var(--color-on-dark-soft);
  max-width: 62ch;
  margin-bottom: var(--space-2);
}

.about-signature {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-on-dark);
  margin-top: var(--space-3);
}

/* =========================================================
   Servizio
========================================================= */
.service-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
}

.service-feature {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.service-feature svg { color: var(--color-accent); margin-bottom: var(--space-2); }
.service-feature h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.service-feature p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* Odd/even items drift in from opposite sides — a quieter, sideways
   counterpart to the scale-pop used on the problem cards above. */
.service-feature.reveal { --reveal-dur: 580ms; }
.service-feature.reveal:not(.is-visible) { transform: translateY(10px) translateX(-24px); }
.service-feature.reveal:not(.is-visible):nth-child(even) { transform: translateY(10px) translateX(24px); }

/* =========================================================
   Garanzie
========================================================= */
.guarantee-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .guarantee-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .guarantee-grid { grid-template-columns: repeat(4, 1fr); }
}
.guarantee-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.guarantee-card svg { color: var(--color-accent-text); margin-bottom: var(--space-2); }
.guarantee-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.guarantee-card p { color: var(--color-ink-soft); font-size: 0.93rem; }

/* Alternating left/right entrances, quick and light — these four
   commitments are meant to feel matter-of-fact, not showy. */
.guarantee-card.reveal { --reveal-dur: 520ms; }
.guarantee-card.reveal:not(.is-visible) { transform: translateY(10px) translateX(-22px); }
.guarantee-card.reveal:not(.is-visible):nth-child(even) { transform: translateY(10px) translateX(22px); }

/* =========================================================
   FAQ / Accordion
========================================================= */
.faq-container { max-width: 820px; }
.accordion { border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0.25rem;
  text-align: left;
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 600;
}
.accordion-trigger .chev { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); color: var(--color-accent); }
.accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.accordion-panel > p {
  overflow: hidden;
  color: var(--color-ink-soft);
  padding-right: 2rem;
}
.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
}
.accordion-panel > p { min-height: 0; }
.accordion-item.is-open .accordion-panel > p { padding-bottom: var(--space-3); }
.accordion-panel { overflow: hidden; }

/* =========================================================
   Contatti / CTA
========================================================= */
.cta-section { padding-block: var(--space-7); }

.cta-grid {
  position: relative;
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 960px) {
  .cta-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Copy and form pull in from opposite sides on wide screens — a
   closing gesture that mirrors the two-column layout instead of
   just repeating the fade-up from every other section. */
@media (min-width: 960px) {
  .cta-copy.reveal:not(.is-visible) { transform: translateY(10px) translateX(-28px); }
  .contact-form.reveal:not(.is-visible) { transform: translateY(10px) translateX(28px); }
}

.cta-copy h2 { color: var(--color-on-dark); margin-block: 0.5rem 1rem; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }
.cta-copy p { color: var(--color-on-dark-soft); max-width: 48ch; margin-bottom: var(--space-4); }

.contact-methods { display: flex; flex-direction: column; gap: 0.9rem; }
.contact-method {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--color-on-dark);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-dark-border);
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.contact-method svg { color: #8AA6FF; }
.contact-method:hover { color: #8AA6FF; border-color: #8AA6FF; }

.contact-form {
  position: relative;
  background: var(--color-dark-elev);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .contact-form { padding: var(--space-5); }
}

.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label { font-size: 0.86rem; font-weight: 600; color: var(--color-on-dark-soft); }
.form-row-split { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .form-row-split { grid-template-columns: 1fr 1fr; }
}
.form-row-split > div { display: flex; flex-direction: column; gap: 0.4rem; }

.form-row input,
.form-row textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  color: var(--color-on-dark);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.form-row textarea { min-height: 110px; resize: vertical; }
.form-row input::placeholder,
.form-row textarea::placeholder { color: rgba(166, 172, 188, 0.6); }
.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.form-note { font-size: 0.82rem; color: var(--color-on-dark-soft); text-align: center; }
.form-success {
  font-size: 0.9rem;
  color: #86EFAC;
  text-align: center;
  font-weight: 600;
}

/* =========================================================
   Footer
========================================================= */
.site-footer {
  background: var(--color-dark);
  color: var(--color-on-dark-soft);
  padding-block: var(--space-6) var(--space-4);
}
.footer-inner {
  display: grid;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-dark-border);
  margin-bottom: var(--space-3);
}
@media (min-width: 860px) {
  .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; }
}
.footer-brand .logo { margin-bottom: 0.75rem; }
.footer-brand p { max-width: 32ch; font-size: 0.92rem; }

.footer-nav { display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.92rem; }
.footer-nav a:hover { color: var(--color-on-dark); }

.footer-meta { font-size: 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; }

/* =========================================================
   Utility
========================================================= */
.hero-art-mobile { display: block; max-width: 190px; margin-inline: auto; margin-block: var(--space-2) var(--space-4); }
.hero-art-desktop { display: none; }

@media (min-width: 960px) {
  .hero-art-mobile { display: none; }
  .hero-art-desktop {
    display: block;
    /* .hero-inner aligns items to start; pull up slightly so the
       statue's head clears just above the italic word on the H1's
       second line, rather than lining up with the column top. */
    margin-top: -0.7rem;
  }
}

@media (max-width: 767px) {
  .hero-inner { gap: var(--space-3); }
}