:root {
  --ink: #13203a;
  --ink2: #17243d;
  --paper: #eef5ff;
  --white: #fff;
  --line: #d9e5f3;
  --muted: #63728a;
  --blue: #1768da;
  --orange: #ef633f;
  --green: #18a878;
  --max: 1500px;
  --pad: clamp(20px, 4.5vw, 72px);
}

body {
  color: #15213a !important;
  background: #eef5ff !important;
}

.site-header {
  color: #1e293b !important;
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid #dce7f3 !important;
  box-shadow: 0 8px 28px rgba(31, 64, 108, .06);
  backdrop-filter: blur(16px);
}

.header-inner {
  min-height: 68px !important;
}

.brand strong {
  color: #14213b;
}

.brand strong::before {
  display: inline-block;
  width: 29px;
  height: 29px;
  margin-right: 10px;
  color: #fff;
  background: linear-gradient(145deg, #3685ed, #1559bd);
  border-radius: 9px;
  box-shadow: 0 7px 18px rgba(25, 103, 210, .2);
  content: "Q";
  font-size: 15px;
  line-height: 29px;
  text-align: center;
  vertical-align: 4px;
}

.brand span {
  margin-left: 41px;
  color: #8593a8 !important;
}

.nav-item > a,
.nav-label > a {
  min-height: 68px !important;
  color: #46536a !important;
  font-weight: 650 !important;
}

.nav-item > a:hover,
.nav-label > a:hover,
.nav-item.current > a {
  color: #1768da !important;
  background: #eef5ff !important;
}

.header-tools {
  color: #425168;
}

.language {
  border-color: #dbe5f0 !important;
  background: #f7faff;
}

.language a {
  color: #7c899d !important;
}

.language a.active {
  color: #1768da !important;
  background: #fff !important;
}

.register {
  color: #fff !important;
  background: #1768da;
  border-color: #1768da !important;
  border-radius: 9px !important;
}

.submenu {
  border-radius: 14px;
  box-shadow: 0 22px 55px rgba(22, 52, 90, .15) !important;
}

.promo {
  box-shadow: none !important;
}

.promo-left,
.promo-right {
  min-height: 96px !important;
}

.promo-left {
  background: linear-gradient(115deg, #ee6a47, #e95435) !important;
}

.promo-right {
  background: linear-gradient(120deg, #1f75de, #1457bc) !important;
}

.hero,
.product-hero {
  color: #15213a !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(92, 157, 245, .18), transparent 28%),
    radial-gradient(circle at 84% 24%, rgba(111, 187, 255, .16), transparent 27%),
    #e9f3ff !important;
}

.hero-inner {
  min-height: 550px !important;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

.eyebrow {
  color: #1768da !important;
}

.chips span {
  color: #31547e !important;
  background: rgba(255, 255, 255, .72) !important;
  border-color: #c9dbf1 !important;
  border-radius: 999px;
}

.hero h1,
.product-copy h1,
.directory-hero h1 {
  color: #111b31;
  font-weight: 760 !important;
  letter-spacing: -2.5px !important;
}

.hero-copy > p:last-of-type,
.product-copy > p:last-of-type {
  color: #62728b !important;
}

.button {
  border-radius: 10px;
}

.orange {
  background: linear-gradient(135deg, #2878e2, #155bc1) !important;
  box-shadow: 0 10px 23px rgba(25, 103, 210, .2);
}

.network-visual {
  background:
    radial-gradient(circle, rgba(85, 135, 198, .12) 1px, transparent 1px),
    rgba(255, 255, 255, .82) !important;
  background-size: 20px 20px !important;
  border-color: #c9dcef !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(37, 73, 117, .12);
}

.visual-head,
.visual-return {
  color: #72839a !important;
  border-color: #d8e5f2 !important;
}

.scrub {
  color: #1768da;
  background: #f8fbff;
  border-color: #8eb8ed !important;
}

.idc {
  color: #1c2c47;
  background: #fff;
  border-color: #b8cde4 !important;
}

.idc span {
  color: #52647d !important;
}

.proof {
  background: rgba(255, 255, 255, .56);
  border-color: #d4e2ef !important;
}

.proof > div {
  border-color: #d4e2ef !important;
}

.proof strong {
  color: #1768da;
}

.proof span {
  color: #64758d !important;
}

.section,
.directory-content,
.plans {
  background: #f7faff !important;
}

.family-grid,
.featured-grid,
.cap-grid,
.product-cap > div {
  gap: 18px;
  border: 0 !important;
}

.family-card,
.featured-card,
.line-card,
.plan-card {
  border: 1px solid #dce7f2 !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 34px rgba(27, 62, 105, .055) !important;
}

.family-card {
  min-height: 305px !important;
}

.family-card:hover {
  color: #15213a !important;
  background: #fff !important;
  border-color: #9dbfea !important;
  box-shadow: 0 20px 48px rgba(31, 86, 153, .13) !important;
}

.family-card:hover small {
  color: #63728a !important;
}

.family-card > b {
  border-color: #e4ebf3 !important;
}

.directory-hero {
  color: #15213a !important;
  background:
    radial-gradient(circle at 82% 20%, rgba(67, 140, 237, .16), transparent 30%),
    #eaf4ff !important;
}

.directory-hero > p:last-child {
  color: #667790 !important;
}

.family-tabs {
  gap: 10px;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  background: #f7faff !important;
}

.family-tabs a {
  min-height: 54px !important;
  background: #fff;
  border: 1px solid #d8e4f1 !important;
  border-radius: 10px;
}

.family-tabs a:hover,
.family-tabs a.active {
  background: #1768da !important;
}

.line-grid {
  gap: 18px !important;
}

.line-card {
  background: #fff;
}

.plan-table {
  border-color: #d7e4f1 !important;
  border-radius: 15px;
  box-shadow: 0 14px 38px rgba(32, 68, 112, .06) !important;
}

.plan-table th {
  background: #1768da !important;
}

.order {
  background: #1768da !important;
  border-radius: 8px !important;
}

.notice {
  background: #fff6e8 !important;
  border-color: #f3a14d !important;
  border-radius: 12px;
}

.architecture,
.product-cap {
  background:
    radial-gradient(circle at 12% 0, rgba(41, 117, 223, .2), transparent 32%),
    #17243d !important;
}

.cta {
  background: linear-gradient(120deg, #1e6fd5, #134fa9) !important;
}

.site-footer {
  background: #111827 !important;
}

@media (max-width: 1120px) {
  .header-panel {
    background: #fff !important;
    box-shadow: -20px 20px 50px rgba(19, 44, 78, .12);
  }

  .nav-item > a,
  .nav-label > a {
    color: #34425b !important;
    border-color: #e4ebf3 !important;
  }

  .nav-label button {
    color: #5a6a82 !important;
  }

  .submenu {
    background: #f5f8fc !important;
  }

  .submenu a {
    color: #384961 !important;
    border-color: #e2e9f1 !important;
  }

  .menu-button {
    border-color: #cad7e6 !important;
  }

  .menu-button i {
    background: #243651 !important;
  }
}

@media (max-width: 720px) {
  .brand strong {
    font-size: 22px !important;
  }

  .brand strong::before {
    width: 26px;
    height: 26px;
    line-height: 26px;
  }

  .brand span {
    display: none;
  }

  .promo-left {
    grid-template-columns: 1fr auto !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .promo-label,
  .promo-title p {
    display: none;
  }

  .promo-title b {
    font-size: 38px !important;
    letter-spacing: -2px !important;
  }

  .code-box {
    min-width: 165px !important;
  }

  .promo-right {
    display: none !important;
  }

  .hero-inner {
    min-height: auto !important;
    padding-top: 45px !important;
  }

  .network-visual {
    min-height: 260px !important;
    border-radius: 15px !important;
  }

  .family-grid,
  .featured-grid {
    gap: 12px;
  }
}