:root {
  --navy: #082b54;
  --navy-2: #0e4177;
  --blue: #1776d2;
  --cyan: #22b8cf;
  --red: #ef4444;
  --gold: #e8b643;
  --ink: #102a43;
  --muted: #526b80;
  --mist: #edf5fa;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: #dfe8ef; color: var(--ink); font-family: Inter, Arial, Helvetica, sans-serif; }
body { padding: 28px; }
.download-tools {
  position: sticky;
  z-index: 20;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 18px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 16px;
  background: rgba(8,43,84,.92);
  box-shadow: 0 12px 30px rgba(8,43,84,.24);
  backdrop-filter: blur(12px);
}
.download-tools span { margin: 0 8px 0 4px; color: #d8eafa; font-size: 13px; font-weight: 800; }
.download-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  color: #fff;
  background: #1776d2;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.download-link:last-child { background: #ef4444; }
.download-link:hover { transform: translateY(-2px); filter: brightness(1.08); }
.download-link:focus-visible { outline: 3px solid #67e8f9; outline-offset: 2px; }
.poster {
  position: relative;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 18px 50px rgba(8, 43, 84, .18);
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28mm;
  padding: 10mm 14mm;
  background: #fff;
  border-bottom: 1px solid #dce8f1;
}
.alitec-logo { width: 24mm; height: 24mm; object-fit: contain; }
.odoo-logo { width: 38mm; height: 24mm; object-fit: contain; }
.eyebrow { margin: 0 0 4mm; font-size: 3.2mm; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero { position: relative; padding: 15mm 14mm 12mm; color: #fff; background: linear-gradient(135deg, var(--navy), var(--navy-2) 62%, #126ca2); }
.hero::after { content: ""; position: absolute; right: -28mm; top: -32mm; width: 104mm; height: 104mm; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: inset 0 0 0 14mm rgba(255,255,255,.035), inset 0 0 0 28mm rgba(255,255,255,.025); }
h1 { position: relative; z-index: 1; max-width: 168mm; margin: 0; font-size: 14.2mm; line-height: .99; letter-spacing: -.04em; }
.hero-copy { position: relative; z-index: 1; max-width: 155mm; margin: 6mm 0 0; color: #dbeeff; font-size: 4.4mm; line-height: 1.5; }
.pill { display: inline-block; margin-top: 7mm; padding: 3mm 5mm; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; font-size: 3.4mm; font-weight: 800; }
.hero-content { position: relative; z-index: 2; max-width: 150mm; }
.hero-content h1, .hero-content .hero-copy { max-width: 140mm; }
.app-cloud { position: absolute; z-index: 3; right: 12mm; bottom: 12mm; width: 43mm; height: 43mm; }
.app-cloud::before, .app-cloud::after { content: ""; position: absolute; border: 1px dashed rgba(126, 228, 238, .42); border-radius: 50%; }
.app-cloud::before { inset: 1mm; }
.app-cloud::after { inset: 8mm; }
.app-node { position: absolute; display: grid; place-items: center; width: 11mm; height: 11mm; border-radius: 3.2mm; color: #fff; background: linear-gradient(145deg,#986f91,#714b67); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 3mm 7mm rgba(0,0,0,.18); font-size: 4.7mm; font-weight: 900; }
.app-node small { position: absolute; top: 11.5mm; color: #dff8ff; font-size: 2.25mm; font-weight: 800; white-space: nowrap; }
.app-node:nth-child(1) { left: 16mm; top: 0; }
.app-node:nth-child(2) { right: 0; top: 16mm; }
.app-node:nth-child(3) { left: 16mm; bottom: 0; }
.app-node:nth-child(4) { left: 0; top: 16mm; }
.app-node.center { left: 16mm; top: 16mm; background: linear-gradient(145deg,#28c2cf,#0a7da4); transform: scale(.82); }
.spark { position: absolute; width: 2mm; height: 2mm; border-radius: 50%; background: #67e8f9; box-shadow: 0 0 5mm #67e8f9; }
.spark.s1 { right: 61mm; top: 10mm; }.spark.s2 { right: 7mm; bottom: 8mm; }.spark.s3 { right: 54mm; bottom: 20mm; }
.content { padding: 11mm 14mm 8mm; }
.section-title { margin: 0 0 5mm; font-size: 7mm; line-height: 1.12; color: var(--navy); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.card { min-height: 39mm; padding: 5mm; border-radius: 4mm; background: var(--mist); border-top: 1.5mm solid var(--blue); }
.icon { width: 10mm; height: 10mm; display: grid; place-items: center; margin-bottom: 3mm; border-radius: 3mm; color: #fff; background: var(--blue); font-size: 5mm; font-weight: 900; }
.card h3 { margin: 0 0 2mm; font-size: 4mm; color: var(--navy); }
.card p { margin: 0; color: var(--muted); font-size: 3.15mm; line-height: 1.45; }
.band { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8mm; margin-top: 8mm; padding: 7mm; border-radius: 5mm; background: #f6f0fb; border: 1px solid #e5d7ef; }
.band h2 { margin: 0 0 3mm; color: #714b67; font-size: 6mm; }
.band p { margin: 0; color: var(--muted); font-size: 3.5mm; line-height: 1.5; }
.checks { margin: 0; padding: 0; list-style: none; }
.checks li { margin: 0 0 2.5mm; padding-left: 6mm; position: relative; font-size: 3.4mm; font-weight: 700; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: #1b9c85; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 8mm; margin: 8mm 14mm 0; padding: 8mm 9mm; border-radius: 5mm; color: #fff; background: var(--navy); }
.cta h2 { margin: 0 0 2mm; font-size: 6mm; }
.cta p { margin: 0; color: #d7e9f8; font-size: 3.4mm; }
.button { flex: 0 0 auto; padding: 4mm 6mm; border-radius: 2mm; background: var(--red); color: #fff; font-size: 3.7mm; font-weight: 900; text-decoration: none; }
.footer { display: flex; justify-content: space-between; padding: 7mm 14mm 8mm; color: var(--muted); font-size: 3mm; }
.footer strong { color: var(--navy); }
.mandate { display: grid; grid-template-columns: 34mm 1fr; gap: 7mm; align-items: center; margin: -1mm 14mm 0; padding: 7mm; border-radius: 0 0 5mm 5mm; background: #fff7e2; border: 1px solid #f0d690; }
.date-badge { padding: 5mm 3mm; border-radius: 4mm; text-align: center; color: #fff; background: #9b6500; }
.date-badge b { display: block; font-size: 8mm; line-height: 1; }
.date-badge span { font-size: 3mm; font-weight: 800; text-transform: uppercase; }
.mandate h2 { margin: 0 0 2mm; font-size: 5.4mm; color: #6d4700; }
.mandate p { margin: 0; color: #6f5b32; font-size: 3.3mm; line-height: 1.5; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-top: 6mm; }
.step { position: relative; min-height: 33mm; padding: 5mm 4mm; border-radius: 4mm; background: var(--mist); }
.step b { display: block; margin-bottom: 3mm; color: var(--blue); font-size: 6mm; }
.step h3 { margin: 0 0 2mm; font-size: 3.8mm; color: var(--navy); }
.step p { margin: 0; font-size: 3mm; line-height: 1.4; color: var(--muted); }
.fineprint { margin: 5mm 14mm 0; color: #6d7f8f; font-size: 2.6mm; line-height: 1.45; }
.flow-graphic { display: grid; grid-template-columns: 1fr 11mm 1fr 11mm 1fr; align-items: center; gap: 2mm; margin-top: 6mm; }
.flow-chip { min-height: 18mm; display: grid; grid-template-columns: 11mm 1fr; gap: 3mm; align-items: center; padding: 3mm; border-radius: 4mm; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.flow-chip b { display: grid; place-items: center; width: 10mm; height: 10mm; border-radius: 3mm; background: linear-gradient(145deg,#9b708f,#714b67); font-size: 4.4mm; }
.flow-chip span { font-size: 2.8mm; line-height: 1.3; font-weight: 800; color: #e5f8ff; }
.flow-arrow { text-align: center; color: #6ee7e1; font-size: 7mm; font-weight: 900; }
@media (max-width: 820px) {
  body { padding: 0; }
  .download-tools { position: relative; top: auto; width: calc(100% - 20px); margin: 10px; flex-wrap: wrap; }
  .download-tools span { width: 100%; text-align: center; }
  .poster { width: 100%; min-height: 100vh; box-shadow: none; }
  .app-cloud { opacity: .38; }
}
@page { size: A4 portrait; margin: 0; }
@media print {
  body { padding: 0; background: #fff; }
  .download-tools { display: none !important; }
  .poster {
    width: 291.67mm;
    min-height: 412.5mm;
    zoom: .72;
    box-shadow: none;
    break-after: page;
  }
}