#page-index { --primary: #f98715; --bg-page: #070400; --bg-card: #0e0e0e; --border-muted: rgba(152, 151, 149, 0.28); --text-main: #f9f9f9; --text-muted: #909090; background: var(--bg-page); color: var(--text-main); } #page-index .page-index-main { margin-top: 5.9375rem; padding: 48px 16px 80px; } #page-index .page-index { max-width: 1140px; margin: 0 auto; } #page-index .page-index__header { margin-bottom: 40px; } #page-index .page-index__title { margin: 0 0 12px; font-size: clamp(32px, 4vw, 48px); font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; } #page-index .page-index__title .text-orange { color: var(--primary); } #page-index .page-index__desc { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-muted); max-width: 640px; } #page-index .page-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } #page-index .page-index__section { background: var(--bg-card); border: 0.5px solid var(--border-muted); border-radius: 12px; padding: 20px 22px 24px; } #page-index .page-index__section-title { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); } #page-index .page-index__list { margin: 0; padding: 0; list-style: none; } #page-index .page-index__list li + li { margin-top: 8px; } #page-index .page-index__link { display: block; padding: 8px 10px; border-radius: 8px; font-size: 15px; line-height: 1.35; color: var(--text-main); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } #page-index .page-index__link:hover, #page-index .page-index__link:focus { background: rgba(249, 135, 21, 0.1); color: var(--primary); text-decoration: none; } #page-index .page-index__link small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); } @media (max-width: 768px) { #page-index .page-index-main { margin-top: 72px; padding-top: 32px; } #page-index .page-index__grid { grid-template-columns: 1fr; gap: 16px; } }