/* ======================== PRODUCTS SECTION ============================ */

#products {
    color: var(--color-text);
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    background: linear-gradient(
        145deg,
        var(--color-surface) 0%,
        var(--color-surface-soft) 100%
    );
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: left;
}

#products h1 {
    text-align: center;
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--space-6);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: var(--font-weight-extrabold);
}

#products .product-card {
    display: inline-block;
    vertical-align: top;
    width: 300px;

    margin: var(--space-2);
    padding: var(--space-5);
    box-sizing: border-box;

    color: var(--color-text);
    text-decoration: none;

    background: linear-gradient(
        145deg,
        var(--color-background-soft) 0%,
        var(--color-surface) 100%
    );

    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        background var(--transition-normal);
}
#products .product-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary-light);
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-lg);
}

#products .product-card h2 {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-bold);
}

#products .product-card p {
    font-style: normal;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-5);
    line-height: 1.6;
}

#products .product-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#products .product-card ul li {
    font-size: var(--font-size-sm);
    margin: var(--space-2) 0;
    color: var(--color-text-muted);
    padding-left: 24px;
    position: relative;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

#products .product-card ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-accent-light);
    transition: transform var(--transition-fast);
}

#products .product-card ul li:hover {
    color: var(--color-text);
    transform: translateX(3px);
}

#products .product-card ul li:hover::before {
    transform: translateX(4px);
}

#products .product-card ul li a {
    color: var(--color-accent-light);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color var(--transition-fast);
}

#products .product-card ul li a:hover {
    color: var(--color-text-inverse);
    text-decoration-color: currentColor;
}

@media (max-width: 768px) {

    #products {
        padding: var(--space-6) var(--space-3);
        margin: var(--space-4) auto;
        width: 100%;
        border-width: 1px;
        border-radius: var(--radius-md);
    }

    #products h1 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-5);
        letter-spacing: 0.06em;
    }

    #products .product-card {
        width: 95%;
        display: block;
        margin: var(--space-2) auto;
        padding: var(--space-4);
        border-radius: var(--radius-md);
    }

    #products .product-card h2 {
        font-size: var(--font-size-md);
        margin-bottom: var(--space-3);
        letter-spacing: 0.04em;
    }

    #products .product-card p {
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-4);
    }

    #products .product-card ul li {
        font-size: var(--font-size-sm);
        margin: var(--space-2) 0;
        padding-left: 22px;
    }

    #products .product-card ul li a {
        font-size: var(--font-size-sm);
    }
}

@media (prefers-reduced-motion: reduce) {

    #products .product-card,
    #products .product-card ul li,
    #products .product-card ul li::before,
    #products .product-card ul li a {
        transition: none;
    }

    #products .product-card:hover,
    #products .product-card ul li:hover {
        transform: none;
    }
}













/* ============================================================
   PRODUCT PAGE
   ============================================================ */

.product-page {

    width: 100%;
    max-width: 1280px;

    margin: var(--space-10) auto;
    padding: var(--space-10) var(--space-8);

    box-sizing: border-box;

    color: var(--color-text);

    background:
        linear-gradient(
            145deg,
            var(--color-surface) 0%,
            var(--color-surface-soft) 100%
        );

    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    animation: productPageFadeIn var(--transition-normal) both;
}

.product-page h1 {

    display: flex;
    align-items: center;
    gap: var(--space-3);

    margin: 0 0 var(--space-6);

    color: var(--color-text);

    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.product-page ul {

    list-style: none;
    margin: 0;
    padding: 0;
}

.product-page li {

    display: flex;
    align-items: flex-start;

    gap: var(--space-3);

    margin: 0 0 var(--space-3);

    padding: var(--space-3) var(--space-4);

    color: var(--color-text-muted);

    background: var(--color-background-soft);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    font-size: var(--font-size-md);
    line-height: 1.55;
}

.product-page i {

    flex: 0 0 20px;
    min-width: 20px;

    margin-top: 2px;

    color: var(--color-accent-light);

    font-size: var(--font-size-md);
}

.product-page a {

    color: var(--color-accent-light);

    text-decoration: underline;
    text-decoration-color: transparent;

    transition: color var(--transition-fast);
}

.product-page a:hover {

    color: var(--color-text-inverse);
    text-decoration-color: currentColor;
}

@keyframes productPageFadeIn {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   LAPTOP — 1200px
   ============================================================ */

@media (max-width: 1200px) {

    .product-page {

        max-width: 1100px;
        padding: var(--space-8) var(--space-6);
    }
}


/* ============================================================
   TABLET — 900px
   ============================================================ */

@media (max-width: 900px) {

    .product-page {

        max-width: 100%;

        margin: var(--space-8) auto;
        padding: var(--space-8) var(--space-5);

        border-left-width: 3px;
    }

    .product-page h1 {
        font-size: var(--font-size-xl);
    }
}


/* ============================================================
   MOBILE — 768px
   ============================================================ */

@media (max-width: 768px) {

    .product-page {

        margin: var(--space-6) auto;
        padding: var(--space-6) var(--space-4);

        border-radius: var(--radius-md);
    }

    .product-page h1 {

        font-size: var(--font-size-lg);
        gap: var(--space-2);

        margin-bottom: var(--space-5);
    }

    .product-page li {

        padding: var(--space-3);
        font-size: var(--font-size-sm);
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .product-page {
        animation: none;
    }

    .product-page a {
        transition: none;
    }
}





/* ===================== OmniAI Product Panel ===================== */
/* ===================== OmniAI Product Panel ===================== */

.omniAI-section {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    box-sizing: border-box;

    color: var(--color-text);

    background: linear-gradient(
        145deg,
        var(--color-surface) 0%,
        var(--color-surface-soft) 100%
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ===================== HEADER ===================== */

.omniAI-section .section-header h1 {
    margin: 0 0 var(--space-3);

    color: var(--color-text);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.15;
}

.omniAI-section .lead-description {
    margin: 0 0 var(--space-8);

    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1.7;
}

/* ===================== OVERVIEW ===================== */

.omniAI-section .overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
    margin-bottom: var(--space-12);
    align-items: center;
}

.omniAI-section .overview-left,
.omniAI-section .overview-right {
    min-width: 0;
}

.omniAI-section .illustration {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    margin: 0 auto;

    background: var(--color-background-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ===================== FEATURES ===================== */

.omniAI-section .feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.omniAI-section .feature-list li {
    position: relative;
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) 42px;

    color: var(--color-text-muted);
    background: rgba(37, 99, 235, 0.06);

    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);

    font-size: var(--font-size-md);
    line-height: 1.6;
}

.omniAI-section .feature-list li::before {
    content: "✓";

    position: absolute;
    left: var(--space-4);
    top: 50%;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-radius: var(--radius-full);

    font-size: 11px;
    font-weight: var(--font-weight-bold);

    transform: translateY(-50%);
}

/* ===================== TECHNOLOGY TABLE ===================== */

.omniAI-section .tech-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: var(--space-6) 0 var(--space-12);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.omniAI-section .tech-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--color-background-soft);
}

.omniAI-section .tech-table th,
.omniAI-section .tech-table td {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.omniAI-section .tech-table th {
    color: var(--color-text-inverse);
    background: var(--color-secondary-light);
    font-weight: var(--font-weight-semibold);
}

.omniAI-section .tech-table td {
    color: var(--color-text-muted);
}

.omniAI-section .tech-table tbody tr:hover {
    background: var(--color-surface-hover);
}

/* ===================== TOOLS ===================== */

.omniAI-section .tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);

    margin-top: var(--space-6);
    margin-bottom: var(--space-12);
}

.omniAI-section .tool-item {
    min-height: 72px;
    padding: var(--space-4);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text);

    background: linear-gradient(
        145deg,
        var(--color-background-soft),
        var(--color-surface)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);

    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.omniAI-section .tool-item:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    background: var(--color-surface-hover);
    box-shadow: var(--shadow-md);
}

/* ===================== WORKFLOW ===================== */

.omniAI-section .workflow-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);

    margin-bottom: var(--space-12);
}

.omniAI-section .workflow-steps .step {
    min-height: 100px;
    padding: var(--space-5);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text-muted);
    background: var(--color-background-soft);

    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);

    text-align: center;
    font-size: var(--font-size-sm);
    line-height: 1.55;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.omniAI-section .workflow-steps .step:hover {
    transform: translateY(-2px);
    border-color: var(--color-accent);
    background: var(--color-surface-hover);
}

/* ===================== BENEFITS ===================== */

.omniAI-section .benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);

    list-style: none;
    margin: 0 0 var(--space-12);
    padding: 0;
}

.omniAI-section .benefit-list li {
    position: relative;

    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4) 42px;

    color: var(--color-text-muted);
    background: var(--color-background-soft);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    font-size: var(--font-size-md);
    line-height: 1.55;
}

.omniAI-section .benefit-list li::before {
    content: "✓";

    position: absolute;
    left: var(--space-4);
    top: var(--space-4);

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-text-inverse);
    background: var(--color-success);
    border-radius: var(--radius-full);

    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

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

.omniAI-section .cta-section {
    margin-top: var(--space-12);
    padding: var(--space-10) var(--space-6);

    text-align: center;

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.20),
            rgba(6, 182, 212, 0.10)
        ),
        var(--color-background-soft);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.omniAI-section .cta-text {
    max-width: 720px;
    margin: 0 auto var(--space-6);

    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1.7;
}

.omniAI-section .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 var(--space-6);

    color: var(--color-text-inverse);
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);

    cursor: pointer;
    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
}

.omniAI-section .primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.08);
}

.omniAI-section .primary-btn:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

/* ===================== 1200px ===================== */

@media (max-width: 1200px) {

    .omniAI-section {
        max-width: 1100px;
    }
}

/* ===================== 900px ===================== */

@media (max-width: 900px) {

    .omniAI-section {
        max-width: 100%;
        padding: var(--space-8) var(--space-5);
    }

    .omniAI-section .overview-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .omniAI-section .overview-right {
        order: -1;
    }

    .omniAI-section .tools-grid,
    .omniAI-section .workflow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .omniAI-section .benefit-list {
        grid-template-columns: 1fr;
    }
}

/* ===================== 768px ===================== */

@media (max-width: 768px) {

    .omniAI-section {
        padding: var(--space-8) var(--space-4);
        border-radius: var(--radius-md);
    }

    .omniAI-section .section-header h1 {
        font-size: var(--font-size-2xl);
    }

    .omniAI-section .lead-description {
        font-size: var(--font-size-md);
    }

    .omniAI-section .tools-grid,
    .omniAI-section .workflow-steps {
        grid-template-columns: 1fr;
    }

    .omniAI-section .cta-section {
        padding: var(--space-8) var(--space-4);
    }

    .omniAI-section .cta-text {
        font-size: var(--font-size-md);
    }

    .omniAI-section .primary-btn {
        width: 100%;
    }
}

/* ===================== 480px ===================== */

@media (max-width: 480px) {

    .omniAI-section {
        padding: var(--space-6) var(--space-3);
    }

    .omniAI-section .section-header h1 {
        font-size: var(--font-size-xl);
    }

    .omniAI-section .feature-list li,
    .omniAI-section .benefit-list li {
        padding-left: 38px;
    }

    .omniAI-section .tech-table th,
    .omniAI-section .tech-table td {
        padding: var(--space-3);
        font-size: var(--font-size-sm);
    }
}

/* ===================== REDUCED MOTION ===================== */

@media (prefers-reduced-motion: reduce) {

    .omniAI-section .tool-item,
    .omniAI-section .workflow-steps .step,
    .omniAI-section .primary-btn {
        transition: none;
    }

    .omniAI-section .tool-item:hover,
    .omniAI-section .workflow-steps .step:hover,
    .omniAI-section .primary-btn:hover {
        transform: none;
    }
}




















/* =================== RoboOptimize Panel Styles =================== */
/* =========================================================
   ROBOOPTIMIZE PANEL
   ========================================================= */

.robooptimize-section {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: var(--space-10);

    color: var(--color-text);
    background: linear-gradient(
        145deg,
        var(--color-surface) 0%,
        var(--color-surface-soft) 100%
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   INTRO BLOCK
   ========================================================= */

.robooptimize-section .intro-block {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.robooptimize-section .intro-icon {
    flex: 0 0 auto;
}

.robooptimize-section .intro-icon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    font-size: 2rem;
    color: var(--color-text-inverse);

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent)
    );

    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.robooptimize-section .intro-text {
    flex: 1;
    min-width: 280px;
}

.robooptimize-section .intro-text h1 {
    margin: 0 0 var(--space-4);
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.robooptimize-section .intro-text p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.7;
}


/* =========================================================
   CORE CAPABILITIES
   ========================================================= */

.robooptimize-section .core-capabilities {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.robooptimize-section .core-capabilities h2,
.robooptimize-section .usecase-table h2,
.robooptimize-section .robo-illustration h2,
.robooptimize-section .tools-section h2,
.robooptimize-section .benefits-section h2 {
    margin: 0 0 var(--space-5);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.robooptimize-section .core-capabilities h2 {
    color: var(--color-primary-light);
}

.robooptimize-section .capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.robooptimize-section .cap-item {
    padding: var(--space-5);

    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.6;

    background: linear-gradient(
        145deg,
        var(--color-background-soft),
        var(--color-surface)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.robooptimize-section .cap-item:hover {
    transform: translateY(-2px);
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   USE CASE TABLE
   ========================================================= */

.robooptimize-section .usecase-table {
    width: 100%;
}

.robooptimize-section .tech-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.robooptimize-section .tech-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--color-background-soft);
}

.robooptimize-section .tech-table th,
.robooptimize-section .tech-table td {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.robooptimize-section .tech-table th {
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    background: var(--color-secondary-light);
}

.robooptimize-section .tech-table td {
    color: var(--color-text-muted);
}

.robooptimize-section .tech-table tbody tr {
    transition: background var(--transition-fast);
}

.robooptimize-section .tech-table tbody tr:hover {
    background: var(--color-surface-hover);
}


/* =========================================================
   SYSTEM DIAGRAM
   ========================================================= */

.robooptimize-section .robo-illustration p {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.7;
}

.robooptimize-section .robo-illustration img.illustration {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: var(--space-4);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   TOOLS SECTION
   ========================================================= */

.robooptimize-section .tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.robooptimize-section .tool-item {
    padding: var(--space-5);
    text-align: center;

    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.5;

    background: linear-gradient(
        145deg,
        var(--color-background-soft),
        var(--color-surface)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.robooptimize-section .tool-item:hover {
    transform: translateY(-2px);
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}


/* =========================================================
   BENEFITS
   ========================================================= */

.robooptimize-section .benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);

    margin: 0;
    padding: 0;

    list-style: none;
}

.robooptimize-section .benefit-list li {
    position: relative;

    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4)
        calc(var(--space-4) + 22px);

    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.6;

    background: var(--color-background-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.robooptimize-section .benefit-list li::before {
    content: "✓";
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);

    color: var(--color-success);
    font-weight: var(--font-weight-bold);
}


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

.robooptimize-section .cta-section {
    padding: var(--space-8);

    text-align: center;

    background: linear-gradient(
        135deg,
        var(--color-secondary),
        var(--color-secondary-light)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.robooptimize-section .cta-text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

.robooptimize-section .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 var(--space-6);

    color: var(--color-text-inverse);
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);

    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.robooptimize-section .primary-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(
        135deg,
        var(--color-primary-light),
        var(--color-primary)
    );
    box-shadow: var(--shadow-md);
}

.robooptimize-section .primary-btn:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 3px;
}


/* =========================================================
   1200px
   ========================================================= */

@media (max-width: 1200px) {

    .robooptimize-section {
        max-width: 1100px;
    }

    .robooptimize-section .capability-grid,
    .robooptimize-section .tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   900px
   ========================================================= */

@media (max-width: 900px) {

    .robooptimize-section {
        max-width: 100%;
        padding: var(--space-8) var(--space-5);
        gap: var(--space-8);
    }

    .robooptimize-section .intro-block {
        gap: var(--space-5);
    }

    .robooptimize-section .intro-text h1 {
        font-size: var(--font-size-xl);
    }

    .robooptimize-section .benefit-list {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   768px
   ========================================================= */

@media (max-width: 768px) {

    .robooptimize-section {
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-md);
        gap: var(--space-6);
    }

    .robooptimize-section .intro-block {
        flex-direction: column;
    }

    .robooptimize-section .intro-icon i {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

    .robooptimize-section .intro-text {
        min-width: 100%;
    }

    .robooptimize-section .intro-text h1 {
        font-size: var(--font-size-xl);
    }

    .robooptimize-section .intro-text p {
        font-size: var(--font-size-sm);
    }

    .robooptimize-section .capability-grid,
    .robooptimize-section .tools-grid {
        grid-template-columns: 1fr;
    }

    .robooptimize-section .cta-section {
        padding: var(--space-6) var(--space-4);
    }

    .robooptimize-section .cta-text {
        font-size: var(--font-size-md);
    }
}


/* =========================================================
   480px
   ========================================================= */

@media (max-width: 480px) {

    .robooptimize-section {
        padding: var(--space-5) var(--space-3);
        border-radius: var(--radius-sm);
    }

    .robooptimize-section .intro-text h1 {
        font-size: var(--font-size-lg);
    }

    .robooptimize-section .core-capabilities h2,
    .robooptimize-section .usecase-table h2,
    .robooptimize-section .robo-illustration h2,
    .robooptimize-section .tools-section h2,
    .robooptimize-section .benefits-section h2 {
        font-size: var(--font-size-lg);
    }

    .robooptimize-section .cap-item,
    .robooptimize-section .tool-item {
        padding: var(--space-4);
    }

    .robooptimize-section .tech-table {
        min-width: 620px;
    }

    .robooptimize-section .tech-table th,
    .robooptimize-section .tech-table td {
        padding: var(--space-3);
        font-size: var(--font-size-xs);
    }

    .robooptimize-section .primary-btn {
        width: 100%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .robooptimize-section .cap-item,
    .robooptimize-section .tool-item,
    .robooptimize-section .primary-btn {
        transition: none;
    }

    .robooptimize-section .cap-item:hover,
    .robooptimize-section .tool-item:hover,
    .robooptimize-section .primary-btn:hover {
        transform: none;
    }
}












/* ================= API Access Panel ================= */
/* =========================================================
   API ACCESS PANEL
   ========================================================= */

.api-access-section {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    box-sizing: border-box;

    color: var(--color-text);
    background: linear-gradient(
        145deg,
        var(--color-surface) 0%,
        var(--color-surface-soft) 100%
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   HEADER
   ========================================================= */

.api-access-section .api-header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.api-access-section .api-icon {
    flex: 0 0 auto;
}

.api-access-section .api-icon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    font-size: 2rem;
    color: var(--color-text-inverse);

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent)
    );

    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.api-access-section .api-intro {
    flex: 1;
}

.api-access-section .api-intro h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.api-access-section .intro-description {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.7;
}


/* =========================================================
   FEATURES
   ========================================================= */

.api-access-section .developer-features {
    margin-bottom: var(--space-10);
}

.api-access-section .developer-features h2,
.api-access-section .access-links h2,
.api-access-section .api-sample-table h2 {
    margin: 0 0 var(--space-5);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.api-access-section .features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: 0;
}

.api-access-section .feature-card {
    padding: var(--space-5);

    color: var(--color-text-muted);

    background: linear-gradient(
        145deg,
        var(--color-background-soft),
        var(--color-surface)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    text-align: left;

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.api-access-section .feature-card:hover {
    transform: translateY(-2px);
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.api-access-section .feature-card h3 {
    margin: var(--space-3) 0 var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.api-access-section .feature-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}


/* =========================================================
   ACCESS LIST
   ========================================================= */

.api-access-section .access-links {
    margin-bottom: var(--space-10);
}

.api-access-section .access-links h2 {
    font-size: var(--font-size-lg);
}

.api-access-section .access-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);

    margin: 0;
    padding: 0;

    list-style: none;
}

.api-access-section .access-list li {
    margin: 0;
    padding: var(--space-4);

    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;

    background: var(--color-background-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.api-access-section .access-list li a {
    color: var(--color-primary-light);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.api-access-section .access-list li a:hover {
    color: var(--color-accent-light);
}


/* =========================================================
   API TABLE
   ========================================================= */

.api-access-section .api-sample-table {
    width: 100%;
    margin-bottom: var(--space-10);
}

.api-access-section .tech-table-wrapper {
    width: 100%;
    overflow-x: auto;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.api-access-section .tech-table {
    width: 100%;
    min-width: 680px;
    margin-bottom: 0;

    border-collapse: collapse;
    background: var(--color-background-soft);
}

.api-access-section .tech-table th,
.api-access-section .tech-table td {
    padding: var(--space-4) var(--space-5);

    border: 1px solid var(--color-border);

    text-align: left;
    vertical-align: top;

    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.api-access-section .tech-table th {
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-semibold);
    background: var(--color-secondary-light);
}

.api-access-section .tech-table td {
    color: var(--color-text-muted);
}

.api-access-section .tech-table tbody tr:hover {
    background: var(--color-surface-hover);
}

.api-access-section .tech-table code {
    display: inline-block;

    padding: 3px 7px;

    color: var(--color-accent-light);
    background: var(--color-secondary);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: var(--font-size-xs);
}


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

.api-access-section .cta-section {
    margin-top: 0;
    padding: var(--space-8);

    text-align: center;

    background: linear-gradient(
        135deg,
        var(--color-secondary),
        var(--color-secondary-light)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.api-access-section .cta-text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

.api-access-section .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 var(--space-6);

    color: var(--color-text-inverse);
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);

    border: 1px solid transparent;
    border-radius: var(--radius-md);

    cursor: pointer;
    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.api-access-section .primary-btn:hover {
    transform: translateY(-1px);

    background: linear-gradient(
        135deg,
        var(--color-primary-light),
        var(--color-primary)
    );

    box-shadow: var(--shadow-md);
}

.api-access-section .primary-btn:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 3px;
}


/* =========================================================
   1200px
   ========================================================= */

@media (max-width: 1200px) {

    .api-access-section {
        max-width: 1100px;
    }

    .api-access-section .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   900px
   ========================================================= */

@media (max-width: 900px) {

    .api-access-section {
        max-width: 100%;
        padding: var(--space-8) var(--space-5);
    }

    .api-access-section .api-header {
        gap: var(--space-5);
    }

    .api-access-section .api-intro h1 {
        font-size: var(--font-size-xl);
    }

    .api-access-section .access-list {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   768px
   ========================================================= */

@media (max-width: 768px) {

    .api-access-section {
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-md);
    }

    .api-access-section .api-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .api-access-section .api-icon i {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

    .api-access-section .features-grid {
        grid-template-columns: 1fr;
    }

    .api-access-section .cta-section {
        padding: var(--space-6) var(--space-4);
    }

    .api-access-section .cta-text {
        font-size: var(--font-size-md);
    }
}


/* =========================================================
   480px
   ========================================================= */

@media (max-width: 480px) {

    .api-access-section {
        padding: var(--space-5) var(--space-3);
        border-radius: var(--radius-sm);
    }

    .api-access-section .api-intro h1 {
        font-size: var(--font-size-lg);
    }

    .api-access-section .developer-features h2,
    .api-access-section .access-links h2,
    .api-access-section .api-sample-table h2 {
        font-size: var(--font-size-lg);
    }

    .api-access-section .feature-card,
    .api-access-section .access-list li {
        padding: var(--space-4);
    }

    .api-access-section .tech-table {
        min-width: 620px;
    }

    .api-access-section .tech-table th,
    .api-access-section .tech-table td {
        padding: var(--space-3);
        font-size: var(--font-size-xs);
    }

    .api-access-section .primary-btn {
        width: 100%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .api-access-section .feature-card,
    .api-access-section .primary-btn {
        transition: none;
    }

    .api-access-section .feature-card:hover,
    .api-access-section .primary-btn:hover {
        transform: none;
    }
}















/* ================= Explore More Panel ================= */

/* =========================================================
   EXPLORE MORE PANEL
   ========================================================= */

.exploremore-section {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    box-sizing: border-box;

    color: var(--color-text);
    background: linear-gradient(
        145deg,
        var(--color-surface) 0%,
        var(--color-surface-soft) 100%
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}


/* =========================================================
   INTRO
   ========================================================= */

.exploremore-section .explore-intro {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.exploremore-section .explore-icon {
    flex: 0 0 auto;
}

.exploremore-section .explore-icon i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    font-size: 2rem;
    color: var(--color-text-inverse);

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent)
    );

    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.exploremore-section .explore-text {
    flex: 1;
}

.exploremore-section .explore-text h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.exploremore-section .explore-text p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    line-height: 1.7;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.exploremore-section .upcoming-section h2,
.exploremore-section .case-studies h2,
.exploremore-section .roadmap-section h2 {
    margin: 0 0 var(--space-5);
    color: var(--color-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}


/* =========================================================
   UPCOMING LIST
   ========================================================= */

.exploremore-section .upcoming-section {
    margin-bottom: var(--space-10);
}

.exploremore-section .highlight-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);

    margin: 0;
    padding: 0;

    list-style: none;
}

.exploremore-section .highlight-list li {
    position: relative;

    margin: 0;
    padding: var(--space-4) var(--space-4) var(--space-4)
        calc(var(--space-4) + 22px);

    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;

    background: var(--color-background-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.exploremore-section .highlight-list li::before {
    content: "✓";
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);

    color: var(--color-accent-light);
    font-weight: var(--font-weight-bold);
}


/* =========================================================
   CASE STUDIES
   ========================================================= */

.exploremore-section .case-studies {
    margin-bottom: var(--space-10);
}

.exploremore-section .case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.exploremore-section .case-card {
    padding: var(--space-5);

    background: linear-gradient(
        145deg,
        var(--color-background-soft),
        var(--color-surface)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.exploremore-section .case-card:hover {
    transform: translateY(-2px);
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.exploremore-section .case-card h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.exploremore-section .case-card p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}


/* =========================================================
   ROADMAP TIMELINE
   ========================================================= */

.exploremore-section .roadmap-section {
    margin-bottom: var(--space-10);
}

.exploremore-section .timeline {
    position: relative;

    margin: 0;
    padding-left: var(--space-8);

    border-left: 2px solid var(--color-primary);
}

.exploremore-section .timeline-item {
    position: relative;
    margin-bottom: var(--space-6);
}

.exploremore-section .timeline-item:last-child {
    margin-bottom: 0;
}

.exploremore-section .timeline-item::before {
    content: "";

    position: absolute;
    left: calc(var(--space-8) * -1 - 7px);
    top: 4px;

    width: 12px;
    height: 12px;

    background: var(--color-primary);
    border: 3px solid var(--color-surface);

    border-radius: var(--radius-full);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.exploremore-section .timeline-date {
    margin-bottom: var(--space-2);

    color: var(--color-primary-light);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.exploremore-section .timeline-event {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}


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

.exploremore-section .cta-section {
    margin-top: 0;
    padding: var(--space-8);

    text-align: center;

    background: linear-gradient(
        135deg,
        var(--color-secondary),
        var(--color-secondary-light)
    );

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.exploremore-section .cta-text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1.6;
}

.exploremore-section .primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 var(--space-6);

    color: var(--color-text-inverse);
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-dark)
    );

    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);

    border: 1px solid transparent;
    border-radius: var(--radius-md);

    cursor: pointer;
    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.exploremore-section .primary-btn:hover {
    transform: translateY(-1px);

    background: linear-gradient(
        135deg,
        var(--color-primary-light),
        var(--color-primary)
    );

    box-shadow: var(--shadow-md);
}

.exploremore-section .primary-btn:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 3px;
}


/* =========================================================
   1200px
   ========================================================= */

@media (max-width: 1200px) {

    .exploremore-section {
        max-width: 1100px;
    }

    .exploremore-section .case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   900px
   ========================================================= */

@media (max-width: 900px) {

    .exploremore-section {
        max-width: 100%;
        padding: var(--space-8) var(--space-5);
    }

    .exploremore-section .explore-intro {
        gap: var(--space-5);
    }

    .exploremore-section .explore-text h1 {
        font-size: var(--font-size-xl);
    }

    .exploremore-section .highlight-list {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   768px
   ========================================================= */

@media (max-width: 768px) {

    .exploremore-section {
        padding: var(--space-6) var(--space-4);
        border-radius: var(--radius-md);
    }

    .exploremore-section .explore-intro {
        align-items: flex-start;
    }

    .exploremore-section .explore-icon i {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

    .exploremore-section .explore-text h1 {
        font-size: var(--font-size-xl);
    }

    .exploremore-section .case-grid {
        grid-template-columns: 1fr;
    }

    .exploremore-section .cta-section {
        padding: var(--space-6) var(--space-4);
    }

    .exploremore-section .cta-text {
        font-size: var(--font-size-md);
    }
}


/* =========================================================
   480px
   ========================================================= */

@media (max-width: 480px) {

    .exploremore-section {
        padding: var(--space-5) var(--space-3);
        border-radius: var(--radius-sm);
    }

    .exploremore-section .explore-intro {
        flex-direction: column;
    }

    .exploremore-section .explore-text h1 {
        font-size: var(--font-size-lg);
    }

    .exploremore-section .upcoming-section h2,
    .exploremore-section .case-studies h2,
    .exploremore-section .roadmap-section h2 {
        font-size: var(--font-size-lg);
    }

    .exploremore-section .case-card {
        padding: var(--space-4);
    }

    .exploremore-section .timeline {
        padding-left: var(--space-6);
    }

    .exploremore-section .timeline-item::before {
        left: calc(var(--space-6) * -1 - 7px);
    }

    .exploremore-section .primary-btn {
        width: 100%;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .exploremore-section .case-card,
    .exploremore-section .primary-btn {
        transition: none;
    }

    .exploremore-section .case-card:hover,
    .exploremore-section .primary-btn:hover {
        transform: none;
    }
}