/* ===== CONTACT PAGE ===== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.contact-item .icon {
    width: 48px;
    height: 48px;
    background: var(--off-white);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-item .text h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.contact-item .text p,
.contact-item .text a {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    text-decoration: none;
    display: block;
}

.contact-item .text a:hover {
    color: var(--accent);
}

.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--primary);
    margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border 0.3s ease;
    background: var(--white);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(218, 164, 66, 0.15);
}

.contact-form textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-form .btn {
    width: 100%;
    justify-content: center;
}

.map-container {
    margin-top: 60px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: 0;
    display: block;
}

/* ===== ABOUT PAGE ===== */
.about-grid-full {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 30px;
}

.value-item {
    background: var(--off-white);
    padding: 24px 20px;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent);
}

.value-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.value-item p {
    font-size: 0.9rem;
    color: var(--gray-600);
}

/* ===== CAREERS PAGE ===== */
.job-listings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
}

.job-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    padding: 24px 28px;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition);
}

.job-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.job-card .job-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.job-card .job-info p {
    font-size: 0.9rem;
    color: var(--gray-600);
}

.job-card .job-meta {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--gray-600);
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.job-card .job-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--gray-100);
    padding: 4px 8px;
    border-radius: 50px;
    font-size: 12px;
}

/* ===== INSIGHTS PAGE ===== */
.insights-grid-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.insight-card-large {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: all var(--transition);
}

.insight-card-large:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.insight-card-large .insight-image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.insight-card-large .insight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insight-card-large:hover .insight-image img {
    transform: scale(1.05);
}

.insight-card-large .insight-body {
    padding: 24px;
}

.insight-card-large .insight-body .category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 8px;
}

.insight-card-large .insight-body h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
    line-height: 1.3;
}

.insight-card-large .insight-body p {
    color: var(--gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

.insight-card-large .insight-body .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.insight-card-large .insight-body .tags span {
    background: var(--off-white);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    color: var(--gray-600);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-grid-full {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-values {
        grid-template-columns: 1fr 1fr;
    }

    .insights-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-values {
        grid-template-columns: 1fr;
    }

    .insights-grid-full {
        grid-template-columns: 1fr;
    }

    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .job-card .job-meta {
        flex-wrap: wrap;
    }

    .contact-form {
        padding: 24px;
    }

    .map-container iframe {
        height: 280px;
    }
}

@media (max-width: 480px) {
    .contact-form {
        padding: 16px;
    }
}

/* ===== BREADCRUMBS (improved) ===== */
.breadcrumb-wrapper {
    background: linear-gradient(135deg, #f8f6f3 0%, #f0ede8 100%);
    border-bottom: 1px solid rgba(27, 42, 75, 0.06);
    padding: 14px 0;
    margin-bottom: 0;
}

.breadcrumb-nav {
    font-size: 0.9rem;
    font-weight: 400;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 6px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-600);
}

.breadcrumb-item a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.25s ease;
    font-weight: 500;
}

.breadcrumb-item a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.breadcrumb-item.active span {
    background: var(--accent);
    color: #fff;
    padding: 2px 14px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--gray-300);
    font-weight: 300;
    font-size: 1.1rem;
    margin: 0 2px;
}

@media (max-width: 768px) {
    .breadcrumb-wrapper {
        padding: 10px 0;
    }

    .breadcrumb-nav {
        font-size: 0.8rem;
    }

    .breadcrumb-item.active span {
        font-size: 0.75rem;
        padding: 2px 10px;
    }
}

/* ===== SERVICES INTRO ===== */
.services-intro {
    padding: 70px 0 40px;
    background: var(--white);
    position: relative;
}

.services-intro-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.services-intro-title {
    font-size: 44px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    line-height: 1.2;
}

.services-intro-divider {
    width: 80px;
    height: 4px;
    background: var(--accent);
    border-radius: 4px;
    margin: 0 auto 24px;
}

.services-intro-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--gray-600);
}

.services-intro-text strong {
    color: var(--accent);
    font-weight: 600;
}

/* ===== SERVICES INDEX (Quick Jump) ===== */
.services-index {
    padding: 60px 0 60px;
    background: #fafaf8;
    border-top: 1px solid rgba(27, 42, 75, 0.04);
    border-bottom: 1px solid rgba(27, 42, 75, 0.04);
}

.services-index-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.services-index-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    background: var(--white);
    padding: 0 18px;
    white-space: nowrap;
}

.services-index-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gray-200), transparent);
}

.services-index-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 14px;
    margin: 0 auto;
}

.service-index-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    padding: 8px 18px 8px 12px;
    border-radius: 50px;
    border: 1px solid rgba(27, 42, 75, 0.2);
    color: var(--primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.service-index-item:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(27, 42, 75, 0.12);
}

.service-index-item .service-index-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(218, 164, 66, 0.12);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    transition: 0.3s;
}

.service-index-item:hover .service-index-number {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.service-index-item .service-index-label-text {
    font-weight: 500;
}

@media (max-width: 992px) {
    .services-intro-title {
        font-size: 36px;
    }

    .services-intro-text {
        font-size: 1rem;
    }

    .services-index-grid {
        gap: 10px;
    }

    .service-index-item {
        padding: 6px 14px 6px 10px;
        font-size: 0.8rem;
    }

    .service-index-item .service-index-number {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
    }
}

@media (max-width: 768px) {
    .services-intro {
        padding: 50px 0 20px;
    }

    .services-intro-title {
        font-size: 28px;
    }

    .services-intro-divider {
        width: 60px;
        margin-bottom: 18px;
    }

    .services-intro-text {
        font-size: 0.95rem;
    }

    .services-index {
        padding: 20px 0 40px;
    }

    .services-index-header {
        gap: 12px;
        margin-bottom: 20px;
    }

    .services-index-label {
        font-size: 0.75rem;
        padding: 0 12px;
    }

    .service-index-item {
        padding: 4px 12px 4px 8px;
        font-size: 0.75rem;
        gap: 6px;
    }

    .service-index-item .service-index-number {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .services-intro-title {
        font-size: 24px;
    }

    .services-intro-text {
        font-size: 0.9rem;
    }

    .services-index-grid {
        gap: 8px;
    }

    .service-index-item {
        padding: 4px 10px 4px 6px;
        font-size: 0.7rem;
        border-radius: 30px;
    }

    .service-index-item .service-index-number {
        width: 16px;
        height: 16px;
        font-size: 0.5rem;
    }
}

/* ===== ABOUT PAGE ===== */

/* ----- Vision & Mission ----- */
.vision-mission {
    padding: 80px 0;
    background: var(--off-white);
}

.vision-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.vision-card,
.mission-card {
    background: #fff;
    padding: 40px 36px 44px;
    border-radius: 16px;
    border: 1px solid rgba(27, 42, 75, 0.06);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.vision-card:hover,
.mission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(27, 42, 75, 0.08);
    border-color: var(--accent);
}

.vision-card::before,
.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent);
}

.mission-card::before {
    background: var(--primary);
}

.vision-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(218, 164, 66, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 18px;
}

.mission-card .vision-icon {
    background: rgba(27, 42, 75, 0.08);
    color: var(--primary);
}

.vision-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--accent);
    display: block;
    margin-bottom: 8px;
}

.mission-card .vision-label {
    color: var(--primary);
}

.vision-card h3,
.mission-card h3 {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.3;
    margin-bottom: 12px;
}

.vision-card p,
.mission-card p {
    color: var(--gray-600);
    line-height: 1.7;
    font-size: 1rem;
}

/* ----- Why AUREKA (About version) ----- */
.why-aureka-about {
    padding: 80px 0;
    background: #fff;
}

.why-grid-about {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.why-card-about {
    background: var(--off-white);
    padding: 30px 24px 28px;
    border-radius: 0;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
}

.why-card-about:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.why-card-about .why-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(218, 164, 66, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--accent);
    margin-bottom: 14px;
}

.why-card-about h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.why-card-about p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ----- Values ----- */
.values-section {
    padding: 80px 0;
    background: var(--off-white);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.value-card {
    background: #fff;
    padding: 32px 28px;
    border-radius: 0px;
    border: 1px solid rgba(27, 42, 75, 1);
    display: flex;
    gap: 20px;
    transition: all 0.4s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.value-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 50px rgba(27, 42, 75, 0.07);
    border-color: var(--value-color);
}

.value-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(218, 164, 66, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent);
    transition: 0.3s;
}

.value-card:hover .value-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05) rotate(-3deg);
}

.value-card:nth-child(2):hover .value-icon {
    background: #2E7D32;
}

.value-card:nth-child(3):hover .value-icon {
    background: #1565C0;
}

.value-card:nth-child(4):hover .value-icon {
    background: #C62828;
}

.value-card .value-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.value-card .value-content p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 12px;
}

.value-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.value-tags span {
    background: var(--off-white);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* ----- Stats ----- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-item .stat-number {
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--accent);
    display: block;
    line-height: 1.1;
}

.stat-item .stat-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    display: block;
    margin-top: 4px;
}

/* ----- Responsive ----- */
@media (max-width: 992px) {
    .vision-mission-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .why-grid-about {
        grid-template-columns: repeat(2, 1fr);
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .stat-item .stat-number {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .vision-mission {
        padding: 50px 0;
    }

    .vision-card,
    .mission-card {
        padding: 28px 24px 32px;
    }

    .vision-card h3,
    .mission-card h3 {
        font-size: 1.3rem;
    }

    .why-aureka-about {
        padding: 50px 0;
    }

    .why-grid-about {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .values-section {
        padding: 50px 0;
    }

    .value-card {
        flex-direction: column;
        padding: 24px 20px;
        gap: 14px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .stat-item .stat-number {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stat-item .stat-number {
        font-size: 2rem;
    }
}

/* ===== CAREERS PAGE ===== */

/* ----- Culture Section ----- */
.culture-section {
    padding: 80px 0 60px;
    background: var(--white);
}

.culture-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 20px;
}

.culture-card {
    background: var(--off-white);
    padding: 28px 24px 32px;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
    text-align: center;
}

.culture-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.culture-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(218, 164, 66, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent);
    margin: 0 auto 14px;
    transition: 0.3s;
}

.culture-card:hover .culture-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.culture-card h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.culture-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ----- Benefits ----- */
.benefits-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(27, 42, 75, 0.06);
}

.benefits-title h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.benefits-title p {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
}

.benefits-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}

.benefit-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(27, 42, 75, 0.04);
}

.benefit-item i {
    font-size: 1.2rem;
    color: var(--accent);
    width: 28px;
    margin-top: 2px;
    flex-shrink: 0;
}

.benefit-item h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.benefit-item p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.4;
    margin: 0;
}

/* ----- Jobs Section ----- */
.jobs-section {
    padding: 80px 0;
    background: var(--off-white);
}

.job-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

.job-filter-btn {
    padding: 8px 24px;
    border: 1px solid var(--primary);
    border-radius: 50px;
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.job-filter-btn:hover {
    background: rgba(27, 42, 75, 0.05);
}

.job-filter-btn.active {
    background: var(--primary);
    color: #fff;
}

.job-listings {
    display: grid;
    flex-direction: column;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-top: 10px;
    margin: 0 auto;
}

.job-card {
    position: relative;
    background: #fff;
    padding: 24px 28px;
    border-radius: 0;
    border: 1px solid rgba(27, 42, 75, 1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    flex-direction: column;
}

.job-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 30px rgba(27, 42, 75, 0.06);
    transform: translateY(-2px);
}

.job-card.hidden {
    display: none;
}

.job-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.job-info p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 10px;
    max-width: 520px;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.job-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.job-meta i {
    color: var(--accent);
    font-size: 0.8rem;
}

.job-no-results {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(27, 42, 75, 0.06);
}

.job-no-results i {
    font-size: 2.5rem;
    color: var(--gray-300);
    margin-bottom: 12px;
}

.job-no-results h3 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 6px;
}

.job-no-results p {
    color: var(--gray-600);
}

/* ----- Training Section ----- */
.training-section {
    padding: 80px 0;
    background: var(--white);
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.training-card {
    background: var(--off-white);
    padding: 32px 28px 36px;
    border-radius: 0;
    border: 1px solid rgba(27, 42, 75, 1);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.training-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(27, 42, 75, 0.06);
    border-color: var(--card-accent, var(--accent));
}

.training-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.training-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(218, 164, 66, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent);
    margin: 0 auto 14px;
    transition: 0.3s;
}

.training-card:hover .training-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.training-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.training-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 14px;
}

.training-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.training-tags span {
    background: #fff;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--gray-600);
    font-weight: 500;
    border: 1px solid rgba(27, 42, 75, 0.04);
}

/* ----- Life at AUREKA (Testimonials) ----- */
.life-section {
    padding: 80px 0;
    background: var(--off-white);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 10px;
}

.testimonial-card {
    background: #fff;
    padding: 28px 24px 32px;
    border-radius: 14px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
}

.testimonial-stars {
    color: var(--accent);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.testimonial-card p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 16px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.testimonial-author h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
}

.testimonial-author span {
    font-size: 0.8rem;
    color: var(--gray-600);
}

/* ----- Application Form ----- */
.apply-section {
    padding: 80px 0;
    background: var(--white);
}

.apply-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
    background: var(--primary);
    padding: 50px 40px;
    border-radius: 20px;
    border: 1px solid rgba(27, 42, 75, 0.04);
}

.apply-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--off-white);
    line-height: 1.2;
    margin: 12px 0 14px;
}

.apply-content p {
    color: var(--off-white);
    line-height: 1.7;
    font-size: 1rem;
}

.apply-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.apply-form .form-group {
    margin-bottom: 16px;
}

.apply-form label {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--gray-100);
    margin-bottom: 4px;
}

.apply-form input,
.apply-form textarea,
.apply-form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(27, 42, 75, 0.1);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border 0.3s ease;
    background: #fff;
}

.apply-form input:focus,
.apply-form textarea:focus,
.apply-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(218, 164, 66, 0.1);
}

.apply-form input[type="file"] {
    padding: 8px;
    border: 1px dashed rgba(27, 42, 75, 0.2);
    cursor: pointer;
}

.apply-form .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
}

/* ----- Responsive ----- */
@media (max-width: 1200px) {
    .culture-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .training-grid {
        grid-template-columns: 1fr 1fr;
    }

    .testimonial-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .benefits-list {
        grid-template-columns: 1fr 1fr;
    }

    .apply-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 32px 24px;
    }

    .job-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .job-card .btn {
        align-self: flex-start;
    }
}

@media (max-width: 768px) {
    .culture-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .culture-card {
        padding: 20px 16px 24px;
    }

    .benefits-list {
        grid-template-columns: 1fr;
    }

    .training-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .apply-wrapper {
        padding: 24px 16px;
    }

    .apply-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .apply-content h2 {
        font-size: 1.6rem;
    }

    .job-filters {
        gap: 8px;
    }

    .job-filter-btn {
        padding: 6px 16px;
        font-size: 0.75rem;
    }

    .job-meta {
        gap: 10px;
        font-size: 0.8rem;
    }
}

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

    .job-card {
        padding: 18px 16px;
    }

    .job-info p {
        font-size: 0.85rem;
    }

    .apply-content h2 {
        font-size: 1.4rem;
    }
}

/* ===== SUBMIT CV - IMPROVED ===== */
.submit-cv-wrapper {
    margin: 0 auto;
}

.submit-cv-card {
    background: linear-gradient(135deg, #f8f6f3 0%, #f0ede8 100%);
    padding: 40px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    margin: 60px 0px -90px 0px;
}

.submit-cv-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--accent), var(--primary), var(--accent));
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {

    0%,
    100% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }
}

.submit-cv-card:hover {
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.08);
    transform: translateY(-2px);
}

.submit-cv-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex: 1;
}

.submit-cv-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(218, 164, 66, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--accent);
    transition: 0.3s;
}

.submit-cv-card:hover .submit-cv-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05) rotate(-3deg);
}

.submit-cv-text h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.submit-cv-text p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 12px;
    max-width: 480px;
}

.submit-cv-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.submit-cv-features span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--off-white);
    font-weight: 500;
    background: var(--primary);
    padding: 5px 14px;
    border-radius: 50px;
}

.submit-cv-features span i {
    color: var(--gray-100);
    font-size: 0.7rem;
}

.submit-cv-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
    min-width: 220px;
    justify-content: center;
}

.btn-lg i {
    margin: 0 4px;
}

.btn-lg .fa-cloud-upload-alt {
    font-size: 1.1rem;
}

.submit-cv-note {
    font-size: 0.75rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 6px;
}

.submit-cv-note i {
    color: var(--accent);
    font-size: 0.7rem;
}

/* ----- Responsive ----- */
@media (max-width: 992px) {
    .submit-cv-card {
        flex-direction: column;
        padding: 32px 28px;
        text-align: center;
    }

    .submit-cv-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .submit-cv-text p {
        max-width: 100%;
    }

    .submit-cv-features {
        justify-content: center;
    }

    .submit-cv-action {
        width: 100%;
    }

    .btn-lg {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .submit-cv-card {
        padding: 24px 18px;
    }

    .submit-cv-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    .submit-cv-text h3 {
        font-size: 1.1rem;
    }

    .submit-cv-text p {
        font-size: 0.9rem;
    }

    .submit-cv-features {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .btn-lg {
        padding: 12px 24px;
        font-size: 0.9rem;
        min-width: 100%;
    }
}

/* ===== RESOURCES PAGE ===== */

/* ----- Resource Index ----- */
.resource-index {
    padding: 40px 0 20px;
    background: var(--white);
}

.resource-index-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.resource-index-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
    background: var(--off-white);
    border-radius: 14px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    text-decoration: none;
    transition: all 0.4s ease;
    color: var(--primary);
}

.resource-index-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.resource-index-item i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 10px;
    transition: 0.3s;
}

.resource-index-item:hover i {
    transform: scale(1.1) rotate(-3deg);
}

.resource-index-item span {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
}

.resource-index-item small {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-top: 2px;
}

/* ----- Blog Section ----- */
.blog-section {
    padding: 80px 0;
    background: var(--off-white);
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: -10px 0 30px;
}

.blog-filter-btn {
    padding: 8px 22px;
    border: 2px solid var(--primary);
    border-radius: 50px;
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-filter-btn:hover {
    background: rgba(27, 42, 75, 0.05);
}

.blog-filter-btn.active {
    background: var(--primary);
    color: #fff;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.blog-card {
    background: #fff;
    overflow: hidden;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.blog-card.hidden {
    display: none;
}

.blog-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: var(--accent);
    color: #fff;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-body {
    padding: 20px 22px 24px;
}

.blog-meta {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.blog-body h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.blog-body p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 12px;
}

.blog-link {
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    font-size: 0.85rem;
}

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

.blog-no-results {
    text-align: center;
    padding: 50px 20px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(27, 42, 75, 0.06);
    grid-column: 1 / -1;
}

.blog-no-results i {
    font-size: 2.5rem;
    color: var(--gray-300);
    margin-bottom: 12px;
}

.blog-no-results h3 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 6px;
}

.blog-no-results p {
    color: var(--gray-600);
}

/* ----- Whitepapers ----- */
.whitepapers-section {
    padding: 80px 0;
    background: var(--white);
}

.whitepapers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.whitepaper-card {
    background: var(--off-white);
    padding: 32px 28px 36px;
    border: 1px solid rgba(27, 42, 75, 1);
    text-align: center;
    transition: all 0.4s ease;
}

.whitepaper-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.whitepaper-icon {
    font-size: 2.5rem;
    color: #e74c3c;
    margin-bottom: 14px;
}

.whitepaper-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.whitepaper-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 14px;
}

.whitepaper-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.whitepaper-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ----- Case Studies ----- */
.casestudies-section {
    padding: 80px 0;
    background: var(--off-white);
}

.casestudies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.casestudy-card {
    background: #fff;
    overflow: hidden;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
}

.casestudy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.casestudy-image {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.casestudy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.casestudy-industry {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: var(--primary);
    color: #fff;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

.casestudy-body {
    padding: 20px 22px 24px;
}

.casestudy-body h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.casestudy-body p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 14px;
}

.casestudy-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 14px;
}

.casestudy-stats .stat {
    display: flex;
    flex-direction: column;
}

.casestudy-stats .stat .number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.casestudy-stats .stat .label {
    font-size: 0.7rem;
    color: var(--gray-600);
}

.casestudy-link {
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    font-size: 0.85rem;
}

.casestudy-link:hover {
    gap: 14px;
    color: var(--primary);
}

/* ----- Downloads ----- */
.downloads-section {
    padding: 80px 0;
    background: var(--white);
}

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.download-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--off-white);
    padding: 24px 28px;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
}

.download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.download-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(218, 164, 66, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent);
}

.download-info {
    flex: 1;
}

.download-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.download-info p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin-bottom: 6px;
}

.download-meta {
    display: flex;
    gap: 14px;
    font-size: 0.7rem;
    color: var(--gray-600);
}

.download-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ----- Responsive ----- */
@media (max-width: 1200px) {
    .resource-index-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .whitepapers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .casestudies-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .downloads-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .resource-index-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid {
        grid-template-columns: 1fr 1fr;
    }

    .whitepapers-grid {
        grid-template-columns: 1fr 1fr;
    }

    .casestudies-grid {
        grid-template-columns: 1fr;
    }

    .downloads-grid {
        grid-template-columns: 1fr;
    }

    .download-card {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .resource-index-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .resource-index-item {
        padding: 16px 12px;
    }

    .resource-index-item i {
        font-size: 1.5rem;
    }

    .resource-index-item span {
        font-size: 0.9rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .whitepapers-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .blog-filters {
        gap: 8px;
    }

    .blog-filter-btn {
        padding: 6px 14px;
        font-size: 0.7rem;
    }

    .download-card {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }

    .download-icon {
        margin: 0 auto;
    }

    .download-info {
        text-align: center;
        width: 100%;
    }

    .download-meta {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .resource-index-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .resource-index-item {
        padding: 12px 8px;
    }

    .resource-index-item i {
        font-size: 1.2rem;
    }

    .resource-index-item span {
        font-size: 0.8rem;
    }

    .resource-index-item small {
        font-size: 0.6rem;
    }

    .casestudy-stats {
        gap: 16px;
    }
}

/* ===== GOVERNMENT PAGE ===== */

/* ----- Trust Badges ----- */
.gov-trust-badges {
    padding: 30px 0;
    background: var(--white);
    border-bottom: 1px solid rgba(27, 42, 75, 0.04);
}

.trust-badges-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
}

.trust-badge i {
    color: var(--accent);
    font-size: 1rem;
}

/* ----- GeM Section ----- */
.gem-section {
    padding: 80px 0;
    background: var(--off-white);
}

.gem-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.gem-badge {
    display: inline-block;
    background: rgba(218, 164, 66, 0.1);
    color: var(--accent);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.gem-content h2 {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.gem-content p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 24px;
}

.gem-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.gem-detail {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.gem-detail i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.gem-detail h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.gem-detail p {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin: 0;
}

.gem-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gem-card {
    background: #fff;
    padding: 36px 32px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.06);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
    text-align: center;
    min-width: 280px;
    position: relative;
    overflow: hidden;
}

.gem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--accent), var(--primary));
}

.gem-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.gem-logo i {
    font-size: 2.2rem;
    color: var(--primary);
}

.gem-logo span {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
}

.gem-status {
    display: inline-block;
    background: rgba(46, 125, 50, 0.1);
    color: #2E7D32;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #2E7D32;
    border-radius: 50%;
    margin-right: 6px;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.gem-reg {
    margin-bottom: 16px;
}

.gem-reg small {
    display: block;
    font-size: 0.65rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gem-reg strong {
    font-size: 1.1rem;
    color: var(--primary);
}

.gem-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.gem-categories span {
    background: var(--off-white);
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* ----- Capabilities ----- */
.gov-capabilities {
    padding: 80px 0;
    background: var(--white);
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.capability-card {
    background: var(--off-white);
    padding: 30px 26px 32px;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
    text-align: center;
}

.capability-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.capability-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(218, 164, 66, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--accent);
    margin: 0 auto 14px;
    transition: 0.3s;
}

.capability-card:hover .capability-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05) rotate(-3deg);
}

.capability-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.capability-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ----- PSU Section ----- */
.psu-section {
    padding: 80px 0;
    background: var(--off-white);
}

.psu-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.psu-badge {
    display: inline-block;
    background: rgba(27, 42, 75, 0.08);
    color: var(--primary);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.psu-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.psu-content>p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 20px;
}

.psu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.psu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--primary);
}

.psu-item i {
    color: var(--accent);
}

.psu-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(218, 164, 66, 0.06);
    padding: 12px 18px;
    border-radius: 10px;
    border-left: 3px solid var(--accent);
}

.psu-note i {
    color: var(--accent);
    font-size: 1.1rem;
}

.psu-note span {
    font-size: 0.85rem;
    color: var(--gray-600);
}

.psu-note a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.psu-note a:hover {
    text-decoration: underline;
}

.psu-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.psu-placeholder {
    background: #fff;
    padding: 40px 32px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.06);
    text-align: center;
    min-width: 280px;
}

.psu-placeholder i {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 12px;
}

.psu-placeholder h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary);
}

.psu-placeholder p {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.psu-progress {
    width: 100%;
    height: 6px;
    background: var(--off-white);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.psu-progress-bar {
    height: 100%;
    background: linear-gradient(to right, var(--accent), var(--primary));
    border-radius: 6px;
    transition: width 0.5s ease;
}

.psu-progress-label {
    font-size: 0.75rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* ----- Certifications ----- */
.certifications-section {
    padding: 80px 0;
    background: var(--white);
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.certification-card {
    background: var(--off-white);
    padding: 28px 24px 30px;
    border: 1px solid rgba(27, 42, 75, 1);
    text-align: center;
    transition: all 0.4s ease;
}

.certification-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.cert-icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 12px;
}

.certification-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.certification-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 10px;
}

.cert-tag {
    display: inline-block;
    background: #fff;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--gray-600);
    font-weight: 500;
    border: 1px solid rgba(27, 42, 75, 0.04);
}

.compliance-note {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(46, 125, 50, 0.04);
    padding: 24px 28px;
    border: 24px;
    margin-top: 4px;
}

.compliance-note i {
    font-size: 1.6rem;
    color: #2E7D32;
    flex-shrink: 0;
}

.compliance-note h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.compliance-note p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ----- Tender Section ----- */
.tender-section {
    padding: 80px 0;
    background: var(--off-white);
}

.tender-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.tender-badge {
    display: inline-block;
    background: rgba(27, 42, 75, 0.08);
    color: var(--primary);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.tender-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.tender-content>p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 24px;
}

.tender-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 24px;
}

.tender-stat {
    text-align: center;
}

.tender-stat .number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
}

.tender-stat .label {
    font-size: 0.75rem;
    color: var(--gray-600);
}

.tender-categories h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
}

.tender-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.tender-tags span {
    background: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    color: var(--gray-600);
    border: 1px solid rgba(27, 42, 75, 1);
}

.tender-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tender-card {
    background: #fff;
    padding: 28px 24px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.06);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
    min-width: 280px;
    width: 100%;
}

.tender-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--primary);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(27, 42, 75, 0.04);
    margin-bottom: 14px;
}

.tender-header i {
    color: var(--accent);
    font-size: 1.2rem;
}

.tender-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(27, 42, 75, 0.02);
}

.tender-item:last-child {
    border-bottom: none;
}

.tender-name {
    font-size: 0.85rem;
    color: var(--primary);
    font-weight: 500;
}

.tender-status {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 50px;
}

.tender-status.active {
    background: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
}

.tender-status.pending {
    background: rgba(218, 164, 66, 0.08);
    color: #DAA442;
}

.tender-status.completed {
    background: rgba(27, 42, 75, 0.06);
    color: var(--gray-600);
}

.tender-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
}

.tender-view-all:hover {
    gap: 14px;
    color: var(--primary);
}

/* ----- Download Section ----- */
.download-gov-section {
    padding: 80px 0;
    background: var(--white);
}

.download-gov-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.download-gov-badge {
    display: inline-block;
    background: rgba(218, 164, 66, 0.1);
    color: var(--accent);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.download-gov-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.download-gov-content>p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 20px;
}

.download-gov-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-bottom: 24px;
}

.download-gov-features .feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--gray-600);
}

.download-gov-features .feature i {
    color: var(--accent);
}

.download-gov-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.download-gov-actions .btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    min-width: 280px;
    justify-content: center;
}

.download-gov-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.download-gov-card {
    background: var(--off-white);
    padding: 36px 32px 32px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    text-align: center;
    min-width: 260px;
    width: 100%;
    max-width: 340px;
    transition: all 0.4s ease;
}

.download-gov-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.doc-icon {
    font-size: 3.5rem;
    color: #e74c3c;
    margin-bottom: 12px;
}

.download-gov-card h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.doc-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-bottom: 12px;
}

.doc-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.doc-pages {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.doc-pages span {
    background: #fff;
    padding: 4px 16px;
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--gray-600);
    border: 1px solid rgba(27, 42, 75, 0.04);
}

/* ----- Responsive ----- */
@media (max-width: 1200px) {
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {

    .gem-wrapper,
    .psu-wrapper,
    .tender-wrapper,
    .download-gov-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gem-visual,
    .psu-visual,
    .tender-visual,
    .download-gov-visual {
        order: -1;
    }

    .gem-card,
    .psu-placeholder,
    .tender-card,
    .download-gov-card {
        max-width: 400px;
        margin: 0 auto;
    }

    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .certifications-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .psu-list {
        grid-template-columns: 1fr;
    }

    .download-gov-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .trust-badges-grid {
        gap: 8px 16px;
    }

    .trust-badge {
        font-size: 0.75rem;
    }

    .gem-content h2,
    .psu-content h2,
    .tender-content h2,
    .download-gov-content h2 {
        font-size: 1.6rem;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .certifications-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .gem-details {
        gap: 10px;
    }

    .tender-stats {
        gap: 16px;
        flex-wrap: wrap;
    }

    .tender-stat .number {
        font-size: 1.5rem;
    }

    .download-gov-actions {
        flex-direction: column;
    }

    .download-gov-actions .btn-lg {
        min-width: 100%;
    }

    .compliance-note {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .compliance-note i {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .gem-card {
        padding: 24px 18px;
    }

    .tender-card {
        padding: 20px 16px;
    }

    .tender-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .download-gov-card {
        padding: 24px 18px;
    }

    .psu-placeholder {
        padding: 28px 20px;
    }
}

/* ===== ESG & SUSTAINABILITY PAGE ===== */

/* ----- Intro & Framework ----- */
.esg-intro {
    padding: 70px 0 60px;
    background: var(--white);
}

.esg-intro-content {
    max-width: 800px;
    margin: 0 auto 50px;
    text-align: center;
}

.esg-intro-content h2 {
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 16px;
    line-height: 1.2;
}

.esg-intro-content p {
    font-size: 1.1rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.esg-framework-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.esg-pillar {
    background: var(--off-white);
    padding: 32px 28px 36px;
    border-radius: 0;
    border: 1px solid rgba(27, 42, 75, 1);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.esg-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pillar-color, var(--accent));
}

.esg-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--pillar-color, var(--accent));
}

.pillar-icon {
    font-size: 2.8rem;
    color: var(--pillar-color, var(--accent));
    margin-bottom: 14px;
}

.esg-pillar h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.esg-pillar p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 14px;
}

.pillar-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pillar-tags span {
    background: #fff;
    padding: 4px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--gray-600);
    font-weight: 500;
    border: 1px solid rgba(27, 42, 75, 0.04);
}

/* ----- Sustainability Initiatives ----- */
.sustainability-initiatives {
    padding: 80px 0;
    background: var(--off-white);
}

.sustainability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.sustainability-card {
    background: #fff;
    padding: 28px 22px 30px;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.sustainability-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.sustainability-card .card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(46, 125, 50, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #2E7D32;
    margin-bottom: 14px;
    transition: 0.3s;
}

.sustainability-card:hover .card-icon {
    background: #2E7D32;
    color: #fff;
    transform: scale(1.05) rotate(-3deg);
}

/* Different icon colors for variety */
.sustainability-card:nth-child(2) .card-icon {
    background: rgba(218, 164, 66, 0.08);
    color: var(--accent);
}

.sustainability-card:nth-child(2):hover .card-icon {
    background: var(--accent);
    color: #fff;
}

.sustainability-card:nth-child(3) .card-icon {
    background: rgba(21, 101, 192, 0.08);
    color: #1565C0;
}

.sustainability-card:nth-child(3):hover .card-icon {
    background: #1565C0;
    color: #fff;
}

.sustainability-card:nth-child(4) .card-icon {
    background: rgba(198, 40, 40, 0.08);
    color: #C62828;
}

.sustainability-card:nth-child(4):hover .card-icon {
    background: #C62828;
    color: #fff;
}

.sustainability-card:nth-child(5) .card-icon {
    background: rgba(27, 42, 75, 0.08);
    color: var(--primary);
}

.sustainability-card:nth-child(5):hover .card-icon {
    background: var(--primary);
    color: #fff;
}

.sustainability-card:nth-child(6) .card-icon {
    background: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
}

.sustainability-card:nth-child(6):hover .card-icon {
    background: #2E7D32;
    color: #fff;
}

.sustainability-card:nth-child(7) .card-icon {
    background: rgba(255, 152, 0, 0.08);
    color: #FF9800;
}

.sustainability-card:nth-child(7):hover .card-icon {
    background: #FF9800;
    color: #fff;
}

.sustainability-card:nth-child(8) .card-icon {
    background: rgba(139, 195, 74, 0.08);
    color: #8BC34A;
}

.sustainability-card:nth-child(8):hover .card-icon {
    background: #8BC34A;
    color: #fff;
}

.sustainability-card h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.sustainability-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 12px;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.card-tags span {
    background: var(--gray-100);
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 0.65rem;
    color: var(--off-white);
    font-weight: 500;
}

/* ----- Impact Stats ----- */
.impact-section {
    padding: 80px 0;
    background: var(--primary);
}

.impact-section .section-title {
    color: #fff;
}

.impact-section .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 10px;
}

.impact-item {
    text-align: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: 0.3s;
}

.impact-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-4px);
}

.impact-item .impact-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
    line-height: 1.1;
}

.impact-item .impact-number::after {
    content: '%';
    font-size: 2rem;
}

.impact-item .impact-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-top: 6px;
}

/* ----- ESG Reporting ----- */
.esg-reporting {
    padding: 80px 0;
    background: var(--white);
}

.reporting-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.reporting-badge {
    display: inline-block;
    background: rgba(46, 125, 50, 0.08);
    color: #2E7D32;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.reporting-content h2 {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.reporting-content>p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 20px;
}

.reporting-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin-bottom: 24px;
}

.reporting-features .feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.reporting-features .feature i {
    color: var(--accent);
}

.reporting-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.reporting-card {
    background: var(--off-white);
    padding: 32px 28px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    text-align: center;
    min-width: 260px;
    width: 100%;
    max-width: 340px;
    transition: 0.4s;
}

.reporting-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.reporting-card i {
    font-size: 20px;
    color: #e74c3c;
}

.reporting-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.reporting-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 12px;
}

.reporting-meta {
    display: flex;
    justify-content: center;
    gap: 14px;
    font-size: 0.7rem;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.reporting-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ----- Sustainability Certifications ----- */
.sustainability-certifications {
    padding: 80px 0;
    background: var(--off-white);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.cert-item {
    background: #fff;
    padding: 20px 16px;
    border: 1px solid rgba(27, 42, 75, 1);
    text-align: center;
    transition: 0.4s;
}

.cert-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.cert-item i {
    font-size: 2rem;
    color: var(--accent);
    display: block;
    margin-bottom: 8px;
}

.cert-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    display: block;
}

.cert-item small {
    font-size: 0.65rem;
    color: var(--gray-600);
    display: block;
    margin-top: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .sustainability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .esg-framework-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .reporting-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .reporting-visual {
        order: -1;
    }

    .reporting-card {
        max-width: 400px;
        margin: 0 auto;
    }

    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .esg-intro-content h2 {
        font-size: 2rem;
    }

    .esg-intro-content p {
        font-size: 1rem;
    }

    .sustainability-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .impact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .impact-item .impact-number {
        font-size: 2.5rem;
    }

    .reporting-content h2 {
        font-size: 1.8rem;
    }

    .reporting-features {
        grid-template-columns: 1fr;
    }

    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .esg-intro-content h2 {
        font-size: 1.6rem;
    }

    .impact-grid {
        grid-template-columns: 1fr;
    }

    .impact-item .impact-number {
        font-size: 2.2rem;
    }

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

    .cert-item {
        padding: 14px 12px;
    }

    .cert-item i {
        font-size: 1.5rem;
    }

    .cert-item span {
        font-size: 0.75rem;
    }

    .reporting-card {
        padding: 24px 18px;
    }

    .sustainability-card {
        padding: 20px 16px;
    }
}

/* ===== INVESTORS PAGE ===== */

/* ----- Investment Highlights ----- */
.investment-highlights {
    padding: 80px 0;
    background: var(--off-white);
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.highlight-card {
    background: #fff;
    padding: 30px 26px 32px;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 50px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.highlight-number {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(27, 42, 75, 0.04);
    line-height: 1;
}

.highlight-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(218, 164, 66, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--accent);
    margin-bottom: 14px;
    transition: 0.3s;
}

.highlight-card:hover .highlight-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.05) rotate(-3deg);
}

.highlight-card h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
}

.highlight-card p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

.highlights-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}

.btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
    min-width: 220px;
    justify-content: center;
}

/* ----- Vision ----- */
.investor-vision {
    padding: 80px 0;
    background: var(--white);
}

.vision-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.vision-badge {
    display: inline-block;
    background: rgba(27, 42, 75, 0.06);
    color: var(--primary);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.vision-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.3;
    margin-bottom: 16px;
}

.vision-content>p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 20px;
}

.vision-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.vision-values .value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 500;
}

.vision-values .value i {
    color: var(--accent);
}

.vision-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vision-card {
    background: var(--off-white);
    padding: 32px 28px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    width: 100%;
    max-width: 400px;
}

.vision-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.vision-stats .stat {
    text-align: center;
}

.vision-stats .stat .number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
}

.vision-stats .stat .label {
    font-size: 0.8rem;
    color: var(--gray-600);
}

/* ----- Market Opportunity ----- */
.market-opportunity {
    padding: 80px 0;
    background: var(--off-white);
}

.market-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.market-card {
    background: #fff;
    padding: 28px 20px 30px;
    border: 1px solid rgba(27, 42, 75, 1);
    text-align: center;
    transition: 0.4s;
}

.market-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.market-icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 10px;
}

.market-card h4 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.market-card p {
    font-size: 0.85rem;
    color: var(--gray-600);
    margin-bottom: 8px;
}

.market-growth {
    display: inline-block;
    background: rgba(46, 125, 50, 0.06);
    color: #2E7D32;
    padding: 2px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

.market-opportunity-text {
    max-width: 900px;
    margin: 50px auto 0;
}

.market-opportunity-text h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary);
    text-align: center;
    margin-bottom: 20px;
}

.opportunity-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 30px;
}

.opportunity-features .feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.opportunity-features .feature i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.opportunity-features .feature h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.opportunity-features .feature p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

/* ----- Technology ----- */
.investor-technology {
    padding: 80px 0;
    background: var(--white);
}

.tech-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.tech-badge {
    display: inline-block;
    background: rgba(218, 164, 66, 0.08);
    color: var(--accent);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.tech-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.tech-content>p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 20px;
}

.tech-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tech-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tech-feature i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.tech-feature h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.tech-feature p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.5;
    margin: 0;
}

.tech-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tech-card {
    background: var(--off-white);
    padding: 28px 24px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    width: 100%;
    max-width: 380px;
    transition: 0.4s;
}

.tech-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.tech-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(27, 42, 75, 0.04);
    margin-bottom: 14px;
}

.tech-header i {
    color: var(--accent);
    font-size: 1.4rem;
}

.tech-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.tech-metric {
    text-align: center;
}

.tech-metric .label {
    font-size: 0.65rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
}

.tech-metric .value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.tech-features-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(27, 42, 75, 0.04);
}

.tech-features-tags span {
    background: #fff;
    padding: 3px 14px;
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* ----- Roadmap ----- */
.investor-roadmap {
    padding: 80px 0;
    background: var(--off-white);
}

.roadmap-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 10px;
}

.roadmap-phase {
    background: #fff;
    padding: 28px 22px 30px;
    border: 1px solid rgba(27, 42, 75, 1);
    position: relative;
    transition: 0.4s;
}

.roadmap-phase:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.phase-number {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
    display: block;
}

.phase-content {
    position: relative;
}

.phase-icon {
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 10px;
}

.roadmap-phase h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.roadmap-phase ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.roadmap-phase ul li {
    position: relative;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 4px;
}

.roadmap-phase ul li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

/* ----- Milestones ----- */
.investor-milestones {
    padding: 80px 0;
    background: var(--white);
}

.milestones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.milestone-card {
    background: var(--off-white);
    padding: 28px 22px 30px;
    border: 1px solid rgba(27, 42, 75, 1);
    transition: 0.4s;
    position: relative;
}

.milestone-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(27, 42, 75, 0.06);
    border-color: var(--accent);
}

.milestone-year {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.milestone-content {
    display: flex;
    flex-direction: column;
}

.milestone-icon {
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 8px;
}

.milestone-content h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.milestone-content p {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ----- Contact Investor ----- */
.investor-contact {
    padding: 80px 0;
    background: var(--off-white);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.contact-badge {
    display: inline-block;
    background: rgba(218, 164, 66, 0.08);
    color: var(--accent);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.contact-content h2 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.2;
    margin-bottom: 16px;
}

.contact-content>p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 24px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.contact-item i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-top: 3px;
    flex-shrink: 0;
    width: 24px;
}

.contact-item h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.contact-item a,
.contact-item p {
    font-size: 0.9rem;
    color: var(--gray-600);
    text-decoration: none;
    line-height: 1.5;
}

.contact-item a:hover {
    color: var(--accent);
}

.contact-form-wrapper {
    background: #fff;
    padding: 36px 32px;
    border-radius: 18px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

.contact-form-wrapper h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.contact-form-wrapper>p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 20px;
}

.investor-form .form-group {
    margin-bottom: 16px;
}

.investor-form label {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.investor-form input,
.investor-form textarea,
.investor-form select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(27, 42, 75, 0.1);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border 0.3s ease;
    background: var(--white);
}

.investor-form input:focus,
.investor-form textarea:focus,
.investor-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(218, 164, 66, 0.08);
}

.investor-form .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
}

/* ----- Disclaimer ----- */
.investor-disclaimer {
    padding: 30px 0 40px;
    background: var(--white);
    border-top: 1px solid rgba(27, 42, 75, 0.04);
}

.disclaimer-wrapper {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 0 auto;
    padding: 16px 20px;
    background: var(--off-white);
    border-radius: 14px;
    border: 1px solid var(--accent);
}

.disclaimer-wrapper i {
    font-size: 1.4rem;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}

.disclaimer-wrapper h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 2px;
}

.disclaimer-wrapper p {
    font-size: 0.8rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .market-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .milestones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {

    .vision-wrapper,
    .tech-wrapper,
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .vision-visual,
    .tech-visual,
    .contact-form-wrapper {
        order: -1;
    }

    .vision-card,
    .tech-card {
        max-width: 100%;
    }

    .roadmap-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .opportunity-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .highlights-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .market-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .market-card h4 {
        font-size: 1.5rem;
    }

    .roadmap-timeline {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .milestones-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .vision-content h2 {
        font-size: 1.8rem;
    }

    .vision-values {
        grid-template-columns: 1fr;
    }

    .tech-content h2 {
        font-size: 1.8rem;
    }

    .contact-content h2 {
        font-size: 1.8rem;
    }

    .contact-form-wrapper {
        padding: 24px 18px;
    }

    .highlights-cta {
        flex-direction: column;
        align-items: center;
    }

    .highlights-cta .btn {
        width: 100%;
        max-width: 320px;
    }

    .vision-stats {
        grid-template-columns: 1fr 1fr;
    }

    .vision-stats .stat .number {
        font-size: 1.8rem;
    }
}

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

    .vision-stats {
        grid-template-columns: 1fr;
    }

    .tech-demo {
        grid-template-columns: 1fr;
    }

    .contact-details {
        gap: 12px;
    }

    .disclaimer-wrapper {
        flex-direction: column;
        padding: 14px 16px;
    }

    .disclaimer-wrapper i {
        margin: 0 auto;
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: 0.9rem;
        min-width: 100%;
    }
}

/* ===== LEGAL PAGES (Terms, Privacy, Cookies) ===== */
.legal-content {
    padding: 60px 0 80px;
    background: var(--off-white);
}

.legal-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

/* Sidebar */
.legal-sidebar {
    background: #fff;
    padding: 28px 24px 30px;
    border-radius: 14px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02);
    position: sticky;
    top: 100px;
}

.legal-sidebar h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legal-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.legal-nav li {
    margin-bottom: 6px;
}

.legal-nav a {
    display: block;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.legal-nav a:hover {
    background: var(--off-white);
    color: var(--primary);
}

.legal-nav a:active {
    background: rgba(218, 164, 66, 0.08);
    color: var(--accent);
}

.legal-sidebar-download {
    padding-top: 16px;
    border-top: 1px solid rgba(27, 42, 75, 0.04);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.legal-sidebar-download i {
    color: var(--accent);
    font-size: 1.2rem;
}

.legal-sidebar-download span {
    font-size: 0.85rem;
    color: var(--gray-600);
    flex: 1;
}

/* Main Content */
.legal-main {
    background: #fff;
    padding: 40px 44px;
    border-radius: 14px;
    border: 1px solid rgba(27, 42, 75, 0.04);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02);
}

.legal-header h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
}

.legal-header p {
    font-size: 0.9rem;
    color: var(--gray-600);
    margin: 2px 0;
}

.legal-body {
    margin-top: 30px;
}

.legal-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(27, 42, 75, 0.04);
}

.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.legal-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
}

.legal-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    margin: 14px 0 6px;
}

.legal-section p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 10px;
}

.legal-section ul {
    padding-left: 24px;
    margin: 8px 0 12px;
}

.legal-section ul li {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: 4px;
}

.legal-section ul li::marker {
    color: var(--accent);
}

.legal-contact {
    background: var(--off-white);
    padding: 20px 24px;
    border-radius: 10px;
    margin-top: 12px;
}

.legal-contact p {
    margin: 4px 0;
}

.legal-contact a {
    color: var(--accent);
    text-decoration: none;
}

.legal-contact a:hover {
    text-decoration: underline;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .legal-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .legal-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .legal-content {
        padding: 40px 0 60px;
    }

    .legal-main {
        padding: 24px 20px;
    }

    .legal-header h2 {
        font-size: 1.6rem;
    }

    .legal-section h3 {
        font-size: 1.1rem;
    }

    .legal-section p,
    .legal-section ul li {
        font-size: 0.9rem;
    }

    .legal-sidebar {
        padding: 20px 16px;
    }

    .legal-nav a {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}

@media (max-width: 480px) {
    .legal-main {
        padding: 16px 14px;
    }

    .legal-header h2 {
        font-size: 1.4rem;
    }

    .legal-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}