:root {
  color-scheme: light;
  --ink: #102033;
  --muted: #566479;
  --paper: #f7f9fc;
  --line: #d8e1ec;
  --blue: #166d95;
  --green: #37785f;
  --gold: #a77a2c;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family:
    "Segoe UI",
    Arial,
    sans-serif;
  color: var(--ink);
  background:
    linear-gradient(130deg, rgba(16, 32, 51, 0.09), transparent 42%),
    radial-gradient(circle at 18% 16%, rgba(22, 109, 149, 0.16), transparent 28%),
    radial-gradient(circle at 82% 82%, rgba(167, 122, 44, 0.12), transparent 30%),
    var(--paper);
}

.shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
}

.hero {
  width: min(900px, 100%);
  min-height: min(620px, calc(100vh - 64px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8vw, 96px);
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78)),
    repeating-linear-gradient(
      90deg,
      rgba(16, 32, 51, 0.04) 0,
      rgba(16, 32, 51, 0.04) 1px,
      transparent 1px,
      transparent 28px
    );
  box-shadow: 0 24px 80px rgba(16, 32, 51, 0.12);
}

.brand {
  width: fit-content;
  margin-bottom: 28px;
  padding: 10px 14px;
  border: 1px solid currentColor;
  color: var(--blue);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(42px, 7vw, 78px);
  line-height: 1.02;
  letter-spacing: 0;
}

p {
  max-width: 690px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
}

a {
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.actions a,
.text-link {
  width: fit-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}

.actions a:first-child {
  border-color: var(--blue);
  color: var(--blue);
}

.actions a:last-child,
.technology-page .brand {
  border-color: var(--green);
  color: var(--green);
}

.intelligence-page .brand {
  border-color: var(--gold);
  color: var(--gold);
}

.text-link {
  margin-top: 32px;
}

@media (max-width: 560px) {
  .shell {
    padding: 18px;
  }

  .hero {
    min-height: calc(100vh - 36px);
    padding: 34px 22px;
  }
}