/* GreenClaims Radar — static marketing site.
   Brand: Pino #1B4C43 · Turchese #3FB29C · Nebbia #E7F2F0, cool neutrals.
   Everything (fonts included) is served from this domain: no third parties. */

/* ---------- Self-hosted type ---------- */
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-italic-var.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --pino: #1B4C43;
  --pino-scuro: #143B34;
  --turchese: #3FB29C;
  --turchese-testo: #257A6A;   /* AA-readable accent on white */
  --nebbia: #E7F2F0;
  --nebbia-chiara: #F3F8F7;
  --ink: #152220;
  --muted: #4E615C;
  --faint: #92A8A3;
  --line: #DBE7E4;
  /* Semaforo (riservato alla classificazione dei rilievi) */
  --red: #B42318; --red-bg: #FCECE9; --red-line: #F5C8BF;
  --amber: #8A5A00; --amber-bg: #FCF3E1; --amber-line: #F3DFAE;
  --green: #257A6A; --green-bg: #DCEFEA; --green-line: #BFE3DB;

  --sans: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Clash Display", "Segoe UI", system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --radius: 18px;
  --maxw: 1080px;
  --nav-h: 72px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--nebbia-chiara); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--turchese-testo); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: #DCEFEA; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .005em; line-height: 1.15; color: var(--pino); margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.kicker {
  display: inline-block; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--turchese-testo);
  border: 1px solid var(--green-line); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px;
  background: #fff;
}
.accent { font-family: var(--serif); font-style: italic; font-weight: 500; }
section { padding: 84px 0; }
.lead { font-size: 1.14rem; color: var(--muted); max-width: 46em; }

/* Star bullets (4-point star, dal linguaggio della presentazione) */
ul.stars { list-style: none; padding: 0; margin: 0 0 1em; }
ul.stars li { position: relative; padding-left: 1.7em; margin-bottom: .55em; }
ul.stars li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--turchese); }

/* ---------- Nav ---------- */
#nav {
  position: sticky; top: 0; z-index: 50; background: rgba(243, 248, 247, .92);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; }
.nav-logo img { height: 44px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); font-weight: 600; font-size: .92rem; }
.nav-links a:hover { color: var(--turchese-testo); text-decoration: none; }
.nav-links a.cta {
  background: var(--pino); color: #fff; border-radius: 999px; padding: 9px 20px;
}
.nav-links a.cta:hover { background: var(--pino-scuro); }
#menuToggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; cursor: pointer; color: var(--pino);
}

/* ---------- Hero ---------- */
.hero { background: var(--pino); color: #fff; padding: 96px 0 88px; }
.hero .kicker { color: var(--nebbia); border-color: rgba(231, 242, 240, .35); background: transparent; }
.hero h1 { color: #fff; max-width: 15em; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--turchese); }
.hero .lead { color: rgba(255, 255, 255, .88); }
.hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; font-weight: 700; border-radius: 999px; padding: 13px 28px;
  font-size: 1rem;
}
.btn-light { background: #fff; color: var(--pino); }
.btn-light:hover { background: var(--nebbia); text-decoration: none; }
.btn-ghost { border: 1px solid rgba(231, 242, 240, .45); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.btn-pino { background: var(--pino); color: #fff; }
.btn-pino:hover { background: var(--pino-scuro); text-decoration: none; }
.hero-note { margin-top: 26px; font-size: .9rem; color: rgba(255, 255, 255, .6); max-width: 44em; }
.hero-mark { float: right; width: 150px; margin: 0 0 20px 30px; opacity: .95; }
@media (max-width: 760px) { .hero-mark { display: none; } }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 20px;
}
.card h3 { margin-bottom: .4em; }
.card p { font-size: .95rem; color: var(--muted); margin-bottom: 0; }
.card .tag {
  display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--turchese-testo); background: var(--green-bg);
  border-radius: 6px; padding: 3px 9px; margin-bottom: 12px;
}

/* ---------- Semaforo ---------- */
.sem { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.dot.red { background: var(--red); } .dot.amber { background: var(--amber); } .dot.green { background: var(--green); }
.sem-card { border-radius: var(--radius); padding: 24px 24px 18px; border: 1px solid; background: #fff; }
.sem-card.red { border-color: var(--red-line); background: var(--red-bg); }
.sem-card.amber { border-color: var(--amber-line); background: var(--amber-bg); }
.sem-card.green { border-color: var(--green-line); background: var(--green-bg); }
.sem-card strong { display: block; font-family: var(--display); font-size: 1.05rem; margin-bottom: 6px; }
.sem-card.red strong { color: var(--red); } .sem-card.amber strong { color: var(--amber); } .sem-card.green strong { color: var(--green); }
.sem-card p { font-size: .92rem; color: var(--ink); margin: 0; }

/* ---------- Process steps ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: .8rem; color: var(--turchese);
  letter-spacing: .12em; margin-bottom: 10px;
}
.step h3 { font-size: 1rem; }
.step p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- Dark band sections ---------- */
.band { background: var(--pino); color: #fff; }
.band h2, .band h3 { color: #fff; }
.band .lead, .band p { color: rgba(255, 255, 255, .85); }
.band .kicker { color: var(--nebbia); border-color: rgba(231, 242, 240, .35); background: transparent; }
.band .card { background: rgba(255, 255, 255, .06); border-color: rgba(231, 242, 240, .18); }
.band .card p { color: rgba(255, 255, 255, .78); }
.band ul.stars li::before { color: var(--turchese); }
.band a { color: var(--turchese); }

/* ---------- Sector / context ---------- */
.deadline {
  font-family: var(--mono); color: var(--turchese-testo); font-size: .85rem; letter-spacing: .06em;
}
.quoteblock {
  border-left: 3px solid var(--turchese); background: #fff; border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 26px; margin: 26px 0; font-family: var(--serif); font-style: italic;
  font-size: 1.12rem; color: var(--pino);
}

/* ---------- Contact ---------- */
.contact-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px; text-align: center;
}
.contact-box .mail { font-family: var(--display); font-size: clamp(1.3rem, 3.4vw, 2rem); color: var(--pino); }

/* ---------- Disclaimer ---------- */
.disclaimer {
  border: 1px solid var(--line); background: var(--nebbia); border-radius: var(--radius);
  padding: 22px 26px; font-size: .88rem; color: var(--muted);
}
.disclaimer strong { color: var(--ink); }

/* ---------- Footer ---------- */
footer { background: var(--pino-scuro); color: rgba(255, 255, 255, .75); padding: 54px 0 40px; font-size: .9rem; }
footer .footer-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
footer img { height: 46px; width: auto; }
footer a { color: var(--nebbia); }
footer .payoff { font-family: var(--serif); font-style: italic; color: rgba(255, 255, 255, .65); margin-top: 14px; }
footer .fineprint { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(231, 242, 240, .15); font-size: .8rem; color: rgba(255, 255, 255, .55); }

/* ---------- Privacy page ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.35rem; margin-top: 2em; }
.prose ul { padding-left: 1.2em; }

/* ---------- Mobile nav ---------- */
@media (max-width: 860px) {
  #menuToggle { display: block; }
  .nav-links {
    display: none; position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column;
    background: var(--nebbia-chiara); border-bottom: 1px solid var(--line);
    padding: 18px 24px 26px; gap: 16px; align-items: flex-start;
  }
  .nav-links.open { display: flex; }
  section { padding: 60px 0; }
}