/* Загружаем только реально используемые начертания:
   Regular 400 500 600 700 800 + Italic 700 800
   (было 18 вариантов, стало 7 — ~60% быстрее) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap');

:root {
    --paper: #ffffff;
    --ink: #050505;
    --soft: #f6f6f3;
    --soft-2: #eeeeeb;
    --line: #e1e1dc;
    --muted: #777777;
    --muted-2: #a6a6a1;
    --agenda-blue: #d8e6e3;
    --agenda-blue-strong: #c9dbd7;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
    color: #1b1b1b;
}

body {
    background-color: #fbfbfb;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Браузеры не наследуют font-family на форм-элементы — прописываем явно */
input,
textarea,
button,
select {
    font-family: "Poppins", sans-serif;
}

.block {
    padding: 100px 64px;
}

.top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.logo {
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0;
}

.logo span {
    color: #1b1b1b;
}

.logo-img {
    height: clamp(40px, 4.2vw, 56px);
    width: auto;
    display: block;
}

/* Зона магнитного притяжения — чуть шире самого логотипа */
.top .logo {
    padding: 18px;
}

/* В футере фон тёмный — логотип чуть меньше */
.logo-img--footer {
    height: clamp(34px, 3.6vw, 48px);
    filter: none; /* серый брендовый логотип в подвале */
}

@media(max-width: 1180px) {
    .pricing {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 1000px) {
    .s-flex.two {
        flex-direction: column;
        align-items: initial;
    }

    .s-flex.two p {
        margin-bottom: 20px;
    }

    .s-flex.two .links {
        justify-content: left;
        width: 100%;
    }

    .heading, .head-flex .heading {
        font-size: 65px;
    }

    .head-flex .heading {
        margin-bottom: 20px;
    }

    .port-desc {
        max-width: 600px;
    }

    .head-flex {
        flex-direction: column;
        align-items: initial;
        justify-content: initial;
    }

    .head-flex .links {
        justify-content: left;
    }

    .contact-img {
        height: 500px;
    }
}

@media(max-width: 980px) {
    .benefit-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .other {
        padding-bottom: 20px;
    }
}

@media(max-width: 900px) {
    .s-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 400px;
    }

    .s-grid .serv {
        height: 400px;
    }

    .s-grid .serv:nth-child(3) {
        grid-column: initial;
        height: 400px;
    }

    .portfolio, .feed-grid {
        grid-template-columns: 1fr;
    }

    .feed-grid {
        grid-template-rows: repeat(4, 640px);
    }

    .f-flex {
        flex-direction: column;
        align-items: initial;
        gap: 30px;
    }

    .f-flex span {
        margin-left: initial;
    }

    .f-flex ul {
        flex-direction: column;
        gap: 8px;
        margin-left: 0px;
    }

    .footer-contacts {
        margin-left: 0px;
    }
}

@media(max-width: 800px) {
    .nav-links {
        display: none;
        flex-direction: column;
        border-radius: 20px;
        transition: 0.3s;
        transform: translateY(-35px);
        position: relative;
        z-index: 1001;
    }

    .nav-links a {
        padding: 20px 50px;
    }

    .nav-links a:hover {
        padding: 20px 50px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a:not(:nth-child(1)) {
        border-top: 1.5px solid #eee;
        border-left: none;
    }

    nav {
        height: auto;
    }
    
    .nav-middle {
        flex-direction: column;
        transform: translateY(-25px);
    }

    .nav-links a {
        justify-content: center;
    }

    #toggle {
        display: initial;
    }

    .faq {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .block, .hero, .about {
        padding: 100px 50px;
    }

}

@media(max-width: 760px) {
    .heading, .infinite div p {
        font-size: 60px;
    }
}

@media(max-width: 715px) {
    .heading, .infinite div p  {
        font-size: 50px;
    }
}

@media(max-width: 700px) {
    .pack-2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pack-2 div .pack2-f:not(:nth-child(1)) {
        margin-top: 15px;
    }
}

@media(max-width: 590px) {
    .heading {
        font-size: 45px;
        margin-top: 20px;
    }

    .head-flex .heading, .infinite div p {
        font-size: 45px;
    }

    .heading span, 
    .block .heading.three span,
    .block .heading.four span {
        border-left: none;
        background: none;
        padding: 0px;
    }

    .links {
        margin-top: 40px;
    }

    .s-flex.two .links {
        flex-direction: column;
    }

    .s-flex.two .links a {
        justify-content: center;
        width: 100%;
    }

    .s-flex.two .links a:nth-child(1) {
        box-shadow: none;
    }

    .s-flex p:nth-child(1) {
        font-size: 23px;
    }

    .s-flex p:nth-child(2) {
        display: none;
    }

    .s-grid {
        margin-top: 30px;
    }

    .work-banner {
        padding: 30px 30px 0px 30px;
    }

    .feed, 
    .quest, 
    .service-block, 
    form {
        padding: 30px;
    }

    .contact-img-div,
    .contact-img .subhead {
        margin: 30px;
    }

    .video {
        aspect-ratio: 16 / 9;
        height: auto;
        margin-top: 70px;
        border-radius: 30px;
    }

    .video video {
        display: block;
    }

    form button {
        width: 100%;
        padding-inline: 18px;
    }
}

@media(max-width: 540px) {
    .infinite::before, .infinite::after {
        display: none;
    }
}

@media(max-width: 510px) {
    .hero .links {
        flex-direction: column;
    }

    .hero .links a {
        justify-content: center;
        box-shadow: none;
        width: 100%;
    }
}

@media(max-width: 500px) {
    .block, .hero, .about {
        padding: 72px 28px;
    }

    .top {
        padding: 28px;
    }

    .logo-img {
        height: clamp(32px, 11vw, 42px);
    }


    .s-text {
        margin: 24px;
    }

    .service-block,
    .s-flex.two,
    form {
        padding: 24px;
        border-radius: 24px;
    }

    .about-desc {
        font-size: 25px;
    }

    .s-grid .serv,
    .s-grid .serv:nth-child(3) {
        height: 330px;
    }

    .s-title {
        font-size: 22px;
    }

    .s-desc {
        font-size: 13.5px;
        margin: 12px 0;
    }

    .pricing {
        margin-top: 32px;
    }

    .pack {
        padding: 8px;
        border-radius: 24px;
    }

    .pack-1,
    .pack-2 {
        padding: 22px;
    }

    .pack-title {
        margin: 24px 0;
        font-size: 22px;
    }

    .price {
        font-size: 26px;
    }

    .price-head p:nth-child(1) {
        font-size: 22px;
    }

    .pack2-f p {
        font-size: 13.5px;
    }
}

@media(max-width: 460px) {
    .price-head p:nth-child(2) {
        display: none;
    }

    .pack-title {
        margin: 24px 0px;
        font-size: 22px;
    }

    .work-flex {
        margin-top: 15px;
        padding: 0px 20px;
    }

    .work-flex a span {
        display: none;
    }

    .contact-direct {
        grid-template-columns: 1fr;
    }

    form,
    .contact-img {
        min-width: 0;
    }
}

@media(max-width: 420px) {
    .heading {
        font-size: 40px;
    }
}

@media(max-width: 400px) {
    .heading,
    .head-flex .heading,
    .infinite div p {
        font-size: 35px;
    }
}

@media(min-width: 1500px) {
    .video {
        margin: 100px auto 0px auto;
        width: 1400px;
    }

    .infinite {
        width: 1400px;
        margin: auto;
    }
}

/* Agenda-inspired palette layer */
body {
    background: var(--paper);
}

* {
    color: var(--ink);
}

.subhead p,
.port-desc,
.about-desc,
.block .heading span,
.pack-title span,
.pack2-f p,
.pack2-f i,
.ans,
.feed p,
.footer-note,
.footer-meta span,
.footer-column a,
.nav-links a,
.nav-links a span,
.contact-direct span {
    color: var(--muted);
}

.green {
    background-color: var(--ink);
}

.heading span,
.block .heading.three span,
.block .heading.four span,
.s-flex p:nth-child(2),
.price-head p:nth-child(2) {
    background: var(--agenda-blue);
    border-left-color: var(--ink);
    color: var(--ink);
}

.links a,
form button,
.footer-form button,
.footer-meta a,
.about a {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
    box-shadow: 0 16px 40px rgba(5, 5, 5, 0.14);
}

.links a i,
form button i,
.s-link i,
.s-link span,
.about a i,
.about a span {
    color: var(--paper);
}

.links a:hover,
form button:hover,
.footer-form button:hover,
.footer-meta a:hover,
.about a:hover {
    background-color: #202020;
    border-color: #202020;
    color: var(--paper);
}

.links a:nth-child(2),
.contact-img-div .links a,
.pricing .pack:nth-child(2) .links a {
    background-color: var(--soft);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: none;
}

.links a:nth-child(2):hover,
.contact-img-div .links a:hover {
    background-color: var(--soft-2);
}

.links a:nth-child(2) i,
.contact-img-div .links a i {
    color: var(--ink);
}

.service-block,
.s-flex.two,
.pack,
.pack-1,
form,
.feed,
.quest,
.benefit-card,
.nav-links,
#toggle {
    background-color: var(--paper);
    border-color: var(--line);
}

#pricing {
    background: var(--soft);
}

form input,
form textarea {
    background-color: var(--soft);
    border-color: var(--line);
    color: var(--ink);
}

form input::placeholder,
form textarea::placeholder,
.footer-form input::placeholder {
    color: var(--muted-2);
}

.contact-direct,
.benefit-grid,
.footer-meta,
.footer-column,
.nav-links a:not(:nth-child(1)) {
    border-color: var(--line);
}

.contact-direct strong,
.footer-column .footer-accent-link,
.footer-column a:hover,
.contact-direct a:hover strong {
    color: var(--ink);
}

.pricing .pack:nth-child(2),
.pricing .pack:nth-child(2) .pack-1 {
    background-color: var(--ink);
    border-color: var(--ink);
}

.pricing .pack:nth-child(2) .pack-1 {
    background-color: #161616;
}

.pricing .pack:nth-child(2) .pack-title,
.pricing .pack:nth-child(2) .price-head p:nth-child(1),
.pricing .pack:nth-child(2) .price,
.pricing .pack:nth-child(2) .price span {
    color: var(--paper);
}

.pricing .pack:nth-child(2) .price-head p:nth-child(2) {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
}

.pricing .pack:nth-child(2) .pack2-f p,
.pricing .pack:nth-child(2) .pack2-f i {
    color: rgba(255, 255, 255, 0.62);
}

.s-grid .serv::before,
.contact-img::before {
    background-image: linear-gradient(135deg, rgba(5, 5, 5, 0.86) 12%, rgba(5, 5, 5, 0.05) 82%);
}

.s-title,
.contact-img .subhead p,
.contact-img-div .contact-head {
    color: var(--paper);
}

.s-desc {
    color: rgba(255, 255, 255, 0.68);
}

.infinite::before {
    background: linear-gradient(to right, var(--paper), rgba(255, 255, 255, 0));
}

.infinite::after {
    background: linear-gradient(to left, var(--paper), rgba(255, 255, 255, 0));
}

.infinite div p:nth-child(n) {
    border-left-color: var(--ink);
    background: var(--soft);
}

.portfolio .circle,
.portfolio .circle:nth-child(n) {
    background-color: var(--agenda-blue);
}

.portfolio .circle:nth-child(2n) {
    background-color: var(--ink);
}

.portfolio .circle:nth-child(3n) {
    background-color: var(--soft-2);
}