*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --j3-deep: #8e1230;
  --j3-red: #c02747;
  --j3-ice: #8ed3f0;
  --j3-ice-soft: #d9f0fa;
  --j3-snow: #f8fafc;
  --j3-ink: #1d1b20;
  --j3-dim: #6a6570;
  --j3-rule: #e4e7ec;
  --j3-ui: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --j3-title: "Times New Roman", Georgia, serif;
  --j3-r1: 10px;
  --j3-r2: 18px;
  --j3-r3: 26px;
  --j3-lift1: 0 4px 14px rgba(29, 27, 32, 0.06);
  --j3-lift2: 0 14px 34px rgba(29, 27, 32, 0.09);
  --j3-lift3: 0 26px 62px rgba(29, 27, 32, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--j3-ui);
  color: var(--j3-ink);
  line-height: 1.7;
  font-size: 16px;
  background:
    radial-gradient(
      circle at 88% -4%,
      rgba(142, 211, 240, 0.34),
      transparent 38%
    ),
    radial-gradient(
      circle at 4% 6%,
      rgba(192, 39, 71, 0.09),
      transparent 34%
    ),
    var(--j3-snow);
}

a {
  color: var(--j3-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--j3-red);
}

/* ---------- секція 0: шапка ---------- */
.j3s0-mark {
  top: 0;
  z-index: 100;
  padding: 15px 20px;
  text-align: center;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(142, 18, 48, 0.14);
}
.j3s0-mark-name {
  font-family: var(--j3-ui);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--j3-deep);
}
.j3s0-mark-name:hover {
  color: var(--j3-red);
}

/* ---------- секція 1: герой ---------- */
.j3s1-hero {
  max-width: 1000px;
  margin: 0 auto;
  padding: 54px 20px 26px;
  text-align: center;
}
.j3s1-hero-h {
  font-family: var(--j3-title);
  font-weight: 700;
  font-size: clamp(30px, 5.2vw, 58px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--j3-deep);
}
/* подвійний контур: блакитна тінь-двійник зі зсувом — ефект 3D-друку */
.j3s1-hero-h-x {
  color: var(--j3-red);
  text-shadow:
    3px 3px 0 var(--j3-ice),
    5px 5px 0 rgba(142, 211, 240, 0.42);
}
.j3s1-hero-sub {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--j3-dim);
}

/* ---------- секція 3: футер ---------- */
.j3s3-foot {
  margin-top: 46px;
  padding: 24px 20px 20px;
  text-align: center;
  background: #ffffff;
  border-top: 3px solid var(--j3-deep);
}
.j3s3-foot-in {
  max-width: 940px;
  margin: 0 auto;
}
.j3s3-foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-bottom: 14px;
}
.j3s3-foot-nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #7c7784;
}
.j3s3-foot-nav a:hover {
  color: var(--j3-deep);
}
.j3s3-foot-legal {
  font-size: 11px;
  line-height: 1.72;
  color: #8b8692;
  max-width: 820px;
  margin: 0 auto 10px;
}
.j3s3-foot-note {
  font-size: 11px;
  color: #9a95a1;
}