.catalog-index {
  --index-ink: #102044;
  --index-muted: #53627d;
  --index-blue: #0649c8;
  --index-bg: #f5f8ff;
  min-height: 100vh;
  padding-bottom: 72px;
  overflow: hidden;
  background: var(--index-bg);
  color: var(--index-ink);
}

.catalog-index__hero {
  padding: 42px 0 34px;
}

.catalog-index__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(440px, 1.06fr);
  gap: 46px;
  align-items: center;
  min-height: 500px;
  padding: 64px;
  overflow: hidden;
  border-radius: 36px;
  background: linear-gradient(125deg, #073caa 0%, #1262dc 58%, #2a8ce7 100%);
  box-shadow: 0 30px 70px rgba(27, 70, 151, 0.24);
}

.catalog-index__hero-grid::before,
.catalog-index__hero-grid::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.catalog-index__hero-grid::before { width: 460px; height: 460px; right: -150px; top: -240px; }
.catalog-index__hero-grid::after { width: 240px; height: 240px; left: -140px; bottom: -150px; }

.catalog-index__hero-content { position: relative; z-index: 2; max-width: 620px; }

.catalog-index__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  color: #ffe66d;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.catalog-index__eyebrow--dark { color: var(--index-blue); }

.catalog-index__hero h1 {
  max-width: 640px;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -0.04em;
}

.catalog-index__hero-content > p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
  line-height: 1.55;
}

.catalog-index__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.catalog-index__button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.catalog-index__button:hover,
.catalog-index__button:focus-visible { transform: translateY(-2px); text-decoration: none; }
.catalog-index__button--primary { background: #ffdf4d; color: #082f91; box-shadow: 0 13px 26px rgba(4, 30, 105, 0.25); }
.catalog-index__button--primary:hover,
.catalog-index__button--primary:focus-visible { background: #ffe87b; color: #082f91; box-shadow: 0 17px 32px rgba(4, 30, 105, 0.31); }
.catalog-index__button--light { border-color: rgba(255, 255, 255, 0.46); background: rgba(255, 255, 255, 0.12); color: #fff; }
.catalog-index__button--light:hover,
.catalog-index__button--light:focus-visible { background: rgba(255, 255, 255, 0.22); color: #fff; }
.catalog-index--subjects .catalog-index__hero .catalog-index__button--primary,
.catalog-index--directions .catalog-index__hero .catalog-index__button--primary { background: #D4145A; color: #fff; box-shadow: 0 13px 26px rgba(212, 20, 90, 0.28); }
.catalog-index--subjects .catalog-index__hero .catalog-index__button--primary:hover,
.catalog-index--subjects .catalog-index__hero .catalog-index__button--primary:focus-visible,
.catalog-index--directions .catalog-index__hero .catalog-index__button--primary:hover,
.catalog-index--directions .catalog-index__hero .catalog-index__button--primary:focus-visible { background: #002b84; color: #fff; box-shadow: 0 17px 32px rgba(0, 43, 132, 0.32); }

.catalog-index__hero-board { position: relative; z-index: 1; min-height: 370px; }
.catalog-index__hero-ring { position: absolute; width: 350px; height: 350px; top: 10px; right: 24px; border: 1px dashed rgba(255, 255, 255, 0.46); border-radius: 50%; transform: rotate(-18deg); }
.catalog-index__hero-tile,
.catalog-index__hero-letter { position: absolute; display: grid; align-content: center; border-radius: 24px; box-shadow: 0 22px 35px rgba(4, 30, 105, 0.24); transform: rotate(-7deg); }
.catalog-index__hero-tile { width: 210px; min-height: 128px; padding: 22px; }
.catalog-index__hero-tile span { margin-bottom: 10px; font-size: 13px; font-weight: 900; opacity: 0.58; }
.catalog-index__hero-tile strong { font-size: 22px; line-height: 1.05; }
.catalog-index__hero-tile small { margin-top: 7px; font-size: 12px; font-weight: 700; }
.catalog-index__hero-tile--yellow { top: 20px; left: 14px; background: #ffe064; color: #163886; }
.catalog-index__hero-tile--pink { top: 138px; right: 15px; background: #f72f84; color: #fff; transform: rotate(7deg); }
.catalog-index__hero-tile--mint { bottom: 12px; left: 68px; background: #b7f2d6; color: #11655a; transform: rotate(-3deg); }
.catalog-index__hero-letter { width: 184px; height: 184px; align-items: center; justify-items: center; font-size: 92px; font-weight: 950; line-height: 0.8; }
.catalog-index__hero-letter span { display: block; margin-top: 12px; font-size: 13px; font-weight: 900; line-height: 1; }
.catalog-index__hero-letter--yellow { top: 6px; left: 20px; background: #ffe064; color: #163886; }
.catalog-index__hero-letter--pink { top: 128px; right: 14px; background: #f72f84; color: #fff; transform: rotate(7deg); }
.catalog-index__hero-letter--mint { bottom: 2px; left: 80px; background: #b7f2d6; color: #11655a; transform: rotate(-3deg); }

.catalog-index__section { padding: 48px 0 0; }
.catalog-index__section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr); gap: 48px; align-items: end; margin-bottom: 30px; }
.catalog-index__section-head h2,
.catalog-index__cta h2 { margin: 0; color: var(--index-ink); font-size: clamp(30px, 3.3vw, 48px); font-weight: 900; line-height: 1.03; letter-spacing: -0.03em; }
.catalog-index__section-head p { margin: 0; color: var(--index-muted); font-size: 16px; line-height: 1.6; }

.catalog-index__cards { display: grid; gap: 20px; }
.catalog-index__cards--directions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-index__cards--subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.catalog-index-card { --card-bg: #fff; --card-accent: #0649c8; position: relative; display: flex; min-height: 310px; flex-direction: column; padding: 24px; overflow: hidden; border: 2px solid rgba(16, 32, 68, 0.06); border-radius: 26px; background: var(--card-bg); box-shadow: 0 13px 30px rgba(21, 48, 103, 0.08); transition: transform 0.22s ease, box-shadow 0.22s ease; }
.catalog-index-card::after { position: absolute; right: -28px; top: -42px; width: 140px; height: 140px; content: ""; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.catalog-index-card:hover,
.catalog-index-card:focus-within { box-shadow: 0 24px 46px rgba(21, 48, 103, 0.16); }
.catalog-index-card__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-index-card__mark { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 20px; background: rgba(255, 255, 255, 0.72); color: var(--card-accent); font-size: 28px; font-weight: 950; box-shadow: 0 8px 15px rgba(21, 48, 103, 0.08); }
.catalog-index-card h3 { position: relative; z-index: 1; margin: 24px 0 10px; color: var(--index-ink); font-size: 24px; font-weight: 950; line-height: 1.08; }
.catalog-index-card p { position: relative; z-index: 1; margin: 0 0 22px; color: #415273; font-size: 14px; line-height: 1.55; }
.catalog-index-card__promo-links { position: relative; z-index: 1; margin: 0 0 18px; }
.catalog-index-card__promo-links ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.catalog-index-card__promo-links li { margin: 0; padding: 0; }
.catalog-index-card__promo-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 13px; border: 1px solid color-mix(in srgb, var(--card-accent) 24%, transparent); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--card-accent); font-size: 13px; font-weight: 800; line-height: 1.2; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.catalog-index-card__promo-links a:hover, .catalog-index-card__promo-links a:focus-visible { border-color: var(--card-accent); background: var(--card-accent); color: #fff; text-decoration: none; transform: translateY(-1px); }
.catalog-index-card__link { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 17px; border-top: 1px solid rgba(16, 32, 68, 0.13); color: var(--card-accent); font-size: 14px; font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.catalog-index-card__link span { font-size: 22px; line-height: 1; transition: transform 0.2s ease; }
.catalog-index-card__link:hover, .catalog-index-card__link:focus-visible { color: var(--card-accent); text-decoration: none; }
.catalog-index-card__link:hover span, .catalog-index-card__link:focus-visible span { transform: translate(3px, -3px); }

.catalog-index-card--blue { --card-bg: #cfe0ff; --card-accent: #0751cf; }
.catalog-index-card--yellow { --card-bg: #ffe99a; --card-accent: #9a6500; }
.catalog-index-card--pink { --card-bg: #ffd2e7; --card-accent: #c30b62; }
.catalog-index-card--violet { --card-bg: #dfd5ff; --card-accent: #6033bf; }
.catalog-index-card--mint { --card-bg: #c8f4df; --card-accent: #08745d; }
.catalog-index-card--orange { --card-bg: #ffd5ad; --card-accent: #b44a00; }
.catalog-index-card--sky { --card-bg: #c7ecff; --card-accent: #0074a8; }
.catalog-index-card--lime { --card-bg: #e0f3a9; --card-accent: #4f7400; }
.catalog-index-card--indigo { --card-bg: #cdd4ff; --card-accent: #3c4fb2; }
.catalog-index-card--coral { --card-bg: #ffd0c7; --card-accent: #b52c1b; }
.catalog-index-card--lavender { --card-bg: #eed6ff; --card-accent: #8040a9; }

.catalog-index__cta { padding: 58px 0 0; }
.catalog-index__cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 42px 50px; border-radius: 28px; background: #102b75; box-shadow: 0 18px 42px rgba(16, 43, 117, 0.2); }
.catalog-index__cta h2 { max-width: 680px; color: #fff; }
.catalog-index__cta p { max-width: 660px; margin: 12px 0 0; color: rgba(255, 255, 255, 0.75); font-size: 16px; line-height: 1.55; }
.catalog-index__cta .catalog-index__button { flex: 0 0 auto; }
.catalog-index__cta .catalog-index__button--primary { background: #D4145A; color: #fff; box-shadow: 0 13px 26px rgba(212, 20, 90, 0.28); }
.catalog-index__cta .catalog-index__button--primary:hover,
.catalog-index__cta .catalog-index__button--primary:focus-visible { background: #002b84; color: #fff; box-shadow: 0 17px 32px rgba(0, 43, 132, 0.32); }

@media screen and (max-width: 1160px) {
  .catalog-index__hero-grid { grid-template-columns: 1fr; gap: 26px; padding: 46px; }
  .catalog-index__hero-board { min-height: 290px; max-width: 580px; width: 100%; margin: 0 auto; }
  .catalog-index__hero-ring { right: 90px; }
  .catalog-index__cards--subjects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 960px) {
  .catalog-index__section-head { grid-template-columns: 1fr; gap: 16px; }
  .catalog-index__cards--directions, .catalog-index__cards--subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-index__cta-inner { align-items: flex-start; flex-direction: column; }
}

@media screen and (max-width: 680px) {
  .catalog-index { padding-bottom: 42px; }
  .catalog-index__hero { padding: 16px 0 24px; }
  .catalog-index__hero-grid { gap: 24px; min-height: 0; padding: 30px 22px 24px; border-radius: 25px; }
  .catalog-index__hero h1 { margin-bottom: 15px; font-size: 38px; padding-top: 30px;}
  .catalog-index__hero-content > p { font-size: 15px; }
  .catalog-index__actions { flex-direction: column; margin-top: 23px; }
  .catalog-index__button { width: 100%; min-height: 50px; }
  .catalog-index__hero-board { min-height: 245px; }
  .catalog-index__hero-ring { width: 240px; height: 240px; right: 10px; top: 2px; }
  .catalog-index__hero-tile { width: 160px; min-height: 92px; padding: 14px; border-radius: 18px; }
  .catalog-index__hero-tile strong { font-size: 17px; }
  .catalog-index__hero-tile small { font-size: 10px; }
  .catalog-index__hero-tile--yellow { left: 0; }
  .catalog-index__hero-tile--pink { right: 0; top: 94px; }
  .catalog-index__hero-tile--mint { left: 38px; bottom: 0; }
  .catalog-index__hero-letter { width: 130px; height: 130px; font-size: 68px; border-radius: 19px; }
  .catalog-index__hero-letter span { margin-top: 8px; font-size: 10px; }
  .catalog-index__hero-letter--pink { right: 0; top: 92px; }
  .catalog-index__hero-letter--mint { left: 36px; bottom: 0; }
  .catalog-index__section { padding-top: 28px; }
  .catalog-index__section-head h2, .catalog-index__cta h2 { font-size: 31px; }
  .catalog-index__section-head p, .catalog-index__cta p { font-size: 14px; }
  .catalog-index__cards--directions, .catalog-index__cards--subjects { grid-template-columns: 1fr; gap: 13px; }
  .catalog-index-card { min-height: 260px; padding: 20px; border-radius: 22px; }
  .catalog-index-card h3 { margin-top: 19px; font-size: 22px; }
  .catalog-index__cta { padding-top: 36px; }
  .catalog-index__cta-inner { padding: 30px 22px; border-radius: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-index__button, .catalog-index-card, .catalog-index-card__link span { transition: none; }
}