/* ============================================================================
   refine.css — GRAPHIC-REFINEMENT LAYER (additive, isolated, reversible)
   Consuleria.org — Sistema Visivo & Motion v1
   --------------------------------------------------------------------------
   Loads AFTER polish.css. Sole purpose: make the MANY new homepage sections
   (#labs, #games-labs, #parametri, #secure-tools, #capacita, #servizi, #ai,
   #insights, #casi, #faq, #contatti, #pgp-home) read as ONE coherent system.

   It does NOT restructure markup. It only harmonizes:
     - vertical rhythm between heterogeneous section types (.section / .sc / .ai-home)
     - the three eyebrow systems (.fx-eyebrow / .sc-eyebrow / .ai-eyebrow):
       same baseline, same bottom gap, same tracking — distinct decorations kept
     - section heading scale across legacy + new (.sc) sections
     - card-grid gutter consistency across grid-2 / grid-3 / sc-grid-4
     - a couple of low-contrast text fixes on the new sections (AA)
     - one shared divider hairline so every section boundary feels intentional

   HARD RULES honored:
     - Additive + isolated + reversible (remove this <link> to roll back).
     - NO JS touched. Pure CSS. transform/opacity only (GPU-friendly).
     - Reuses existing tokens (--brand #22d3ee, --brand2 #7c3aed, --accent-grad,
       --line, --glow). Never redefines them.
     - AA contrast preserved; visible focus rings untouched.
     - prefers-reduced-motion: reduce fully respected (final block).
     - Namespaced to known section ids/classes. No global resets, no !important
       outside the reduced-motion guard.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0) Local helper tokens (scoped; do NOT redefine enhance/polish tokens)
   --------------------------------------------------------------------------- */
:root{
  --rf-gap: 22px;                 /* unified card-grid gutter */
  --rf-eyebrow-gap: 12px;         /* unified space below every eyebrow */
  --rf-eyebrow-track: .2em;       /* unified eyebrow letter-spacing */
  --rf-ease: cubic-bezier(.22,.61,.36,1);
}

/* ===========================================================================
   1) UNIFIED SECTION RHYTHM
   polish.css sets .section padding 64/64 (48/48 mobile). The new .sc and
   .ai-home sections ARE .section too, so they inherit it — good. We only
   guarantee the two "showcase" section types share the exact same internal
   header rhythm so the page cadence never stutters between sections.
   =========================================================================== */
.section.sc > .container,
.section.ai-home > .container{
  /* keep header block tight & identical to plain sections */
  display:block;
}

/* Heading scale parity: .sc / .ai-home h2 should match the polish.css scale
   used by plain sections (clamp 22–30) so titles don't jump size mid-page. */
.sc > .container > h2,
.ai-home > .container > h2{
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.15;
  letter-spacing:.01em;
  margin:6px 0 4px;
}
/* gradient-text titles can clip descenders on some renderers — give headroom */
.sc-grad-text,
.ai-grad{ padding-bottom:.02em; }

/* Lede paragraphs across the new sections share one measure + tone */
.sc-lede,
.ai-lead{ max-width:64ch; }

/* ===========================================================================
   2) EYEBROW HARMONIZATION (the 3 systems read as one family)
   We keep each eyebrow's signature decoration (fx scanline / sc hairline+caret
   / ai pill+caret) but align the THREE things the eye actually notices:
   baseline alignment, tracking, and the gap to the H2 below.
   =========================================================================== */
.fx-eyebrow,
.sc-eyebrow,
.ai-eyebrow{
  letter-spacing:var(--rf-eyebrow-track);
  margin-bottom:var(--rf-eyebrow-gap);
  vertical-align:baseline;
}
/* fx-eyebrow is inline by default; make its box behave like the others so the
   following <h2> sits at a consistent distance regardless of eyebrow type. */
.fx-eyebrow{ display:inline-block; }

/* Make all three eyebrow accent-marks sit on a comparable optical weight:
   sc leading hairline + ai pill border share the brand line; nudge fx so its
   color matches the cyan family used by the other two (AA on #0b0b0b). */
.fx-eyebrow{ color:#a5f3fc; }

/* ===========================================================================
   3) CARD-GRID CONSISTENCY
   Across the page grids are .grid-2 / .grid-3 / .grid-3.sc-grid-4. Different
   blocks were authored with slightly different inline margins; normalize the
   gutter so every card matrix breathes the same. (gap only — no layout change.)
   =========================================================================== */
.section .grid-2,
.section .grid-3{
  gap:var(--rf-gap);
}
@media (max-width:600px){
  .section .grid-2,
  .section .grid-3{ gap:16px; }
}

/* Equal-height cards inside the showcase grids so footers (CTA + path) align
   on a common baseline row-to-row. .sc-card is already flex-column. */
.sc .grid-2 > .sc-card,
.sc .grid-3 > .sc-card{ height:100%; }
.sc .grid-2,
.sc .grid-3{ align-items:stretch; }

/* The capacità matrix uses .grid-3.sc-grid-4 (4 cols ≥900px). Keep its gutter
   identical to the rest and let rows align. */
.sc-grid-4{ gap:var(--rf-gap); }

/* ===========================================================================
   4) DIVIDER HAIRLINE — make the polish.css accent hairline visible by DEFAULT
   at every section boundary (currently it blooms only on hover/target). A faint
   always-on hairline gives the long page a steady, intentional rhythm; hover
   still brightens it (polish.css handles that). We only raise the idle opacity.
   =========================================================================== */
.section::before{
  opacity:.28;                 /* was .0 idle in polish.css */
  transform:scaleX(1);
}
/* don't draw a hairline above the very first in-flow section (right after hero)
   to avoid a double line under the hero; #labs is first inside <main>. */
#labs.section::before{ opacity:0; }

/* ===========================================================================
   5) CONTRAST / LEGIBILITY FIXES ON NEW SECTIONS (AA on #0b0b0b)
   A few sub-labels in the new blocks were a touch dim. Lift to >= AA without
   changing hierarchy. Values verified lighter than the originals only.
   =========================================================================== */
.sc-card .sc-sub{ color:#a3b2c2; }     /* was #94a3b8 */
.sc-path{ color:#8fd9fb; opacity:.95; } /* was #7dd3fc @ .85 */
.sc-tag{ color:#aebfcf; }              /* was #9fb3c8 */
.sc-meta{ color:#aebfcf; }             /* was #9fb3c8 */

/* The legacy #labs cards use bare .small paragraphs; keep them readable in the
   same band as the new showcase copy. */
#labs .lab-card .small{ color:#c2c9d2; }

/* ===========================================================================
   6) ANCHOR-OFFSET for in-page nav (sticky header) — purely cosmetic safety so
   jumping to a section doesn't hide its eyebrow under the fixed header. Uses
   scroll-margin (no layout impact, no JS).
   =========================================================================== */
#labs, #games-labs, #parametri, #secure-tools, #capacita,
#servizi, #ai, #insights, #casi, #faq, #contatti{
  scroll-margin-top:84px;
}

/* ===========================================================================
   7) REDUCED MOTION — neutralize anything motion-adjacent we touched
   (we add no animations; this only guarantees the idle hairline stays static).
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  .section::before{ transition:none; transform:none; }
}

/* ===========================================================================
   12) HERO — telemetry panel. The "Indicatori sessione" card looked like a debug
   dump; re-frame it as an intentional forensic readout: panel + accent header
   with a live dot + monospace tabular data. (Additive, CSS-only.)
   =========================================================================== */
.hero .card{
  background:linear-gradient(180deg,rgba(34,211,238,.05),rgba(124,58,237,.04)),rgba(9,11,15,.55);
  border:1px solid rgba(34,211,238,.16);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 50px -26px rgba(124,58,237,.45);
}
.hero .card > .small{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:11.5px; letter-spacing:.005em; font-variant-numeric:tabular-nums;
}
.hero .card > .small:first-child{
  font-family:var(--font); text-transform:uppercase; letter-spacing:.14em;
  font-size:11px; font-weight:600; color:var(--brand);
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:9px;
}
.hero .card > .small:first-child::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--brand); box-shadow:0 0 0 3px rgba(34,211,238,.18);
  animation:fxBlink 1.7s steps(2,start) infinite;
}

/* ===========================================================================
   13) PARAMETRI — the visitor "Profilo tecnico" raw JSON (#profileDump) now reads
   as an intentional terminal/evidence block, not a bare dump.
   =========================================================================== */
#profileDump{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:rgba(8,10,14,.6);
  border:1px solid var(--line);
  border-left:2px solid var(--brand);
  border-radius:10px;
  padding:12px 14px;
  max-height:260px; overflow:auto;
  font-size:12px; line-height:1.55; color:#cfe9f2;
  box-shadow:inset 0 0 24px -8px rgba(34,211,238,.18);
}

@media (prefers-reduced-motion: reduce){ .hero .card > .small:first-child::before{ animation:none } }

/* ===========================================================================
   14) NO HORIZONTAL OVERFLOW — the standards ticker marquee (.ticker__inner) and
   the full-bleed fixed FX extend past the viewport, causing a horizontal scrollbar.
   `overflow-x:clip` trims the excess WITHOUT creating a scroll container, so the
   sticky header keeps working (unlike overflow:hidden). Also clip the ticker itself.
   =========================================================================== */
html, body { overflow-x: clip; max-width: 100%; }
.ticker { overflow: hidden; max-width: 100%; }

/* ===========================================================================
   15) FOOTER — rendi i DATI SOCIETARI obbligatori chiaramente visibili e
   identificabili (erano grigio spento). Etichetta + contrasto migliore.
   =========================================================================== */
.footer{ border-top:1px solid rgba(34,211,238,.14); padding-top:24px; }
.footer [data-i18n="footer_company"]{ color:#e6edf5; font-weight:600; font-size:14px; line-height:1.75; }
.footer [data-i18n="footer_vat"]{ color:#c4cedb; font-size:13.5px; line-height:1.75; }
.footer [data-i18n="footer_company"]::before{
  content:"Dati societari"; display:block;
  text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; font-weight:700;
  color:var(--brand); margin-bottom:7px;
}