.clients-page {
    padding-top: 80px;
    min-height: 100vh;
    background: linear-gradient(to bottom, #000000, #001a1a);
}

.clients-hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.1), rgba(0, 102, 255, 0.1));
}

.clients-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, #00ffff, #0066ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.subtitle {
    font-size: 1.5rem;
    color: #ccc;
}

.industries {
    padding: 4rem 0;
    text-align: center;
}

.industries h2 {
    margin-bottom: 3rem;
    color: #00ffff;
}

.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.industry-card {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    padding: 2rem;
    transition: transform 0.3s ease;
}

.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
}

.industry-card h3 {
    color: #00ffff;
    margin-bottom: 1rem;
}

.client-logos {
    padding: 4rem 0;
    text-align: center;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.05), rgba(0, 102, 255, 0.05));
}

.client-logos h2 {
    margin-bottom: 3rem;
    color: #00ffff;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.logo-item {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #00ffff;
    transition: all 0.3s ease;
}

.logo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
    background: rgba(0, 255, 255, 0.1);
}

.testimonials {
    padding: 4rem 0;
    text-align: center;
}

.testimonials h2 {
    margin-bottom: 3rem;
    color: #00ffff;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.testimonial {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    padding: 2rem;
    transition: transform 0.3s ease;
}

.testimonial:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
}

.quote {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.author {
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    padding-top: 1rem;
}

.name {
    color: #00ffff;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.position {
    color: #666;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .clients-hero h1 {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1.2rem;
    }
    
    .industry-grid,
    .logo-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
} 

.clients-page { background: transparent; }
.clients-hero { text-align: left; padding: 9rem 2rem 5rem; background: linear-gradient(105deg, rgba(145, 230, 61, .11), transparent 65%); border-bottom: 1px solid var(--line); }
.clients-hero .container { max-width: 1180px; }
.section-kicker { margin-bottom: .7rem; color: var(--lime); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.clients-hero h1 { max-width: 850px; margin-bottom: 1.25rem; color: var(--cream); font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 6.2rem); line-height: .98; }
.clients-hero p:not(.section-kicker) { max-width: 720px; margin-bottom: .8rem; color: var(--muted); }
.client-audiences, .client-approach, .client-expectations, .client-journey, .clients-cta { padding: 5rem 0; }
.client-audiences { background: rgba(145, 230, 61, .025); border-bottom: 1px solid rgba(145, 230, 61, .1); }
.section-heading { max-width: 720px; margin-bottom: 2.5rem; }
.section-heading h2 { margin-bottom: .8rem; color: var(--cream); font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; }
.section-heading > p:last-child { color: var(--muted); }
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.audience-card { position: relative; min-height: 330px; padding: 1.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(23, 41, 28, .95), rgba(8, 15, 11, .95)); box-shadow: 0 16px 35px rgba(0,0,0,.2); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.audience-card::before { content: ''; position: absolute; top: 0; right: 0; width: 140px; height: 140px; background: radial-gradient(circle, rgba(145, 230, 61, .14), transparent 70%); }
.audience-card:hover { transform: translateY(-7px); border-color: rgba(145, 230, 61, .62); box-shadow: 0 24px 45px rgba(0,0,0,.3), 0 0 24px rgba(145,230,61,.08); }
.audience-number, .approach-grid article > span, .journey-grid article > span { position: relative; display: block; margin-bottom: 1.3rem; color: var(--lime); font-size: .75rem; font-weight: 700; letter-spacing: .13em; }
.audience-number::after { content: ''; display: inline-block; width: 2.5rem; height: 1px; margin: 0 0 .2rem .5rem; background: var(--lime); opacity: .55; }
.audience-card h3 { position: relative; margin-bottom: .6rem; color: var(--cream); font-family: var(--font-display); font-size: 1.35rem; }
.audience-card > p { position: relative; min-height: 3.2rem; margin-bottom: 1.25rem; color: var(--muted); font-size: .9rem; }
.audience-card ul { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .7rem; padding: 0; list-style: none; }
.audience-card li { color: var(--muted); font-size: .76rem; }
.audience-card li::before { content: '\2192'; margin-right: .35rem; color: var(--lime); }
.client-approach { background: rgba(145, 230, 61, .04); }
.approach-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.approach-grid article, .journey-grid article { padding: 1.25rem; border-top: 2px solid var(--lime); background: rgba(17, 31, 22, .72); }
.approach-grid article h3, .journey-grid article h3 { margin-bottom: .55rem; color: var(--cream); font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; }
.approach-grid article p, .journey-grid article p { color: var(--muted); font-size: .82rem; }
.expectation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.expectation-grid article { padding: 1.35rem; border: 1px solid rgba(145, 230, 61, .2); border-radius: 10px; background: rgba(145, 230, 61, .045); }
.expectation-grid h3 { margin-bottom: .45rem; color: var(--lime); font-size: 1rem; text-transform: uppercase; }
.expectation-grid p { color: var(--muted); font-size: .86rem; }
.client-journey { background: rgba(145, 230, 61, .025); }
.journey-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.journey-grid article { border-top-color: var(--signal); }
.journey-grid article > span { color: var(--signal); }
.clients-cta { text-align: center; background: linear-gradient(105deg, rgba(145, 230, 61, .12), rgba(8, 15, 11, .2)); border-top: 1px solid var(--line); }
.clients-cta .container { max-width: 850px; }
.clients-cta h2 { margin-bottom: .8rem; color: var(--cream); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); text-transform: uppercase; }
.clients-cta p:not(.section-kicker) { max-width: 650px; margin: 0 auto 1.5rem; color: var(--muted); }
.clients-cta .container > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.clients-cta .cta-btn { display: inline-block; width: auto; }
.clients-cta .secondary-btn { background: transparent; color: var(--lime); }
.clients-cta .secondary-btn:hover { background: var(--lime); color: var(--ink); }
.site-link { display: inline-block; margin-top: 1.5rem; color: var(--signal); font-size: .82rem; letter-spacing: .08em; text-decoration: none; }
.site-link:hover { color: var(--lime); }

@media (max-width: 1024px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .approach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .clients-hero { padding: 8rem 1.2rem 3.5rem; } .client-audiences, .client-approach, .client-expectations, .client-journey, .clients-cta { padding: 3.5rem 0; } .audience-grid, .approach-grid, .expectation-grid, .journey-grid { grid-template-columns: 1fr; } .audience-card { min-height: auto; } .audience-card > p { min-height: 0; } .audience-card ul { grid-template-columns: 1fr 1fr; } .clients-cta .cta-btn { width: 100%; } }