:root {
  --ink: #1a1a1a;
  --ink-muted: #5c5c5c;
  --accent: #eb008b;
  --cta: #300b45;
  --cta-hover: #4a1268;
  --star: #ffc20e;
  --surface: #ffffff;
  --surface-muted: #f5f5f5;
  --line: #e4e4e4;

  --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  --page-container: 1450px;
  --gutter: 20px;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.12);
  --logo-gap: 6em;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

.page {
  margin: 0;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.page :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 10;
  padding: var(--s-3) var(--s-4);
  background: var(--cta);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

.section {
  padding: var(--s-7) 0;
}

.section--tight {
  padding: var(--s-5) 0;
}

.section--muted {
  background-color: var(--surface-muted);
}

.page-container {
  width: 100%;
  max-width: var(--page-container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.block-title {
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-heading {
  /* wide enough that these headings sit on one line; the supporting
     paragraph below sets its own, narrower reading measure */
  max-width: 52rem;
  margin: 0 auto var(--s-6);
  text-align: center;
}

.section-heading__title {
  margin: 0 0 var(--s-3);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  /* splits the lines evenly instead of stranding one word on its own */
  text-wrap: balance;
}

/* headings that stand alone need no gap under them */
.section-heading__title:last-child {
  margin-bottom: 0;
}

.section-heading__text {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-2);
  text-align: center;
}

.benefits__icon {
  width: auto;
  height: 44px;
}

.benefits__label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5) var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-2px);
  border-color: #d0d0d0;
  box-shadow: var(--shadow-lift);
}

.product-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.product-card__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface-muted);
}

.product-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 250 / 208;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.product-card:hover .product-card__img {
  transform: scale(1.06);
}

.product-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--s-3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 55%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.product-card:hover .product-card__overlay,
.product-card:focus-within .product-card__overlay {
  opacity: 1;
}

.product-card__cta {
  padding: var(--s-2) var(--s-4);
  background-color: var(--cta);
  color: #fff;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-2);
  padding: var(--s-4);
}

.product-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

.product-card__link:hover .product-card__title {
  color: var(--accent);
}

.rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: auto 0 0;
}

.rating__star {
  flex: none;
  width: 14px;
  height: 14px;
  fill: var(--star);
}

.rating__star--half {
  fill: url(#star-half);
}

.rating__star--empty {
  fill: #d9d9d9;
}

.rating__count {
  margin-left: var(--s-1);
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin: 0 0 var(--s-7);
  margin-bottom: var(--s-7) !important;
  padding: var(--s-6);
  background-color: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  list-style: none;
}

.stats__item {
  text-align: center;
}

.stats__value {
  margin: 0 0 var(--s-1);
  color: var(--cta);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stats__label {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.reason__icon {
  width: 48px;
  height: 48px;
  padding: 10px;
  background-color: var(--surface-muted);
  border-radius: 50%;
}

.reason__title {
  margin: 0 0 var(--s-2);
  font-size: 1.0625rem;
  font-weight: 600;
}

.reason__text {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.team {
  padding: var(--s-8) 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url("https://axiomprint.s3.us-west-1.amazonaws.com/Homepage/2026-05-12T20-39-14-876Z-home-page-banner-team-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.team__panel {
  max-width: 640px;
  margin-left: auto;
  padding: var(--s-6);
  background: rgba(26, 10, 38, 0.72);
  border-radius: var(--radius);
}

.features {
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  color: #fff;
}

.feature__icon {
  width: 44px;
  height: 44px;
}

.feature__title {
  margin: 0 0 var(--s-2);
  font-size: 1.0625rem;
  font-weight: 600;
}

.feature__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.logos {
  padding: var(--s-5) 0;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  overflow: hidden;
}

.logos__track {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-scroll 60s linear infinite;
}

.logos:hover .logos__track,
.logos:focus-within .logos__track {
  animation-play-state: paused;
}

.logos__item {
  flex: none;
}

.logos__img {
  display: block;
  width: 140px;
  height: 94px;
  object-fit: contain;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--logo-gap) / 2)); }
}

.contact__card {
  max-width: 680px;
  margin: 0 auto;
}

.contact__frame {
  display: block;
  width: 100%;
  height: 350px;
  border: 0;
}

.contact__frame:focus-visible {
  outline: none;
}

@media (max-width: 1727px) { :root { --page-container: 1280px; } }
@media (max-width: 1494px) { :root { --page-container: 1096px; } }
@media (max-width: 1311px) { :root { --page-container: 952px; } }
@media (max-width: 1167px) { :root { --page-container: 776px; } }

@media (max-width: 991px) {
  :root { --page-container: 100%; --logo-gap: 4em; }

  .section { padding: var(--s-6) 0; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .benefits { grid-template-columns: repeat(3, 1fr); }
  .section-heading__title { font-size: 1.625rem; }
  .block-title { font-size: 1.375rem; }
  .team { padding: var(--s-6) 0; }
  .team__panel { max-width: 100%; padding: var(--s-5); }
  .stats { padding: var(--s-5); }
  .stats__value { font-size: 1.875rem; }
}

@media (max-width: 767px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .reasons { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
}

@media (max-width: 575px) {
  :root { --gutter: 16px; --logo-gap: 3em; }

  .benefits { grid-template-columns: repeat(2, 1fr); }
  .benefits__item { padding: var(--s-3) var(--s-1); }
  .benefits__icon { height: 38px; }
  .section-heading__title { font-size: 1.375rem; }
  .product-card__body { padding: var(--s-3); }
  .product-card__title { font-size: 0.9375rem; }
  .logos__img { width: 110px; height: 74px; }
  .reason { grid-template-columns: 1fr; gap: var(--s-3); }
  .feature { grid-template-columns: 1fr; gap: var(--s-3); }
}

@media (hover: none) {
  .product-card__overlay { opacity: 1; }
  .product-card:hover { transform: none; box-shadow: var(--shadow); }
  .product-card:hover .product-card__img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
  .product-card,
  .product-card__img,
  .product-card__overlay { transition: none; }
  .product-card:hover { transform: none; }
  .product-card:hover .product-card__img { transform: none; }
}