/* Header Section */
.hero-section {
    padding: 200px 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    overflow: hidden;
}

.hero-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.hero-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.hero-title {
    font-size: 70px;
    font-weight: 700;
    line-height: 80.96px;
    text-align: center;
    display: block;
}

.hero-title-blue {
    color: var(--color-primary);
}

.hero-title-orange {
    color: var(--color-secondary);
}

.hero-title-gray {
    color: var(--color-text-light);
}

.hero-description {
    width: 664px;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: var(--color-text-secondary);
    text-align: center;
    word-wrap: break-word;
}

.hero-image {
    max-width: 1392px;
    width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .hero-section {
        padding: 150px 24px 12px;
        gap: 32px;
    }

    .hero-content-container {
        gap: 24px;
    }

    .hero-text-container {
        gap: 12px;
    }

    .hero-title {
        font-size: 50px;
        line-height: 60px;
    }

    .hero-description {
        width: 100%;
        font-size: 16px;
        line-height: 24px;
    }

    .hero-image {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 100px 20px 12px;
    }

    .hero-title {
        font-size: 40px;
        line-height: 48px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 20px;
    }
}


/* Features Section */
.features-section {
    max-width: 1392px;
    padding: 100px 76px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.features-header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.features-title-container {
    width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.section-title {
    font-size: 37px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    color: var(--color-text);
    word-wrap: break-word;
}

.highlight-tag {
    padding: 6px 12px;
    background: white;
    box-shadow: 0px 0px 0px 1px var(--color-border);
    border-radius: 8px;
    outline: 1px var(--color-primary) solid;
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    width: fit-content;
}

.tag-icon {
    width: 18px;
    height: 18px;
    position: relative;
    overflow: hidden;
}

.tag-icon-inner {
    width: 19px;
    height: 18px;
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2218%22%20viewBox%3D%220%200%2019%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.1003%205.84722C16.8809%207.47974%2017.0291%209.34353%2016.5163%2011.0789C16.0035%2012.8142%2014.866%2014.2981%2013.3235%2015.2441C11.781%2016.1902%209.94267%2016.5313%208.16343%2016.2017C6.38418%2015.872%204.79009%2014.895%203.68884%2013.4592C2.58758%2012.0233%202.05722%2010.2305%202.20012%208.42659C2.34301%206.62271%203.14903%204.93571%204.46261%203.69116C5.77619%202.44662%207.50421%201.73276%209.31317%201.68736C11.1221%201.64197%2012.8838%202.26826%2014.2581%203.44535L15.8521%201.85066C15.9577%201.74511%2016.1008%201.68582%2016.2501%201.68582C16.3993%201.68582%2016.5425%201.74511%2016.6481%201.85066C16.7536%201.95621%2016.8129%202.09936%2016.8129%202.24863C16.8129%202.3979%2016.7536%202.54105%2016.6481%202.6466L9.89805%209.3966C9.7925%209.50215%209.64935%209.56144%209.50008%209.56144C9.35081%209.56144%209.20766%209.50215%209.10211%209.3966C8.99656%209.29105%208.93727%209.1479%208.93727%208.99863C8.93727%208.84936%208.99656%208.70621%209.10211%208.60066L11.0512%206.6516C10.523%206.30225%209.89229%206.14141%209.26128%206.19509C8.63027%206.24878%208.03584%206.51386%207.57423%206.94742C7.11262%207.38098%206.81084%207.95764%206.71776%208.58405C6.62467%209.21047%206.74572%209.84996%207.0613%2010.399C7.37689%2010.9481%207.86855%2011.3746%208.45668%2011.6094C9.04481%2011.8443%209.695%2011.8738%2010.302%2011.6931C10.909%2011.5125%2011.4372%2011.1323%2011.8012%2010.614C12.1652%2010.0958%2012.3437%209.46988%2012.3077%208.83761C12.3035%208.76375%2012.3139%208.68978%2012.3384%208.61995C12.3628%208.55011%2012.4007%208.48577%2012.45%208.4306C12.4993%208.37543%2012.559%208.33051%2012.6257%208.2984C12.6923%208.26629%2012.7647%208.24763%2012.8385%208.24347C12.9877%208.23508%2013.1341%208.2863%2013.2455%208.38585C13.3007%208.43515%2013.3456%208.49483%2013.3777%208.56148C13.4098%208.62814%2013.4285%208.70046%2013.4327%208.77433C13.4839%209.66926%2013.2283%2010.5549%2012.7081%2011.2849C12.1878%2012.0148%2011.4341%2012.5454%2010.5714%2012.789C9.70874%2013.0325%208.78879%2012.9744%207.96361%2012.6243C7.13843%2012.2742%206.45741%2011.6529%206.03312%2010.8633C5.60884%2010.0737%205.46667%209.16296%205.63012%208.2816C5.79358%207.40024%206.25287%206.60103%206.93208%206.01606C7.6113%205.4311%208.46978%205.0954%209.36563%205.06444C10.2615%205.03349%2011.1411%205.30913%2011.8591%205.84582L13.4587%204.24621C12.2864%203.27294%2010.7959%202.76709%209.27343%202.82581C7.75094%202.88453%206.30383%203.50368%205.21003%204.56435C4.11622%205.62501%203.45286%207.0524%203.34735%208.57237C3.24183%2010.0923%203.70161%2011.5977%204.63837%2012.7993C5.57512%2014.0009%206.92281%2014.8141%208.42258%2015.0826C9.92235%2015.3511%2011.4685%2015.0561%2012.7639%2014.2541C14.0594%2013.4522%2015.0129%2012.1998%2015.4413%2010.7377C15.8698%209.27555%2015.7428%207.70666%2015.085%206.33238C15.0207%206.19774%2015.0125%206.04306%2015.0622%205.90236C15.1119%205.76167%2015.2154%205.64648%2015.3501%205.58215C15.4847%205.51781%2015.6394%205.50959%2015.7801%205.55931C15.9208%205.60902%2016.036%205.71258%2016.1003%205.84722Z%22%20fill%3D%22%230D6EFD%22%20%2F%3E%3C%2Fsvg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.tag-text {
    font-size: 13.9px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-text);
    word-wrap: break-word;
}

.features-grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 42px;
}

.feature-column {
    width: 368px;
    display: flex;
    flex-direction: column;
    gap: 42px;
}

.feature-column.connecting-lines {
    gap: 12px;
}

.feature-card {
    padding: 24px 4px 4px;
    background: white;
    box-shadow: 0px 1px 3px rgba(143, 143, 143, 0.20);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-content-container {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--color-text);
    word-wrap: break-word;
    align-self: stretch;
}

.feature-description {
    width: 325.4px;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    color: var(--color-text-secondary);
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-image {
    width: 100%;
    height: auto;
}

.connecting-lines-container {
    position: relative;
    height: 280px;
}

.connecting-svg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.top-svg {
    top: 0;
}

.bottom-svg {
    bottom: 0;
}

.logo-in-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 228px;
    height: 132px;
    object-fit: contain;
}

.connecting-lines-container {
    overflow: visible;
}

@media (max-width: 1024px) {
    .features-section {
        padding: 80px 40px 30px;
    }

    .features-title-container {
        width: 100%;
        padding: 0 10px;
    }

    .features-grid-container {
        flex-direction: column;
        gap: 32px;
    }

    .feature-column {
        width: 100%;
        flex-direction: column;
        gap: 32px;
    }

    .feature-description {
        width: 100%;
    }

    .connecting-lines-container {
        display: none;
    }
}

@media (max-width: 576px) {
    .features-section {
        padding: 60px 20px 20px;
    }

    .section-title {
        font-size: 28px;
        line-height: 34px;
    }

    .highlight-tag {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 10px;
    }

    .tag-text {
        font-size: 13px;
        line-height: 18px;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-description {
        font-size: 14px;
        line-height: 20px;
    }
}


/* Tools Section */
.tools-section {
    padding: 80px 0 60px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    align-self: stretch;
}

.tools-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.tools-title-container {
    padding: 0 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

.tools-description {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #3E3E59;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tools-image {
    max-width: 991px;
    width: 100%;
    height: auto;
}

/* Personalized Section */
.personalized-section {
    padding: 40px 76px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: row-reverse;
}

.personalized-tag {
    padding: 6px 12px;
    background: white;
    box-shadow: 0px 0px 0px 1px #EBEBEB;
    border-radius: 8px;
    outline: 1px #3D8EEB solid;
    outline-offset: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    width: fit-content;
}

/* Streamlined Collaboration Section */
.collaboration-section {
    padding: 40px 76px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.collaboration-image-container {
    width: 648px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.collaboration-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.collaboration-tag {
    padding: 6px 12px;
    background: white;
    box-shadow: 0px 1px 3px rgba(143, 143, 143, 0.20);
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    width: fit-content;
}

.collaboration-text-container {
    width: 518px;
    display: flex;
    flex-direction: column;
    gap: 21px;
}

.collaboration-title {
    flex: 1;
    font-size: 37px;
    font-weight: 700;
    line-height: 44px;
    color: #212121;
    word-wrap: break-word;
}

.collaboration-description {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: #3E3E59;
    word-wrap: break-word;
}

/* Integrated Communication Section */
.communication-section {
    padding: 40px 76px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: row-reverse;
}

/* Powerful Project Management Section */
.project-management-section {
    padding: 40px 76px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

/* Data-Driven Insights Section */
.insights-section {
    padding: 40px 76px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    flex-direction: row-reverse;
}

/* Seamless Integration Section */
.integration-section {
    padding: 40px 76px;
    background: rgba(255, 255, 255, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

@media (max-width: 1024px) {

    .personalized-section,
    .collaboration-section,
    .communication-section,
    .project-management-section,
    .insights-section,
    .integration-section {
        flex-direction: column;
        padding: 60px 20px;
        text-align: center;
    }

    .collaboration-content,
    .collaboration-text-container {
        width: 100%;
        align-items: center;
    }

    .collaboration-image-container {
        width: 100%;
        max-width: 480px;
        margin-bottom: 24px;
    }

    .collaboration-title {
        font-size: 28px;
        line-height: 36px;
    }

    .collaboration-description {
        font-size: 16px;
        line-height: 24px;
    }

    .collaboration-tag,
    .personalized-tag,
    .highlight-tag {
        justify-content: center;
    }
}


/* Blog Section */
.blog-section {
    padding: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.blog-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.blog-title {
    font-size: 37px;
    font-weight: 700;
    line-height: 44px;
    color: var(--color-text);
}

.blog-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary-cta);
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
}

.blog-link:hover {
    color: var(--color-primary);
}

.blog-grid {
    display: flex;
    gap: 32px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.blog-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--color-border-gray);
}

.blog-date, .author-name {
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 26px;
}

.blog-card-title, .blog-card-title a {
    color: var(--color-text);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.blog-card-title a:hover {
    color: var(--color-primary);
}

.blog-excerpt {
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 24px;
}
.author-link {
    display: flex;
    flex-direction: row;
     align-items: center; 
}
.author-avatar {
    width: 36px;
    border-radius: 12px;
    margin-right: 12px;
}

@media (max-width: 1024px) {
    .blog-section {
        padding: 50px 24px;
        width: 100%;
    }

    .blog-header {
        gap: 16px;
    }

    .blog-title {
        font-size: 30px;
        line-height: 38px;
    }

    .blog-link {
        font-size: 16px;
        gap: 4px;
    }

    .blog-grid {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .blog-card {
        width: 100%;
    }

    .blog-image {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .blog-card-title {
        font-size: 22px;
        line-height: 30px;
    }

    .blog-excerpt {
        font-size: 14px;
        line-height: 22px;
    }
}

@media (max-width: 480px) {
    .blog-section {
        padding: 40px 16px;
    }

    .blog-title {
        font-size: 24px;
        line-height: 32px;
    }

    .blog-link {
        font-size: 14px;
    }

    .blog-grid {
        gap: 16px;
    }

    .blog-card {
        width: 100%;
        max-width: 360px;
    }

    .blog-card-title {
        font-size: 20px;
        line-height: 28px;
    }

    .blog-excerpt {
        font-size: 14px;
        line-height: 20px;
    }
}


/* Final CTA Section */
.final-cta-section {
    width: 100vw;
    background: var(--color-primary-cta);
    margin: 150px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 0;
}

.final-cta-container {
    max-width: 1288px;
    width: 100%;
    background: white;
    border-radius: 24px;
    padding: 0 80px;
    outline: 2px solid var(--color-primary);
    margin-top: -60px;
    margin-bottom: -60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.final-cta-container .cta-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 1;
}

.final-cta-container .cta-title {
    font-size: 37px;
    font-weight: 700;
    line-height: 44px;
    color: var(--color-text);
}

.final-cta-container .cta-description {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    color: var(--color-text-tertiary);
}

.final-cta-image {
    max-width: 461px;
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

/* Планшет */
@media (max-width: 1024px) {
    .final-cta-container {
        flex-direction: column;
        padding: 60px 40px;
        text-align: center;
    }

    .final-cta-image {
        order: -1;
    }

    .final-cta-container .cta-title {
        font-size: 32px;
        line-height: 40px;
    }

    .final-cta-container .cta-description {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Мобільний */
@media (max-width: 768px) {
    .final-cta-container {
        padding: 40px 24px;
        gap: 32px;
        margin: -60px 16px;
    }

    .final-cta-container .cta-title {
        font-size: 26px;
        line-height: 32px;
    }

    .final-cta-container .cta-description {
        font-size: 15px;
        line-height: 22px;
    }
}