/* Poligon Cat — landing.
   Carta calda, legno, un solo accento arancione. Tipografia netta:
   Space Grotesk per i titoli, Work Sans per il testo. */

@font-face { font-family:'Space Grotesk'; src:url('/fonts/spacegrotesk-var.woff2') format('woff2'); font-weight:300 700; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('/fonts/worksans-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('/fonts/worksans-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Newsreader'; src:url('/fonts/newsreader-italic-400.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

:root {
  --paper:#f5f0e8;
  --paper-2:#ece5d9;
  --ink:#1e1a14;
  --ink-soft:#5f574b;
  --wood:#c98f4f;
  --accent:#d9662a;
  --accent-ink:#b64f1c;
  --line:#ddd2c0;
  --card:#fffdf9;
  --dark:#1f1b15;
  --maxw:1200px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.65 'Work Sans', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent-ink); }
h1,h2,h3 { font-family:'Space Grotesk', sans-serif; line-height:1.1; letter-spacing:-.02em; margin:0; }
em { font-style:normal; color:var(--accent); }

.eyebrow {
  display:inline-block; font:600 12px/1 'Space Grotesk', sans-serif;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  margin-bottom:18px;
}

.btn {
  display:inline-block; font:600 15px 'Work Sans', sans-serif; text-decoration:none;
  padding:12px 22px; border-radius:10px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .12s, background .15s, border-color .15s;
}
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--accent); color:#fff5ee; }
.btn.primary:hover { background:var(--accent-ink); }
.btn.ghost { background:transparent; border-color:var(--line); color:var(--ink); }
.btn.ghost:hover { border-color:var(--wood); background:var(--paper-2); }
.btn.big { padding:15px 30px; font-size:16px; border-radius:12px; }

/* ───────────────────────── nav ───────────────────────── */
.nav {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:28px;
  max-width:var(--maxw); margin:0 auto; padding:16px 28px;
  background:rgba(245,240,232,.82); backdrop-filter:blur(10px);
}
.nav::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }
.brand { display:flex; align-items:center; gap:10px; font:600 20px 'Space Grotesk', sans-serif; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.brand svg { width:28px; height:28px; fill:var(--accent); }
.nav-links { display:flex; gap:24px; margin-left:auto; }
.nav-links a { color:var(--ink-soft); text-decoration:none; font-size:15px; font-weight:600; }
.nav-links a:hover { color:var(--accent-ink); }
.nav .btn { margin-left:8px; }

/* ───────────────────────── hero ───────────────────────── */
.hero {
  max-width:var(--maxw); margin:0 auto; padding:70px 28px 60px;
  display:grid; grid-template-columns:1.05fr 1.15fr; gap:56px; align-items:center;
}
.hero h1 { font-size:clamp(34px, 4.6vw, 60px); font-weight:600; margin-bottom:22px; }
.lead { font-size:19px; color:var(--ink-soft); max-width:34em; margin:0 0 30px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-facts { list-style:none; display:flex; gap:30px; padding:0; margin:0; flex-wrap:wrap; }
.hero-facts li { font-size:14px; color:var(--ink-soft); }
.hero-facts b { display:block; font:600 26px 'Space Grotesk', sans-serif; color:var(--ink); letter-spacing:-.02em; }
.hero-img { margin:0; }
.hero-img img {
  width:100%; border-radius:16px; border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(60,40,20,.4);
  background:var(--paper-2);
}
figcaption { font-size:13px; color:var(--ink-soft); margin-top:12px; font-style:italic; font-family:'Newsreader', serif; }

/* ───────────────────────── bande ───────────────────────── */
.band { max-width:var(--maxw); margin:0 auto; padding:76px 28px; }
.band.alt { max-width:none; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.band.alt > * { max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.section-head { max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head h2 { font-size:clamp(28px,3.4vw,40px); font-weight:600; margin-bottom:14px; }
.section-head p { color:var(--ink-soft); margin:0; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.reverse .split-text { order:2; }
.split-text h2 { font-size:clamp(26px,3.2vw,38px); font-weight:600; margin-bottom:20px; }
.split-text p { color:var(--ink-soft); margin:0 0 22px; }
.split-img img { width:100%; border-radius:14px; border:1px solid var(--line); box-shadow:0 24px 48px -28px rgba(60,40,20,.38); background:var(--card); }

.checks { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.checks li { position:relative; padding-left:32px; color:var(--ink); }
.checks li::before {
  content:''; position:absolute; left:0; top:3px; width:19px; height:19px;
  border-radius:6px; background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ───────────────────────── griglia moduli ───────────────────────── */
.mod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.mod {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; transition:transform .14s, box-shadow .14s, border-color .14s;
}
.mod:hover { transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(60,40,20,.4); border-color:var(--wood); }
.mod svg { width:44px; height:44px; margin-bottom:14px; }
.mod svg path { fill:var(--wood); }
.mod h3 { font-size:18px; font-weight:600; margin-bottom:7px; }
.mod p { font-size:14px; line-height:1.5; color:var(--ink-soft); margin:0; }

/* ───────────────────────── steps ───────────────────────── */
.steps { list-style:none; padding:0; margin:0 0 46px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.steps li { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:30px 26px; position:relative; }
.step-n { display:inline-grid; place-content:center; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; font:600 20px 'Space Grotesk', sans-serif; margin-bottom:18px; }
.steps h3 { font-size:20px; font-weight:600; margin-bottom:10px; }
.steps p { color:var(--ink-soft); font-size:15px; margin:0; }
.center { text-align:center; }

/* ───────────────────────── spec cards ───────────────────────── */
.spec-cards { display:flex; flex-direction:column; gap:10px; margin:22px 0; }
.spec { display:flex; align-items:baseline; gap:14px; padding:14px 18px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.spec b { font:600 16px 'Space Grotesk', sans-serif; min-width:130px; }
.spec span { color:var(--ink-soft); font-size:14px; }
.fineprint { font-size:14px !important; color:var(--ink-soft); border-left:3px solid var(--wood); padding-left:16px; }

/* ───────────────────────── final ───────────────────────── */
.final { text-align:center; padding:96px 28px; background:var(--dark); color:var(--paper); }
.final h2 { font-size:clamp(28px,3.6vw,44px); font-weight:600; margin-bottom:16px; color:#fff; }
.final p { color:#c3b8a6; max-width:36em; margin:0 auto 30px; }

/* ───────────────────────── footer ───────────────────────── */
.foot { max-width:var(--maxw); margin:0 auto; padding:48px 28px 70px; text-align:center; }
.foot-brand { display:inline-flex; align-items:center; gap:9px; font:600 18px 'Space Grotesk', sans-serif; margin-bottom:12px; }
.foot-brand svg { width:24px; height:24px; fill:var(--accent); }
.foot p { color:var(--ink-soft); font-size:14px; margin:5px 0; }
.muted { color:var(--wood) !important; font-size:13px !important; }

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:40px; gap:36px; }
  .hero-img { order:-1; }
  .split, .split.reverse { grid-template-columns:1fr; gap:30px; }
  .split.reverse .split-text { order:0; }
  .steps { grid-template-columns:1fr; }
  .mod-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; }
}
@media (max-width:520px) {
  .mod-grid { grid-template-columns:1fr; }
  .hero-facts { gap:20px; }
}