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

:root {
  --ju-deep: #3b1e6e;
  --ju-violet: #6435b8;
  --ju-lime: #9ff23c;
  --ju-lime-deep: #6f9c17;
  --ju-lilac: #f6f4fc;
  --ju-lilac-mid: #ece7f8;
  --ju-ink: #211a2e;
  --ju-muted: #6d6580;
  --ju-line: #e0daf0;
  --ju-font-ui: "Verdana", "DejaVu Sans", Geneva, sans-serif;
  --ju-font-display: "Georgia", "Book Antiqua", serif;
  --ju-radius-small: 12px;
  --ju-radius-large: 22px;
  --ju-shadow-near: 0 3px 12px rgba(33, 26, 46, 0.06);
  --ju-shadow-mid: 0 16px 38px rgba(33, 26, 46, 0.1);
  --ju-shadow-far: 0 30px 66px rgba(33, 26, 46, 0.16);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ju-font-ui);
  color: var(--ju-ink);
  line-height: 1.72;
  font-size: 15px;
  background:
    radial-gradient(
      ellipse at 50% -8%,
      rgba(100, 53, 184, 0.16),
      transparent 46%
    ),
    var(--ju-lilac);
}

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

/* ---------- шапка ---------- */
.brand-x-bar {
  top: 0;
  z-index: 100;
  padding: 16px 20px;
  text-align: center;
  background: rgba(246, 244, 252, 0.9);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(59, 30, 110, 0.12);
}
.brand-x-bar-title {
  position: relative;
  font-family: var(--ju-font-ui);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ju-deep);
  padding-bottom: 3px;
}
.brand-x-bar-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--ju-lime);
}
.brand-x-bar-title:hover {
  color: var(--ju-violet);
}

/* ---------- герой ---------- */
.hero-x-wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 56px 20px 28px;
  text-align: center;
}
.hero-x-headline {
  font-family: var(--ju-font-display);
  font-weight: 700;
  font-size: clamp(29px, 5vw, 56px);
  line-height: 1.16;
  color: var(--ju-deep);
}
/* підсвітка «крізь маркер»: напівпрозорий лаймовий шар з mix-blend-mode */
.hero-x-highlight {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 0.1em;
  color: var(--ju-deep);
}
.hero-x-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0.1em;
  bottom: 0.03em;
  background: rgba(159, 242, 60, 0.82);
  mix-blend-mode: multiply;
  /* нерівні краї зверху й знизу — слід від фломастера */
  clip-path: polygon(
    0% 12%,
    7% 3%,
    23% 9%,
    41% 2%,
    62% 8%,
    79% 1%,
    93% 7%,
    100% 3%,
    100% 88%,
    92% 97%,
    74% 91%,
    55% 99%,
    35% 92%,
    18% 98%,
    5% 90%,
    0% 96%
  );
  transform: rotate(-0.5deg);
}
.hero-x-standfirst {
  max-width: 600px;
  margin: 20px auto 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ju-muted);
}

/* ---------- футер ---------- */
.footer-x-legal {
  margin-top: 48px;
  padding: 26px 20px 22px;
  text-align: center;
  background: var(--ju-deep);
  color: #cfc4e6;
}
.footer-x-legal-inner {
  max-width: 920px;
  margin: 0 auto;
}
.footer-x-legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 15px;
}
.footer-x-legal-nav a {
  font-size: 12px;
  font-weight: 700;
  color: #d9cff0;
  border-bottom: 1px solid rgba(159, 242, 60, 0.45);
  padding-bottom: 2px;
}
.footer-x-legal-nav a:hover {
  color: var(--ju-lime);
  border-bottom-color: var(--ju-lime);
}
.footer-x-legal-notice {
  max-width: 830px;
  margin: 0 auto 11px;
  font-size: 11px;
  line-height: 1.74;
  color: #b3a6cf;
}
.footer-x-legal-copy {
  font-size: 11px;
  color: #a294c4;
}