/* ==========================================================================
   H2E S.r.l. — www.hduee.com
   Foglio di stile unico. Nessun framework, nessuna dipendenza esterna.
   Ordine dei layer: reset → token → base → layout → componenti → utility
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* --- Font (self-hosted, licenza SIL OFL — vedi assets/fonts/) ------------- */
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-var-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-var-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* --- Reset minimo --------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, canvas { display: block; max-width: 100%; }
  ol, ul { padding: 0; list-style: none; }
  a { color: inherit; }
}

/* --- Token di design ------------------------------------------------------ */
@layer tokens {
  :root {
    /* Colori: notte sul fiume + i due colori del marchio */
    --c-notte:    #041624;   /* sfondo */
    --c-fondale:  #0b2a3c;   /* superfici */
    --c-corrente: #18b4e6;   /* ciano marchio — acqua */
    --c-germoglio:#9bc81a;   /* lime marchio — energia */
    --c-germoglio-chiaro: #b4cd5a;
    --c-germoglio-tenue:  #cddd94;
    --c-schiuma:  #eaf5f2;   /* testo principale */
    --c-limo:     #8dadb8;   /* testo secondario */
    --c-linea:    rgb(141 173 184 / 0.22);

    /* Tipografia */
    --f-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
    --f-testo:   "Figtree", "Segoe UI", system-ui, sans-serif;

    /* Scala tipografica (rapporto ~1.25, fluida) */
    --t-0: 1.0625rem;                                  /* testo 17px */
    --t-1: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);/* lead */
    --t-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* h3 */
    --t-3: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);      /* h2 */
    --t-4: clamp(2.5rem, 1.2rem + 5.6vw, 6.25rem);     /* hero */
    --t-small: 0.9375rem;

    /* Spaziatura e misure */
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
    --sezione: clamp(5rem, 3rem + 8vw, 10rem);
    --max: 76rem;
    --misura: 34em;                                    /* ~70 caratteri */
    --raggio-bottone: 999px;
    --durata: 180ms;
  }
}

/* --- Base ----------------------------------------------------------------- */
@layer base {
  html {
    color-scheme: dark;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    min-height: 100vh;
    background: var(--c-notte);
    color: var(--c-schiuma);
    font-family: var(--f-testo);
    font-size: var(--t-0);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3 {
    font-family: var(--f-display);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  h2 { font-size: var(--t-3); }
  h3 { font-size: var(--t-2); font-weight: 400; line-height: 1.25; }
  p  { max-width: var(--misura); text-wrap: pretty; }
  strong { font-weight: 650; }

  a { text-decoration-color: rgb(24 180 230 / 0.5); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--durata), text-decoration-color var(--durata); }
  a:hover { color: var(--c-corrente); text-decoration-color: currentColor; }

  :focus-visible {
    outline: 2px solid var(--c-germoglio);
    outline-offset: 3px;
    border-radius: 4px;
  }
  ::selection { background: var(--c-germoglio); color: var(--c-notte); }
}

/* --- Layout --------------------------------------------------------------- */
@layer layout {
  .contenitore {
    width: min(100% - 2 * var(--gutter), var(--max));
    margin-inline: auto;
  }
  .sezione { padding-block: var(--sezione); }
  .sezione + .sezione { border-top: 1px solid var(--c-linea); }

  /* Griglia asimmetrica: titolo stretto a sinistra, contenuto largo a destra */
  .griglia {
    display: grid;
    gap: 2rem var(--gutter);
  }
  @media (min-width: 56rem) {
    .griglia { grid-template-columns: 5fr 7fr; align-items: start; }
  }
}

/* --- Componenti ----------------------------------------------------------- */
@layer components {

  /* Link "salta al contenuto" */
  .salta {
    position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
    padding: 0.6rem 1rem; border-radius: 8px;
    background: var(--c-germoglio); color: var(--c-notte); font-weight: 600; text-decoration: none;
    transition: top var(--durata);
  }
  .salta:focus { top: 1rem; }

  /* Testata */
  .testata {
    position: absolute; inset: 0 0 auto; z-index: 10;
    padding-block: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
  }
  .testata__riga { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .testata__logo { display: block; width: clamp(6.5rem, 5rem + 5vw, 9rem); }
  .testata__logo img { width: 100%; height: auto; }
  .nav { display: flex; align-items: center; gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); font-size: var(--t-small); }
  .nav a { text-decoration: none; color: var(--c-limo); }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--c-schiuma); }
  .nav__ancora { display: none; }
  @media (min-width: 44rem) { .nav__ancora { display: inline; } }

  /* Bottoni */
  .bottone {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3rem; padding: 0.7rem 1.5rem;
    border-radius: var(--raggio-bottone); border: 1px solid transparent;
    font: 600 var(--t-small) / 1 var(--f-testo); letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer;
    transition: background-color var(--durata), color var(--durata), border-color var(--durata), box-shadow var(--durata);
  }
  .bottone--primario { background: var(--c-germoglio); color: var(--c-notte); }
  .bottone--primario:hover { background: #b2dc2e; color: var(--c-notte); box-shadow: 0 0 0 6px rgb(155 200 26 / 0.18); }
  .bottone--secondario { border-color: rgb(234 245 242 / 0.35); color: var(--c-schiuma); }
  .bottone--secondario:hover { border-color: var(--c-corrente); color: var(--c-schiuma); background: rgb(24 180 230 / 0.08); }
  .nav .bottone { min-height: 2.5rem; padding: 0.55rem 1.1rem; color: var(--c-schiuma); border-color: rgb(234 245 242 / 0.3); }
  .nav .bottone:hover { border-color: var(--c-germoglio); }

  /* --- Hero con la corrente generativa ---------------------------------- */
  .hero {
    position: relative; isolation: isolate;
    min-height: 100vh; min-height: 100svh;
    display: grid; align-items: end;
    padding-block: 8rem clamp(3rem, 2rem + 6vh, 7rem);
    overflow: hidden;
  }
  .hero--breve { min-height: 62vh; min-height: 62svh; }
  .hero__corrente {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    background: var(--c-notte);
  }
  /* velo che garantisce la leggibilità del testo sopra le particelle */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(to top, var(--c-notte) 0%, rgb(4 22 36 / 0) 38%),
      linear-gradient(to bottom, rgb(4 22 36 / 0.85) 0%, rgb(4 22 36 / 0) 9rem),
      radial-gradient(ellipse 70% 60% at 18% 78%, rgb(4 22 36 / 0.82) 0%, rgb(4 22 36 / 0) 70%);
  }
  .hero__titolo {
    font-size: var(--t-4);
    font-weight: 250;
    line-height: 1.02;
    letter-spacing: -0.025em;
    max-width: 11ch;
  }
  .hero--breve .hero__titolo { max-width: none; }
  .hero__testo {
    margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
    font-size: var(--t-1); line-height: 1.5;
    color: var(--c-limo);
    max-width: 30em;
  }
  .hero__azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }

  /* Apertura orchestrata: un'unica sequenza al caricamento */
  @media (prefers-reduced-motion: no-preference) {
    .hero__titolo, .hero__testo, .hero__azioni {
      animation: emersione 1100ms cubic-bezier(.2,.7,.1,1) both;
    }
    .hero__testo  { animation-delay: 180ms; }
    .hero__azioni { animation-delay: 340ms; }
    @keyframes emersione {
      from { opacity: 0; transform: translateY(1.25rem); filter: blur(6px); }
      to   { opacity: 1; transform: none; filter: none; }
    }
  }

  /* --- Chi siamo --------------------------------------------------------- */
  .lead { font-size: var(--t-1); line-height: 1.55; color: var(--c-schiuma); }
  .prosa > * + * { margin-top: 1.25em; }
  .prosa p:not(.lead) { color: var(--c-limo); }

  /* --- Filiera: la catena di molecole del marchio ------------------------ */
  .intro { margin-top: 1rem; color: var(--c-limo); font-size: var(--t-1); }
  .filiera {
    --nodo: 1rem;
    display: grid; gap: 2.5rem;
    margin-top: clamp(3rem, 2rem + 4vw, 5rem);
    counter-reset: fase;
  }
  .fase { position: relative; padding-left: 3.25rem; counter-increment: fase; }
  .fase__nodo {
    position: absolute; left: 0.25rem; top: 0.1rem;
    width: var(--nodo); height: var(--nodo); border-radius: 50%;
    background: var(--colore);
    translate: calc((1.75rem - var(--nodo)) / 2) 0;
  }
  /* legame tra i nodi, spesso e arrotondato come nel logo */
  .fase:not(:last-child)::before {
    content: ""; position: absolute;
    left: 0.9375rem; top: 1rem; bottom: -2.6rem;
    width: 0.375rem; border-radius: 1rem;
    background: linear-gradient(var(--colore), var(--colore-dopo));
    opacity: 0.85;
  }
  .fase:nth-child(1) { --colore: var(--c-germoglio-tenue);  --colore-dopo: var(--c-germoglio-chiaro); --nodo: 1.125rem; }
  .fase:nth-child(2) { --colore: var(--c-germoglio-chiaro); --colore-dopo: var(--c-germoglio);        --nodo: 1.375rem; }
  .fase:nth-child(3) { --colore: var(--c-germoglio);        --colore-dopo: var(--c-germoglio);        --nodo: 1.625rem; }
  .fase:nth-child(4) { --colore: var(--c-germoglio);        --nodo: 1.75rem; }
  .fase:nth-child(4) .fase__nodo { box-shadow: 0 0 0 6px rgb(155 200 26 / 0.18), 0 0 28px 4px rgb(155 200 26 / 0.45); }
  .fase__numero {
    display: block; margin-bottom: 0.35rem;
    font: 400 var(--t-small) / 1 var(--f-display); color: var(--c-limo);
  }
  .fase__numero::before { content: counter(fase); }
  .fase h3 { margin-bottom: 0.6rem; }
  .fase p { color: var(--c-limo); font-size: 1rem; }

  @media (min-width: 56rem) {
    .filiera { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
    .fase { padding-left: 0; padding-top: 3.75rem; }
    .fase__nodo { left: 0; top: calc(0.875rem - var(--nodo) / 2); translate: 0 0; }
    .fase:not(:last-child)::before {
      left: calc(var(--nodo) - 0.25rem); right: calc(-1 * var(--gutter) + 0.25rem);
      top: 0.6875rem; bottom: auto; width: auto; height: 0.375rem;
      background: linear-gradient(90deg, var(--colore), var(--colore-dopo));
    }
  }

  /* Altri servizi: elenco piano, separato da filetti */
  .servizi { margin-top: clamp(4rem, 3rem + 4vw, 6rem); }
  .servizi__titolo { font-size: var(--t-2); font-weight: 400; }
  .servizi__elenco { display: grid; margin-top: 1.5rem; }
  .servizi__elenco li { padding-block: 1.25rem; border-top: 1px solid var(--c-linea); }
  .servizi__elenco h4 { font: 600 1.0625rem/1.3 var(--f-testo); color: var(--c-schiuma); }
  .servizi__elenco p { margin-top: 0.25rem; color: var(--c-limo); font-size: 1rem; }
  @media (min-width: 44rem) {
    .servizi__elenco { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  }

  /* --- Missione ---------------------------------------------------------- */
  .missione { position: relative; overflow: hidden; }
  .missione__frase {
    font: 250 clamp(1.875rem, 1.1rem + 3.4vw, 4rem) / 1.12 var(--f-display);
    letter-spacing: -0.02em;
    max-width: 18ch;
    margin-top: 1.5rem;
    color: var(--c-schiuma);
  }
  .missione__titolo { font: 400 var(--t-small)/1 var(--f-display); color: var(--c-limo); letter-spacing: 0; }
  .missione__colonne { display: grid; gap: 1.25rem var(--gutter); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); color: var(--c-limo); }
  @media (min-width: 56rem) { .missione__colonne { grid-template-columns: 1fr 1fr; } }

  /* --- Invito al contatto ----------------------------------------------- */
  .invito {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
    border-radius: clamp(1.25rem, 1rem + 1vw, 2rem);
    background:
      radial-gradient(ellipse 60% 120% at 100% 0%, rgb(155 200 26 / 0.22), transparent 60%),
      radial-gradient(ellipse 60% 120% at 0% 100%, rgb(24 180 230 / 0.22), transparent 60%),
      var(--c-fondale);
  }
  .invito h2 { max-width: 16ch; }
  .invito p { margin-top: 1.25rem; color: var(--c-limo); font-size: var(--t-1); }
  .invito__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }
  .invito__email { font-weight: 500; }

  /* --- Contatti ---------------------------------------------------------- */
  .recapiti { display: grid; gap: 0 var(--gutter); }
  .recapiti > div { padding-block: 1.5rem; border-top: 1px solid var(--c-linea); }
  .recapiti dt { font-size: var(--t-small); color: var(--c-limo); margin-bottom: 0.4rem; }
  .recapiti dd { font: 300 clamp(1.125rem, 1rem + 0.6vw, 1.5rem) / 1.35 var(--f-display); overflow-wrap: anywhere; }
  .recapiti dd a { text-decoration: none; }
  .recapiti dd a:hover { color: var(--c-germoglio); }
  .recapiti .nota { margin-top: 0.6rem; font: 400 var(--t-small)/1.5 var(--f-testo); }
  .recapiti .nota a { text-decoration: underline; text-decoration-color: rgb(24 180 230 / 0.5); }
  @media (min-width: 44rem) { .recapiti { grid-template-columns: 1fr 1fr; } }

  .privacy h2 { font-size: var(--t-2); font-weight: 400; }
  .privacy .prosa { color: var(--c-limo); font-size: 1rem; }
  .privacy h3 { font: 600 1.0625rem/1.3 var(--f-testo); color: var(--c-schiuma); margin-top: 2rem; }

  /* --- Piè di pagina ----------------------------------------------------- */
  .piede { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) 2.5rem; border-top: 1px solid var(--c-linea); font-size: var(--t-small); color: var(--c-limo); }
  .piede__griglia { display: grid; gap: 2.5rem var(--gutter); }
  .piede__logo { width: 11rem; height: auto; }
  .piede address { font-style: normal; line-height: 1.7; }
  .piede__titolo { color: var(--c-schiuma); font-weight: 600; }
  .piede__link { display: grid; gap: 0.4rem; align-content: start; }
  .piede__link a { text-decoration: none; }
  .piede__fondo { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; max-width: none; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--c-linea); }
  @media (min-width: 56rem) { .piede__griglia { grid-template-columns: 5fr 4fr 3fr; } }

  /* --- Pagina 404 -------------------------------------------------------- */
  .errore { min-height: 100svh; display: grid; align-content: center; gap: 1.5rem; }
  .errore h1 { font-size: var(--t-3); }
}

/* --- Utility -------------------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* --- Stampa --------------------------------------------------------------- */
@media print {
  .hero__corrente, .hero::after, .nav, .hero__azioni, .invito__azioni .bottone { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; padding-block: 2rem; }
}