/* Mandala Section */
.mandala-section {
    background: var(--color-surface);
    padding-block: var(--space-xl);
}

.mandala-content {
    max-width: 800px;
    margin: 0 auto; /* Keep centered horizontally, but content aligned left? Or full left?
                     Typically if container is centered, aligning text left looks better.
                     If the design system prefers pure left alignment, we should probably remove margin: 0 auto or set margin-left: 0.
                     For now, let's align text left within the centered container. */
    text-align: left;
}

.mandala-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.mandala-text p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
}

.mandala-cta {
    margin-top: 2rem;
}

/* Approach Section */
.approach-section {
    padding-block: var(--space-xl);
}

.approach-header {
    text-align: left;
    margin-bottom: 3rem;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.approach-item {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 2rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.approach-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.approach-item-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.approach-icon {
    width: 3rem;
    height: 3rem;
    background: hsl(var(--accent) / 0.1);
    color: hsl(var(--accent));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.approach-item h3 {
    margin: 0;
    font-size: 1.25rem;
}

.approach-chevron {
    margin-left: auto;
    opacity: 0.5;
}

.approach-item-content p {
    color: var(--color-text-muted);
    margin: 0;
}

/* Highlight Strip */
.highlight-section {
    background: var(--color-primary);
    color: white;
    padding-block: 1rem;
    overflow: hidden;
}

.highlight-marquee {
    overflow: hidden;
}

.highlight-track {
    display: flex;
    gap: 4rem;
    animation: marquee 30s linear infinite;
    width: max-content;
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.125rem;
    white-space: nowrap;
}

.highlight-separator {
    opacity: 0.5;
    margin-left: 4rem;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Testimonials */
.testimonials-section {
    padding-block: var(--space-xl);
    background: var(--color-surface);
}

.testimonials-title {
    text-align: left;
    margin-bottom: 3rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.quote-icon {
    color: hsl(var(--accent));
    opacity: 1;
    margin-bottom: 1rem;
}

.testimonial-quote {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--color-text-main);
    margin-bottom: 1.5rem;
}

.author-name {
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.author-role {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* Partners */
.partners-section {
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.partners-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    opacity: 0.6;
}

.partner-text {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text-muted);
}