@page { size: A4; margin: 0; }
:root {
  --blue: #0076a3; --deep: #00455f; --orange: #ea8d00; --ink: #1d2b33;
  --muted: #5a6b75; --pale: #eef6fa; --line: #d5e4ec; --white: #ffffff;
  --sand: #fdf3e3;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--white); color: var(--ink); }
body { font-family: 'Inter', sans-serif; font-size: 9.6pt; line-height: 1.45;
       -webkit-print-color-adjust: exact; print-color-adjust: exact; }
h1, h2, h3, h4, .n, .num { font-family: 'Nunito', sans-serif; }
.page { width: 210mm; height: 297mm; overflow: hidden; position: relative;
        page-break-after: always; break-after: page; }
.page:last-child { page-break-after: auto; break-after: auto; }
.pad { padding: 15mm 16mm 0; }
.eyebrow { color: var(--orange); font-weight: 600; letter-spacing: .08em;
           text-transform: uppercase; font-size: 8.3pt; }
h2 { color: var(--deep); font-size: 21pt; line-height: 1.15; font-weight: 800; margin: 1.5mm 0 4mm; }
h3 { color: var(--deep); font-size: 11pt; font-weight: 800; line-height: 1.25; }
h4 { color: var(--deep); font-size: 9.6pt; font-weight: 800; }
.lead { font-size: 11pt; max-width: 170mm; }
.muted { color: var(--muted); }
.small { font-size: 8.4pt; }
.folio { position: absolute; bottom: 8mm; left: 16mm; right: 16mm; display: flex; align-items: center;
         justify-content: space-between; color: var(--muted); font-size: 7.8pt;
         border-top: 1px solid var(--line); padding-top: 2.6mm; }
.folio img { height: 4mm; display: block; }
.src { position: absolute; left: 16mm; right: 16mm; bottom: 17mm; font-size: 6.6pt; color: var(--muted); line-height: 1.35; }
.ico { width: 8.5mm; height: 8.5mm; flex: none; color: var(--blue); }
code, .code { font-family: 'JetBrains Mono', monospace; }

/* generic blocks */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.5mm; }
.box { background: var(--pale); border-radius: 3mm; padding: 5mm; }
.box p { color: var(--muted); font-size: 8.9pt; margin-top: 1mm; }
.box.dark { background: var(--deep); color: #fff; }
.box.dark h3, .box.dark h4 { color: #fff; }
.box.dark p { color: #d7ebf3; }
.box.sand { background: var(--sand); }
.row { display: flex; gap: 3.5mm; align-items: flex-start; }
ul.list li { list-style: none; position: relative; padding-left: 4.5mm; margin-top: 1.3mm; font-size: 8.9pt; }
ul.list li::before { content: ""; position: absolute; left: 0; top: 1.9mm; width: 1.8mm; height: 1.8mm;
                     border-radius: 50%; background: var(--orange); }
.box.dark ul.list li { color: #e3f1f7; }
ul.check li { list-style: none; position: relative; padding-left: 6.5mm; margin-top: 2.2mm; font-size: 9.2pt; }
ul.check li::before { content: ""; position: absolute; left: 0; top: 1.1mm; width: 3.2mm; height: 1.7mm;
                      border-left: .6mm solid var(--orange); border-bottom: .6mm solid var(--orange); transform: rotate(-45deg); }

/* stats */
.stat .num { font-size: 25pt; font-weight: 800; color: var(--orange); line-height: 1; }
.stat .num small { font-size: 13pt; }
.stat p { font-size: 8.6pt; margin-top: 1.6mm; color: var(--muted); }
.stat .who { font-size: 7pt; color: var(--muted); margin-top: 1.2mm; text-transform: uppercase; letter-spacing: .05em; }
.band-stats { background: var(--deep); color: #fff; border-radius: 3mm; padding: 6mm; display: grid;
              grid-template-columns: repeat(3, 1fr); gap: 6mm; }
.band-stats p { color: #d7ebf3; }
.band-stats .who { color: #9cc9dc; }

/* process flow */
.flow { position: relative; display: grid; gap: 2mm; margin: 2mm 0 0; }
.flow::before { content: ""; position: absolute; top: 6mm; left: 8%; right: 8%; height: .7mm;
                background: linear-gradient(90deg, var(--blue), var(--orange)); }
.step { position: relative; text-align: center; }
.step .n { width: 12mm; height: 12mm; border-radius: 50%; margin: 0 auto 2.2mm; background: var(--white);
           border: .7mm solid var(--blue); color: var(--blue); display: flex; align-items: center;
           justify-content: center; font-weight: 800; font-size: 12pt; position: relative; }
.step.hot .n { background: var(--orange); border-color: var(--orange); color: #fff; }
.step b { display: block; font-family: 'Nunito', sans-serif; color: var(--deep); font-size: 9.4pt; margin-bottom: .8mm; }
.step p { font-size: 7.9pt; color: var(--muted); line-height: 1.35; }

/* service cards */
.svc { border: 1px solid var(--line); border-radius: 3mm; overflow: hidden; display: flex; flex-direction: column; }
.svc .hd { background: var(--deep); color: #fff; padding: 4.5mm 5mm; display: flex; gap: 3mm; align-items: center; }
.svc .hd h3 { color: #fff; font-size: 12pt; }
.svc .hd .ico { color: var(--orange); }
.svc .bd { padding: 3mm 5mm 5mm; }
.svc .tag { display: inline-block; margin-top: 3mm; font-size: 7.2pt; font-weight: 600; letter-spacing: .05em;
            text-transform: uppercase; color: var(--blue); background: var(--pale); border-radius: 1mm; padding: .8mm 2mm; }

/* cover */
.cover-top { padding: 16mm 16mm 0; display: flex; justify-content: space-between; align-items: center; }
.cover-top .logo { height: 10mm; }
.cover-top .url { font-family: 'Nunito', sans-serif; font-weight: 700; color: var(--blue); font-size: 11pt; }
h1 { font-size: 34pt; line-height: 1.06; font-weight: 800; color: var(--deep); }
.band { position: absolute; left: 0; right: 0; bottom: 0; height: 30mm; background: var(--deep);
        color: #fff; padding: 0 16mm; display: flex; align-items: center; justify-content: space-between; }
.chain { display: flex; align-items: center; gap: 2.5mm; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 12pt; }
.chain .dot { width: 2mm; height: 2mm; border-radius: 50%; background: var(--orange); }
.band .url { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 11pt; color: #cfe6f0; }

/* quote */
.quote { border-left: 1.2mm solid var(--orange); padding: 1mm 0 1mm 5mm; font-family: 'Nunito', sans-serif;
         font-weight: 700; font-size: 12.5pt; color: var(--deep); line-height: 1.3; }
.quote span { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 8pt; color: var(--muted); margin-top: 1.5mm; }

/* code / manifest */
.manifest { background: #062e3f; color: #d7ebf3; border-radius: 3mm; padding: 5mm 5.5mm; font-size: 8pt; line-height: 1.6; }
.manifest .tag { font-family: 'Inter', sans-serif; font-size: 7pt; color: var(--orange); text-transform: uppercase;
                 letter-spacing: .08em; font-weight: 600; display: block; margin-bottom: 2mm; }
.manifest pre { font-family: 'JetBrains Mono', monospace; white-space: pre; }
.manifest .k { color: #ffd28a; }
.manifest .c { color: #7fa9bb; }
.filename { font-family: 'JetBrains Mono', monospace; font-size: 10pt; background: var(--deep); color: #ffd28a;
            padding: 2.5mm 3.5mm; border-radius: 2mm; display: inline-block; letter-spacing: .02em; white-space: nowrap; }

/* contact */
.contact { background: var(--blue); color: #fff; border-radius: 4mm; padding: 8mm 9mm; display: flex;
           justify-content: space-between; gap: 8mm; position: relative; overflow: hidden; }
.contact::after { content: ""; position: absolute; right: -25mm; top: -30mm; width: 80mm; height: 80mm;
                  border-radius: 50%; background: rgba(255,255,255,.07); }
.contact .big { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 20pt; line-height: 1.1; }
.contact dl { display: grid; grid-template-columns: 22mm 1fr; gap: .8mm 3mm; font-size: 8.8pt; margin-top: 4mm; }
.contact dt { color: #bfe0ee; }
.contact .qr { background: #fff; border-radius: 2.5mm; padding: 2mm; text-align: center; color: var(--deep);
               font-size: 6.8pt; font-weight: 600; flex: none; position: relative; z-index: 1; align-self: center; }
.contact .qr img { width: 30mm; height: 30mm; display: block; }
.contact .logo { height: 8mm; margin-top: 5mm; }

/* timeline */
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; position: relative; margin-top: 3mm; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 3.2mm; height: .7mm; background: var(--line); }
.tl .t { position: relative; padding-top: 9mm; }
.tl .t::before { content: ""; position: absolute; top: 0; left: 0; width: 7mm; height: 7mm; border-radius: 50%;
                 background: var(--white); border: .7mm solid var(--blue); }
.tl .t.hot::before { background: var(--orange); border-color: var(--orange); }
.tl .t b { display: block; font-family: 'Nunito', sans-serif; color: var(--deep); font-size: 10pt; }
.tl .t .when { font-size: 7.4pt; color: var(--orange); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tl .t p { font-size: 8.4pt; color: var(--muted); margin-top: .8mm; }

/* stack */
.stack .s { border: 1px solid var(--line); border-radius: 3mm; padding: 4mm; }
.stack .s .num { font-size: 18pt; color: var(--orange); font-weight: 800; line-height: 1; margin: 2mm 0 1mm; }
.stack .s p { font-size: 8pt; color: var(--muted); }
.stack .s h4 { font-size: 10.5pt; }

/* thumbnails */
.thumbs { display: flex; gap: 3mm; }
.thumbs img { width: 34mm; border-radius: 1.5mm; box-shadow: 0 .6mm 2.5mm rgba(0,40,60,.25); display: block; }

/* ---- website view: A4 pages shown as sheets on a grey desk, plus a slim site bar ---- */
@media screen {
  html, body { background: #dfe8ee; }
  .rbar { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
          font-size: 14px; line-height: 1.3; }
  .rbar .in { max-width: 1000px; margin: 0 auto; padding: 0 16px; height: 60px; display: flex; align-items: center;
              justify-content: space-between; gap: 14px; }
  .rbar .logo img { height: 28px; width: auto; display: block; }
  .rbar .right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
  .rbar a { color: var(--deep); font-weight: 600; text-decoration: none; }
  .rbar a:hover { color: var(--blue); }
  .rbar .pdf { background: var(--orange); color: #fff; border-radius: 999px; padding: 7px 14px; }
  .rbar .pdf:hover { color: #fff; background: #d17e00; }
  .rbar .lang a { padding: 2px 5px; color: var(--muted); }
  .rbar .lang a[aria-current] { color: var(--deep); text-decoration: underline; }
  .sheets { padding: 24px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .sheets .page { box-shadow: 0 4px 18px rgba(0,40,60,.18); background: var(--white); flex: none; }
  .sheets .page:last-child { margin-bottom: 0; }
}
@media screen and (max-width: 560px) {
  .rbar .back { display: none; }
}
@media print {
  .rbar { display: none; }
}