/* ============================== */
    /* HOMEPAGE-SPECIFIC STYLES       */
    /* ============================== */

    /* HERO SLIDER - 9 slides with per-slide content */
    .hero {
        position: relative;
        height: 620px;
        overflow: hidden;
        background: var(--black);
    }

    .hero-full-slide {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        opacity: 0;
        transition: opacity 0.8s ease;
        pointer-events: none;
    }

    .hero-full-slide.active {
        opacity: 1;
        pointer-events: auto;
    }

    .hero-slide-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: #2a2a2a;
    }

    .hero-slide-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    [data-slide="0"] .hero-slide-bg img { object-position: center 65%; }
    [data-slide="1"] .hero-slide-bg img { object-position: center 25%; }
    [data-slide="2"] .hero-slide-bg img { object-position: center 40%; }
    [data-slide="3"] .hero-slide-bg img { object-position: center 55%; }
    [data-slide="4"] .hero-slide-bg img { object-position: center 30%; }
    [data-slide="5"] .hero-slide-bg img { object-position: center 45%; }
    [data-slide="6"] .hero-slide-bg img { object-position: center 60%; }
    [data-slide="7"] .hero-slide-bg img { object-position: center 10%; }
    [data-slide="8"] .hero-slide-bg img { object-position: center 42%; }

    .hero-slide-bg::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(90deg, rgba(26,26,26,0.88) 0%, rgba(26,26,26,0.65) 40%, rgba(26,26,26,0.35) 100%);
        z-index: 1;
    }

    .hero-content {
        position: relative;
        z-index: 10;
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 68px 48px;
        width: 100%;
        min-height: 620px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-eyebrow {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: var(--red);
        margin-bottom: 20px;
    }

    .hero h1 {
        font-size: 52px;
        font-weight: 800;
        line-height: 1.1;
        color: white;
        max-width: 620px;
        margin-bottom: 24px;
    }

    .hero-checks {
        list-style: none;
        margin-bottom: 36px;
        max-width: 560px;
    }

    .hero-checks li {
        font-size: 16px;
        color: rgba(255,255,255,0.85);
        padding: 6px 0;
        padding-left: 28px;
        position: relative;
        line-height: 1.5;
    }

    .hero-checks li::before {
        content: '\2713';
        position: absolute;
        left: 0;
        color: var(--red);
        font-weight: 700;
    }

    .hero-sub {
        font-size: 17px;
        color: rgba(255,255,255,0.8);
        max-width: 540px;
        line-height: 1.7;
        margin-bottom: 36px;
    }

    .hero-buttons {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .hero-trust-inline {
        margin-top: 48px;
        padding-top: 32px;
        border-top: 1px solid rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        gap: 40px;
        flex-wrap: wrap;
    }

    .hero-trust-item {
        font-size: 13px;
        color: rgba(255,255,255,0.5);
    }

    .hero-trust-item strong {
        color: rgba(255,255,255,0.8);
        font-weight: 700;
    }

    .hero-slide-centered {
        position: relative;
        z-index: 10;
        max-width: 680px;
        margin: 0 auto;
        padding: 108px 48px 88px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-height: 620px;
        justify-content: center;
    }

    .hero-slide-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .hero-slide-icon svg {
        width: 28px;
        height: 28px;
        stroke: var(--red);
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .hero-slide-eyebrow {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 3px;
        color: var(--red);
        margin-bottom: 12px;
    }

    .hero-slide-title {
        font-size: 40px;
        font-weight: 800;
        color: white;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .hero-slide-text {
        font-size: 16px;
        color: rgba(255,255,255,0.75);
        line-height: 1.7;
        max-width: 580px;
    }

    .hero-slide-cta {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 24px;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 700;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        color: white;
        background: var(--red);
        border-radius: 6px;
        text-decoration: none;
        transition: background 0.2s;
    }

    .hero-slide-cta:hover { background: var(--red-dark); }

    .hero-slide-cta svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .hero-bottom-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
    }

    .hero-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding-bottom: 24px;
    }

    .hero-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255,255,255,0.25);
        cursor: pointer;
        transition: background 0.3s, transform 0.3s;
        border: none;
        padding: 0;
        position: relative;
    }

    .hero-dot::before {
        content: '';
        position: absolute;
        top: -17px; left: -17px; right: -17px; bottom: -17px;
    }

    .hero-dot.active {
        background: var(--red);
        transform: scale(1.3);
    }

    .hero-dot:hover {
        background: rgba(255,255,255,0.5);
    }

    .hero-progress {
        height: 3px;
        background: var(--red);
        width: 0;
        transition: width 0.1s linear;
    }

    .hero-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 60;
        background: none;
        border: none;
        color: rgba(255,255,255,0.7);
        font-size: 48px;
        font-weight: 300;
        cursor: pointer;
        padding: 16px 12px;
        transition: color 0.3s;
        line-height: 1;
        font-family: system-ui, sans-serif;
    }
    .hero-arrow:hover { color: #fff; }
    .hero-arrow--prev { left: 16px; }
    .hero-arrow--next { right: 16px; }

    /* PRODUCT CARDS */
    .products-section {
        padding: 56px 0;
        background: var(--white);
    }

    .product-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .product-card {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--light-gray);
        border-top: 4px solid transparent;
        transition: box-shadow 0.3s, transform 0.3s;
        display: flex;
        flex-direction: column;
    }

    .product-card:hover {
        box-shadow: 0 12px 48px rgba(0,0,0,0.10);
        transform: translateY(-4px);
    }

    .product-card.card-pro { border-top-color: #1a4b8c; }
    .product-card.card-helix { border-top-color: #d4881e; }

    .product-card-image {
        height: 300px;
        background: var(--bg-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .product-card-image .product-brand-logo {
        position: absolute;
        top: 20px;
        left: 20px;
        height: 30px;
        width: auto;
        z-index: 2;
    }

    .product-card-image .product-pile-img {
        height: 95%;
        width: auto;
        object-fit: contain;
        position: relative;
        z-index: 1;
        mix-blend-mode: multiply;
    }

    .product-card-body {
        padding: 28px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .product-card-body .card-link {
        margin-top: auto;
        padding-top: 4px;
    }

    .product-card-body h3 {
        font-size: 22px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 10px;
    }

    .product-card-body p {
        font-size: 15px;
        color: var(--dark-gray);
        line-height: 1.7;
        margin-bottom: 16px;
        flex-grow: 1;
    }

    /* Key stat highlight */
    .product-key-stat {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 8px;
        margin-bottom: 18px;
    }

    .card-pro .product-key-stat {
        background: rgba(26, 75, 140, 0.06);
        border-left: 3px solid #1a4b8c;
    }

    .card-helix .product-key-stat {
        background: rgba(212, 136, 30, 0.06);
        border-left: 3px solid #d4881e;
    }

    .product-key-stat-number {
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
    }

    .card-pro .product-key-stat-number { color: #1a4b8c; }
    .card-helix .product-key-stat-number { color: #d4881e; }
    .card-helix .product-pile-img { height: 445%; }

    .product-key-stat-label {
        font-size: 13px;
        font-weight: 600;
        color: var(--dark-gray);
        line-height: 1.3;
    }

    .product-card-features {
        list-style: none;
        margin-bottom: 20px;
    }

    .product-card-features li {
        font-size: 14px;
        color: var(--dark-gray);
        padding: 7px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .product-card-features li:last-child { border-bottom: none; }

    .feature-check {
        width: 18px;
        height: 18px;
        background: var(--red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: white;
        font-size: 10px;
        font-weight: 700;
    }

    /* WHY SCREW PILES STATS */
    .why-section {
        padding: 56px 0;
        background: var(--bg-gray);
    }

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

    .stat-card {
        background: white;
        border-radius: 12px;
        padding: 36px 28px;
        text-align: center;
        border: 1px solid var(--light-gray);
        transition: box-shadow 0.3s;
    }

    .stat-card:hover {
        box-shadow: 0 8px 40px rgba(0,0,0,0.06);
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        background: var(--red-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
    }

    .stat-icon svg {
        width: 24px;
        height: 24px;
        stroke: var(--red);
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .stat-number {
        font-size: 36px;
        font-weight: 800;
        color: var(--red);
        line-height: 1;
        margin-bottom: 8px;
    }

    .stat-label {
        font-size: 17px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 12px;
    }

    .stat-details {
        list-style: none;
        text-align: left;
    }

    .stat-details li {
        font-size: 14px;
        color: var(--dark-gray);
        padding: 5px 0;
        padding-left: 18px;
        position: relative;
    }

    .stat-details li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 12px;
        width: 6px;
        height: 6px;
        background: var(--red);
        border-radius: 50%;
    }

    /* APPLICATIONS */
    .applications-section {
        padding: 56px 0;
        background: var(--white);
    }

    .applications-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .applications-header h2 {
        font-size: 34px;
        font-weight: 800;
        color: var(--black);
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .applications-header p {
        font-size: 15px;
        color: var(--dark-gray);
        max-width: 560px;
        margin: 0 auto;
    }

    .app-tabs {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 40px;
        flex-wrap: wrap;
    }

    .app-tab {
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        color: var(--dark-gray);
        background: var(--bg-gray);
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        user-select: none;
    }

    .app-tab:hover {
        color: var(--red);
        background: rgba(204, 51, 51, 0.05);
    }

    .app-tab.active {
        color: var(--red);
        background: white;
        border-color: var(--red);
    }

    .app-tab-content {
        display: none;
    }

    .app-tab-content.active {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: start;
    }

    .app-tab-renders {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .app-tab-renders.two-col {
        grid-template-columns: 1fr 1fr;
        max-width: 66%;
        margin-left: auto;
    }

    .render-box {
        background: #ffffff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        overflow: hidden;
    }

    .render-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
    }

    .render-box-label {
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: var(--dark-gray);
        margin-top: 6px;
    }

    .app-tab-details h3 {
        font-size: 22px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 16px;
    }

    .app-tab-details ul {
        list-style: none;
        padding: 0;
        margin: 0 0 24px 0;
    }

    .app-tab-details ul li {
        font-size: 14px;
        color: var(--dark-gray);
        padding: 8px 0;
        border-bottom: 1px solid #f0f0f0;
        padding-left: 16px;
        position: relative;
    }

    .app-tab-details ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        background: var(--red);
        border-radius: 2px;
    }

    .app-tab-details ul li:last-child {
        border-bottom: none;
    }

    /* QUALITY & ECO */
    .quality-section {
        padding: 56px 0;
        background: var(--bg-gray);
    }

    .quality-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: stretch;
    }

    .quality-text {
        display: flex;
        flex-direction: column;
    }

    .quality-text h2 {
        font-size: 32px;
        font-weight: 800;
        color: var(--black);
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .quality-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: flex-end;
    }

    .quality-card {
        background: white;
        border-radius: 12px;
        padding: 28px 24px;
        border: 1px solid var(--light-gray);
    }

    .quality-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .quality-card-header h4 {
        font-size: 16px;
        font-weight: 700;
        color: var(--black);
        margin: 0;
    }

    .quality-card-header svg {
        flex-shrink: 0;
    }

    .quality-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .quality-card li {
        font-size: 14px;
        color: var(--dark-gray);
        padding: 4px 0;
        padding-left: 20px;
        position: relative;
        line-height: 1.6;
    }

    .quality-card li::before {
        content: '\2713';
        position: absolute;
        left: 0;
        color: var(--red);
        font-weight: 700;
        font-size: 12px;
    }

    /* CASE STUDIES */
    .cases-section {
        padding: 56px 0;
        background: var(--white);
    }

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

    .case-card {
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--light-gray);
        transition: box-shadow 0.3s;
    }

    .case-card:hover {
        box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }

    .case-card-image {
        height: 200px;
        background: #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--mid-gray);
        font-size: 12px;
        position: relative;
        overflow: hidden;
    }

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

    .case-card-body {
        padding: 22px;
    }

    .case-card-body h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .case-card-body p {
        font-size: 14px;
        color: var(--dark-gray);
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .case-tag {
        display: inline-block;
        padding: 4px 12px;
        background: var(--bg-gray);
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--mid-gray);
        margin-right: 6px;
    }

    .cases-cta {
        text-align: center;
        margin-top: 48px;
    }

    /* COMPLETE SOLUTION (steps) */
    .solution-section {
        padding: 56px 0;
        background: var(--bg-gray);
    }

    .solution-layout {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 60px;
        align-items: start;
    }

    .solution-left {
        position: sticky;
        top: 32px;
    }

    .solution-left h2 {
        font-size: 34px;
        font-weight: 800;
        color: var(--black);
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .solution-left > p {
        font-size: 15px;
        color: var(--dark-gray);
        line-height: 1.7;
        margin-bottom: 32px;
    }

    .solution-cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }

    .solution-cta .btn-primary,
    .solution-cta .btn-secondary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
        font-size: 14px;
        width: 100%;
        max-width: 320px;
    }

    .solution-cta .btn-arrow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .solution-cta .btn-primary .btn-arrow {
        background: rgba(255,255,255,0.2);
    }

    .solution-cta .btn-secondary .btn-arrow {
        background: var(--bg-gray);
    }

    .solution-cta .btn-arrow svg {
        width: 14px;
        height: 14px;
    }

    .solution-image {
        border-radius: 12px;
        overflow: hidden;
        height: 200px;
        max-width: 320px;
        margin-bottom: 16px;
    }

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

    .solution-trust {
        font-size: 13px;
        color: var(--red);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .solution-trust::before {
        content: '\2713';
        font-weight: 700;
    }

    .services-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px 40px;
    }

    .service-item .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: var(--red);
        color: white;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 12px;
    }

    .service-item h4 {
        font-size: 16px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 6px;
    }

    .service-item > p {
        font-size: 14px;
        color: var(--dark-gray);
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .service-item ul {
        list-style: none;
        margin: 0 0 12px 0;
        padding: 0;
    }

    .service-item ul li {
        font-size: 13px;
        color: var(--dark-gray);
        padding: 2px 0 2px 14px;
        position: relative;
        line-height: 1.5;
    }

    .service-item ul li::before {
        content: '\2022';
        position: absolute;
        left: 0;
        color: var(--dark-gray);
    }

    .step-benefit {
        font-size: 13px;
        font-weight: 600;
        color: var(--green);
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .step-benefit::before {
        content: '\2713';
        font-weight: 700;
    }

    .service-advantages {
        background: var(--bg-gray);
        border: 1px solid var(--light-gray);
        border-radius: 12px;
        padding: 24px;
    }

    .service-advantages-icon {
        width: 36px;
        height: 36px;
        background: var(--red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }

    .service-advantages-icon svg {
        width: 18px;
        height: 18px;
        fill: white;
        stroke: none;
    }

    .service-advantages h4 {
        font-size: 16px;
        font-weight: 700;
        color: var(--black);
        margin-bottom: 6px;
    }

    .service-advantages > p {
        font-size: 14px;
        color: var(--dark-gray);
        margin-bottom: 10px;
    }

    .service-advantages ul {
        list-style: none;
        margin: 0 0 12px 0;
        padding: 0;
    }

    .service-advantages ul li {
        font-size: 13px;
        color: var(--dark-gray);
        padding: 2px 0 2px 14px;
        position: relative;
        line-height: 1.5;
    }

    .service-advantages ul li::before {
        content: '\2022';
        position: absolute;
        left: 0;
        color: var(--dark-gray);
    }

    /* COMPARISON: Concrete vs Screw Piles */
    .comparison-section {
        padding: 56px 0;
        background: var(--bg-gray);
    }

    .comparison {
        max-width: 820px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    }

    .comparison-card {
        padding: 40px 36px;
    }

    .comparison-card.old {
        background: var(--bg-gray);
    }

    .comparison-card.new {
        background: var(--white);
        border-left: 4px solid var(--red);
    }

    .comparison-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        margin-bottom: 24px;
    }

    .comparison-card.old .comparison-label {
        color: var(--mid-gray);
    }

    .comparison-card.new .comparison-label {
        color: var(--red);
    }

    .comparison-time {
        font-size: 36px;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 8px;
        color: var(--black);
    }

    .comparison-time-sub {
        font-size: 14px;
        font-weight: 500;
        color: var(--mid-gray);
        margin-bottom: 32px;
    }

    .comparison-stages {
        list-style: none;
    }

    .comparison-stages li {
        font-size: 14px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--dark-gray);
    }

    .comparison-card.old .comparison-stages li {
        border-bottom: 1px solid var(--light-gray);
    }

    .comparison-card.new .comparison-stages li {
        border-bottom: 1px solid var(--bg-gray);
    }

    .comparison-stages li:last-child {
        border-bottom: none;
    }

    .comparison-stages li::before {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 50%;
    }

    .comparison-card.old .comparison-stages li::before {
        content: '\2014';
        color: var(--mid-gray);
        background: var(--light-gray);
    }

    .comparison-card.new .comparison-stages li::before {
        content: '\2713';
        color: white;
        background: #2e7d32;
        font-weight: 700;
        font-size: 10px;
    }

    @media (max-width: 640px) {
        .comparison {
            grid-template-columns: 1fr;
        }
        .comparison-card.new {
            border-left: none;
            border-top: 4px solid var(--red);
        }
    }

    /* TESTIMONIALS */
    .testimonials-section {
        padding: 56px 0;
        background: var(--white);
    }

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

    .testimonial-card {
        padding: 32px 24px;
        border-radius: 12px;
        background: var(--bg-gray);
        display: flex;
        flex-direction: column;
    }

    .testimonial-quote {
        font-size: 15px;
        color: var(--dark-gray);
        line-height: 1.7;
        margin-bottom: 20px;
        flex: 1;
        font-style: italic;
    }

    .testimonial-quote::before {
        content: '\201C';
        font-size: 40px;
        line-height: 0;
        color: var(--red);
        font-weight: 800;
        vertical-align: -12px;
        margin-right: 4px;
    }

    .testimonial-author {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-top: 16px;
        border-top: 1px solid var(--light-gray);
    }

    .testimonial-avatar {
        width: 40px;
        height: 40px;
        background: var(--light-gray);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--mid-gray);
        flex-shrink: 0;
    }

    .testimonial-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--black);
    }

    .testimonial-role {
        font-size: 12px;
        color: var(--mid-gray);
    }

    /* SUSTAINABILITY */
    .sustainability-section {
        padding: 72px 0;
        background: var(--black);
        color: white;
        position: relative;
        background-image: url('../images/sustainability-environment-background.jpg');
        background-size: cover;
        background-position: center;
    }

    .sustainability-section::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(20, 20, 20, 0.82);
        z-index: 0;
    }

    .sustainability-section .container {
        position: relative;
        z-index: 1;
    }

    .sustainability-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
    }

    .sustainability-text h2 {
        font-size: 36px;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .sustainability-text p {
        font-size: 16px;
        line-height: 1.7;
        color: rgba(255,255,255,0.7);
        margin-bottom: 32px;
    }

    .sustainability-text .section-eyebrow { color: var(--red); }

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

    .eco-stat {
        padding: 24px 20px;
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.1);
    }

    .eco-stat-number {
        font-size: 28px;
        font-weight: 800;
        color: var(--red);
        margin-bottom: 6px;
    }

    .eco-stat h4 {
        font-size: 14px;
        font-weight: 700;
        color: white;
        margin-bottom: 6px;
    }

    .eco-stat p {
        font-size: 13px;
        color: rgba(255,255,255,0.5);
        line-height: 1.5;
    }

    .sustainability-badge {
        margin-top: 28px;
        font-size: 13px;
        color: rgba(255,255,255,0.5);
    }

    .sustainability-badge strong {
        color: rgba(255,255,255,0.8);
    }

    /* PURCHASING */
    .purchasing-section {
        padding: 56px 0;
        background: var(--white);
    }

    .purchasing-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .purchasing-text h2 {
        font-size: 32px;
        font-weight: 800;
        color: var(--black);
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .purchasing-text p {
        font-size: 16px;
        color: var(--dark-gray);
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .purchasing-map {
        height: 400px;
        background: var(--bg-gray);
        border-radius: 12px;
        position: relative;
        overflow: hidden;
    }

    .purchasing-map img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .purchasing-map-label {
        position: absolute;
        top: 20px;
        right: 20px;
        background: var(--red);
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 700;
    }

    /* Annotation (mockup notes, remove in production) */
    .annotation {
        background: #fffde7;
        border: 2px dashed #f9a825;
        border-radius: 8px;
        padding: 14px 18px;
        margin: 8px 0;
        font-size: 13px;
        color: #795548;
        font-style: italic;
    }

    /* RESPONSIVE */
    @media (max-width: 1024px) {
        .hero h1 { font-size: 40px; }
        .product-cards { grid-template-columns: 1fr; }
        .app-tab-content.active { grid-template-columns: 1fr; }
        .app-tab-renders { justify-content: center; }
        .app-tab-renders.two-col { margin-left: 0; max-width: 100%; justify-content: center; }
        .quality-layout { grid-template-columns: 1fr; }
        .sustainability-layout { grid-template-columns: 1fr; }
        .purchasing-layout { grid-template-columns: 1fr; }
        .solution-layout { grid-template-columns: 1fr; }
        .solution-left { position: static; }
    }

    @media (min-width: 1600px) {
        .hero { height: 720px; }
        .hero-content { min-height: 720px; }
    }

    @media (max-width: 768px) {
        .hero-arrow { display: none; }
        .hero { height: 520px; }
        .hero-content { padding: 60px 24px; min-height: 520px; overflow: hidden; }
        .hero h1 { font-size: 32px; }
        .hero-sub { font-size: 15px; }
        .hero-checks li { font-size: 14px; }
        .hero-slide-centered { padding: 68px 24px 68px; min-height: 520px; }
        .hero-slide-title { font-size: 28px; }
        .hero-slide-text { font-size: 14px; }
        .hero-trust-inline { gap: 20px; margin-top: 32px; padding-top: 20px; }
        .hero-slide-bg::after { background: linear-gradient(90deg, rgba(26,26,26,0.91) 0%, rgba(26,26,26,0.75) 50%, rgba(26,26,26,0.45) 100%); }
        .stats-grid { grid-template-columns: 1fr; }
        .cases-grid { grid-template-columns: 1fr; }
        .testimonials-grid { grid-template-columns: 1fr; }
        .services-grid { grid-template-columns: 1fr; }
        .solution-layout { grid-template-columns: 1fr; }
        .eco-stats { grid-template-columns: 1fr; }
        .app-tab-renders { grid-template-columns: 1fr 1fr; justify-content: stretch; }
        .app-tab-renders.two-col { max-width: 100%; margin-left: 0; }
        .app-tab-content.active { gap: 24px; }
        .app-tab-details h3 { font-size: 18px; }
        .hero-bg-photo { width: 100%; opacity: 0.35; }
        .hero-trust { gap: 20px; }
    }

    @media (max-width: 480px) {
        .app-tabs { gap: 6px; }
        .app-tab { padding: 8px 14px; font-size: 13px; }
        .app-tab-renders { grid-template-columns: 1fr 1fr; }
        .applications-header h2 { font-size: 26px; }
        .hero h1 { font-size: 26px; }
        .hero-checks li { font-size: 13px; }
        .hero-slide-title { font-size: 24px; }
    }

    /* CLIENT LOGO BAR */
    .logo-bar {
        padding: 10px 0 6px;
        background: var(--bg-gray);
    }

    .logo-bar-track {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .logo-bar-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-bar-item img {
        height: 24px;
        width: auto;
        object-fit: contain;
        filter: grayscale(100%);
        opacity: 0.4;
        mix-blend-mode: multiply;
        transition: filter 0.3s, opacity 0.3s;
    }

    .logo-bar-item img:hover,
    .logo-bar-item[data-logo] img:hover {
        filter: grayscale(0%) !important;
        opacity: 1;
        mix-blend-mode: normal;
    }

    /* Compensate for different padding/brightness inside logo images */
    [data-logo="skanska"] img { height: 30px; }
    [data-logo="yit"] img { height: 14px; filter: grayscale(100%) contrast(1.8); }
    [data-logo="srv"] img { height: 16px; }
    [data-logo="destia"] img { height: 16.2px; filter: grayscale(100%) contrast(1.5); mix-blend-mode: multiply; }
    [data-logo="eltel"] img { height: 41.2px; filter: grayscale(100%) contrast(1.4); }
    [data-logo="telinekataja"] img { height: 22px; }
    [data-logo="citrus"] img { height: 33px; filter: grayscale(100%) contrast(2.0) brightness(0.4); }
    [data-logo="byggmax"] img { height: 25px; }
    [data-logo="peab"] img { height: 13px; filter: grayscale(100%) contrast(1.5) brightness(0.6); }

    @media (max-width: 768px) {
        .logo-bar { padding: 28px 0; }
        .logo-bar-track {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px 16px;
            align-items: center;
            justify-items: center;
        }
        .logo-bar-item {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Uniform box + object-fit: all logos same visual space */
        .logo-bar-item img,
        .logo-bar-item[data-logo] img {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            object-fit: contain;
            object-position: center;
        }
        /* Per-logo visual size adjustments */
        [data-logo="byggmax"] img { transform: scale(1.0); }
        [data-logo="skanska"] img { transform: scale(1.02); }
        [data-logo="yit"] img { transform: scale(0.69); }
        [data-logo="srv"] img { transform: scale(0.58); }
        [data-logo="eltel"] img { transform: scale(1.12); }
        [data-logo="telinekataja"] img { transform: scale(1.11); }
        [data-logo="citrus"] img { transform: scale(0.93); }
    }

    @media (max-width: 480px) {
        .logo-bar-item { height: 34px; }
    }