.page-hero {
padding: calc(var(--header-height) + var(--space-2xl)) 0 var(--space-2xl);
background: linear-gradient(180deg, var(--color-primary-bg) 0%, var(--color-bg) 100%);
text-align: center;
}
.page-hero-title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
line-height: 1.2;
color: var(--color-text);
margin-bottom: var(--space-md);
}
.page-hero-desc {
font-size: 1.1rem;
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.pricing-table-section {
padding: 0 0 var(--space-3xl);
}
.pricing-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border-light);
box-shadow: var(--shadow-md);
background: var(--color-bg);
}
.pricing-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.pricing-table thead {
background: var(--color-accent);
}
.pricing-table thead th {
padding: 0.9rem 1.25rem;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #ffffff;
text-align: left;
white-space: nowrap;
}
.pricing-table thead th:first-child {
border-radius: var(--radius-lg) 0 0 0;
}
.pricing-table thead th:last-child {
border-radius: 0 var(--radius-lg) 0 0;
}
.pricing-table tbody tr {
border-bottom: 1px solid var(--color-border-light);
transition: background var(--transition-fast);
}
.pricing-table tbody tr:last-child {
border-bottom: none;
}
.pricing-table tbody tr:hover {
background: var(--color-primary-bg);
}
.pricing-table-row--featured {
background: var(--color-primary-light);
}
.pricing-table-row--featured:hover {
background: #dceefb;
}
.pricing-table tbody td {
padding: 1rem 1.25rem;
vertical-align: middle;
color: var(--color-text-secondary);
}
.phase-tag {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-primary);
background: var(--color-primary-light);
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
white-space: nowrap;
}
.phase-tag--featured {
color: #fff;
background: var(--color-primary);
}
.table-service-name {
display: block;
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 0.25rem;
}
.table-service-desc {
display: block;
font-size: 0.8rem;
color: var(--color-text-muted);
line-height: 1.45;
max-width: 340px;
}
.table-badge {
display: inline-block;
font-family: var(--font-heading);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
background: var(--color-accent);
padding: 0.15rem 0.55rem;
border-radius: var(--radius-full);
margin-bottom: 0.3rem;
vertical-align: middle;
margin-left: 0.5rem;
}
.table-price {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 800;
color: var(--color-primary);
white-space: nowrap;
}
.table-unit {
font-size: 0.85rem;
color: var(--color-text-muted);
white-space: nowrap;
}
.pricing-table-note {
text-align: center;
margin-top: var(--space-xl);
padding: var(--space-lg);
background: var(--color-primary-bg);
border-radius: var(--radius-lg);
border: 1px dashed var(--color-primary);
}
.pricing-table-note p {
font-size: 0.92rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.pricing-table-note a {
color: var(--color-primary);
font-weight: 700;
text-decoration: underline;
}
.pricing-table-note a:hover {
color: var(--color-primary-hover);
}
.nav-link.active,
.mobile-nav-link.active {
color: var(--color-primary);
}
@media (max-width: 767px) {
.pricing-table-wrap {
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
overflow-x: visible;
}
.pricing-table {
display: block;
}
.pricing-table thead {
display: none;
}
.pricing-table tbody {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.pricing-table tbody tr {
display: block;
background: var(--color-bg);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-xs);
border-bottom: 1px solid var(--color-border-light);
}
.pricing-table tbody tr:hover {
background: var(--color-bg);
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
}
.pricing-table-row--featured {
border-color: var(--color-primary);
border-width: 2px;
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
}
.pricing-table-row--featured:hover {
background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
}
.pricing-table tbody td {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--color-border-light);
}
.pricing-table tbody td:last-child {
border-bottom: none;
}
.pricing-table tbody td::before {
content: attr(data-label);
flex-shrink: 0;
width: 90px;
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
}
.pricing-table tbody td:first-child {
padding-bottom: 0;
border-bottom: none;
}
.pricing-table tbody td:nth-child(2) {
flex-wrap: wrap;
align-items: flex-start;
gap: 0.25rem 0.75rem;
}
.table-service-name {
font-size: 1.05rem;
}
.table-service-desc {
max-width: none;
width: 100%;
flex-basis: 100%;
}
.table-badge {
margin-left: 0;
margin-bottom: 0.35rem;
}
.pricing-table tbody td:last-child .btn {
width: 100%;
}
.pricing-table-note {
margin-top: var(--space-lg);
padding: var(--space-md);
}
}
@media (max-width: 360px) {
.pricing-table tbody td {
gap: 0.5rem;
padding: 0.45rem 0;
}
.pricing-table tbody td::before {
width: 64px;
font-size: 0.65rem;
}
.pricing-table tbody tr {
padding: var(--space-md);
}
}