.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 {
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 {
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 {
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;
} .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;
} .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;
} .project-management-section {
padding: 40px 76px;
background: rgba(255, 255, 255, 0);
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
} .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;
} .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 {
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 {
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;
}
}