.areas {
margin-top: var(--section-gap);
} .areas-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
margin-bottom: 72px;
}
.areas-pill {
appearance: none;
border: 1px solid var(--color-border);
background: #fff;
border-radius: 999px;
padding: 12px 18px;
font-size: 14px;
font-weight: 500;
color: var(--color-text-main);
cursor: pointer;
transition:
transform var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.areas-pill:hover {
transform: translateY(-2px);
border-color: rgba(15, 23, 42, 0.08);
box-shadow:
0 6px 18px rgba(15, 23, 42, 0.05);
} .areas-list {
display: flex;
flex-direction: column;
gap: 48px;
} .area-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 64px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 56px;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-smooth),
box-shadow var(--transition-smooth);
scroll-margin-top: 120px;
} .area-item.is-reverse {
flex-direction: row-reverse;
}
.area-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
} .area-content {
flex: 0 0 48%;
max-width: 48%;
}
.area-name {
font-size: 36px;
line-height: 1.1;
font-weight: 700;
margin: 0 0 28px;
color: var(--color-text-main);
}
.area-text {
margin-bottom: 32px;
}
.area-text p {
font-size: 16px;
line-height: 1.7;
color: var(--color-text-muted);
margin: 0 0 16px;
}
.area-text p:last-child {
margin-bottom: 0;
} .area-text p.is-lead {
font-size: 17px;
line-height: 1.65;
color: var(--color-text-main);
}
.area-text strong {
color: var(--color-text-main);
font-weight: 600;
} .area-meta {
margin-bottom: 40px;
} .area-pill {
display: inline-block;
background: var(--color-badge-yellow-bg);
color: var(--color-badge-yellow-text);
border-radius: var(--radius-pill);
padding: 6px 15px;
font-size: 13px;
font-weight: 600;
} .area-stats {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
background: var(--color-bg-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 24px 26px;
} .area-stat--inline {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
margin-bottom: 2px;
border-bottom: 1px solid var(--color-border);
}
.area-stat--inline .area-stat-label {
margin: 0;
}
.area-stat--inline:last-child {
border-bottom: none;
padding-bottom: 0;
}
.area-stat-top {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 9px;
}
.area-stat-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.area-stat-value {
font-size: 14px;
font-weight: 700;
color: var(--color-text-main);
} .area-bar {
height: 6px;
background: var(--color-border);
border-radius: 999px;
overflow: hidden;
}
.area-bar span {
display: block;
height: 100%;
background: var(--color-primary);
border-radius: 999px;
transition: width 0.5s ease;
} .area-bar--crowd span { background: var(--color-primary); }
.area-bar-legend {
display: flex;
justify-content: space-between;
margin-top: 5px;
font-size: 11px;
color: var(--color-text-muted);
} .area-segments {
display: flex;
gap: 6px;
}
.area-segments span {
flex: 1;
height: 6px;
background: var(--color-border);
border-radius: 999px;
transition: background var(--transition-fast);
}
.area-segments span.is-on {
background: var(--color-primary);
} .area-facts {
margin-top: 28px;
margin-bottom: 4px;
}
.area-facts-table {
width: 100%;
border-collapse: collapse;
}
.area-facts-table tr {
border-bottom: 1px solid var(--color-border);
}
.area-facts-table tr:last-child {
border-bottom: none;
}
.area-fact-icon {
font-size: 20px;
padding: 12px 14px 12px 0;
vertical-align: top;
line-height: 1.4;
white-space: nowrap;
width: 32px;
}
.area-fact-content {
padding: 12px 0;
vertical-align: top;
}
.area-fact-headline {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--color-text-main);
line-height: 1.35;
margin-bottom: 3px;
}
.area-fact-desc {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.5;
} .area-cta {
margin-top: 28px;
} .area-cta .us-btn {
display: block;
width: 100%;
text-align: center;
} .area-image {
flex: 0 0 48%;
max-width: 48%;
height: 360px;
border-radius: var(--radius-md);
overflow: hidden; position: sticky;
top: max(110px, calc(50vh - 180px));
align-self: flex-start;
}
.area-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform 0.5s ease,
filter 0.5s ease;
} .area-image:hover img {
transform: scale(1.04);
filter: saturate(1.03);
} @media (max-width: 1024px) {
.area-item {
padding: 28px;
border-radius: var(--radius-card);
}
.areas-head {
margin-bottom: 36px;
}
.areas-pills {
margin-bottom: 56px;
}
.areas-list {
gap: 64px;
}
.area-item,
.area-item.is-reverse {
flex-direction: column;
gap: 32px;
}
.area-image {
order: -1;
position: static;
height: auto;
aspect-ratio: 16 / 10;
}
.area-content,
.area-image {
max-width: 100%;
flex: 1;
width: 100%;
}
.area-name {
font-size: 38px;
}
}
@media (max-width: 768px) {
.areas-pills {
gap: 10px;
margin-bottom: 48px;
}
.areas-pill {
font-size: 13px;
padding: 10px 16px;
}
.area-name {
font-size: 30px;
}
.area-text p {
font-size: 15px;
} .area-cta {
margin-top: 36px;
}
}