/* ============================================================================
   polish.css — SECTION & COMPONENT POLISH LAYER (additive, isolated, reversible)
   Consuleria.org — Sistema Visivo & Motion v1
   --------------------------------------------------------------------------
   Loads AFTER enhance.css. Elevates EVERY homepage section (servizi, insights +
   table, casi, faq, contatti, and the legal blocks privacy/termini/cookie/VDP)
   with stronger typographic hierarchy & rhythm, refined accent-hairline section
   dividers, monospace eyebrows (.fx-eyebrow), upgraded cards (gradient border +
   depth + hover micro-interactions), better list/table styling, polished form
   fields (focus glow), and tasteful section-entry transitions.

   HARD RULES honored:
     - Additive + isolated + reversible (remove this <link> to roll back; nothing
       here is required for the page to function).
     - NO JS touched. Pure CSS. GPU-friendly (transform/opacity only).
     - Stays coherent with enhance.css (same tokens: --brand #22d3ee,
       --brand2 #7c3aed, --accent-grad, --glow). Never re-defines them.
     - AA contrast preserved; visible focus rings kept.
     - prefers-reduced-motion: reduce fully respected (see final block).
     - Coarse-pointer / small-screen safe.
     - Selectors are namespaced to site sections/components; no global resets,
       no !important except inside the reduced-motion guard.
   ============================================================================ */

/* ---- 0) Local design tokens (scoped helpers; do NOT redefine enhance tokens) */
:root{
  --pl-hair: linear-gradient(90deg, transparent 0%, rgba(34,211,238,.55) 18%, rgba(124,58,237,.55) 82%, transparent 100%);
  --pl-card-border: linear-gradient(150deg, rgba(34,211,238,.28), rgba(124,58,237,.22) 55%, rgba(255,255,255,.04) 100%);
  --pl-ease: cubic-bezier(.22,.61,.36,1);
}

/* ===========================================================================
   1) SECTION RHYTHM + REFINED DIVIDERS WITH ACCENT HAIRLINE
   The base .section uses a flat border-top:1px solid var(--line). We keep that
   line but lay a luminous accent hairline over it, and add vertical rhythm.
   =========================================================================== */
.section{
  position:relative;
  padding-top:64px;
  padding-bottom:64px;
}
/* Accent hairline overlay riding on the existing 1px divider (top of section) */
.section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:1px;
  background:var(--pl-hair);
  opacity:.0;
  pointer-events:none;
  transform:scaleX(.6);
  transform-origin:50% 50%;
  transition:opacity .8s var(--pl-ease), transform .9s var(--pl-ease);
}
/* When the section reveals (legacy .on or enhance .in on a child) the hairline
   blooms. We also show it by default for no-JS robustness via :target/hover. */
.section:hover::before,
.section:focus-within::before,
.section:target::before{ opacity:.9; transform:scaleX(1); }

/* Heading hierarchy & rhythm inside sections */
.section > .container > h2,
.section h2{
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.15;
  letter-spacing:.01em;
  margin:6px 0 4px;
}
.section h2 + .small,
.section h2 + p{ margin-top:6px; }

/* A quiet lead paragraph treatment under headings */
.section .lead,
.section h2 ~ .small{ color:#aab2bd; }

/* ===========================================================================
   2) MONOSPACE EYEBROWS — refine the existing .fx-eyebrow (from enhance.css)
   enhance.css already styles .fx-eyebrow (uppercase + scanline cursor). We add
   a true monospace face + a faint chip backing so it reads as a "system label".
   =========================================================================== */
.fx-eyebrow{
  font-family:ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code",
              Menlo, Consolas, "Liberation Mono", monospace;
  font-size:11px;
  letter-spacing:.24em;
  padding:3px 0;
  margin-bottom:10px;
  color:#a7eef8;
  text-shadow:0 0 14px rgba(34,211,238,.25);
}

/* ===========================================================================
   3) UPGRADED CARDS — gradient border, depth, hover micro-interactions
   The base .card + enhance.css already give blur, lift, sheen sweep & glow.
   We add a true gradient hairline border (mask trick) and a crisper depth/hover
   without fighting enhance.css (which sets outline + box-shadow on :hover).
   =========================================================================== */
.card{
  border-radius:16px;
  transition:transform .22s var(--pl-ease),
             outline-color .25s ease,
             box-shadow .3s ease,
             border-color .25s ease;
}
/* Gradient border via a masked pseudo-ring (sits above sheen ::after, below
   content which enhance.css lifts to z-index:1). pointer-events:none. */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--pl-card-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.0;
  z-index:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.card:hover::before,
.card:focus-within::before{ opacity:.85; }

/* Slightly richer hover depth (kept consistent with enhance.css --glow) */
.card:hover,
.card:focus-within{
  transform:translateY(-5px);
  box-shadow:0 22px 60px -18px rgba(0,0,0,.6), var(--glow);
}

/* Card titles / strong leads get a touch more presence */
.card > h3,
.card > strong:first-child{
  display:block;
  font-size:15px;
  letter-spacing:.01em;
  margin-bottom:6px;
  color:#eef2f6;
}
.card p{ color:#c2c9d2; line-height:1.55; }

/* Featured full-width card (e.g. svc_homeland spans grid-column:1/-1) reads as
   a "primary" surface */
.card[style*="1/-1"]{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(34,211,238,.07), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(124,58,237,.08), transparent 55%),
    rgba(15,15,15,.5);
}

/* ===========================================================================
   4) BETTER LIST STYLING (services / insights / faq bodies)
   =========================================================================== */
.section .card ul,
.section .card ol{
  margin:8px 0 0;
  padding-left:0;
  list-style:none;
}
.section .card ul > li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
  line-height:1.5;
  color:#c2c9d2;
}
.section .card ul > li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:7px; height:7px;
  border-radius:2px;
  background:var(--accent-grad);
  box-shadow:0 0 8px rgba(34,211,238,.5);
  transform:rotate(45deg) translateY(-50%);
}
.section .card ol{ counter-reset:pl; }
.section .card ol > li{
  position:relative;
  padding-left:26px;
  margin:6px 0;
  counter-increment:pl;
  color:#c2c9d2;
}
.section .card ol > li::before{
  content:counter(pl);
  position:absolute;
  left:0; top:0;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:11px;
  color:#9fe9f4;
  border:1px solid rgba(34,211,238,.35);
  border-radius:6px;
  width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ===========================================================================
   5) INSIGHTS TABLE (.table.small in #insights) — readable, banded, accent head
   =========================================================================== */
.table{
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
}
.table th{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a7eef8;
  background:linear-gradient(180deg, rgba(34,211,238,.08), rgba(124,58,237,.05));
  border-top:none;
}
.table td{ color:#c8cfd8; }
.table tbody tr{ transition:background-color .18s ease; }
.table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.018); }
.table tbody tr:hover td{ background:rgba(34,211,238,.06); }
/* First column emphasis (often the label/regulation name) */
.table tbody td:first-child{ color:#e8edf2; font-weight:500; }

/* ===========================================================================
   6) POLISHED FORM FIELDS (#contatti) — focus glow, smoother surfaces
   Base: .input,.textarea have border:1px var(--line); outline:none.
   We add a calm idle border + an accent focus glow ring (AA-friendly).
   =========================================================================== */
.input,.textarea,select.input{
  transition:border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
  background:rgba(10,10,10,.6);
}
.input:hover,.textarea:hover,select.input:hover{
  border-color:rgba(34,211,238,.3);
}
.input:focus,.textarea:focus,select.input:focus{
  border-color:rgba(34,211,238,.7);
  background:rgba(12,14,16,.7);
  box-shadow:0 0 0 3px rgba(34,211,238,.18),
             0 8px 30px -14px rgba(124,58,237,.5);
  outline:none;
}
/* Placeholder legibility */
.input::placeholder,.textarea::placeholder{ color:#7c8794; }
/* Field labels (the small text above inputs) read as quiet mono captions */
#contatti label:not(.help) > .small,
#contatti .field > .small{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  letter-spacing:.08em;
  color:#9fb0bd;
}
/* Consent checkbox accent */
#contatti input[type="checkbox"]{ accent-color:#22d3ee; }

/* ===========================================================================
   7) INTERACTIVE BUTTONS — secondary "ghost" + hover sheen
   .btn (ghost base) gets a refined hover; .btn--primary is already a gradient
   (enhance.css). We add a ghost-accent sheen and a magnetic-ready transition.
   We DO NOT add JS; the .magnet/ripple hooks already exist in index.html.
   =========================================================================== */
.btn{
  border-radius:12px;
  transition:transform .18s var(--pl-ease),
             border-color .2s ease,
             box-shadow .25s ease,
             filter .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* Ghost/secondary buttons: any .btn that is NOT the primary CTA */
.btn:not(.btn--primary){
  border-color:rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(34,211,238,.04), rgba(0,0,0,0));
}
.btn:not(.btn--primary):hover{
  border-color:rgba(34,211,238,.5);
  box-shadow:0 8px 26px -12px rgba(34,211,238,.4),
             inset 0 0 0 1px rgba(34,211,238,.08);
}
/* Ghost hover sheen sweep (mirrors enhance.css primary sheen, lighter) */
.btn:not(.btn--primary)::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(34,211,238,.14) 46%, rgba(124,58,237,.16) 54%, transparent 100%);
  transform:translateX(-120%);
  transition:transform .6s var(--pl-ease);
  mix-blend-mode:screen;
  z-index:0;
}
.btn:not(.btn--primary):hover::after,
.btn:not(.btn--primary):focus-visible::after{ transform:translateX(120%); }
/* keep label/icon above the sweep */
.btn > *{ position:relative; z-index:1; }

/* Primary CTA: a hair more lift on hover, coherent with enhance.css glow */
.btn--primary:hover{ transform:translateY(-1px); }

/* ===========================================================================
   8) LEGAL BLOCKS (#privacy, #termini, #cookie, + VDP section)
   Quieter, document-like rhythm; accent eyebrow feel on the h2.
   =========================================================================== */
#privacy h2, #termini h2, #cookie h2,
#privacy ~ section h2{
  font-size:clamp(18px,2vw,22px);
}
#privacy, #termini, #cookie{
  color:#aeb6c0;
}
#privacy p, #termini p, #cookie p{
  line-height:1.7;
  max-width:72ch;
  color:#aeb6c0;
}
#privacy h2::after, #termini h2::after, #cookie h2::after{
  content:"";
  display:block;
  width:46px; height:2px;
  margin-top:8px;
  border-radius:2px;
  background:var(--accent-grad);
  opacity:.8;
}

/* ===========================================================================
   9) TASTEFUL SECTION-ENTRY (pairs with existing reveal; no JS)
   enhance.css/legacy handle .reveal opacity. Here we give NON-.reveal section
   headers a gentle staged fade keyed off :target / first paint, and stagger
   grids visually. We avoid adding new observed classes (must_not_break).
   We only enhance elements that ALREADY animate, plus a header micro-shift.
   =========================================================================== */
.section .fx-eyebrow{ will-change:opacity; }

/* Grid children get a subtle hover-group dim so the hovered card pops (desktop
   fine-pointer only; never on touch). Pure CSS sibling dimming. */
@media (hover:hover) and (pointer:fine){
  .grid-3:hover > .card:not(:hover),
  .grid-2:hover > .card:not(:hover){
    opacity:.82;
    transition:opacity .25s ease;
  }
  .grid-3 > .card,
  .grid-2 > .card{ transition:opacity .25s ease, transform .22s var(--pl-ease),
                              box-shadow .3s ease, border-color .25s ease; }
}

/* ===========================================================================
   10) ACCESSIBILITY / CONTRAST SAFETY ON SMALL SCREENS
   =========================================================================== */
@media (max-width:600px){
  .section{ padding-top:48px; padding-bottom:48px; }
  .card:hover,.card:focus-within{ transform:none; }      /* no lift jitter on touch scroll */
  .section::before{ transform:none; opacity:.7; }         /* show divider, no scale anim */
}

/* Coarse pointers: kill hover-only decorative sweeps (no sticky artifacts) */
@media (pointer:coarse){
  .btn:not(.btn--primary)::after{ display:none; }
  .grid-3:hover > .card:not(:hover),
  .grid-2:hover > .card:not(:hover){ opacity:1; }
}

/* ===========================================================================
   11) REDUCED MOTION — disable every transition/animation we introduced
   =========================================================================== */
@media (prefers-reduced-motion: reduce){
  .section::before{ transition:none; transform:none; opacity:.7; }
  .card,.card::before{ transition:none !important; }
  .card:hover,.card:focus-within{ transform:none; }
  .btn,.btn:hover,.btn:active,.btn--primary:hover{ transform:none; transition:none; }
  .btn:not(.btn--primary)::after{ display:none; }
  .input,.textarea,select.input{ transition:none; }
  .table tbody tr{ transition:none; }
  .grid-3:hover > .card:not(:hover),
  .grid-2:hover > .card:not(:hover){ opacity:1; transition:none; }
}