:root {
     --orange: #FF4A1C;
     --orange-dark: #E83A0E;
     --grad: linear-gradient(180deg, #FF7A3C 0%, #FF4A1C 55%, #F0330C 100%);
     --ink: #0B0B0B;
     --gray-1: #F5F5F3;
     /* светлые секции-карточки */
     --gray-2: #EDEDEA;
     --txt-soft: #5C5C57;
     --dark: #141414;
     /* тёмные карточки */
     --dark-2: #1E1E1E;
     --line: #E6E6E2;
     --r-lg: 24px;
     --r-md: 16px;
     --max: 1180px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 @media (prefers-reduced-motion: reduce) {
     html {
         scroll-behavior: auto
     }

     *,
     *::before,
     *::after {
         animation: none !important;
         transition: none !important
     }
 }

 body {
     font-family: 'Inter', system-ui, sans-serif;
     background: #fff;
     color: var(--ink);
     font-size: 16px;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     overflow-x: hidden;
 }

 .wrap {
     max-width: var(--max);
     margin: 0 auto;
     padding: 0 20px
 }

 h1,
 h2,
 h3 {
     font-weight: 700;
     letter-spacing: -0.025em;
     line-height: 1.12
 }

 a {
     color: inherit;
     text-decoration: none
 }

 :focus-visible {
     outline: 3px solid var(--orange);
     outline-offset: 3px;
     border-radius: 6px
 }

 img,
 svg {
     max-width: 100%;
     display: block
 }

 /* ---------- кнопки и теги ---------- */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     background: var(--orange);
     color: #fff;
     font-weight: 600;
     font-size: 15px;
     padding: 12px 24px;
     border-radius: 999px;
     border: none;
     cursor: pointer;
     transition: background .18s, transform .15s;
     white-space: nowrap;
 }

 .btn:hover {
     background: var(--orange-dark);
     transform: translateY(-1px)
 }

 .btn-dark {
     background: var(--ink)
 }

 .btn-dark:hover {
     background: #262626
 }

 .btn-white {
     background: #fff;
     color: var(--ink)
 }

 .btn-white:hover {
     background: #F1F1EE
 }

 .btn-link {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-weight: 600;
     font-size: 15px;
     color: var(--ink);
 }

 .btn-link .dot {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: var(--orange);
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     flex: none;
     transition: transform .15s;
 }

 .btn-link:hover .dot {
     transform: translateX(3px)
 }

 .pill {
     display: inline-block;
     background: var(--orange);
     color: #fff;
     font-size: 12.5px;
     font-weight: 600;
     letter-spacing: .02em;
     padding: 6px 14px;
     border-radius: 999px;
     margin-bottom: 18px;
 }

 .pill-light {
     background: #fff;
     color: var(--orange)
 }

 /* ---------- header ---------- */
 header {
     position: sticky;
     top: 0;
     z-index: 60;
     background: rgba(255, 255, 255, .94);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--line);
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 64px;
     gap: 16px
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 9px;
     font-weight: 800;
     font-size: 18px;
     letter-spacing: -.02em
 }

 .logo img {
     width: 28px;
     height: 28px;
 }


 .nav-center {
     display: flex;
     gap: 26px;
     font-size: 14.5px;
     font-weight: 500;
     color: #3C3C38
 }

 .nav-center a:hover {
     color: var(--ink)
 }

 .nav-right {
     display: flex;
     align-items: center;
     gap: 18px
 }

 .nav-right .login {
     font-size: 14.5px;
     font-weight: 600
 }

 .burger {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px;
 }

 .burger span {
     display: block;
     width: 22px;
     height: 2px;
     background: var(--ink);
     margin: 5px 0;
     border-radius: 2px
 }

 .mobile-menu {
     display: none;
     flex-direction: column;
     gap: 4px;
     padding: 10px 20px 18px;
     background: #fff;
     border-bottom: 1px solid var(--line);
 }

 .mobile-menu a {
     padding: 11px 4px;
     font-weight: 600;
     font-size: 16px;
     border-bottom: 1px solid var(--gray-2)
 }

 .mobile-menu a:last-child {
     border-bottom: none
 }

 .mobile-menu.open {
     display: flex
 }

 @media(max-width:920px) {
     .nav-center {
         display: none
     }

     .nav-right .login {
         display: none
     }

     .burger {
         display: block
     }
 }

 /* ---------- hero ---------- */
 .hero {
     padding: 72px 0 30px;
     text-align: center;
     position: relative
 }

 .hero h1 {
     font-size: clamp(32px, 5.6vw, 60px);
     font-weight: 800;
     max-width: 880px;
     margin: 0 auto 18px;
 }

 .hero h1 em {
     font-style: normal;
     color: var(--orange)
 }

 .hero .sub {
     color: var(--txt-soft);
     font-size: 17px;
     max-width: 520px;
     margin: 0 auto 28px
 }

 .hero-cta {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 14px
 }

 .hero-cta .hint {
     font-size: 13.5px;
     color: var(--txt-soft)
 }

 .hero-cta .hint a {
     color: var(--ink);
     font-weight: 600
 }

 .hero-cta .hint a:hover {
     color: var(--orange)
 }

 .micronote {
     font-size: 12.5px;
     color: #8A8A84;
     max-width: 520px;
     margin: 18px auto 0
 }

 /* расходящиеся линии + плавающие иконки */
 .hero-visual {
     position: relative;
     height: 300px;
     margin-top: 8px
 }

 .hero-visual svg.lines {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%
 }

 .chip {
     position: absolute;
     width: 54px;
     height: 54px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25);
     animation: float 5s ease-in-out infinite;
 }
.chip svg{
    height: 35px;
    color: #fff;
    fill: #fff;
}
@media (max-width:768px) {
    .chip svg{
    height: 20px;
}
}
 .chip.center {
     width: 72px;
     height: 72px;
     border-radius: 18px;
     background: var(--orange);
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     font-size: 30px;
     color: #fff;
     box-shadow: 0 18px 44px -12px rgba(255, 74, 28, .6);
     animation: none;
     z-index: 2;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0)
     }

     50% {
         transform: translateY(-9px)
     }
 }

 .c1 {
     background: #111;
     color: #fff;
     left: 9%;
     top: 18%
 }

 .c2 {
     background: #0E5C42;
     color: #fff;
     left: 20%;
     top: 62%;
     animation-delay: .7s
 }

 .c3 {
     background: #fff;
     left: 33%;
     top: 30%;
     animation-delay: 1.3s;
     border: 1px solid var(--line)
 }

 .c4 {
     background: #1D2B53;
     color: #fff;
     right: 33%;
     top: 26%;
     animation-delay: .4s
 }

 .c5 {
     background: #fff;
     right: 19%;
     top: 60%;
     animation-delay: 1.7s;
     border: 1px solid var(--line)
 }

 .c6 {
     background: #7A2BE2;
     color: #fff;
     right: 8%;
     top: 20%;
     animation-delay: 1s
 }

 @media(max-width:760px) {
     .hero {
         padding-top: 52px
     }

     .hero-visual {
         height: 200px
     }

     .chip {
         width: 44px;
         height: 44px;
         font-size: 19px
     }

     .chip.center {
         width: 60px;
         height: 60px;
         font-size: 25px
     }

     .c3,
     .c4 {
         display: none
     }
 }

 /* ---------- topics strip (вместо лого-стрипа) ---------- */
 .topics {
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
     padding: 22px 0;
     background: #fff
 }

 .topics .wrap {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 14px 38px;
     font-weight: 700;
     letter-spacing: .14em;
     font-size: 13.5px;
     color: #A3A39D;
     text-transform: uppercase;
 }

 .topics b {
     color: var(--ink);
     font-weight: 700
 }

 /* ---------- секции ---------- */
 section {
     padding: 72px 0
 }

 .center {
     text-align: center
 }

 .h2 {
     font-size: clamp(26px, 3.6vw, 40px);
     margin-bottom: 14px
 }

 .intro {
     color: var(--txt-soft);
     max-width: 560px;
     margin: 0 auto 44px
 }

 /* фича-блоки в светлых карточках */
 .feature {
     background: var(--gray-1);
     border-radius: var(--r-lg);
     padding: clamp(28px, 4vw, 56px);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(28px, 4vw, 56px);
     align-items: center;
     margin-bottom: 26px;
 }

 .feature h2 {
     font-size: clamp(24px, 3vw, 34px);
     margin-bottom: 16px
 }

 .feature p {
     color: var(--txt-soft);
     font-size: 15.5px;
     margin-bottom: 20px;
     max-width: 440px
 }

 .checks {
     display: flex;
     gap: 22px;
     margin-bottom: 22px;
     flex-wrap: wrap
 }

 .checks span {
     font-size: 14px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 7px
 }

 .checks span::before {
     content: "✓";
     color: var(--orange);
     font-weight: 800
 }

 /* тёмная карточка-«кабинет» */
 .dark-card {
     background: var(--dark);
     border-radius: 18px;
     padding: 22px;
     color: #EDEDEA;
     box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .45);
 }

 .dark-card .bar {
     display: flex;
     gap: 6px;
     margin-bottom: 16px
 }

 .dark-card .bar i {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background: #3A3A3A;
     display: block
 }

 .dark-card .bar i:first-child {
     background: var(--orange)
 }

 .drow {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 14px;
     background: var(--dark-2);
     border-radius: 12px;
     padding: 14px 16px;
     margin-bottom: 10px;
 }

 .drow .t {
     font-size: 14px;
     font-weight: 600
 }

 .drow .s {
     font-size: 12px;
     color: #9A9A94
 }

 .badge {
     font-size: 11.5px;
     font-weight: 600;
     padding: 4px 11px;
     border-radius: 999px;
     white-space: nowrap;
 }

 .badge.done {
     background: rgba(98, 205, 140, .16);
     color: #62CD8C
 }

 .badge.go {
     background: rgba(255, 74, 28, .18);
     color: #FF7A52
 }

 .badge.wait {
     background: rgba(255, 255, 255, .08);
     color: #B9B9B3
 }

 .dark-card .add {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #B9B9B3;
     font-size: 13.5px;
     padding: 6px 4px 0;
 }

 .dark-card .add b {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: var(--orange);
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
 }

 @media(max-width:880px) {
     .feature {
         grid-template-columns: 1fr
     }

     .feature.rev .dark-card {
         order: 2
     }
 }

 /* ---------- оранжевая секция: формат обучения ---------- */
 .orange {
     background: var(--grad);
     color: #fff;
     border-radius: 0;
     padding: clamp(56px, 7vw, 92px) 0;
 }

 .orange .h2 {
     color: #fff
 }

 .orange .eyebrow {
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .06em;
     opacity: .85;
     margin-bottom: 10px;
     display: block;
 }

 .notice {
     background: var(--dark);
     border-radius: 18px;
     padding: 22px;
     max-width: 760px;
     margin: 36px auto 26px;
     color: #EDEDEA;
     text-align: left;
     box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5);
 }

 .notice .head {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 14px;
     margin-bottom: 14px
 }

 .notice .who {
     display: flex;
     align-items: center;
     gap: 11px;
     font-size: 14px
 }

 .notice .who .lm {
     width: 34px;
     height: 34px;
     border-radius: 10px;
     background: var(--orange);
     flex: none;
     position: relative
 }

 .notice .who .lm::after {
     content: "";
     position: absolute;
     inset: 10px;
     background: #fff;
     border-radius: 3px;
     transform: rotate(45deg)
 }

 .notice .who .s {
     color: #9A9A94;
     font-size: 12px
 }

 .notice .body {
     background: var(--dark-2);
     border-radius: 12px;
     padding: 15px 16px;
     font-size: 14px;
     color: #D8D8D2;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 12px;
 }

 .notice .body span:last-child {
     color: #FF7A52;
     font-weight: 700
 }

 .mini-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     max-width: 920px;
     margin: 0 auto;
 }

 .mini {
     background: rgba(13, 13, 13, .92);
     border-radius: 16px;
     padding: 22px 20px;
     text-align: left;
     color: #EDEDEA;
 }

 .mini .ic {
     font-size: 18px;
     margin-bottom: 12px;
     display: block
 }

 .mini h3 {
     font-size: 15.5px;
     margin-bottom: 8px;
     color: #fff
 }

 .mini p {
     font-size: 13.5px;
     color: #A8A8A2;
     line-height: 1.55
 }

 @media(max-width:880px) {
     .mini-grid {
         grid-template-columns: 1fr
     }
 }

 /* ---------- программы ---------- */
 .prog-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 22px
 }

 .prog {
     background: var(--gray-1);
     border-radius: var(--r-lg);
     padding: 30px 28px;
     display: flex;
     flex-direction: column;
     gap: 0;
     transition: transform .18s, box-shadow .18s;
 }

 .prog:hover {
     transform: translateY(-3px);
     box-shadow: 0 22px 50px -26px rgba(0, 0, 0, .22)
 }

 .prog h3 {
     font-size: 19px;
     margin-bottom: 10px
 }

 .prog>p {
     font-size: 14.5px;
     color: var(--txt-soft);
     margin-bottom: 18px
 }

 .prog ul {
     list-style: none;
     margin-bottom: 20px
 }

 .prog li {
     font-size: 14px;
     padding: 8px 0 8px 24px;
     position: relative;
     border-bottom: 1px solid var(--gray-2);
 }

 .prog li:last-child {
     border-bottom: none
 }

 .prog li::before {
     content: "✓";
     position: absolute;
     left: 0;
     color: var(--orange);
     font-weight: 800
 }

 .prog .meta {
     margin-top: auto;
     font-size: 12.5px;
     font-weight: 600;
     color: #8A8A84;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
 }

 @media(max-width:880px) {
     .prog-grid {
         grid-template-columns: 1fr
     }
 }

 /* ---------- цитаты кураторов ---------- */
 .quotes {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 22px;
     max-width: 980px;
     margin: 0 auto
 }

 .quote {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: var(--r-lg);
     padding: 32px 30px;
 }

 .quote .qic {
     width: 38px;
     height: 38px;
     border-radius: 11px;
     background: var(--gray-1);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--orange);
     font-size: 18px;
     margin-bottom: 18px;
 }

 .quote p {
     font-size: 15px;
     color: #3C3C38;
     margin-bottom: 22px
 }

 .quote .who {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .quote .ava {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: var(--grad);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 14px;
     flex: none;
 }

 .quote .who b {
     font-size: 14px;
     display: block
 }

 .quote .who span {
     font-size: 12.5px;
     color: #8A8A84
 }

 @media(max-width:880px) {
     .quotes {
         grid-template-columns: 1fr
     }
 }

 /* ---------- география ---------- */
 .geo-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     max-width: 980px;
     margin: 0 auto;
 }

 .geo {
     border: 1px solid var(--line);
     border-radius: var(--r-md);
     padding: 26px 22px;
     text-align: center;
     transition: border-color .18s;
 }

 .geo:hover {
     border-color: var(--orange)
 }

 .geo .flag {
     height: 60px;
     margin: 0 auto 16px;
     display: block
 }

 .geo h3 {
     font-size: 16.5px;
     margin-bottom: 7px
 }

 .geo p {
     font-size: 13.5px;
     color: var(--txt-soft)
 }

 @media(max-width:760px) {
     .geo-grid {
         grid-template-columns: 1fr
     }
 }

 /* ---------- FAQ ---------- */
 .faq-list {
     max-width: 760px;
     margin: 0 auto
 }

 details {
     border: 1px solid var(--line);
     border-radius: 14px;
     background: #fff;
     margin-bottom: 12px;
     overflow: hidden;
 }

 summary {
     cursor: pointer;
     list-style: none;
     padding: 18px 54px 18px 22px;
     font-weight: 600;
     font-size: 15.5px;
     position: relative;
 }

 summary::-webkit-details-marker {
     display: none
 }

 summary::after {
     content: "+";
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: var(--gray-1);
     color: var(--orange);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
 }

 details[open] summary::after {
     content: "–"
 }

 details .answer {
     padding: 0 22px 20px;
     font-size: 14.5px;
     color: var(--txt-soft)
 }

 /* ---------- лид-форма (оранжевая секция) ---------- */
 .lead-section {
     background: var(--grad);
     padding: clamp(56px, 7vw, 90px) 0
 }

 .lead-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(30px, 5vw, 70px);
     align-items: center;
     color: #fff;
 }

 .lead-grid h2 {
     font-size: clamp(26px, 3.4vw, 40px);
     margin-bottom: 16px;
     color: #fff
 }

 .lead-grid .lp {
     font-size: 15.5px;
     opacity: .92;
     margin-bottom: 24px;
     max-width: 440px
 }

 .lead-points {
     list-style: none
 }

 .lead-points li {
     padding: 10px 0 10px 30px;
     position: relative;
     font-size: 15px;
     font-weight: 500;
     border-bottom: 1px solid rgba(255, 255, 255, .22);
 }

 .lead-points li:last-child {
     border-bottom: none
 }

 .lead-points li::before {
     content: "✓";
     position: absolute;
     left: 0;
     font-weight: 800
 }

 .form-card {
     background: #fff;
     border-radius: var(--r-lg);
     padding: clamp(26px, 3vw, 38px);
     color: var(--ink);
     box-shadow: 0 36px 80px -30px rgba(0, 0, 0, .4);
 }

 .form-card h3 {
     font-size: 20px;
     margin-bottom: 6px
 }

 .form-card .fs {
     font-size: 13.5px;
     color: var(--txt-soft);
     margin-bottom: 22px
 }

 .field {
     margin-bottom: 16px
 }

 .fields-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px
 }

 label {
     display: block;
     font-size: 13.5px;
     font-weight: 600;
     margin-bottom: 6px
 }

 input[type=text],
 input[type=tel] {
     width: 100%;
     padding: 13px 15px;
     font-size: 15px;
     font-family: inherit;
     border: 1.5px solid var(--line);
     border-radius: 12px;
     background: var(--gray-1);
     color: var(--ink);
     transition: border-color .15s, background .15s;
 }

 input:focus {
     outline: none;
     border-color: var(--orange);
     background: #fff
 }

 .consent {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     margin: 4px 0 20px
 }

 .consent input {
     margin-top: 3px;
     width: 17px;
     height: 17px;
     accent-color: var(--orange);
     flex: none
 }

 .consent span {
     font-size: 12.5px;
     color: var(--txt-soft);
     line-height: 1.5
 }

 .consent a {
     color: var(--orange);
     font-weight: 600
 }

 .form-card .btn {
     width: 100%;
     padding: 15px;
     font-size: 15.5px
 }

 .form-note {
     font-size: 12px;
     color: #8A8A84;
     margin-top: 13px;
     text-align: center
 }

 .err {
     font-size: 12.5px;
     color: #D2330C;
     margin-top: 5px;
     display: none
 }

 .success {
     display: none;
     text-align: center;
     padding: 36px 8px
 }

 .success .check {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #FFE9E1;
     color: var(--orange);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     margin: 0 auto 16px;
     font-weight: 800;
 }

 .success h3 {
     margin-bottom: 8px
 }

 .success p {
     font-size: 14.5px;
     color: var(--txt-soft)
 }

 @media(max-width:880px) {
     .lead-grid {
         grid-template-columns: 1fr
     }

     .fields-2 {
         grid-template-columns: 1fr
     }
 }

 /* ---------- финальный CTA ---------- */
 .final {
     padding: 80px 0;
     text-align: center
 }

 .final .fm {
     width: 56px;
     height: 56px;
     border-radius: 16px;
     background: var(--orange);
     margin: 0 auto 22px;
     position: relative;
 }

 .final .fm::after {
     content: "";
     position: absolute;
     inset: 16px;
     background: #fff;
     border-radius: 4px;
     transform: rotate(45deg)
 }

 .final h2 {
     font-size: clamp(24px, 3.2vw, 36px);
     margin-bottom: 12px
 }

 .final p {
     color: var(--txt-soft);
     margin-bottom: 26px
 }

 .final .row {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap
 }

 /* ---------- footer ---------- */
 footer {
     border-top: 1px solid var(--line);
     padding: 54px 0 32px;
     font-size: 14px;
     background: #fff
 }

 .foot-grid {
     display: grid;
     grid-template-columns: 1.4fr 1fr 1fr 1fr;
     gap: 36px;
     margin-bottom: 40px
 }

 footer h4 {
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 14px;
     color: var(--ink)
 }

 footer ul {
     list-style: none
 }

 footer li {
     margin-bottom: 9px
 }

 footer a {
     color: var(--txt-soft)
 }

 footer a:hover {
     color: var(--ink)
 }

 .foot-desc {
     color: var(--txt-soft);
     font-size: 13.5px;
     max-width: 300px;
     margin-top: 14px
 }

 .disclaimer {
     border-top: 1px solid var(--line);
     padding-top: 22px;
     font-size: 12px;
     color: #8A8A84;
     line-height: 1.6;
 }

 .disclaimer p {
     margin-bottom: 9px
 }

 @media(max-width:880px) {
     .foot-grid {
         grid-template-columns: 1fr 1fr
     }
 }

 @media(max-width:560px) {
     .foot-grid {
         grid-template-columns: 1fr
     }
 }

 /* появление */
 .reveal {
     opacity: 0;
     transform: translateY(16px);
     transition: opacity .55s ease, transform .55s ease
 }

 .reveal.in {
     opacity: 1;
     transform: none
 }

 @media (prefers-reduced-motion: reduce) {
     .reveal {
         opacity: 1;
         transform: none
     }
 }