.campaign-page {
  background: #fbf9fc;
}
.campaign-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.campaign-nav a:not(.button) {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 700;
}
.campaign-hero {
  overflow: hidden;
  position: relative;
  padding: 158px 0 94px;
  background:
    radial-gradient(
      circle at 78% 15%,
      rgba(180, 87, 230, 0.21),
      transparent 33%
    ),
    radial-gradient(
      circle at 8% 80%,
      rgba(75, 190, 145, 0.11),
      transparent 28%
    ),
    #fbf9fc;
}
.campaign-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(91, 52, 107, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 52, 107, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.campaign-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, 0.8fr);
  gap: 74px;
  align-items: center;
}
.campaign-kicker {
  width: fit-content;
  padding: 7px 11px;
  border: 1px solid #dbc8e5;
  border-radius: 999px;
  color: var(--purple-strong);
  background: rgba(255, 255, 255, 0.76);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.campaign-hero h1 {
  max-width: 760px;
  margin-top: 22px;
  font-size: clamp(3.4rem, 6vw, 6.6rem);
  line-height: 0.93;
  letter-spacing: -0.07em;
}
.campaign-hero h1 em {
  color: var(--purple);
  font-style: normal;
}
.campaign-lead {
  max-width: 680px;
  margin-top: 25px;
  font-size: 1.13rem;
  line-height: 1.68;
}
.campaign-actions {
  margin-top: 31px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.campaign-trust {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
  color: #5f5664;
  font-size: 0.78rem;
  font-weight: 650;
}
.campaign-trust span::before {
  content: "✓";
  margin-right: 7px;
  color: var(--green);
  font-weight: 900;
}
.campaign-product {
  padding: 17px;
  border: 1px solid rgba(113, 48, 161, 0.13);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 35px 90px rgba(64, 35, 76, 0.16);
  transform: rotate(1.5deg);
  backdrop-filter: blur(18px);
}
.campaign-window {
  overflow: hidden;
  border: 1px solid #e7dee9;
  border-radius: 20px;
  background: #fff;
}
.campaign-window-bar {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #eee7f0;
  color: #8a7d90;
  font-size: 0.65rem;
}
.campaign-window-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d9cedd;
}
.campaign-ui {
  padding: 22px;
}
.campaign-ui-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}
.campaign-ui-top div {
  display: grid;
  gap: 4px;
}
.campaign-ui-top small,
.campaign-document small {
  color: #928697;
}
.campaign-ui-top strong {
  font-size: 1.15rem;
}
.campaign-ui-top span {
  padding: 8px 11px;
  border-radius: 10px;
  color: #fff;
  background: var(--purple);
  font-size: 0.68rem;
  font-weight: 800;
}
.campaign-metrics {
  margin-top: 19px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.campaign-metric {
  padding: 13px;
  border-radius: 13px;
  background: #f7f2f9;
}
.campaign-metric small {
  display: block;
  color: #887c8d;
  font-size: 0.59rem;
}
.campaign-metric b {
  display: block;
  margin-top: 4px;
  font-size: 0.95rem;
}
.campaign-document {
  margin-top: 12px;
  padding: 17px;
  border: 1px solid #ece5ef;
  border-radius: 14px;
}
.campaign-row {
  padding: 9px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee8f0;
  color: #5c5261;
  font-size: 0.68rem;
}
.campaign-row:last-child {
  border-bottom: 0;
}
.campaign-row strong {
  color: #241d28;
}
.campaign-logo-strip {
  padding: 22px 0;
  border-block: 1px solid var(--line);
  background: #fff;
}
.campaign-logo-strip .container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 50px;
  color: #796e7e;
  font-size: 0.74rem;
  font-weight: 700;
}
.campaign-section {
  padding: 108px 0;
}
.campaign-heading {
  max-width: 800px;
}
.campaign-heading p {
  max-width: 650px;
  margin-top: 17px;
  font-size: 1.03rem;
}
.campaign-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.campaign-card {
  min-height: 280px;
  padding: 28px;
  border: 1px solid #e4dce7;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(49, 26, 59, 0.07);
}
.campaign-card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--purple-strong);
  background: var(--purple-pale);
  font-size: 1.25rem;
}
.campaign-card h3 {
  margin-top: 45px;
  font-size: 1.35rem;
}
.campaign-card p {
  margin-top: 11px;
  font-size: 0.88rem;
  line-height: 1.65;
}
.campaign-dark {
  color: #fff;
  background:
    radial-gradient(circle at 80% 0, rgba(155, 77, 202, 0.27), transparent 30%),
    #18131c;
}
.campaign-dark p {
  color: #bdb1c2;
}
.campaign-steps {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.campaign-step {
  min-height: 245px;
  padding: 26px;
  background: #211a25;
}
.campaign-step > span {
  color: #c886e9;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}
.campaign-step h3 {
  margin-top: 52px;
  font-size: 1.22rem;
}
.campaign-step p {
  margin-top: 10px;
  font-size: 0.82rem;
}
.campaign-split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
.campaign-checks {
  display: grid;
  gap: 12px;
}
.campaign-check {
  padding: 21px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  border: 1px solid #e4dce7;
  border-radius: 17px;
  background: #fff;
}
.campaign-check > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}
.campaign-check p {
  margin-top: 4px;
  font-size: 0.82rem;
}
.campaign-faq {
  max-width: 900px;
  margin: 48px auto 0;
}
.campaign-faq details {
  border-top: 1px solid var(--line);
}
.campaign-faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.campaign-faq summary {
  padding: 22px 4px;
  cursor: pointer;
  font-weight: 780;
}
.campaign-faq p {
  padding: 0 35px 23px 4px;
  line-height: 1.7;
}
.campaign-cta {
  padding: 28px 0 90px;
}
.campaign-cta-card {
  overflow: hidden;
  position: relative;
  padding: 62px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(
      circle at 86% 15%,
      rgba(208, 133, 245, 0.33),
      transparent 28%
    ),
    linear-gradient(135deg, #24162b, #5c2479);
  box-shadow: 0 32px 90px rgba(49, 26, 59, 0.25);
}
.campaign-cta-card h2 {
  max-width: 780px;
}
.campaign-cta-card p {
  max-width: 650px;
  margin-top: 17px;
  color: #decfe4;
}
@media (max-width: 980px) {
  .campaign-nav a:not(.button) {
    display: none;
  }
  .campaign-hero-grid,
  .campaign-split {
    grid-template-columns: 1fr;
  }
  .campaign-product {
    max-width: 650px;
  }
  .campaign-grid {
    grid-template-columns: 1fr 1fr;
  }
  .campaign-steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .campaign-hero {
    padding: 125px 0 70px;
  }
  .campaign-hero-grid {
    gap: 50px;
  }
  .campaign-hero h1 {
    font-size: 3.55rem;
  }
  .campaign-actions {
    display: grid;
  }
  .campaign-actions .button {
    width: 100%;
  }
  .campaign-grid,
  .campaign-steps {
    grid-template-columns: 1fr;
  }
  .campaign-section {
    padding: 78px 0;
  }
  .campaign-cta-card {
    padding: 38px 24px;
  }
  .campaign-metrics {
    grid-template-columns: 1fr;
  }
}

/* Align focused landing pages with the current Kyro marketing system. */
.campaign-page {
  --purple: var(--brand);
  --purple-strong: var(--brand);
  --purple-pale: var(--brand-soft);
  --green: var(--cta-dark);
  --ink-soft: var(--muted);
  color: var(--text);
  background: var(--bg);
}
.campaign-page .skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 14px; border-radius: 12px; color: var(--text); background: var(--surface); box-shadow: var(--shadow-sm); transform: translateY(-150%); }
.campaign-page .skip-link:focus { transform: translateY(0); }
.campaign-page .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 17px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.campaign-page .button:hover { transform: translateY(-2px); }
.campaign-page .button-large { min-height: 54px; padding-inline: 21px; border-radius: 16px; font-size: 15px; }
.campaign-page .button-primary { color: #073519; background: linear-gradient(135deg,var(--cta),#6ce99d); box-shadow: 0 12px 28px color-mix(in srgb,var(--cta) 30%,transparent); }
.campaign-page .button-secondary { color: var(--text); border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.campaign-page .button-light { color: #1b1730; background: #fff; box-shadow: var(--shadow-sm); }
.campaign-page .button-ghost-inverse { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); }
.campaign-hero {
  background:
    radial-gradient(circle at 78% 15%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 33%),
    radial-gradient(circle at 8% 80%,color-mix(in srgb,var(--cta) 10%,transparent),transparent 28%),
    var(--bg);
}
.campaign-hero::before {
  background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
}
.campaign-kicker { color: var(--brand); border-color: var(--line); background: color-mix(in srgb,var(--surface) 82%,transparent); box-shadow: var(--shadow-sm); }
.campaign-hero h1 em { color: var(--brand); }
.campaign-lead,.campaign-heading p,.campaign-faq p { color: var(--muted); }
.campaign-trust { color: var(--muted); }
.campaign-product { border-color: var(--line); background: color-mix(in srgb,var(--surface) 82%,transparent); box-shadow: var(--shadow); }
.campaign-window,.campaign-logo-strip,.campaign-card,.campaign-check { color: var(--text); border-color: var(--line); background: var(--surface); }
.campaign-window-bar,.campaign-document,.campaign-row { border-color: var(--line); }
.campaign-window-bar,.campaign-ui-top small,.campaign-document small,.campaign-row { color: var(--muted); }
.campaign-metric { background: var(--surface-2); }
.campaign-metric small { color: var(--muted); }
.campaign-row strong { color: var(--text); }
.campaign-logo-strip { border-color: var(--line); }
.campaign-logo-strip .container { color: var(--muted); }
.campaign-card { box-shadow: var(--shadow-sm); }
.campaign-card-icon { color: var(--brand); background: var(--brand-soft); }
.campaign-card p { color: var(--muted); }
.campaign-dark { color: #fff; background: radial-gradient(circle at 80% 0,rgba(177,93,221,.28),transparent 32%),#17131d; }
.campaign-dark .campaign-kicker { color: rgba(255,255,255,.86); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); }
.campaign-step { background: #211a25; }
.campaign-check > span { color: #073519; background: var(--cta); }
.campaign-faq details { border-color: var(--line); }
.campaign-cta-card { background: radial-gradient(circle at 86% 15%,rgba(208,133,245,.33),transparent 28%),linear-gradient(135deg,#24162b,var(--brand)); box-shadow: var(--shadow); }
.campaign-page footer { margin-top: 0; }

@media (max-width: 760px) {
  .campaign-page .header .login-btn { display: none; }
  .campaign-page .campaign-hero { padding-top: 116px; }
}