:root {
  color-scheme: light dark;
  --bg: #f6f2ec; --text: #241a2e; --muted: #6a6072; --brand: #4d2a7c; --accent: #f79421; --flag: #fbb03c;
  --line: #ddd3c7; --mark-opacity: .05;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #15111a; --text: #eee8f3; --muted: #a197ab; --brand: #c4adea; --line: #2f2738; --mark-opacity: .06; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  position: relative; margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  color: var(--text); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
}
/* The Netersoft mark, very large and cropped, as a watermark. */
body::before {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  right: -14vmin; bottom: -18vmin; width: 82vmin; height: 82vmin;
  background: url("icon.svg") center / contain no-repeat; opacity: var(--mark-opacity);
}
a { color: inherit; }
.bar, main, footer { width: 100%; max-width: 1040px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.brand { display: block; line-height: 0; }
.logo { width: 168px; height: auto; }
.logo .word { fill: var(--brand); }
.bar nav { display: flex; align-items: center; gap: 4px; }
.icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--text); transition: color .15s ease, background-color .15s ease;
}
.icon svg { width: 22px; height: 22px; }
.icon:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.lang {
  margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--line);
  font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--muted); text-decoration: none;
}
.lang:hover { color: var(--brand); }

main { flex: 1; display: flex; align-items: center; padding-top: 6vh; padding-bottom: 12vh; }
.statement { position: relative; max-width: 780px; padding-left: 36px; }
/* The flagpole of the mark: an orange rule carrying a flag. */
.statement::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 6px; width: 3px; background: var(--accent);
}
.statement::after {
  content: ""; position: absolute; left: -22px; top: 0; width: 22px; height: 15px;
  background: var(--flag); clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
}
h1 {
  margin: 0; font: 400 clamp(2.4rem, 6vw, 4.4rem)/1.08 var(--serif); letter-spacing: -.01em;
}
h1 em { font-style: italic; color: var(--brand); }
.statement p { max-width: 36em; margin: 24px 0 0; font-size: 19px; color: var(--muted); }


footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-top: 24px; padding-bottom: 32px; font-size: 14px; color: var(--muted);
}
footer a { text-decoration: none; border-bottom: 1px solid var(--line); }
footer a:hover { color: var(--brand); border-color: currentColor; }

@media (max-width: 760px) {
  .bar, main, footer { padding-left: 16px; padding-right: 16px; }
  .bar { padding-top: 20px; padding-bottom: 20px; }
  .logo { width: 132px; }
  .lang { margin-left: 4px; padding-left: 12px; }
  .statement { padding-left: 24px; }
  .statement::after { left: -16px; width: 16px; height: 11px; }
  .statement p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .icon { transition: none; } }