/* Sito 3D v2: sistema di design Deploiable. Fonte: Assets/Colori, Tipografia, Voce e copy. Valori, non intenzioni. */
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-300.woff2') format('woff2');font-weight:300;font-display:block}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-display:block}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-display:block}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-900.woff2') format('woff2');font-weight:900;font-display:block}

:root{
  /* colore: sei ruoli, un accento */
  --mist:#F1F3EA; --forest:#10261B; --lime:#C8F25A; --pine:#1C3A2A; --sage:#8FA596; --line:#D3D9CA;
  --canvas:var(--mist); --surface:#F8F9F3; --ink:var(--forest); --ink-soft:#4A6054; --accent:var(--lime); --accent-ink:var(--forest);
  --hairline:var(--line);

  /* tipografia */
  --font:'Satoshi','DM Sans',Arial,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --t-display:clamp(3rem,1.4rem + 5.2vw,6rem);   --lh-display:.98;  --tr-display:-.045em;
  --t-h1:clamp(2.5rem,1rem + 3.6vw,4.5rem);       --lh-h1:1.02;      --tr-h1:-.035em;
  --t-h2:clamp(2rem,1.2rem + 1.9vw,2.875rem);     --lh-h2:1.08;      --tr-h2:-.03em;
  --t-h3:clamp(1.5rem,1.2rem + .8vw,1.75rem);     --lh-h3:1.2;       --tr-h3:-.02em;
  --t-h4:1.25rem; --t-lead:1.1875rem; --t-body:1.0625rem; --t-small:.9375rem; --t-mono:.8125rem;
  --lh-body:1.55; --measure:62ch;

  /* spazio, base 4 */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section:clamp(96px,6vw + 56px,152px); --edge:16px; --container:1360px; --gutter:24px;

  /* forma e profondità: tre rilievi, una scala di raggi */
  --r-s:8px; --r-m:20px; --r-l:28px; --r-pill:999px;
  --e1:0 1px 2px rgba(16,38,27,.06); --e2:0 10px 28px -10px rgba(16,38,27,.18); --e3:0 28px 64px -24px rgba(16,38,27,.30);
  --edge-light:inset 0 1px 0 rgba(255,255,255,.7);

  /* movimento */
  --ease-out:cubic-bezier(.23,1,.32,1); --t-hover:140ms; --t-press:100ms;
}
@media (min-width:640px){:root{--edge:40px}}
@media (min-width:1024px){:root{--edge:80px}}

/* fondo Forest: ripetere i token E il colore, perché color si eredita come valore calcolato */
.on-forest{--canvas:var(--forest);--surface:var(--pine);--ink:var(--mist);--ink-soft:var(--sage);--hairline:#2E4A3B;background:var(--canvas);color:var(--ink)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:var(--t-body);line-height:var(--lh-body);font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance}
p{margin:0;max-width:var(--measure);text-wrap:pretty}
.container{width:100%;max-width:calc(var(--container) + 2*var(--edge));margin-inline:auto;padding-inline:var(--edge)}
.t-display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.t-h1{font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1)}
.t-h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2)}
.t-h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3)}
.t-lead{font-size:var(--t-lead);line-height:1.45;color:var(--ink-soft)}
.light{font-weight:300}.black{font-weight:900}
.mono{font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.on-forest .light{font-weight:400}   /* chiaro su scuro: un gradino di peso in più */
.on-forest p{line-height:1.62}

::selection{background:var(--lime);color:var(--forest)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-s)}
.on-forest :focus-visible{outline-color:var(--lime)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}

/* pulsanti: una etichetta per intento, "Book a call", una riga */
.btn{display:inline-flex;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-5);border-radius:var(--r-pill);font:500 var(--t-small)/1 var(--font);white-space:nowrap;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) var(--ease-out)}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:#D4F77A}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;pointer-events:none}
@media (hover:none){.btn--primary:hover{background:var(--accent)}}

/* scheda delle due linee: la sola scheda del sito */
.line-card{display:flex;flex-direction:column;gap:var(--s-5);padding:var(--s-3);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--edge-light),var(--e1);text-decoration:none}
.line-card__media{border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/3;background:var(--line)}
.line-card__media img,.line-card__media video{width:100%;height:100%;object-fit:cover}
.line-card__body{display:flex;flex-direction:column;gap:var(--s-4);padding:0 var(--s-3) var(--s-3)}
.line-card__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);border-top:1px solid var(--hairline);padding-top:var(--s-4);color:var(--ink-soft);font-size:var(--t-body)}
.circle-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--ink);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}