/*
Theme Name: Stoerkens Theme
Theme URI: https://stoerkens.de
Author: Stoerkens
Author URI: https://stoerkens.de
Description: Custom theme for Stoerkens - Software Entwicklung & Business Intelligence
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stoerkens-theme
*/

/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #ffffff;
    color: #27272a;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: 'Space Grotesk', sans-serif;
}

/* ==========================================================================
   Custom Properties (CSS Variables)
   ========================================================================== */

:root {
    /* Colors */
    --color-lime-brand: #B9FF66;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #a1a1aa;
    --color-zinc-500: #71717a;
    --color-zinc-600: #52525b;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;

    /* Border Radius */
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Container */
    --container-max: 80rem;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.bg-lime-brand {
    background-color: var(--color-lime-brand);
}

.text-lime-brand {
    color: var(--color-lime-brand);
}

.card-shadow {
    box-shadow: 0 5px 0 0 #191A23;
}

/* Selection */
::selection {
    background-color: var(--color-lime-brand);
    color: var(--color-black);
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-navigation {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
    color: inherit;
}

.site-logo svg {
    width: 1.75rem;
    height: 1.75rem;
}

.site-logo span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.nav-menu {
    display: none;
    align-items: center;
    gap: var(--spacing-10);
    font-size: 1.125rem;
    list-style: none;
}

.nav-menu li a {
    color: var(--color-zinc-600);
    text-decoration: none;
    transition: color var(--transition-base);
}

.nav-menu li a:hover,
.nav-menu li a.current {
    color: var(--color-black);
}

.nav-menu li a.current {
    font-weight: 500;
}

.nav-contact-btn {
    border: 1px solid var(--color-zinc-300);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3) var(--spacing-6);
    color: var(--color-black);
    text-decoration: none;
    transition: all var(--transition-base);
}

.nav-contact-btn:hover {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

.mobile-menu-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);
}

.mobile-menu-btn svg {
    width: 2rem;
    height: 2rem;
}

@media (min-width: 1024px) {
    .nav-menu {
        display: flex;
    }

    .mobile-menu-btn {
        display: none;
    }
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-6);
}

@media (min-width: 1024px) {
    .hero-section {
        padding: var(--spacing-20) var(--spacing-6);
    }
}

.hero-grid {
    display: grid;
    gap: var(--spacing-12);
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hero-content {
    max-width: 36rem;
}

.hero-badge {
    display: inline-block;
    background-color: var(--color-lime-brand);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-6);
}

.hero-title {
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin-bottom: var(--spacing-8);
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4.5rem;
    }
}

.hero-description {
    font-size: 1.25rem;
    color: var(--color-zinc-600);
    margin-bottom: var(--spacing-10);
    line-height: 1.7;
}

.hero-btn {
    display: inline-block;
    background-color: var(--color-zinc-900);
    color: var(--color-white);
    font-size: 1.25rem;
    padding: var(--spacing-5) var(--spacing-8);
    border-radius: var(--radius-xl);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.hero-btn:hover {
    background-color: var(--color-zinc-800);
}

.hero-illustration {
    position: relative;
    width: 100%;
    height: 400px;
    display: none;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero-illustration {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .hero-illustration {
        height: 500px;
    }
}

/* ==========================================================================
   Logo Scroll Section
   ========================================================================== */

.logo-scroll-section {
    overflow: hidden;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-10) var(--spacing-6);
}

.logo-track {
    display: flex;
    gap: var(--spacing-16);
    min-width: max-content;
    align-items: center;
    opacity: 0.8;
}

.logo-track img {
    height: 2rem;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   Services Section
   ========================================================================== */

.services-section {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-20) var(--spacing-6);
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

@media (min-width: 1024px) {
    .section-header {
        flex-direction: row;
        align-items: center;
    }
}

.section-title {
    display: inline-block;
    background-color: var(--color-lime-brand);
    padding: 0 var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.section-description {
    max-width: 42rem;
    font-size: 1.125rem;
    color: var(--color-zinc-600);
}

.services-grid {
    display: grid;
    gap: var(--spacing-8);
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Service Card */
.service-card {
    padding: var(--spacing-10);
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
}

.service-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-900);
}

.service-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.service-card.dark {
    background-color: var(--color-zinc-900);
    border: 1px solid var(--color-zinc-900);
    color: var(--color-white);
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.service-card-title {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.service-card-title span {
    display: inline-block;
    width: fit-content;
    padding: 0 var(--spacing-2);
    font-size: 1.5rem;
    font-weight: 500;
    border-radius: var(--radius-md);
}

@media (min-width: 1024px) {
    .service-card-title span {
        font-size: 1.875rem;
    }
}

.service-card.light .service-card-title span {
    background-color: var(--color-lime-brand);
}

.service-card.lime .service-card-title span {
    background-color: var(--color-white);
}

.service-card.dark .service-card-title span {
    background-color: var(--color-white);
    color: var(--color-black);
}

.service-card-icon {
    display: none;
}

@media (min-width: 640px) {
    .service-card-icon {
        display: block;
    }
}

.service-card-description {
    margin-top: var(--spacing-4);
}

.service-card.light .service-card-description {
    color: var(--color-zinc-600);
}

.service-card.lime .service-card-description {
    color: var(--color-zinc-800);
}

.service-card.dark .service-card-description {
    color: var(--color-zinc-400);
}

.service-card-link {
    margin-top: var(--spacing-8);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    cursor: pointer;
    text-decoration: none;
}

.service-card-link-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
}

.service-card-link:hover .service-card-link-icon {
    transform: rotate(45deg);
}

.service-card.light .service-card-link-icon,
.service-card.lime .service-card-link-icon {
    background-color: var(--color-black);
    color: var(--color-lime-brand);
}

.service-card.dark .service-card-link-icon {
    background-color: var(--color-white);
    color: var(--color-black);
}

.service-card-link span {
    font-size: 1.25rem;
    font-weight: 500;
    display: none;
}

@media (min-width: 640px) {
    .service-card-link span {
        display: inline-block;
    }
}

.service-card.dark .service-card-link span {
    color: var(--color-white);
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.cta-section {
    max-width: var(--container-max);
    margin: 0 auto var(--spacing-20);
    padding: 0 var(--spacing-6);
}

.cta-card {
    background-color: var(--color-zinc-100);
    border-radius: 40px;
    padding: var(--spacing-12) var(--spacing-16);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .cta-card {
        flex-direction: row;
    }
}

.cta-content {
    max-width: 32rem;
    position: relative;
    z-index: 10;
}

.cta-title {
    font-size: 1.875rem;
    font-weight: 500;
    letter-spacing: -0.025em;
    margin-bottom: var(--spacing-6);
}

@media (min-width: 1024px) {
    .cta-title {
        font-size: 2.25rem;
    }
}

.cta-description {
    font-size: 1.125rem;
    color: var(--color-zinc-600);
    margin-bottom: var(--spacing-8);
}

.cta-btn {
    display: inline-block;
    background-color: var(--color-zinc-900);
    color: var(--color-white);
    font-size: 1.125rem;
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--radius-xl);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.cta-btn:hover {
    background-color: var(--color-zinc-800);
}

.cta-illustration {
    position: relative;
    width: 20rem;
    height: 20rem;
    margin-top: var(--spacing-10);
    display: none;
}

@media (min-width: 768px) {
    .cta-illustration {
        display: block;
    }
}

@media (min-width: 1024px) {
    .cta-illustration {
        position: absolute;
        right: 5rem;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
    }
}

/* ==========================================================================
   Case Studies / Referenzen Section
   ========================================================================== */

.case-studies-section {
    max-width: var(--container-max);
    margin: 0 auto var(--spacing-20);
    padding: 0 var(--spacing-6);
}

.case-studies-card {
    background-color: var(--color-zinc-900);
    border-radius: 40px;
    padding: var(--spacing-8) var(--spacing-14);
    color: var(--color-white);
}

.case-studies-grid {
    display: grid;
    gap: var(--spacing-8);
}

@media (min-width: 1024px) {
    .case-studies-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.case-study-item {
    padding: var(--spacing-4);
}

@media (min-width: 1024px) {
    .case-study-item:not(:last-child) {
        border-right: 1px solid var(--color-zinc-700);
    }
}

.case-study-item p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-zinc-300);
    margin-bottom: var(--spacing-6);
}

.case-study-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-lime-brand);
    font-size: 1.25rem;
    font-weight: 500;
    text-decoration: none;
}

.case-study-link:hover {
    text-decoration: underline;
}

.case-study-link svg {
    margin-left: var(--spacing-2);
    width: 1.25rem;
    height: 1.25rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-12) var(--spacing-6);
    border-top: 1px solid var(--color-zinc-200);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-6);
}

@media (min-width: 1024px) {
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
    color: inherit;
}

.footer-logo svg {
    width: 1.5rem;
    height: 1.5rem;
}

.footer-logo span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.footer-links {
    display: flex;
    gap: var(--spacing-8);
    list-style: none;
}

.footer-links a {
    color: var(--color-zinc-600);
    text-decoration: none;
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: var(--color-black);
}

.footer-copyright {
    font-size: 0.875rem;
    color: var(--color-zinc-500);
}

/* ==========================================================================
   Stats Section
   ========================================================================== */

.stats-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .stats-section {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    text-align: center;
}

.stat-card.light {
    background-color: var(--color-zinc-100);
}

.stat-card.dark {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

.stat-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: var(--spacing-2);
}

.stat-card.dark .stat-value {
    color: var(--color-lime-brand);
}

.stat-label {
    color: var(--color-zinc-600);
}

.stat-card.dark .stat-label {
    color: var(--color-zinc-400);
}

.stat-card.lime .stat-label {
    color: var(--color-zinc-800);
}

/* ==========================================================================
   Values Grid
   ========================================================================== */

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

.value-card {
    padding: var(--spacing-8);
    border-radius: var(--radius-3xl);
}

.value-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-200);
}

.value-card.dark {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

.value-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.value-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.value-card.light .value-card-icon {
    background-color: var(--color-lime-brand);
}

.value-card.dark .value-card-icon {
    background-color: var(--color-lime-brand);
}

.value-card.lime .value-card-icon {
    background-color: var(--color-black);
    color: var(--color-lime-brand);
}

.value-card h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: var(--spacing-2);
}

.value-card p {
    color: var(--color-zinc-500);
}

.value-card.dark p {
    color: var(--color-zinc-400);
}

.value-card.lime p {
    color: var(--color-zinc-800);
}

/* ==========================================================================
   Expertise Grid
   ========================================================================== */

.expertise-grid {
    display: grid;
    gap: var(--spacing-8);
}

@media (min-width: 768px) {
    .expertise-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.expertise-card {
    padding: var(--spacing-10);
    border-radius: 32px;
}

.expertise-card.dark {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

.expertise-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.expertise-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-200);
}

.expertise-number {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-4);
}

.expertise-card.dark .expertise-number {
    color: var(--color-lime-brand);
}

.expertise-card h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: var(--spacing-3);
}

.expertise-card p {
    line-height: 1.7;
}

.expertise-card.dark p {
    color: var(--color-zinc-400);
}

.expertise-card.lime p {
    color: var(--color-zinc-800);
}

.expertise-card.light p {
    color: var(--color-zinc-600);
}

/* ==========================================================================
   Tech Section
   ========================================================================== */

.tech-section-dark {
    background-color: var(--color-zinc-900);
    border-radius: 40px;
    padding: var(--spacing-12) var(--spacing-16);
}

.tech-section-lime {
    background-color: var(--color-lime-brand);
    border-radius: 40px;
    border: 1px solid var(--color-zinc-900);
    padding: var(--spacing-10) var(--spacing-14);
}

.tech-grid {
    display: grid;
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tech-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tech-item {
    background-color: var(--color-zinc-800);
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    text-align: center;
    transition: background-color var(--transition-base);
}

.tech-item:hover {
    background-color: var(--color-zinc-700);
}

.tech-item svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-lime-brand);
    margin: 0 auto var(--spacing-3);
}

.tech-item span {
    color: var(--color-white);
    font-weight: 500;
}

/* ==========================================================================
   Language Grid
   ========================================================================== */

.lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .lang-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lang-card {
    padding: var(--spacing-8);
    border-radius: 24px;
    text-align: center;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform var(--transition-base);
}

.lang-card:hover {
    transform: scale(1.05);
}

.lang-card.dark {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

.lang-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-200);
}

.lang-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.lang-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto var(--spacing-4);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.lang-card.dark .lang-icon {
    background-color: var(--color-zinc-800);
    color: var(--color-lime-brand);
}

.lang-card.light .lang-icon {
    background-color: var(--color-white);
    border: 1px solid var(--color-zinc-200);
}

.lang-card.lime .lang-icon {
    background-color: var(--color-black);
    color: var(--color-lime-brand);
}

.lang-card h3 {
    font-weight: 500;
    font-size: 1.125rem;
    margin-bottom: var(--spacing-2);
}

.lang-card p {
    font-size: 0.875rem;
}

.lang-card.dark p {
    color: var(--color-zinc-500);
}

.lang-card.light p {
    color: var(--color-zinc-500);
}

.lang-card.lime p {
    color: var(--color-zinc-700);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials-grid {
    display: grid;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial-card {
    padding: var(--spacing-8);
    border-radius: 24px;
}

.testimonial-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-200);
}

.testimonial-card.dark {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

.testimonial-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.testimonial-stars {
    display: flex;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-4);
}

.testimonial-card.light .testimonial-stars svg {
    fill: #facc15;
    color: #facc15;
}

.testimonial-card.dark .testimonial-stars svg {
    fill: var(--color-lime-brand);
    color: var(--color-lime-brand);
}

.testimonial-card.lime .testimonial-stars svg {
    fill: var(--color-black);
    color: var(--color-black);
}

.testimonial-text {
    margin-bottom: var(--spacing-6);
    line-height: 1.7;
}

.testimonial-card.light .testimonial-text {
    color: var(--color-zinc-600);
}

.testimonial-card.dark .testimonial-text {
    color: var(--color-zinc-400);
}

.testimonial-card.lime .testimonial-text {
    color: var(--color-zinc-800);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.testimonial-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.testimonial-card.light .testimonial-avatar {
    background-color: var(--color-zinc-300);
    color: var(--color-zinc-600);
}

.testimonial-card.dark .testimonial-avatar {
    background-color: var(--color-zinc-700);
    color: var(--color-zinc-300);
}

.testimonial-card.lime .testimonial-avatar {
    background-color: var(--color-black);
    color: var(--color-lime-brand);
}

.testimonial-name {
    font-weight: 500;
}

.testimonial-role {
    font-size: 0.875rem;
    color: var(--color-zinc-500);
}

.testimonial-card.lime .testimonial-role {
    color: var(--color-zinc-700);
}

/* ==========================================================================
   Service Detail Section
   ========================================================================== */

.service-detail {
    display: grid;
    gap: var(--spacing-12);
    align-items: center;
}

@media (min-width: 1024px) {
    .service-detail {
        grid-template-columns: 1fr 1fr;
    }
}

.service-detail-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.service-detail-icon {
    padding: var(--spacing-4);
    border-radius: var(--radius-2xl);
}

.service-detail-icon.lime {
    background-color: var(--color-lime-brand);
}

.service-detail-icon.dark {
    background-color: var(--color-zinc-900);
}

.service-detail h2 {
    font-size: 1.875rem;
    font-weight: 500;
}

@media (min-width: 1024px) {
    .service-detail h2 {
        font-size: 2.25rem;
    }
}

.service-detail-description {
    font-size: 1.125rem;
    color: var(--color-zinc-600);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

.service-features {
    list-style: none;
    margin-bottom: var(--spacing-8);
}

.service-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.service-features li svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-lime-brand);
}

.service-features li span {
    color: var(--color-zinc-700);
}

/* ==========================================================================
   Case Study Cards
   ========================================================================== */

.case-study-card {
    border-radius: 40px;
    padding: var(--spacing-10) var(--spacing-14);
}

.case-study-card.dark {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

.case-study-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.case-study-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-200);
}

.case-study-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    margin-right: var(--spacing-3);
}

.case-study-card.dark .case-study-badge {
    background-color: var(--color-lime-brand);
    color: var(--color-black);
}

.case-study-card.lime .case-study-badge {
    background-color: var(--color-black);
    color: var(--color-white);
}

.case-study-card.light .case-study-badge {
    background-color: var(--color-lime-brand);
    color: var(--color-black);
}

.case-study-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.case-study-stat-value {
    font-size: 1.875rem;
    font-weight: 700;
}

.case-study-card.dark .case-study-stat-value {
    color: var(--color-lime-brand);
}

.case-study-stat-label {
    font-size: 0.875rem;
}

.case-study-card.dark .case-study-stat-label {
    color: var(--color-zinc-500);
}

.case-study-card.lime .case-study-stat-label {
    color: var(--color-zinc-700);
}

.case-study-card.light .case-study-stat-label {
    color: var(--color-zinc-500);
}

.case-study-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.case-study-tag {
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
}

.case-study-card.dark .case-study-tag {
    background-color: var(--color-zinc-800);
    color: var(--color-zinc-300);
}

.case-study-card.lime .case-study-tag {
    background-color: var(--color-black);
    color: var(--color-white);
}

.case-study-card.light .case-study-tag {
    background-color: var(--color-zinc-900);
    color: var(--color-white);
}

/* ==========================================================================
   Frameworks Grid
   ========================================================================== */

.frameworks-grid {
    display: grid;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .frameworks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .frameworks-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.framework-card {
    background-color: var(--color-zinc-100);
    padding: var(--spacing-6);
    border-radius: 24px;
    border: 1px solid var(--color-zinc-200);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    transition: border-color var(--transition-base);
}

.framework-card:hover {
    border-color: var(--color-zinc-400);
}

.framework-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-zinc-200);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.framework-card h3 {
    font-weight: 500;
    font-size: 1.125rem;
}

.framework-card p {
    font-size: 0.875rem;
    color: var(--color-zinc-500);
}

/* ==========================================================================
   Database Grid
   ========================================================================== */

.database-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

@media (min-width: 1024px) {
    .database-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.database-card {
    background-color: var(--color-zinc-800);
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--color-zinc-700);
    text-align: center;
}

.database-card.lime {
    background-color: var(--color-lime-brand);
}

.database-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--spacing-4);
    background-color: var(--color-zinc-900);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.database-card.lime .database-icon {
    background-color: var(--color-black);
}

.database-card h3 {
    color: var(--color-white);
    font-weight: 500;
    margin-bottom: var(--spacing-1);
}

.database-card.lime h3 {
    color: var(--color-black);
}

.database-card p {
    font-size: 0.875rem;
    color: var(--color-zinc-500);
}

.database-card.lime p {
    color: var(--color-zinc-700);
}

/* ==========================================================================
   BI Cards
   ========================================================================== */

.bi-grid {
    display: grid;
    gap: var(--spacing-8);
}

@media (min-width: 768px) {
    .bi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bi-card {
    padding: var(--spacing-8);
    border-radius: 32px;
}

.bi-card.lime {
    background-color: var(--color-lime-brand);
    border: 1px solid var(--color-zinc-900);
}

.bi-card.dark {
    background-color: var(--color-zinc-900);
}

.bi-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-200);
}

.bi-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.bi-card.lime .bi-icon {
    background-color: var(--color-black);
}

.bi-card.dark .bi-icon {
    background-color: var(--color-zinc-800);
}

.bi-card.light .bi-icon {
    background-color: var(--color-white);
    border: 1px solid var(--color-zinc-200);
}

.bi-card h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: var(--spacing-3);
}

.bi-card.dark h3 {
    color: var(--color-white);
}

.bi-card p {
    margin-bottom: var(--spacing-4);
}

.bi-card.lime p {
    color: var(--color-zinc-700);
}

.bi-card.dark p {
    color: var(--color-zinc-400);
}

.bi-card.light p {
    color: var(--color-zinc-600);
}

.bi-features {
    list-style: none;
}

.bi-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-2);
}

.bi-card.lime .bi-features li {
    color: var(--color-zinc-800);
}

.bi-card.dark .bi-features li {
    color: var(--color-zinc-400);
}

.bi-card.light .bi-features li {
    color: var(--color-zinc-600);
}

/* ==========================================================================
   Cloud Section
   ========================================================================== */

.cloud-grid {
    display: grid;
    gap: var(--spacing-8);
}

@media (min-width: 768px) {
    .cloud-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cloud-card {
    padding: var(--spacing-8);
    border-radius: 32px;
}

.cloud-card.light {
    background-color: var(--color-zinc-100);
    border: 1px solid var(--color-zinc-200);
}

.cloud-card.dark {
    background-color: var(--color-zinc-900);
}

.cloud-card h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: var(--spacing-6);
}

.cloud-card.dark h3 {
    color: var(--color-white);
}

.cloud-providers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

.cloud-provider {
    background-color: var(--color-white);
    padding: var(--spacing-4);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-zinc-200);
    text-align: center;
}

.cloud-provider-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-1);
}

.cloud-provider-desc {
    font-size: 0.75rem;
    color: var(--color-zinc-500);
}

.devops-tools {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.devops-tool {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    background-color: var(--color-zinc-800);
    padding: var(--spacing-4);
    border-radius: var(--radius-xl);
}

.devops-tool-name {
    color: var(--color-white);
    font-weight: 500;
}

.devops-tool-desc {
    font-size: 0.875rem;
    color: var(--color-zinc-500);
}

/* ==========================================================================
   Data Engineering Section
   ========================================================================== */

.data-engineering-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
}

@media (min-width: 1024px) {
    .data-engineering-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.data-tool-card {
    padding: var(--spacing-6);
    border-radius: var(--radius-2xl);
    text-align: center;
}

.data-tool-card.white {
    background-color: var(--color-white);
    border: 1px solid var(--color-zinc-300);
}

.data-tool-card.black {
    background-color: var(--color-black);
}

.data-tool-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--spacing-4);
    background-color: var(--color-zinc-100);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.data-tool-card.black .data-tool-icon {
    background-color: var(--color-zinc-900);
}

.data-tool-card h3 {
    font-weight: 500;
    margin-bottom: var(--spacing-1);
}

.data-tool-card.black h3 {
    color: var(--color-white);
}

.data-tool-card p {
    font-size: 0.875rem;
    color: var(--color-zinc-600);
}

.data-tool-card.black p {
    color: var(--color-zinc-400);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.hero-icon-float {
    animation: float 2s ease-in-out infinite;
}

.hero-icon-float:nth-child(2) {
    animation-delay: 0.3s;
}

.hero-icon-float:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cta-ring {
    animation: rotate 20s linear infinite;
}

.cta-ring:nth-child(2) {
    animation-delay: 2s;
}

/* ==========================================================================
   WordPress Specific
   ========================================================================== */

/* Screen reader text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* WordPress alignment classes */
.alignleft {
    float: left;
    margin-right: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.alignright {
    float: right;
    margin-left: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* WordPress captions */
.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: var(--color-zinc-500);
    margin-top: var(--spacing-2);
}

/* WordPress galleries */
.gallery {
    display: grid;
    gap: var(--spacing-4);
}

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

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

.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Page content */
.page-content,
.entry-content {
    max-width: 65ch;
    margin: 0 auto;
}

.page-content > *,
.entry-content > * {
    margin-bottom: var(--spacing-6);
}

.page-content h2,
.entry-content h2 {
    font-size: 1.875rem;
    margin-top: var(--spacing-12);
}

.page-content h3,
.entry-content h3 {
    font-size: 1.5rem;
    margin-top: var(--spacing-10);
}

.page-content ul,
.page-content ol,
.entry-content ul,
.entry-content ol {
    padding-left: var(--spacing-6);
}

.page-content li,
.entry-content li {
    margin-bottom: var(--spacing-2);
}

.page-content a,
.entry-content a {
    color: var(--color-zinc-900);
    text-decoration: underline;
}

.page-content a:hover,
.entry-content a:hover {
    color: var(--color-lime-brand);
}

/* Buttons */
.wp-block-button__link,
.button,
button[type="submit"] {
    display: inline-block;
    background-color: var(--color-zinc-900);
    color: var(--color-white);
    padding: var(--spacing-3) var(--spacing-6);
    border-radius: var(--radius-xl);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.wp-block-button__link:hover,
.button:hover,
button[type="submit"]:hover {
    background-color: var(--color-zinc-800);
}