/* ==========================================================================
   About page.

   The page previously rendered as a banner followed by two prose blocks on
   an empty background - visually the weakest page on the site. These styles
   give it the same structural weight as the sales pages while reusing the
   existing design language (section-heading/subheading, the #why-choose-us
   card grid, .main-container, .section-padding) rather than inventing a
   second look.

   The card grid itself is NOT redefined here - #about-values borrows the
   existing #why-choose-us rules in common.css, which had their selectors
   widened to cover both. Only About-specific layout lives in this file.
   ========================================================================== */

/* ---------- Story + facts panel ---------- */

/* The facts panel is sized here, not the prose column, and in px rather than
   rem on purpose. globals.css raises the root font size to 90% above 1600px,
   so the 54.4rem this used to pin the prose column to grew from 544px to
   783px on a wide screen and squeezed the panel down to 268px - which is why
   "Our own dedicated server" was wrapping over three lines. Giving the panel
   a fixed range and letting the prose take the remainder holds the same split
   at every root size. */
.about-story__grid {
  display: grid;
  max-width: 1120px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 4.8rem;
  align-items: start;
}

@media (max-width: 991px) {
  .about-story__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

.about-prose {
  color: var(--color-text);
  line-height: 1.8;
  font-size: 1.7rem;
}

.about-prose h3 {
  color: var(--color-primary);
  font-size: 2.2rem;
  font-weight: 700;
  margin-top: 3.52rem;
  margin-bottom: 1.45rem;
}

.about-prose h3:first-child {
  margin-top: 0;
}

.about-prose p + p {
  margin-top: 1.6rem;
}

/* Facts panel. Sticky on desktop so it stays beside the prose while the
   longer column scrolls; static on narrow screens where it simply stacks. */
.about-facts {
  position: sticky;
  top: 110px;
  padding: 3.2rem 2.8rem;
  border-radius: var(--radius-24);
  background: #0d0d0d;
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

@media (max-width: 991px) {
  .about-facts {
    position: static;
  }
}

.about-facts__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2.24rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.about-facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.8rem;
}

.about-facts__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.45rem;
  align-items: start;
}

.about-facts__list iconify-icon {
  font-size: 2.8rem;
  color: #fff;
  margin-top: 0.08rem;
}

.about-facts__list strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}

.about-facts__list span {
  display: block;
  font-size: 1.45rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin-top: 0.24rem;
}

/* ---------- Infrastructure teaser strip ---------- */

.about-infra__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
  flex-wrap: wrap;
  padding: 4rem;
  border-radius: var(--radius-24);
  background: var(--color-light-gray);
}

.about-infra__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.96rem;
}

.about-infra__copy p {
  color: var(--color-text);
  max-width: 60ch;
  line-height: 1.7;
  margin: 0;
}

.about-infra__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.96rem;
  white-space: nowrap;
  padding: 1.52rem 3.04rem;
  border-radius: var(--radius-16);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-base);
}

.about-infra__cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.about-infra__cta iconify-icon {
  font-size: 1.92rem;
  transition: transform 0.3s ease;
}

.about-infra__cta:hover iconify-icon {
  transform: translateX(3px);
}

@media (max-width: 575px) {
  .about-infra__inner {
    padding: 2.8rem;
  }
}

/* Card badge icon. The shared .icon-wrap from #why-choose-us paints a dark
   radial background and the original markup put a gradient <svg class="icon">
   inside it; these cards use an <iconify-icon> instead, so it needs its own
   size and a light colour to read against that dark circle. */
#about-values .icon-wrap .feature-ico {
  font-size: 2.64rem;
  color: #e8e8e8;
  line-height: 1;
}