/* =========================================================
   薄荷云计算 × 腾讯云首页框架
   页面专属视觉与组件样式
   ========================================================= */

/* ---------- Brand refinements ---------- */
:root {
  --accent: #16b889;
  --accent-soft: #e9f9f3;
  --accent-dark: #0f7d63;
  --navy: #071a33;
  --grid-line: rgba(18, 93, 245, 0.065);
}

html {
  scroll-padding-top: 96px;
}

body {
  color: var(--ink);
  background: var(--paper);
}

.text-gradient {
  color: var(--blue-600);
  background: linear-gradient(100deg, #0b4ccc 0%, #125df5 46%, #4c9dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(94deg, #0b4ccc 0%, #125df5 56%, #2f78ff 100%);
  border-color: var(--blue-600);
  box-shadow: 0 8px 22px rgba(18, 93, 245, 0.18);
}

.btn-primary:hover {
  background: linear-gradient(94deg, #093eac 0%, #0c4fd6 100%);
  border-color: #0c4fd6;
  box-shadow: 0 12px 26px rgba(18, 93, 245, 0.24);
}

.btn-ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border-color: #cfddea;
}

.btn-ghost:hover {
  color: var(--blue-600);
  border-color: var(--blue-500);
  background: #fff;
}

.tag--blue {
  color: #fff;
  background: linear-gradient(100deg, #0e53d7, #2270ff);
  border-color: transparent;
}

.live-dot {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(22, 184, 137, 0.34);
  animation: livePulseMint 2.2s ease-out infinite;
}

@keyframes livePulseMint {
  0% { box-shadow: 0 0 0 0 rgba(22, 184, 137, 0.34); }
  70% { box-shadow: 0 0 0 6px rgba(22, 184, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 184, 137, 0); }
}

.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 184, 137, 0.12);
}

button.text-link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

button.mega-promo {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

/* ---------- Top announcement ---------- */
.utility-bar {
  position: relative;
  z-index: 9;
  min-height: 36px;
  color: #a9bbce;
  background: var(--navy);
  font-size: 11px;
}

.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 36px;
}

.utility-announcement {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #c8d8e8;
  line-height: 1.5;
  transition: color var(--fast);
}

.utility-announcement:hover {
  color: #fff;
}

.utility-tag {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  color: #fff;
  background: var(--blue-600);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

.utility-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utility-announcement .icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: #7f96af;
}

.utility-links {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 18px;
  color: #88a0b8;
  white-space: nowrap;
}

.utility-links a,
.utility-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8fa6bd;
  transition: color var(--fast);
}

.utility-links a:hover,
.utility-kf:hover {
  color: #fff;
}

.utility-links .icon {
  width: 12px;
  height: 12px;
}

.utility-status .status-dot {
  box-shadow: 0 0 0 2px rgba(22, 184, 137, 0.13);
}

.utility-kf {
  color: #c4d8ea;
}

/* ---------- Header ---------- */
.site-header {
  height: var(--header-h);
}

.nav-shell {
  padding-inline: clamp(20px, 2.4vw, 36px);
}

.brand {
  margin-right: clamp(10px, 1.3vw, 20px);
}

.brand img {
  width: 132px;
  height: auto;
}

.nav-link {
  gap: 5px;
  padding-inline: clamp(7px, 0.7vw, 11px);
}

.nav-link--hot {
  gap: 5px;
}

.nav-hot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  padding: 0 4px;
  color: #fff;
  background: #dd4a4f;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.nav-console {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  color: #41546a;
  font-size: 12px;
  white-space: nowrap;
  transition: color var(--fast);
}

.nav-console:hover {
  color: var(--blue-600);
}

.nav-actions .nav-register {
  font-size: 12px;
}

.nav-divider {
  margin-inline: 5px;
}

.mega-intro .eyebrow {
  color: #8bb9ff;
}

.mega-panel {
  box-shadow: 0 24px 50px rgba(7, 26, 51, 0.14);
}

.mega-menu-col a strong {
  letter-spacing: -0.01em;
}

.mega-promo {
  cursor: pointer;
}

.mega-promo:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: -3px;
}

/* ---------- Search small refinements ---------- */
.search-submit {
  border: 0;
  cursor: pointer;
}

.search-result .search-result-main span {
  font-size: 10.5px;
}

/* ---------- Drawer additions ---------- */
button.drawer-feature {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.drawer-quick {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #edf1f5;
}

.drawer-quick-label {
  display: block;
  color: #8c9bad;
  font-size: 10px;
  letter-spacing: 0.06em;
}

.drawer-quick > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 7px;
  border-top: 1px solid #edf1f5;
  border-left: 1px solid #edf1f5;
}

.drawer-quick a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border-right: 1px solid #edf1f5;
  border-bottom: 1px solid #edf1f5;
  color: #4b5f77;
  font-size: 11px;
  transition: color var(--fast), background var(--fast);
}

.drawer-quick a:hover {
  color: var(--blue-600);
  background: #f7faff;
}

.drawer-actions .nav-console {
  display: none;
}

/* ---------- Hero ---------- */
.hero-bg:nth-child(1) {
  background-image: url("../../banner/banner-item7.webp");
  background-position: 80% 50%;
}

.hero-bg:nth-child(2) {
  background-image: url("../../banner/banner-item2-cloud.svg?v=2");
  background-position: 64% 50%;
}

.hero-bg:nth-child(3) {
  background-image: url("../../banner/banner-item9-dedicated.svg?v=2");
  background-position: 62% 50%;
}

.hero-bg {
  background-color: #f4f9ff;
  filter: contrast(1.02) saturate(1.03);
}

.hero-scrim {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.96) 28%, rgba(255, 255, 255, 0.68) 49%, rgba(255, 255, 255, 0.14) 72%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.2) 22%, transparent 38%);
}

.hero-grid-overlay {
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(18, 93, 245, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 93, 245, 0.08) 1px, transparent 1px);
}

.hero-kicker .tag {
  box-shadow: none;
}

.hero-copy h1,
.hero-copy h2 {
  letter-spacing: -0.045em;
}

.hero-copy h1 .text-gradient,
.hero-copy h2 .text-gradient {
  letter-spacing: -0.045em;
}

.hero-desc {
  color: #43576f;
}

.hero-assurance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 25px;
  color: #5e7289;
  font-size: 11px;
}

.hero-assurance li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-assurance .icon {
  width: 12px;
  height: 12px;
  color: var(--accent-dark);
}

.hero-actions .btn-ghost {
  border-color: #cbd9e7;
}

.hero-note {
  color: #8293a7;
}

.rail-item {
  transition: color var(--fast), background var(--fast);
}

.rail-item.is-active .rail-text strong {
  color: var(--blue-600);
}

.rail-head {
  color: #637b94;
}

.rail-item:nth-child(3) {
  border-bottom: 1px solid rgba(18, 93, 245, 0.08);
}

.rail-more {
  color: #60758b;
}

.hero-bottom {
  color: #687c93;
}

.hero-text-link {
  color: #60758b;
}

.hero.is-playing #hero-progress-fill {
  background: linear-gradient(90deg, var(--blue-600), var(--accent));
}

.rail-item.is-active .rail-progress {
  background: linear-gradient(90deg, var(--blue-600), var(--accent));
}

/* ---------- Updates strip ---------- */
.updates-label {
  color: #223a54;
}

.updates-label .live-dot {
  width: 5px;
  height: 5px;
}

.update-type {
  color: var(--blue-500);
  font-weight: 600;
}

.update-highlight {
  background: linear-gradient(105deg, #f4f9ff, #effaf6);
}

.update-highlight .update-type {
  color: var(--accent-dark);
}

.update-highlight:hover {
  background: linear-gradient(105deg, #eaf5ff, #e7f8f1) !important;
}

/* ---------- Product catalogue ---------- */
.catalog-section {
  background:
    radial-gradient(circle at 90% 10%, rgba(18, 93, 245, 0.05), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 22%, #f5f8fc 100%);
}

.catalog-shell {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1eaf4;
  box-shadow: 0 18px 48px rgba(7, 26, 51, 0.045);
}

.catalog-toolbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
  background: #fbfdff;
  border-bottom: 1px solid #e8eef6;
}

.catalog-tabs {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}

.catalog-tabs::-webkit-scrollbar {
  display: none;
}

.catalog-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 68px;
  padding: 0 22px;
  border: 0;
  background: transparent;
  color: #5d7187;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fast), background var(--fast);
}

.catalog-tab .icon {
  width: 17px;
  height: 17px;
  color: #8ca0b6;
  transition: color var(--fast);
}

.catalog-tab::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.catalog-tab:hover {
  color: var(--blue-600);
  background: #f7faff;
}

.catalog-tab:hover .icon {
  color: var(--blue-500);
}

.catalog-tab.is-active {
  color: var(--blue-600);
  background: linear-gradient(180deg, rgba(18, 93, 245, 0.03), transparent);
}

.catalog-tab.is-active .icon {
  color: var(--blue-600);
}

.catalog-tab.is-active::after {
  transform: scaleX(1);
}

.billing-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  padding: 13px 0;
}

.billing-label {
  margin-right: 3px;
  color: #8495a8;
  font-size: 10px;
  white-space: nowrap;
}

.billing-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dce5ef;
  background: #fff;
  color: #5b6e84;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}

.billing-option span {
  color: var(--accent-dark);
  font-size: 9px;
}

.billing-option:hover {
  color: var(--blue-600);
  border-color: #b9cff0;
}

.billing-option.is-active {
  color: #fff;
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.billing-option.is-active span {
  color: #bdffe9;
}

.catalog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 28px;
  border-bottom: 1px solid #edf2f7;
  color: #8494a6;
  font-size: 10px;
}

.catalog-meta > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.catalog-meta .icon {
  width: 12px;
  height: 12px;
  color: var(--accent-dark);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 24px 28px 26px;
}

.catalog-grid.is-animating .catalog-card {
  animation: catalogCardIn 0.42s var(--ease) both;
}

.catalog-grid.is-animating .catalog-card:nth-child(2) {
  animation-delay: 0.05s;
}

.catalog-grid.is-animating .catalog-card:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes catalogCardIn {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

.catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 585px;
  padding: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e3ebf4;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}

.catalog-card:hover {
  border-color: #b7cfef;
  box-shadow: 0 14px 34px rgba(7, 26, 51, 0.065);
  transform: translateY(-3px);
}

.catalog-card.is-featured {
  background: linear-gradient(180deg, #f7fbff 0%, #fff 30%);
  border-color: #abc7ef;
}

.catalog-card.is-featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--accent));
}

.catalog-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.catalog-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  color: var(--blue-600);
  background: #eef5ff;
  border: 1px solid #dbe8f9;
}

.catalog-icon .icon {
  width: 17px;
  height: 17px;
}

.catalog-stock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  color: var(--accent-dark);
  background: #f0faf5;
  border: 1px solid #cfeadd;
  font-size: 8.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.catalog-stock i {
  width: 4px;
  height: 4px;
  background: var(--accent);
}

.catalog-stock:not(.is-stock) {
  color: #8596a9;
  background: #f7f9fc;
  border-color: #e3eaf2;
}

.catalog-stock:not(.is-stock) i {
  background: #a6b5c5;
}

.catalog-featured {
  margin-left: auto;
  padding: 3px 6px;
  color: #fff;
  background: var(--blue-600);
  font-size: 8.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.catalog-heading {
  margin-top: 16px;
}

.catalog-heading h3 {
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.catalog-processor {
  display: block;
  margin-top: 4px;
  color: #8494a6;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.5;
}

.catalog-desc {
  margin-top: 9px;
  color: #63778c;
  font-size: 11px;
  line-height: 1.7;
}

.catalog-use {
  margin-top: 11px;
  padding: 9px 10px;
  color: #6b7d90;
  background: #f8fbfe;
  border-left: 2px solid #bcd4f2;
  font-size: 10px;
  line-height: 1.65;
}

.catalog-use span {
  display: block;
  margin-bottom: 2px;
  color: #95a4b5;
  font-size: 8px;
  letter-spacing: 0.03em;
}

.catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 11px;
}

.catalog-tags span {
  padding: 2px 6px;
  color: #65798f;
  background: #f8fbff;
  border: 1px solid #e1eaf3;
  font-size: 8.5px;
  line-height: 1.5;
}

.catalog-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 15px 0 0;
  border-top: 1px solid #ebf1f7;
  border-left: 1px solid #ebf1f7;
}

.catalog-spec {
  min-width: 0;
  padding: 7px 8px;
  border-right: 1px solid #ebf1f7;
  border-bottom: 1px solid #ebf1f7;
}

.catalog-spec dt {
  color: #96a4b5;
  font-size: 8px;
  line-height: 1.5;
}

.catalog-spec dd {
  overflow: hidden;
  margin: 1px 0 0;
  color: #374c64;
  font-size: 10.5px;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-price {
  margin-top: auto;
  padding-top: 16px;
}

.catalog-price-label {
  display: block;
  color: #8998aa;
  font-size: 8.5px;
}

.catalog-price-line {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 3px;
  color: var(--blue-600);
}

.catalog-price-line > span {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
}

.catalog-price-line strong {
  font-family: var(--font-display);
  font-size: 35px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.catalog-price-line small {
  color: #8494a6;
  font-size: 9px;
}

.catalog-price p {
  margin-top: 5px;
  color: #92a0b1;
  font-size: 8.5px;
  line-height: 1.5;
}

.catalog-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 39px;
  margin-top: 13px;
  padding: 0 13px;
  border: 1px solid var(--blue-600);
  background: #fff;
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--fast), background var(--fast), border-color var(--fast);
}

.catalog-cta .icon {
  width: 13px;
  height: 13px;
  transition: transform var(--fast);
}

.catalog-cta:hover {
  color: #fff;
  background: var(--blue-600);
}

.catalog-cta:hover .icon {
  transform: translateX(2px);
}

.catalog-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 28px;
  border-top: 1px solid #e9eff6;
  background: #fbfdff;
}

.catalog-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.catalog-perks li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #65798e;
  font-size: 9.5px;
}

.catalog-perks .icon {
  width: 12px;
  height: 12px;
  color: var(--accent-dark);
}

.catalog-foot > p {
  max-width: 460px;
  color: #9aa7b5;
  font-size: 8.5px;
  line-height: 1.6;
  text-align: right;
}

/* ---------- Industry solutions ---------- */
.industry-section {
  background: #fff;
}

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

.industry-card {
  position: relative;
  display: flex;
  min-height: 255px;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 22px 52px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(18, 93, 245, 0.055), transparent 37%),
    linear-gradient(145deg, #fff, #f9fcff);
  border: 1px solid #e2eaf3;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}

.industry-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--blue-600), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease);
}

.industry-card:hover {
  border-color: #b7cfed;
  box-shadow: 0 14px 34px rgba(7, 26, 51, 0.06);
  transform: translateY(-3px);
}

.industry-card:hover::before {
  transform: scaleY(1);
}

.industry-index {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #9eafc1;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.industry-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--blue-600);
  background: #eef5ff;
  border: 1px solid #d8e7fa;
}

.industry-icon .icon {
  width: 18px;
  height: 18px;
}

.industry-card h3 {
  margin-top: 18px;
  color: #172c46;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.industry-card p {
  max-width: 94%;
  margin-top: 8px;
  color: #6b7d92;
  font-size: 11px;
  line-height: 1.8;
}

.industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 16px;
}

.industry-tags em {
  padding: 2px 6px;
  border: 1px solid #e1eaf3;
  background: #fff;
  color: #6b7f94;
  font-size: 8.5px;
  font-style: normal;
  line-height: 1.5;
}

.industry-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #8f9fb1;
  border: 1px solid #e1e9f2;
  transition: color var(--fast), background var(--fast), border-color var(--fast), transform var(--fast);
}

.industry-arrow .icon {
  width: 13px;
  height: 13px;
}

.industry-card:hover .industry-arrow {
  color: #fff;
  background: var(--blue-600);
  border-color: var(--blue-600);
  transform: translate(2px, -2px);
}

[id^="solution-"] {
  scroll-margin-top: 96px;
}

/* ---------- Why / service ---------- */
.trust-section {
  position: relative;
  padding-block: clamp(78px, 7.5vw, 112px);
  overflow: hidden;
  color: #fff;
  background: #071a33;
}

.trust-grid-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 86% 12%, rgba(18, 93, 245, 0.22), transparent 38%),
    radial-gradient(ellipse at 8% 94%, rgba(22, 184, 137, 0.08), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 76px 76px, 76px 76px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.45) 68%, transparent 100%);
}

.trust-section .container {
  position: relative;
  z-index: 1;
}

.trust-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 42px;
}

.trust-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #84b4ed;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.trust-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
}

.trust-head h2 {
  margin-top: 16px;
  color: #fff;
  font-size: clamp(32px, 3.3vw, 46px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.trust-head h2 span {
  color: #82b2ff;
}

.trust-head > p {
  max-width: 385px;
  padding-bottom: 4px;
  color: #96abc1;
  font-size: 12px;
  line-height: 1.9;
}

.trust-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 28px;
  align-items: stretch;
}

.trust-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.trust-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 125px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--fast), background var(--fast);
}

.trust-point:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(116, 171, 255, 0.3);
}

.trust-icon {
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  color: #93beff;
  background: rgba(18, 93, 245, 0.18);
  border: 1px solid rgba(94, 150, 255, 0.25);
}

.trust-icon .icon {
  width: 16px;
  height: 16px;
}

.trust-point h3 {
  color: #eaf3ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.trust-point p {
  margin-top: 5px;
  color: #91a7bd;
  font-size: 10.5px;
  line-height: 1.75;
}

.trust-link {
  display: inline-flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 3px;
  padding-bottom: 3px;
  color: #a8ccff;
  font-size: 11px;
  transition: color var(--fast);
}

.trust-link .icon {
  width: 13px;
  height: 13px;
}

.trust-link:hover {
  color: #fff;
}

.service-dock {
  display: flex;
  flex-direction: column;
  padding: 25px 26px 18px;
  color: var(--ink);
  background: #fff;
  border-top: 3px solid var(--accent);
  box-shadow: 0 22px 58px rgba(0, 7, 21, 0.24);
}

.service-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #7a8ba0;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.service-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #79918f;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0;
}

.service-status i {
  width: 4px;
  height: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 184, 137, 0.1);
}

.service-dock h3 {
  margin-top: 13px;
  color: #102a49;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.service-dock h3 span {
  color: var(--blue-600);
}

.service-dock > p {
  margin-top: 9px;
  color: #73859a;
  font-size: 10.5px;
  line-height: 1.8;
}

.service-links {
  margin-top: 16px;
  border-top: 1px solid #e9eff6;
}

.service-links a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #edf2f7;
  transition: color var(--fast), background var(--fast);
}

.service-links a:hover {
  color: var(--blue-600);
  background: #fbfdff;
}

.service-link-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: var(--blue-600);
  background: #f1f7ff;
  border: 1px solid #e0ebf9;
}

.service-link-icon .icon {
  width: 14px;
  height: 14px;
}

.service-link-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.service-link-copy small {
  color: #8d9cad;
  font-size: 8px;
  line-height: 1.4;
}

.service-link-copy strong {
  overflow: hidden;
  color: #314862;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-links a:hover .service-link-copy strong {
  color: var(--blue-600);
}

.service-link-arrow {
  width: 13px;
  height: 13px;
  color: #9eacbc;
}

.service-dock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  color: #93a1b1;
  font-size: 8.5px;
}

.service-dock-foot > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.service-dock-foot .status-dot {
  width: 4px;
  height: 4px;
}

.service-dock-foot .text-link {
  font-size: 9px;
}

.trust-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-facts > div {
  padding: 16px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-facts > div:last-child {
  border-right: 0;
}

.trust-facts strong {
  display: block;
  color: #e8f1fc;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.trust-facts span {
  display: block;
  margin-top: 2px;
  color: #7f97ad;
  font-size: 9px;
}

/* ---------- Network ---------- */
.network-section {
  background:
    linear-gradient(180deg, #f8fbff 0%, #f2f7fe 100%);
  border-top: 1px solid #e9f0f8;
  border-bottom: 1px solid #e5edf6;
}

.network-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  background: #fff;
  border: 1px solid #e1eaf4;
  box-shadow: 0 18px 45px rgba(7, 26, 51, 0.04);
}

.network-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3vw, 34px);
  border-right: 1px solid #e9eff6;
}

.network-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #e8eef6;
  border-left: 1px solid #e8eef6;
}

.network-facts > div {
  padding: 11px 10px;
  border-right: 1px solid #e8eef6;
  border-bottom: 1px solid #e8eef6;
  background: #fbfdff;
}

.network-facts strong {
  display: block;
  color: #334b64;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.network-facts span {
  display: block;
  margin-top: 2px;
  color: #92a0b1;
  font-size: 9px;
}

.region-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 19px;
}

.region-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  padding: 11px 10px;
  border: 1px solid #e1e9f2;
  background: #fff;
  color: #4f647b;
  text-align: left;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}

.region-option:hover {
  color: var(--blue-600);
  border-color: #b8cdec;
}

.region-option.is-active {
  color: var(--blue-600);
  border-color: var(--blue-400);
  background: #f4f9ff;
  box-shadow: inset 3px 0 0 var(--blue-600);
}

.region-option-name {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  font-size: 10.5px;
  line-height: 1.35;
  white-space: nowrap;
}

.region-option-name i {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  background: #a7b7c8;
}

.region-option.is-active .region-option-name i {
  background: var(--accent);
}

.region-option-name small {
  overflow: hidden;
  color: #9aa8b8;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-option-latency {
  flex: 0 0 auto;
  color: #354b64;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
}

.region-option.is-active .region-option-latency {
  color: var(--blue-600);
}

.region-option-latency small {
  margin-left: 1px;
  color: #9aa8b8;
  font-size: 8px;
  font-weight: 400;
}

.network-current {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 17px;
  border: 1px solid #e5edf5;
  background: #f7faff;
}

.network-current > div {
  min-width: 0;
  padding: 10px;
  border-right: 1px solid #e5edf5;
}

.network-current > div:last-child {
  border-right: 0;
}

.network-current span {
  display: block;
  color: #8c9bad;
  font-size: 8.5px;
  line-height: 1.4;
}

.network-current strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #2d455f;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.network-current strong small {
  color: #8a99aa;
  font-size: 8px;
  font-weight: 400;
}

.network-more {
  margin-top: auto;
  padding-top: 16px;
  font-size: 10px;
}

.infra-map.network-map {
  min-height: 563px;
  border: 0;
  border-radius: 0;
}

.network-map .infra-earth {
  opacity: 0.78;
}

.network-map .map-label {
  font-size: 8.5px;
  padding: 3px 5px;
}

.network-map .map-label small {
  font-size: 7.5px;
}

.network-map-label {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  color: #7f95ac;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.network-map .map-caption {
  z-index: 4;
}

/* ---------- Stories & news ---------- */
.stories-section {
  background: #fff;
}

.stories-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(0, 0.97fr);
  gap: 16px;
  align-items: stretch;
}

.story-card {
  position: relative;
  display: flex;
  min-height: 444px;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(18, 93, 245, 0.11), transparent 29%),
    linear-gradient(140deg, #f4f9ff, #eaf4ff);
  border: 1px solid #dce9f7;
}

.story-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.story-industry {
  color: #8395a9;
  font-size: 9px;
}

.story-quote-mark {
  position: absolute;
  top: 52px;
  right: 24px;
  color: rgba(18, 93, 245, 0.1);
  font-family: Georgia, serif;
  font-size: 108px;
  line-height: 1;
  pointer-events: none;
}

.story-card blockquote {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 28px 0 0;
  color: #102a48;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.03em;
}

.story-desc {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin-top: 13px;
  color: #60748a;
  font-size: 11px;
  line-height: 1.85;
}

.story-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  border-top: 1px solid rgba(117, 150, 190, 0.24);
  border-bottom: 1px solid rgba(117, 150, 190, 0.24);
}

.story-metrics > div {
  padding: 12px 12px 11px 0;
  border-right: 1px solid rgba(117, 150, 190, 0.2);
}

.story-metrics > div + div {
  padding-left: 14px;
}

.story-metrics > div:last-child {
  border-right: 0;
}

.story-metrics strong {
  display: block;
  color: #1e426d;
  font-size: 12.5px;
  font-weight: 500;
}

.story-metrics span {
  display: block;
  margin-top: 1px;
  color: #8898a9;
  font-size: 8px;
  line-height: 1.5;
}

.story-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
}

.story-author {
  display: flex;
  align-items: center;
  gap: 9px;
}

.story-author > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-600), var(--accent));
  font-family: var(--font-display);
  font-size: 10px;
}

.story-author strong {
  display: block;
  color: #32475f;
  font-size: 10px;
  font-weight: 500;
}

.story-author small {
  display: block;
  color: #8b9bab;
  font-size: 8px;
}

.story-bottom .text-link {
  font-size: 10px;
}

.story-pattern {
  position: absolute;
  right: -38px;
  bottom: -54px;
  width: 188px;
  height: 188px;
  border: 1px solid rgba(18, 93, 245, 0.1);
  transform: rotate(32deg);
}

.story-pattern::before,
.story-pattern::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(18, 93, 245, 0.09);
}

.story-pattern::before { inset: 18px; }
.story-pattern::after { inset: 38px; }

.news-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid #e3ebf4;
  background: #fff;
}

.news-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e9eff6;
}

.news-panel-head h3 {
  color: #1f354f;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.news-panel-head > span {
  color: #a0afbf;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.news-row {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 15px 22px;
  border-bottom: 1px solid #edf2f7;
  transition: background var(--fast);
}

.news-row:hover {
  background: #f8fbff;
}

.news-row time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-right: 1px solid #e8eef6;
}

.news-row time strong {
  color: #1f3b5a;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
}

.news-row time span {
  color: #8d9cad;
  font-size: 8px;
  line-height: 1.4;
}

.news-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.news-type {
  color: var(--blue-500);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.4;
}

.news-main strong {
  overflow: hidden;
  color: #425770;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-row:hover .news-main strong {
  color: var(--blue-600);
}

.news-arrow {
  width: 13px;
  height: 13px;
  color: #a1afbf;
  transition: color var(--fast), transform var(--fast);
}

.news-row:hover .news-arrow {
  color: var(--blue-600);
  transform: translate(2px, -2px);
}

.news-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 22px;
  color: #8a99aa;
  font-size: 8.5px;
}

.news-panel-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.news-panel-foot .status-dot {
  width: 4px;
  height: 4px;
}

.news-panel-foot .text-link {
  font-size: 9px;
}

/* ---------- FAQ ---------- */
.faq-section {
  background: #f5f8fc;
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 30px;
  align-items: start;
}

.faq-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(22, 184, 137, 0.09), transparent 31%),
    linear-gradient(150deg, #f8fbff, #eaf3ff);
  border: 1px solid #d9e6f4;
}

.faq-eyebrow {
  color: #7790a8;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.1em;
}

.faq-aside h3 {
  margin-top: 13px;
  color: #102a48;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.faq-aside > p {
  margin-top: 10px;
  color: #65798e;
  font-size: 11px;
  line-height: 1.85;
}

.faq-aside .btn {
  min-height: 39px;
  margin-top: 20px;
  font-size: 11px;
}

.faq-aside > .text-link {
  margin-top: 15px;
  font-size: 10px;
}

.faq-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin-top: 22px;
  border-top: 1px solid rgba(117, 151, 190, 0.22);
  border-left: 1px solid rgba(117, 151, 190, 0.22);
}

.faq-channels a {
  padding: 10px;
  border-right: 1px solid rgba(117, 151, 190, 0.22);
  border-bottom: 1px solid rgba(117, 151, 190, 0.22);
  transition: background var(--fast);
}

.faq-channels a:hover {
  background: rgba(255, 255, 255, 0.6);
}

.faq-channels span {
  display: block;
  color: #395169;
  font-size: 10px;
  font-weight: 500;
}

.faq-channels small {
  display: block;
  margin-top: 1px;
  color: #8c9cad;
  font-size: 8px;
  line-height: 1.5;
}

.faq-list {
  border-top: 1px solid #dce6f1;
}

.faq-item {
  border-bottom: 1px solid #dce6f1;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 18px 2px;
  border: 0;
  background: transparent;
  color: #273f59;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: color var(--fast);
}

.faq-question:hover,
.faq-item.is-open .faq-question {
  color: var(--blue-600);
}

.faq-plus {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}

.faq-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.is-open .faq-plus::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.36s var(--ease), opacity 0.3s ease;
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer-inner p {
  max-width: 720px;
  padding: 0 28px 18px 2px;
  color: #6b7f94;
  font-size: 11px;
  line-height: 1.9;
}

/* ---------- Contact modal ---------- */
.contact-layer {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.contact-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 18, 35, 0.55);
  backdrop-filter: blur(9px);
  animation: contactBackdropIn 0.24s ease both;
}

.contact-dialog {
  position: relative;
  z-index: 1;
  width: min(810px, 100%);
  max-height: calc(100vh - 52px);
  overflow: auto;
  background: #fff;
  border: 1px solid #dce7f2;
  box-shadow: 0 30px 90px rgba(0, 15, 35, 0.32);
  animation: contactDialogIn 0.32s var(--ease) both;
}

@keyframes contactBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes contactDialogIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.contact-dialog-head {
  position: relative;
  padding: 27px 31px 21px;
  background:
    radial-gradient(circle at 96% 0, rgba(22, 184, 137, 0.09), transparent 30%),
    linear-gradient(145deg, #f8fbff, #eef6ff);
  border-bottom: 1px solid #e5edf5;
}

.contact-dialog-head .eyebrow {
  font-size: 9px;
}

.contact-dialog-head h2 {
  margin-top: 13px;
  color: #102a48;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

.contact-dialog-head > p {
  margin-top: 7px;
  color: #7b8da0;
  font-size: 11px;
}

.contact-close {
  position: absolute;
  top: 18px;
  right: 18px;
  border: 1px solid #dde7f1;
  background: rgba(255, 255, 255, 0.72);
}

.contact-context {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 31px 0;
  padding: 10px 12px;
  background: #f4f9ff;
  border-left: 3px solid var(--blue-600);
  color: #71859b;
  font-size: 10px;
}

.contact-context span {
  color: #96a4b5;
  font-size: 9px;
}

.contact-context strong {
  color: var(--blue-700);
  font-size: 10.5px;
  font-weight: 500;
}

.contact-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 20px 31px 24px;
}

.contact-method {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 15px;
  border: 1px solid #e2eaf3;
  background: #fff;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}

.contact-method:hover {
  border-color: #b9d0ed;
  box-shadow: 0 8px 22px rgba(7, 26, 51, 0.055);
  transform: translateY(-2px);
}

.contact-method-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--blue-600);
  background: #edf5ff;
  border: 1px solid #d9e8fa;
}

.contact-method-icon.is-mint {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-color: #ccebdf;
}

.contact-method-icon.is-qq {
  color: #1d78cd;
  background: #eff8ff;
  border-color: #d5eafb;
}

.contact-method-icon.is-group {
  color: #5f6fd3;
  background: #f3f4ff;
  border-color: #e1e4fb;
}

.contact-method-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.contact-method-copy small {
  color: #8d9cac;
  font-size: 8px;
  line-height: 1.4;
}

.contact-method-copy strong {
  overflow: hidden;
  color: #2b425b;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-method-copy > span {
  overflow: hidden;
  color: #96a4b4;
  font-size: 8px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-method-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--blue-600);
  font-size: 8.5px;
  white-space: nowrap;
}

.contact-method-action .icon {
  width: 11px;
  height: 11px;
}

.contact-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 31px;
  border-top: 1px solid #edf2f7;
  background: #fbfdff;
  color: #8d9bac;
  font-size: 9px;
}

.contact-dialog-foot > span,
.contact-dialog-foot > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.contact-dialog-foot .icon {
  width: 12px;
  height: 12px;
}

.contact-dialog-foot > a {
  color: var(--blue-600);
  white-space: nowrap;
}

/* ---------- Footer adaptations ---------- */
.site-footer .footer-brand > img {
  width: 148px;
  height: auto;
}

.drawer-head img {
  width: 112px;
  height: auto;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 15px;
}

.footer-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #8496aa;
  font-size: 8px;
  line-height: 1.4;
}

.footer-badges .icon {
  width: 11px;
  height: 11px;
  color: #7fb4ff;
}

.footer-kf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 17px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(123, 181, 255, 0.42);
  color: #a9ceff;
  font-size: 10px;
  transition: color var(--fast);
}

.footer-kf:hover {
  color: #fff;
}

.footer-kf .icon {
  width: 12px;
  height: 12px;
}

.footer-contact-col {
  min-width: 0;
}

.footer-contact-col a {
  white-space: nowrap;
}

.footer-address {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 7px;
  color: #64788f;
  font-size: 9px;
  line-height: 1.7;
}

.footer-address .icon {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: #7f97ad;
}

.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding: 6px 8px;
  border: 1px solid rgba(123, 178, 255, 0.32);
  background: transparent;
  color: #a9ccff;
  font-size: 9px;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}

.footer-contact-btn .icon {
  width: 11px;
  height: 11px;
}

.footer-contact-btn:hover {
  color: #fff;
  background: rgba(18, 93, 245, 0.26);
  border-color: rgba(123, 178, 255, 0.6);
}

.footer-licenses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #62758b;
  font-size: 9px;
}

.footer-licenses-title {
  color: #bbcadd;
  font-size: 10px;
  font-weight: 500;
}

.footer-licenses a {
  color: #70839a;
  transition: color var(--fast);
}

.footer-licenses a:hover {
  color: #c5d9ed;
}

.footer-licenses .footer-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #7e9e93;
  white-space: nowrap;
}

.footer-licenses .footer-status i {
  width: 4px;
  height: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 184, 137, 0.09);
}

.footer-brand .footer-social {
  margin-top: 16px;
}

.footer-brand .footer-social a {
  color: #7f92a8;
}

.footer-brand .footer-social a:hover {
  color: #fff;
  background: var(--blue-600);
  border-color: var(--blue-600);
}

/* ---------- Responsive ---------- */
@media (max-width: 1360px) {
  .nav-console {
    display: none;
  }

  .nav-shell {
    padding-inline: 24px;
  }

  .brand img {
    width: 124px;
  }

  .nav-link {
    font-size: 12.8px;
    padding-inline: 8px;
  }

  .catalog-grid {
    gap: 12px;
    padding-inline: 22px;
  }

  .catalog-card {
    min-height: 570px;
    padding: 17px;
  }

  .catalog-toolbar,
  .catalog-meta {
    padding-inline: 22px;
  }

  .catalog-tab {
    padding-inline: 17px;
  }

  .catalog-foot {
    padding-inline: 22px;
  }
}

@media (max-width: 1180px) {
  .brand img {
    width: 116px;
  }

  .nav-list > li {
    align-items: center;
  }

  .trust-layout {
    grid-template-columns: minmax(0, 1.03fr) minmax(300px, 0.97fr);
  }

  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-card {
    min-height: 600px;
  }

  .catalog-heading h3 {
    font-size: 20px;
  }

  .network-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .network-info {
    padding: 24px;
  }

  .region-option {
    padding: 10px 8px;
  }

  .region-option-name {
    display: block;
  }

  .region-option-name small {
    display: block;
    margin-top: 1px;
  }

  .region-option-name i {
    display: none;
  }

  .infra-map.network-map {
    min-height: 550px;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-h: 62px;
  }

  .brand img {
    width: 118px;
  }

  .nav-console,
  .nav-login {
    display: none;
  }

  .nav-divider {
    display: none;
  }

  .utility-inner {
    gap: 16px;
  }

  .utility-links {
    gap: 13px;
  }

  .hero-stage {
    height: 650px;
  }

  .hero-question {
    min-height: 0;
  }

  .trust-head {
    gap: 28px;
  }

  .trust-layout {
    grid-template-columns: 1fr;
  }

  .service-dock {
    min-height: 0;
  }

  .service-dock h3 {
    font-size: 25px;
  }

  .service-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #e9eff6;
    border-left: 1px solid #edf2f7;
  }

  .service-links a {
    padding: 12px;
    border-right: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
  }

  .service-links a:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .service-dock-foot {
    margin-top: 0;
    padding-top: 14px;
  }

  .catalog-toolbar {
    flex-wrap: wrap;
    gap: 0;
    padding: 0 18px;
  }

  .catalog-tabs {
    width: 100%;
    border-bottom: 1px solid #e8eef6;
  }

  .catalog-tab {
    height: 59px;
    padding-inline: 16px;
    font-size: 12.5px;
  }

  .billing-switch {
    margin-left: auto;
    padding: 11px 0;
  }

  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 20px 18px;
  }

  .catalog-card {
    min-height: 0;
  }

  .catalog-meta {
    padding-inline: 18px;
  }

  .catalog-foot {
    padding-inline: 18px;
  }

  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .network-layout {
    grid-template-columns: 1fr;
  }

  .network-info {
    border-right: 0;
    border-bottom: 1px solid #e9eff6;
  }

  .region-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .region-option-name {
    display: flex;
  }

  .region-option-name small {
    display: inline;
    margin-top: 0;
  }

  .region-option-name i {
    display: block;
  }

  .infra-map.network-map {
    min-height: 450px;
  }

  .stories-layout {
    grid-template-columns: 1fr;
  }

  .story-card {
    min-height: 400px;
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    column-gap: 24px;
  }

  .faq-eyebrow,
  .faq-aside h3,
  .faq-aside > p,
  .faq-aside > .btn,
  .faq-aside > .text-link {
    grid-column: 1;
  }

  .faq-aside h3 {
    margin-top: 9px;
  }

  .faq-aside > .btn {
    margin-top: 15px;
  }

  .faq-channels {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin-top: 0;
    align-self: stretch;
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .faq-channels a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(117, 151, 190, 0.22);
    border-bottom: 0;
  }

  .faq-channels a:first-child {
    border-top: 0;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-columns {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .footer-licenses .footer-status {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .utility-links > a:not(.utility-kf),
  .utility-status {
    display: none;
  }

  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .footer-columns .footer-contact-col {
    grid-column: span 2;
  }

  .nav-actions .nav-register {
    display: inline-flex;
  }

  .hero-inner {
    padding-top: 22px;
    padding-bottom: 70px;
  }

  .hero-copy h1,
  .hero-copy h2 {
    font-size: clamp(42px, 6.4vw, 57px);
  }

  .trust-head {
    display: block;
  }

  .trust-head > p {
    margin-top: 16px;
    max-width: 530px;
  }

  .trust-layout {
    gap: 18px;
  }

  .trust-points {
    gap: 8px;
  }

  .trust-point {
    min-height: 116px;
    padding: 17px;
  }

  .trust-facts strong {
    font-size: 17px;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-card {
    min-height: 580px;
  }

  .catalog-tab {
    height: 56px;
    padding-inline: 14px;
    font-size: 12px;
  }

  .catalog-foot {
    display: block;
  }

  .catalog-foot > p {
    margin-top: 8px;
    text-align: left;
  }

  .region-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .region-option-name {
    display: flex;
  }

  .section-head h2 {
    font-size: clamp(29px, 4.8vw, 40px);
  }

  .story-card blockquote {
    font-size: 24px;
  }

  .faq-answer-inner p {
    font-size: 10.5px;
  }
}

@media (max-width: 680px) {
  :root {
    --header-h: 58px;
  }

  .utility-bar {
    min-height: 33px;
  }

  .utility-inner {
    min-height: 33px;
    gap: 10px;
  }

  .utility-announcement {
    gap: 7px;
    font-size: 10px;
  }

  .utility-tag {
    height: 17px;
    padding-inline: 5px;
    font-size: 8px;
  }

  .utility-text {
    flex: 1;
  }

  .utility-links {
    display: none;
  }

  .brand img {
    width: 104px;
  }

  .nav-shell {
    padding-inline: 16px;
  }

  .nav-actions {
    gap: 0;
  }

  .nav-search {
    display: grid;
  }

  .nav-register {
    height: 31px;
    padding-inline: 11px;
    font-size: 11px;
  }

  .nav-hot {
    display: none;
  }

  .hero-stage {
    height: 660px;
    min-height: 0;
  }

  .hero-bg:nth-child(1) {
    background-position: 80% 50%;
  }

  .hero-bg:nth-child(2) {
    background-position: 66% 50%;
  }

  .hero-bg:nth-child(3) {
    background-position: 64% 50%;
  }

  .hero-inner {
    padding-top: 34px;
    padding-bottom: 82px;
  }

  .hero-copy-stack {
    min-height: 465px;
  }

  .hero-copy h1,
  .hero-copy h2 {
    font-size: clamp(35px, 9.3vw, 49px);
    letter-spacing: -0.045em;
  }

  .hero-kicker {
    gap: 8px;
    margin-bottom: 17px;
    font-size: 11px;
  }

  .hero-desc {
    margin-top: 15px;
    font-size: 12.5px;
    line-height: 1.8;
  }

  .hero-actions {
    gap: 7px;
    margin-top: 20px;
  }

  .hero-actions .btn {
    min-height: 41px;
    padding-inline: 14px;
    font-size: 11px;
  }

  .hero-assurance {
    gap: 8px 13px;
    margin-top: 18px;
    font-size: 9.5px;
  }

  .hero-bottom {
    bottom: 18px;
  }

  .hero-counter {
    min-width: 50px;
    font-size: 9px;
  }

  .hero-counter #hero-current {
    font-size: 12px;
  }

  .hero-progress {
    width: 80px;
  }

  .hero-bottom-right {
    gap: 9px;
  }

  .hero-arrows .square-button {
    width: 34px;
    height: 34px;
  }

  .updates-label {
    padding-block: 9px 8px;
    font-size: 11px;
  }

  .updates-label small {
    display: block;
  }

  .updates-list {
    grid-auto-columns: 244px;
  }

  .updates-list a {
    min-height: 62px;
  }

  .section {
    padding-block: 57px;
  }

  .section-head {
    margin-bottom: 26px;
  }

  .section-head h2 {
    margin-top: 13px;
    font-size: clamp(28px, 7.5vw, 37px);
  }

  .section-lead {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.8;
  }

  .section-head-aside {
    margin-top: 16px;
  }

  .section-aside-copy {
    display: none;
  }

  .catalog-section .section-head {
    margin-bottom: 22px;
  }

  .catalog-shell {
    margin-inline: -20px;
    border-left: 0;
    border-right: 0;
  }

  .catalog-toolbar {
    padding: 0;
  }

  .catalog-tabs {
    padding-inline: 14px;
    border-bottom: 1px solid #e8eef6;
  }

  .catalog-tab {
    height: 51px;
    padding-inline: 11px;
    font-size: 11px;
    gap: 5px;
  }

  .catalog-tab .icon {
    width: 14px;
    height: 14px;
  }

  .catalog-tab::after {
    left: 10px;
    right: 10px;
  }

  .billing-switch {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
    padding: 9px 14px;
    border-bottom: 1px solid #e8eef6;
  }

  .catalog-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
  }

  .catalog-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .catalog-card {
    min-height: 0;
    padding: 16px;
  }

  .catalog-heading h3 {
    font-size: 20px;
  }

  .catalog-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-price-line strong {
    font-size: 32px;
  }

  .catalog-foot {
    padding: 13px 14px;
  }

  .catalog-perks {
    gap: 6px 13px;
  }

  .industry-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .industry-card {
    min-height: 0;
    padding: 20px 18px 46px;
  }

  .industry-card p {
    max-width: 100%;
  }

  .industry-card h3 {
    margin-top: 14px;
    font-size: 18px;
  }

  .industry-tags {
    padding-top: 13px;
  }

  .trust-section {
    padding-block: 59px;
  }

  .trust-head h2 {
    font-size: 30px;
  }

  .trust-head > p {
    font-size: 11px;
  }

  .trust-points {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .trust-point {
    min-height: 0;
    padding: 16px;
  }

  .trust-link {
    margin-top: 8px;
  }

  .service-dock {
    padding: 21px 18px 16px;
  }

  .service-dock h3 {
    font-size: 23px;
  }

  .service-links {
    grid-template-columns: 1fr;
  }

  .service-links a:nth-last-child(-n + 2) {
    border-bottom: 1px solid #edf2f7;
  }

  .service-links a:last-child {
    border-bottom: 0;
  }

  .service-dock-foot {
    display: block;
    line-height: 1.7;
  }

  .service-dock-foot .text-link {
    margin-top: 8px;
  }

  .trust-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust-facts > div {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .trust-facts > div:nth-child(2n) {
    border-right: 0;
  }

  .trust-facts > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .network-info {
    padding: 18px;
  }

  .network-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .network-facts > div {
    padding: 9px 8px;
  }

  .region-picker {
    gap: 6px;
    margin-top: 14px;
  }

  .region-option {
    padding: 9px 8px;
  }

  .region-option-name {
    display: block;
    font-size: 9.5px;
  }

  .region-option-name small {
    display: block;
    margin-top: 1px;
    font-size: 7.5px;
  }

  .region-option-name i {
    display: none;
  }

  .region-option-latency {
    font-size: 12px;
  }

  .network-current {
    margin-top: 13px;
  }

  .network-current > div {
    padding: 8px;
  }

  .network-current strong {
    font-size: 10px;
  }

  .infra-map.network-map {
    min-height: 340px;
  }

  .network-map .map-label {
    padding: 2px 4px;
    font-size: 7.5px;
  }

  .network-map .map-label small {
    display: none;
  }

  .network-map-label {
    top: 10px;
    right: 10px;
    font-size: 7px;
  }

  .network-map .map-caption {
    left: 9px;
    bottom: 9px;
    font-size: 7px;
  }

  .story-card {
    min-height: 0;
    padding: 20px;
  }

  .story-card blockquote {
    margin-top: 22px;
    font-size: 21px;
  }

  .story-desc {
    font-size: 10px;
  }

  .story-metrics {
    margin-top: 18px;
  }

  .story-metrics > div {
    padding: 9px 8px 9px 0;
  }

  .story-metrics > div + div {
    padding-left: 10px;
  }

  .story-bottom {
    display: block;
    padding-top: 17px;
  }

  .story-bottom .text-link {
    margin-top: 12px;
  }

  .news-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px 16px;
  }

  .news-row time strong {
    font-size: 18px;
  }

  .news-panel-head {
    padding: 15px 16px 12px;
  }

  .news-main strong {
    font-size: 10px;
  }

  .news-panel-foot {
    padding: 12px 16px;
  }

  .faq-aside {
    display: flex;
    padding: 20px;
  }

  .faq-aside h3 {
    font-size: 23px;
  }

  .faq-channels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
    border-top: 1px solid rgba(117, 151, 190, 0.22);
    border-left: 1px solid rgba(117, 151, 190, 0.22);
  }

  .faq-channels a {
    display: block;
    border-top: 0;
    border-right: 1px solid rgba(117, 151, 190, 0.22);
    border-bottom: 1px solid rgba(117, 151, 190, 0.22);
  }

  .faq-question {
    padding: 16px 0;
    font-size: 12px;
  }

  .faq-answer-inner p {
    padding-right: 16px;
    font-size: 10px;
  }

  .contact-layer {
    padding: 0;
    align-items: center;
  }

  .contact-dialog {
    width: 100%;
    max-height: 100dvh;
    min-height: 0;
    border: 0;
  }

  .contact-dialog-head {
    padding: 22px 20px 18px;
  }

  .contact-dialog-head h2 {
    font-size: 25px;
  }

  .contact-close {
    top: 14px;
    right: 14px;
  }

  .contact-context {
    margin: 14px 20px 0;
  }

  .contact-methods {
    grid-template-columns: 1fr;
    padding: 14px 20px 20px;
  }

  .contact-dialog-foot {
    display: block;
    padding: 12px 20px;
    line-height: 1.9;
  }

  .contact-dialog-foot > a {
    margin-top: 3px;
  }

  .site-footer .footer-brand > img {
    width: 128px;
  }

  .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 20px;
  }

  .footer-licenses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }

  .footer-licenses-title {
    margin-bottom: 2px;
  }

  .footer-licenses .footer-status {
    margin-left: 0;
  }

  .footer-columns .footer-contact-col {
    grid-column: 1 / -1;
    display: block;
  }

  .footer-columns .footer-contact-col h3 {
    margin-bottom: 10px;
  }

  .footer-address {
    max-width: 260px;
  }
}

@media (max-width: 430px) {
  .brand img {
    width: 96px;
  }

  .nav-register {
    display: inline-flex;
  }

  .hero-stage {
    height: 680px;
  }

  .hero-actions .btn {
    padding-inline: 12px;
    font-size: 10.5px;
  }

  .hero-assurance {
    gap: 7px 10px;
    font-size: 9px;
  }

  .hero-copy h1,
  .hero-copy h2 {
    font-size: clamp(32px, 9.6vw, 41px);
  }

  .catalog-tab {
    font-size: 10.5px;
  }

  .catalog-tab .icon {
    display: none;
  }

  .billing-label {
    font-size: 9px;
  }

  .footer-columns .footer-contact-col {
    grid-column: 1 / -1;
  }

  .contact-method-action {
    display: none;
  }

  .service-dock-foot {
    font-size: 8px;
  }
}

/* =========================================================
   Layout refinement: compact hero, larger utility cards,
   larger navigation text and licence information.
   ========================================================= */
.hero-stage {
  height: clamp(550px, 60vh, 590px);
  min-height: 550px;
}

.nav-link {
  font-size: 15px;
}

.nav-hot {
  height: 15px;
  padding-inline: 5px;
  font-size: 9px;
}

.nav-console {
  font-size: 13.5px;
}

.nav-actions .nav-login {
  font-size: 14px;
}

.nav-actions .nav-register {
  font-size: 14px;
}

.updates-inner {
  min-height: 96px;
}

.updates-label {
  font-size: 13px;
}

.updates-list a {
  min-height: 96px;
  gap: 4px;
  padding: 16px 24px;
}

.update-type {
  font-size: 10px;
}

.update-text {
  font-size: 14px;
  line-height: 1.5;
}

.update-extra {
  font-size: 11px;
  line-height: 1.5;
}

.footer-licenses {
  gap: 10px 22px;
  padding: 18px 0;
  color: #8296ac;
  font-size: 11.5px;
  line-height: 1.7;
}

.footer-licenses-title {
  font-size: 12px;
}

.footer-licenses .footer-status {
  font-size: 10.5px;
}

@media (max-width: 1360px) {
  .nav-link {
    font-size: 14px;
  }

  .nav-actions .nav-login,
  .nav-actions .nav-register {
    font-size: 13.5px;
  }
}

@media (max-width: 1024px) {
  .hero-stage {
    height: 650px;
    min-height: 0;
  }

  .updates-inner {
    min-height: 0;
  }

  .updates-label {
    font-size: 12px;
  }

  .updates-list a {
    min-height: 84px;
    padding: 14px 20px;
  }

  .update-text {
    font-size: 13.5px;
  }

  .update-extra {
    font-size: 10.5px;
  }
}

@media (max-width: 680px) {
  .hero-stage {
    height: 660px;
    min-height: 0;
  }

  .updates-inner {
    min-height: 0;
    padding-inline: 0;
  }

  .updates-label {
    padding-block: 10px 8px;
    font-size: 12.5px;
  }

  .updates-list {
    grid-auto-columns: 244px;
  }

  .updates-list a {
    min-height: 80px;
    padding: 13px 16px;
  }

  .update-type {
    font-size: 9.5px;
  }

  .update-text {
    font-size: 13px;
  }

  .update-extra {
    font-size: 10.5px;
  }

  .footer-licenses {
    gap: 7px;
    padding: 16px 0;
    font-size: 11px;
  }

  .footer-licenses-title {
    font-size: 11.5px;
  }
}

@media (max-width: 430px) {
  .hero-stage {
    height: 680px;
  }
}

/* =========================================================
   Static hero: keep one still image, no auto rotation or
   background zoom. Manual category / arrow switching remains.
   ========================================================= */
.hero-bg {
  transform: none;
  transition: none;
  will-change: auto;
}

.hero-bg.is-active {
  animation: none;
  transform: none;
}

.hero-progress,
.hero-autoplay {
  display: none;
}

.rail-item.is-active .rail-progress {
  animation: none;
  transform: scaleX(1);
}

/* ---------- service assurance band ---------- */
.service-band { position: relative; background: #fff; border-top: 1px solid #dbe7f3; border-bottom: 1px solid #dbe7f3; }
.service-band-inner { display: grid; grid-template-columns: 1.25fr 2.1fr auto; gap: clamp(20px, 2.6vw, 44px); align-items: center; padding-block: 20px; }
.service-band-kicker { display: block; color: #8fa5b8; font-size: 9.5px; font-weight: 600; letter-spacing: .15em; }
.service-band-lead h3 { margin: 6px 0 0; color: #2f4b66; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.service-band-lead p { max-width: 335px; margin: 5px 0 0; color: #8fa2b4; font-size: 10.5px; line-height: 1.65; }
.service-band-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-band-stat { min-width: 0; padding-inline: 18px; border-left: 1px solid #dfeaf5; }
.service-band-stat:first-child { border-left: 0; padding-left: 0; }
.service-band-stat strong { display: block; color: #294a68; font-size: 18px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.service-band-stat strong span { font-size: 10px; margin-left: 1px; }
.service-band-stat small { display: block; margin-top: 6px; color: #8fa2b4; font-size: 10px; white-space: nowrap; }
.service-band-link { display: inline-flex; align-items: center; gap: 5px; padding-bottom: 2px; color: #6f879b; border-bottom: 1px solid #cfdfee; font-size: 10.5px; white-space: nowrap; }
.service-band-link:hover { color: var(--blue-600); border-bottom-color: var(--blue-600); }
.service-band-link .icon { width: 13px; height: 13px; }
.catalog-section { padding-top: clamp(38px, 3.6vw, 52px); }
@media (max-width: 1100px) {
  .service-band-inner { grid-template-columns: 1fr auto; }
  .service-band-stats { grid-column: 1 / -1; grid-row: 2; }
  .service-band-link { grid-column: 2; grid-row: 1; }
}
@media (max-width: 680px) {
  .service-band-inner { grid-template-columns: 1fr; gap: 14px; padding-block: 17px; }
  .service-band-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 0; }
  .service-band-stat { padding-inline: 12px; }
  .service-band-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .service-band-link { grid-column: 1; grid-row: auto; }
}

/* Slightly more compact hero to remove excess lower whitespace on desktop. */
@media (min-width: 901px) {
  .hero-stage { height: clamp(500px, 53vh, 535px) !important; min-height: 500px !important; }
  .hero-inner { padding-top: 24px; padding-bottom: 52px; }
}

/* Mobile hero: fit content height instead of a fixed 650px canvas. */
@media (max-width: 900px) {
  .hero-stage { height: auto !important; min-height: 0 !important; }
  .hero-inner { display: block !important; height: auto !important; padding-top: 22px !important; padding-bottom: 26px !important; }
  .hero-copy-stack { height: auto !important; min-height: 0 !important; margin: 0 !important; }
  .hero-copy { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; max-width: none !important; padding-block: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .hero-copy:not(.is-active) { display: none !important; }
  .hero-copy.is-active { display: block !important; transform: none !important; }
  .hero-kicker { margin-bottom: 14px; }
  .hero-desc { margin-top: 12px; }
  .hero-actions { margin-top: 18px; }
  .hero-assurance { margin-top: 14px; }
}

/* Mobile drawer accordion groups */
.drawer-group { border-bottom: 1px solid #edf1f5; }
.drawer-group-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:49px; padding:0; color:#263a53; background:transparent; border:0; font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.drawer-group-toggle:hover { color:var(--blue-600); }
.drawer-group-toggle .icon { width:14px; height:14px; color:#9aa8b8; transition:transform .2s ease; }
.drawer-group.is-open .drawer-group-toggle .icon { transform:rotate(90deg); }
.drawer-subnav { display:grid; gap:0; padding:0 0 7px 13px; }
.drawer-subnav[hidden] { display:none !important; }
.drawer-subnav a { min-height:38px !important; padding:0 2px 0 14px; color:#61788e !important; border-bottom:1px dashed #f0f4f8 !important; border-left:1px solid #e4edf6; font-size:12px !important; }
.drawer-subnav a:last-child { border-bottom:0 !important; }
.drawer-subnav a:hover { color:var(--blue-600) !important; }