@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,500;6..96,700;6..96,800&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
}

html {
  height: 100%;
  background: var(--page-bg);
  color: var(--page-fg);
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* Page-load reveals (small motion, opt-out via prefers-reduced-motion). */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 650ms ease,
    transform 650ms ease;
  transition-delay: var(--d, 0ms);
}

html[data-loaded="1"] [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn {
    transition: none;
  }
  .card--link,
  .nav__a,
  .nav__cta,
  .top__row {
    transition: none;
  }
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  z-index: 1000;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--page-fg);
  color: var(--page-bg);
}

.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--page-bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.top__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
}

.brand__logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow);
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
}

.brand__tag {
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav__a {
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--muted);
}

.nav__a:hover {
  background: color-mix(in srgb, var(--page-fg) 6%, transparent);
  color: var(--page-fg);
}

.nav__cta {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--page-fg);
  color: var(--page-bg);
  font-weight: 700;
  border: 1px solid var(--border);
}

.top__tools {
  padding-bottom: 12px;
}

.tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tools__label {
  color: var(--muted);
  font-size: 12px;
}

.tools__select {
  appearance: none;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
  color: var(--page-fg);
  box-shadow: var(--shadow);
}

.tools__link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.main {
  padding-bottom: 80px;
}

.hero {
  padding: 56px 0 24px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -120px -80px auto -80px;
  height: 420px;
  background:
    radial-gradient(700px 320px at 15% 25%, var(--hero-a), transparent 60%),
    radial-gradient(700px 320px at 75% 20%, var(--hero-b), transparent 60%),
    radial-gradient(540px 260px at 50% 90%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
  filter: blur(2px);
  opacity: 0.95;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 26px;
  align-items: start;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
  color: var(--muted);
  box-shadow: var(--shadow);
}

.hero__h {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.hero__p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}

.deliver {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  box-shadow: var(--shadow);
  padding: 14px;
  margin: 6px 0 14px;
}

.deliver__h {
  font-family: var(--font-display);
  font-weight: 900;
  margin-bottom: 8px;
}

.deliver__list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.deliver__foot {
  margin-top: 10px;
}

.deliver__link {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.btn {
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform 140ms ease, background 140ms ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border-color: color-mix(in srgb, var(--accent2) 30%, transparent);
}

.btn--ghost {
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
  color: var(--page-fg);
}

.btn--sm {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat {
  padding: 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
}

.stat__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.1;
}

.stat__t {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 2px;
}

.panel {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  padding: 18px;
  box-shadow: var(--shadow);
}

.panel__h {
  font-weight: 900;
  font-family: var(--font-display);
  margin-bottom: 10px;
}

.panel__p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.55;
}

.panel__list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.thumb {
  display: block;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 84%, transparent);
  overflow: hidden;
}

.thumb__img {
  display: block;
  width: 100%;
  height: auto;
}

.panel__foot {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 78%, transparent);
  font-size: 12px;
  color: var(--muted);
}

.pill--on {
  background: var(--page-fg);
  color: var(--page-bg);
  border-color: color-mix(in srgb, var(--page-fg) 25%, var(--border));
}

.modal {
  border: none;
  padding: 0;
  background: transparent;
  width: min(920px, calc(100% - 28px));
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.modal__box {
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 92%, transparent);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 900;
}

.modal__x {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 84%, transparent);
  color: var(--page-fg);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.modal__body {
  padding: 14px;
}

.modal__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: #fff;
}

.modal__foot {
  padding: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
}

.sec {
  padding: 44px 0;
}

.sec__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.sec__h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(22px, 2.2vw, 30px);
}

.sec__lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.card {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  padding: 16px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.card--link {
  display: block;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
}

.card--link:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--card-bg) 86%, transparent);
}

.card__more {
  position: relative;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.card::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(260px 140px at 20% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  opacity: 0.65;
  pointer-events: none;
}

.card__kicker {
  position: relative;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 78%, transparent);
  font-size: 12px;
  color: var(--muted);
}

.card__h {
  position: relative;
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.card__p {
  position: relative;
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.55;
}

.card__list {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tl {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 14px;
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  box-shadow: var(--shadow);
}

.tl__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  color: color-mix(in srgb, var(--accent2) 78%, var(--page-fg));
}

.tl__h {
  font-weight: 900;
  font-family: var(--font-display);
  margin-bottom: 4px;
}

.tl__p {
  color: var(--muted);
  line-height: 1.55;
}

.sec--logos {
  padding: 18px 0 10px;
}

.logos {
  display: grid;
  gap: 10px;
}

.logos__label {
  font-size: 12px;
  color: var(--muted);
}

.logos__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.logo {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
  color: var(--muted);
  font-size: 13px;
}

.logo--ph {
  border-style: dashed;
}

.logo__a:hover .logo {
  color: var(--page-fg);
  background: color-mix(in srgb, var(--page-fg) 6%, transparent);
}

.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tst {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  padding: 16px;
  box-shadow: var(--shadow);
  margin: 0;
}

.tst__q {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.25;
}

.tst__who {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.minicase {
  margin-top: 16px;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 10%, var(--card-bg)),
    color-mix(in srgb, var(--accent2) 10%, var(--card-bg))
  );
  box-shadow: var(--shadow);
  padding: 16px;
}

.minicase__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.minicase__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.minicase__kicker {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.minicase__h {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.minicase__p {
  color: var(--muted);
  line-height: 1.55;
  margin-top: 6px;
}

.minicase__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.minicase__col {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 84%, transparent);
  padding: 12px;
}

.minicase__t {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 8px;
}

.ml {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ml li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.ml__k {
  font-size: 12px;
  color: var(--muted);
}

.ml__v {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.ml--pos .ml__v {
  color: color-mix(in srgb, var(--accent2) 72%, var(--page-fg));
}

.casegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.case {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  padding: 16px;
  box-shadow: var(--shadow);
}

.case__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.case__tag {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--page-bg) 78%, transparent);
}

.case__num {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 22px;
}

.case__h {
  margin-top: 10px;
  font-weight: 900;
  font-family: var(--font-display);
}

.case__p {
  margin: 6px 0 10px;
  color: var(--muted);
  line-height: 1.55;
}

.case__list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.case__foot {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.pricegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.guar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.guar__box {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  box-shadow: var(--shadow);
  padding: 16px;
}

.guar__box--cta {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 10%, var(--card-bg)),
    color-mix(in srgb, var(--accent2) 10%, var(--card-bg))
  );
}

.guar__h {
  font-family: var(--font-display);
  font-weight: 900;
  margin-bottom: 8px;
}

.guar__p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
}

.price {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  padding: 18px;
  box-shadow: var(--shadow);
  position: relative;
}

.price__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 84%, transparent);
  color: var(--muted);
}

.price__h {
  font-weight: 900;
  font-family: var(--font-display);
  font-size: 18px;
}

.price__p {
  color: var(--muted);
  line-height: 1.55;
  margin: 8px 0 12px;
}

.price__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.price__list {
  margin: 12px 0 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.price--hot {
  border-color: color-mix(in srgb, var(--accent2) 35%, var(--border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 12%, var(--card-bg)),
    color-mix(in srgb, var(--accent2) 10%, var(--card-bg))
  );
}

.qa__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.qa {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.qa__q {
  cursor: pointer;
  font-weight: 900;
  font-family: var(--font-display);
}

.qa__a {
  color: var(--muted);
  line-height: 1.55;
}

.qa__a p {
  margin: 10px 0 0;
}

.sec--contact {
  padding-bottom: 10px;
}

.contact {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 10%, var(--card-bg)),
    color-mix(in srgb, var(--accent2) 10%, var(--card-bg))
  );
  box-shadow: var(--shadow);
  padding: 18px;
}

.contact__h {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  font-size: 28px;
}

.contact__lead {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.55;
}

.pillrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.form {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 84%, transparent);
  padding: 14px;
}

.form__row {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.form__lab {
  font-size: 12px;
  color: var(--muted);
}

.form__in {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  color: #0b0b10;
  font: inherit;
}

html[data-theme="2"] .form__in,
html[data-theme="5"] .form__in,
html[data-theme="7"] .form__in,
html[data-theme="8"] .form__in {
  background: rgba(255, 255, 255, 0.92);
}

.form__ta {
  min-height: 110px;
  resize: vertical;
}

.form__fielderr {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--accent) 66%, var(--page-fg));
}

.form[aria-busy="true"] {
  opacity: 0.98;
}

.form__note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.form__note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.form__ok {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent2) 12%, #fff);
}

.form__err {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.two__col {
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  box-shadow: var(--shadow);
  padding: 14px;
}

.report {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
}

.kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.kpi__item {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 84%, transparent);
  box-shadow: var(--shadow);
  padding: 12px;
}

.kpi__label {
  font-size: 12px;
  color: var(--muted);
}

.kpi__value {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.kpi__sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.risk {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  box-shadow: var(--shadow);
  padding: 14px;
}

.risk--p0 {
  border-color: color-mix(in srgb, #d32f2f 36%, var(--border));
}

.risk--p1 {
  border-color: color-mix(in srgb, #ef6c00 36%, var(--border));
}

.risk--p2 {
  border-color: color-mix(in srgb, #2e7d32 28%, var(--border));
}

.risk__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.risk__h {
  font-family: var(--font-display);
  font-weight: 900;
}

.risk__p {
  margin: 8px 0;
  color: var(--muted);
  line-height: 1.55;
}

.dlgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.dl {
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dl:hover {
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
}

.dl__name {
  font-weight: 700;
}

.dl__more {
  font-size: 12px;
  color: var(--muted);
}

.report__list {
  max-height: 280px;
  overflow: auto;
  word-break: break-word;
}

.subh {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0 0 10px;
}

.bullets {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.step {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
}

.step__n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--accent2);
}

.step__h {
  font-family: var(--font-display);
  font-weight: 900;
  margin-bottom: 4px;
}

.step__p {
  color: var(--muted);
  line-height: 1.55;
}

.legal p {
  color: var(--muted);
  line-height: 1.6;
}

.showgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.show {
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  background: color-mix(in srgb, var(--card-bg) 78%, transparent);
  padding: 14px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
}

.show__n {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.show__h {
  font-family: var(--font-display);
  font-weight: 900;
  margin-bottom: 4px;
}

.show__p {
  color: var(--muted);
  font-size: 12px;
}

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  padding: 14px;
}

.consent__box {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--page-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.consent__h {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.consent__p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.consent__links a {
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.consent__cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.foot {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  background: color-mix(in srgb, var(--page-bg) 90%, transparent);
}

.foot__row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

.foot__brand {
  font-family: var(--font-display);
  font-weight: 900;
}

.foot__muted {
  color: var(--muted);
  line-height: 1.5;
  margin-top: 6px;
}

.foot__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.foot__links a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html[data-theme="6"] .top,
html[data-theme="6"] .card,
html[data-theme="6"] .panel,
html[data-theme="6"] .tl,
html[data-theme="6"] .case,
html[data-theme="6"] .price,
html[data-theme="6"] .qa,
html[data-theme="6"] .contact,
html[data-theme="6"] .form,
html[data-theme="6"] .step,
html[data-theme="6"] .show {
  border-width: 2px;
  box-shadow: none;
}

html[data-theme="6"] .btn {
  border-width: 2px;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="6"] .nav__cta {
  border-radius: 0;
}

/* Variant-focused tweaks: 1=editorial, 2=bold ops, 3=squad dark. */
html[data-theme="1"] {
  color-scheme: dark;
}

html[data-theme="1"] body {
  position: relative;
  isolation: isolate;
  background: transparent;
  letter-spacing: 0;
}

html[data-theme="1"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 560px at -6% -10%, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 72%),
    radial-gradient(960px 520px at 104% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 74%),
    linear-gradient(180deg, #04070f 0%, #060d1a 46%, #050a13 100%);
}

html[data-theme="1"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.34;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 120px);
  mix-blend-mode: soft-light;
}

html[data-theme="1"] .top,
html[data-theme="1"] .main,
html[data-theme="1"] .foot {
  position: relative;
  z-index: 1;
}

html[data-theme="1"] .top {
  top: 12px;
  padding-bottom: 12px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

html[data-theme="1"] .top__row {
  padding: 12px 16px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
  background: linear-gradient(140deg, rgba(8, 14, 27, 0.86), rgba(10, 18, 31, 0.66));
  backdrop-filter: blur(18px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

html[data-theme="1"] .brand__logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 15px;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent2) 92%, #122338));
  box-shadow:
    0 14px 30px rgba(0, 194, 255, 0.24),
    0 8px 22px rgba(255, 106, 47, 0.25);
}

html[data-theme="1"] .brand__name {
  font-size: 18px;
  letter-spacing: 0.01em;
}

html[data-theme="1"] .brand__tag {
  color: color-mix(in srgb, var(--page-fg) 66%, transparent);
}

html[data-theme="1"] .nav {
  gap: 10px;
}

html[data-theme="1"] .nav__a,
html[data-theme="1"] .nav__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

html[data-theme="1"] .nav__a {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: color-mix(in srgb, var(--page-fg) 68%, transparent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

html[data-theme="1"] .nav__a:hover {
  color: var(--page-fg);
  border-color: color-mix(in srgb, #ffffff 16%, transparent);
  background: color-mix(in srgb, var(--accent2) 14%, transparent);
}

html[data-theme="1"] .nav__cta {
  border-color: color-mix(in srgb, var(--accent2) 42%, var(--border));
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent2) 88%, #122338));
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[data-theme="1"] .nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0, 194, 255, 0.28);
}

html[data-theme="1"] .main {
  padding-bottom: 96px;
}

html[data-theme="1"] .hero {
  padding: 92px 0 44px;
}

html[data-theme="1"] .hero::before {
  inset: -180px -120px auto -120px;
  height: 620px;
  background:
    radial-gradient(820px 360px at 8% 18%, color-mix(in srgb, var(--accent2) 34%, transparent), transparent 66%),
    radial-gradient(840px 340px at 86% 16%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 68%),
    radial-gradient(620px 300px at 50% 100%, color-mix(in srgb, #ffffff 10%, transparent), transparent 66%);
  opacity: 1;
  filter: blur(6px);
}

html[data-theme="1"] .hero__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 18px;
}

html[data-theme="1"] .hero__copy {
  border: 1px solid color-mix(in srgb, #ffffff 18%, transparent);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(165deg, rgba(10, 18, 31, 0.86), rgba(8, 13, 23, 0.68));
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="1"] .hero__panel {
  position: sticky;
  top: 116px;
}

html[data-theme="1"] .kicker {
  border-color: color-mix(in srgb, #ffffff 22%, transparent);
  background: color-mix(in srgb, var(--accent2) 16%, transparent);
  color: color-mix(in srgb, var(--page-fg) 84%, transparent);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

html[data-theme="1"] .hero__h {
  max-width: 13ch;
  margin: 16px 0 14px;
  font-size: clamp(44px, 6.2vw, 98px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

html[data-theme="1"] .hero__p {
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--page-fg) 76%, transparent);
}

html[data-theme="1"] .hero__cta {
  margin-bottom: 20px;
}

html[data-theme="1"] .hero__stats {
  gap: 12px;
}

html[data-theme="1"] .stat {
  border-color: color-mix(in srgb, #ffffff 17%, transparent);
  background: linear-gradient(160deg, rgba(10, 18, 31, 0.84), rgba(8, 13, 23, 0.7));
}

html[data-theme="1"] .stat__n {
  font-size: 24px;
  line-height: 1;
}

html[data-theme="1"] .stat__t {
  color: color-mix(in srgb, var(--page-fg) 68%, transparent);
}

html[data-theme="1"] .deliver,
html[data-theme="1"] .panel {
  border-color: color-mix(in srgb, #ffffff 20%, transparent);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(12, 19, 34, 0.9), rgba(8, 13, 23, 0.76));
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="1"] .panel__p,
html[data-theme="1"] .deliver__list,
html[data-theme="1"] .card__p,
html[data-theme="1"] .tl__p,
html[data-theme="1"] .case__p,
html[data-theme="1"] .qa__a,
html[data-theme="1"] .contact__lead,
html[data-theme="1"] .guar__p,
html[data-theme="1"] .risk__p,
html[data-theme="1"] .step__p,
html[data-theme="1"] .sec__lead,
html[data-theme="1"] .foot__muted,
html[data-theme="1"] .form__note {
  color: color-mix(in srgb, var(--page-fg) 72%, transparent);
  line-height: 1.62;
}

html[data-theme="1"] .deliver__link,
html[data-theme="1"] .tools__link,
html[data-theme="1"] .foot__links a {
  color: color-mix(in srgb, var(--page-fg) 84%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

html[data-theme="1"] .thumb {
  background: rgba(8, 13, 23, 0.86);
  border-color: color-mix(in srgb, #ffffff 20%, transparent);
}

html[data-theme="1"] .pill,
html[data-theme="1"] .card__kicker,
html[data-theme="1"] .price__badge,
html[data-theme="1"] .case__tag,
html[data-theme="1"] .logo {
  border-color: color-mix(in srgb, #ffffff 20%, transparent);
  background: color-mix(in srgb, var(--accent2) 10%, rgba(8, 13, 23, 0.86));
  color: color-mix(in srgb, var(--page-fg) 76%, transparent);
}

html[data-theme="1"] .btn {
  min-height: 46px;
  border-radius: 14px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

html[data-theme="1"] .btn:hover {
  transform: translateY(-1px);
}

html[data-theme="1"] .btn--primary {
  border-color: color-mix(in srgb, var(--accent2) 48%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #ff8458), color-mix(in srgb, var(--accent2) 92%, #35d4ff));
  box-shadow:
    0 16px 30px rgba(0, 194, 255, 0.26),
    0 10px 24px rgba(255, 106, 47, 0.28);
}

html[data-theme="1"] .btn--ghost {
  background: color-mix(in srgb, var(--card-bg) 84%, rgba(8, 13, 23, 0.74));
  border-color: color-mix(in srgb, #ffffff 18%, transparent);
  color: var(--page-fg);
}

html[data-theme="1"] .btn--ghost:hover {
  background: color-mix(in srgb, var(--accent2) 12%, rgba(8, 13, 23, 0.8));
}

html[data-theme="1"] .main > .sec:not(.sec--logos) {
  padding: 56px 0;
  border-top: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
}

html[data-theme="1"] .main > .sec:nth-of-type(even) {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.015) 52%, transparent 100%);
}

html[data-theme="1"] .sec--logos {
  padding: 22px 0 14px;
}

html[data-theme="1"] .sec__head {
  gap: 10px;
  margin-bottom: 24px;
}

html[data-theme="1"] .sec__h {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

html[data-theme="1"] .grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

html[data-theme="1"] .grid > .card {
  grid-column: span 4;
}

html[data-theme="1"] .grid > .card:nth-child(1) {
  grid-column: span 7;
}

html[data-theme="1"] .grid > .card:nth-child(2) {
  grid-column: span 5;
}

html[data-theme="1"] .grid > .card:nth-child(3) {
  grid-column: span 12;
}

html[data-theme="1"] .card,
html[data-theme="1"] .tl,
html[data-theme="1"] .tst,
html[data-theme="1"] .case,
html[data-theme="1"] .price,
html[data-theme="1"] .qa,
html[data-theme="1"] .contact,
html[data-theme="1"] .form,
html[data-theme="1"] .two__col,
html[data-theme="1"] .guar__box,
html[data-theme="1"] .risk,
html[data-theme="1"] .kpi__item,
html[data-theme="1"] .dl,
html[data-theme="1"] .step,
html[data-theme="1"] .show,
html[data-theme="1"] .consent__box,
html[data-theme="1"] .modal__box {
  border-color: color-mix(in srgb, #ffffff 18%, transparent);
  background: linear-gradient(165deg, rgba(12, 19, 34, 0.88), rgba(8, 13, 23, 0.72));
  box-shadow:
    0 22px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="1"] .card::after {
  opacity: 0.5;
  background: radial-gradient(340px 180px at 12% 8%, color-mix(in srgb, var(--accent2) 26%, transparent), transparent 74%);
}

html[data-theme="1"] .card--link:hover {
  transform: translateY(-2px);
  background: linear-gradient(165deg, rgba(15, 24, 42, 0.94), rgba(9, 15, 26, 0.78));
}

html[data-theme="1"] .tl {
  grid-template-columns: 72px 1fr;
  padding: 18px;
}

html[data-theme="1"] .tl__n {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #ffffff 22%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 82%, #ff8458), color-mix(in srgb, var(--accent2) 86%, #35d4ff));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
}

html[data-theme="1"] .contact {
  background: linear-gradient(145deg, rgba(10, 18, 31, 0.9), rgba(8, 13, 23, 0.76));
}

html[data-theme="1"] .form__in {
  border-color: color-mix(in srgb, #ffffff 22%, transparent);
  background: rgba(7, 12, 22, 0.9);
  color: var(--page-fg);
}

html[data-theme="1"] .form__in::placeholder {
  color: color-mix(in srgb, var(--page-fg) 46%, transparent);
}

html[data-theme="1"] .form__ok {
  border-color: color-mix(in srgb, var(--accent2) 48%, transparent);
  background: color-mix(in srgb, var(--accent2) 16%, rgba(7, 12, 22, 0.94));
}

html[data-theme="1"] .form__err {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, rgba(7, 12, 22, 0.94));
}

html[data-theme="1"] .foot {
  border-top: 1px solid color-mix(in srgb, #ffffff 12%, transparent);
  background: color-mix(in srgb, #040912 92%, transparent);
}

html[data-theme="1"] :is(.btn, .nav__a, .nav__cta, .card--link, .deliver__link, .thumb, .qa__q, .modal__x, .logo__a, .dl, .pill, .tools__select) {
  cursor: pointer;
}

html[data-theme="1"] :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent2) 74%, #ffffff);
  outline-offset: 2px;
}

html[data-theme="2"] .top {
  border-bottom-width: 2px;
}

html[data-theme="2"] .btn {
  border-radius: 12px;
}

html[data-theme="2"] .btn--ghost {
  background: color-mix(in srgb, var(--page-fg) 4%, transparent);
}

html[data-theme="2"] .card::after {
  opacity: 0.75;
}

html[data-theme="3"] .top {
  background: color-mix(in srgb, var(--page-bg) 65%, transparent);
}

html[data-theme="3"] .btn--ghost {
  background: color-mix(in srgb, #ffffff 10%, transparent);
  border-color: color-mix(in srgb, #ffffff 18%, var(--border));
}

html[data-theme="3"] .brand__logo {
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
}

html[data-theme="3"] .card::after {
  opacity: 0.55;
}

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .grid,
  .casegrid,
  .pricegrid,
  .tgrid,
  .minicase__grid {
    grid-template-columns: 1fr;
  }
  .report,
  .two {
    grid-template-columns: 1fr;
  }
  .guar {
    grid-template-columns: 1fr;
  }
  .showgrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact {
    grid-template-columns: 1fr;
  }
  .foot__row {
    grid-template-columns: 1fr;
  }
  .foot__links {
    justify-content: flex-start;
  }
  html[data-theme="1"] .top {
    top: 8px;
    padding-bottom: 8px;
  }
  html[data-theme="1"] .top__row {
    padding: 10px 12px;
  }
  html[data-theme="1"] .hero__panel {
    position: static;
  }
  html[data-theme="1"] .hero__copy {
    padding: 20px;
  }
  html[data-theme="1"] .hero__h {
    max-width: 15ch;
    font-size: clamp(36px, 9vw, 66px);
  }
  html[data-theme="1"] .hero__p {
    font-size: 16px;
  }
  html[data-theme="1"] .grid > .card:nth-child(1),
  html[data-theme="1"] .grid > .card:nth-child(2),
  html[data-theme="1"] .grid > .card:nth-child(3) {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .shell {
    width: calc(100% - 26px);
  }
  .hero {
    padding-top: 40px;
  }
  .hero__stats {
    grid-template-columns: 1fr;
  }
  .nav {
    display: flex;
    gap: 10px;
  }
  .nav__a {
    display: none;
  }
  .brand__tag {
    display: none;
  }
  html[data-theme="1"] .top {
    top: 4px;
    padding-bottom: 6px;
  }
  html[data-theme="1"] .top__row {
    padding: 8px 9px;
    border-radius: 14px;
  }
  html[data-theme="1"] .hero {
    padding-top: 30px;
    padding-bottom: 32px;
  }
  html[data-theme="1"] .hero__copy,
  html[data-theme="1"] .deliver,
  html[data-theme="1"] .panel {
    border-radius: 18px;
  }
  html[data-theme="1"] .hero__cta {
    align-items: stretch;
  }
  html[data-theme="1"] .hero__cta .btn {
    width: 100%;
  }
  html[data-theme="1"] .hero__h {
    margin-top: 14px;
    font-size: clamp(34px, 12vw, 52px);
    line-height: 0.93;
  }
  html[data-theme="1"] .hero__p {
    font-size: 15px;
  }
  html[data-theme="1"] .kicker {
    font-size: 10px;
    letter-spacing: 0.09em;
  }
  html[data-theme="1"] .sec__h {
    font-size: clamp(24px, 8.8vw, 34px);
  }
  html[data-theme="1"] .btn {
    min-height: 45px;
  }
}