/* Bud for Cloud Service Providers Page Styles */

/* Page background */
body {
    background: #f9f8f4;
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    display: none;
}
.footer {
    background: #000000 !important;
}

/* Smooth scrolling and touch optimization */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }

    /* Improve tap targets on mobile */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ========================================
   Hero Section
   ======================================== */
.csp_hero {
    margin-top: 6.5vw;
    padding: 0 2.8vw;
}

.csp_hero_box {
    background: #0a0a0a;
    min-height: 26vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 1.5vw;
    padding: 4vw 2vw;
}

/* Animated gradient blobs */
.csp_blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.85;
    transition: transform 0.15s ease-out;
}

.csp_blob.blob1 {
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.7) 0%, rgba(37, 99, 235, 0.4) 40%, transparent 70%);
    top: 10%;
    left: 15%;
    animation: cspBlob1 12s ease-in-out infinite;
}

.csp_blob.blob2 {
    width: 35vw;
    height: 35vw;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.7) 0%, rgba(109, 40, 217, 0.4) 40%, transparent 70%);
    top: 5%;
    right: 20%;
    animation: cspBlob2 14s ease-in-out infinite;
}

.csp_blob.blob3 {
    width: 30vw;
    height: 30vw;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.7) 0%, rgba(22, 163, 74, 0.4) 40%, transparent 70%);
    bottom: 10%;
    left: 30%;
    animation: cspBlob3 10s ease-in-out infinite;
}

@keyframes cspBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(5%, 10%) scale(1.05); }
    50% { transform: translate(-5%, 5%) scale(0.95); }
    75% { transform: translate(3%, -5%) scale(1.02); }
}
@keyframes cspBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-8%, -5%) scale(1.08); }
    50% { transform: translate(5%, 8%) scale(0.92); }
    75% { transform: translate(-3%, 3%) scale(1.05); }
}
@keyframes cspBlob3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(6%, -8%) scale(0.95); }
    50% { transform: translate(-4%, -4%) scale(1.1); }
    75% { transform: translate(-6%, 6%) scale(0.98); }
}

/* Hero Content */
.csp_hero_content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 60vw;
}

.csp_hero_badge {
    display: inline-block;
    padding: 0.5vw 1.5vw;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2vw;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85vw;
    margin-bottom: 1.5vw;
}

.csp_hero_content h1 {
    color: #ffffff;
    font-size: 3.2vw;
    font-weight: 400;
    margin: 0;
    line-height: 1.25;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
}

.csp_hero_content p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05vw;
    margin-top: 1.5vw;
    line-height: 1.6;
    max-width: 45vw;
    margin-left: auto;
    margin-right: auto;
}

.csp_hero_cta {
    display: flex;
    gap: 1vw;
    justify-content: center;
    margin-top: 2.5vw;
}

.csp_btn_primary {
    display: inline-block;
    padding: 0.9vw 2vw;
    background: #ffffff;
    color: #0a0a0a;
    text-decoration: none;
    font-size: 0.95vw;
    font-weight: 500;
    border-radius: 0.5vw;
    transition: all 0.3s ease;
}

.csp_btn_primary:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.csp_btn_secondary {
    display: inline-block;
    padding: 0.9vw 2vw;
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.95vw;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.5vw;
    transition: all 0.3s ease;
}

.csp_btn_secondary:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   Section Badge (reused across sections)
   ======================================== */
.csp_section_badge {
    display: inline-block;
    padding: 0.4vw 1.2vw;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 2vw;
    color: #3b82f6;
    font-size: 0.8vw;
    font-weight: 500;
    margin-bottom: 1vw;
}

.csp_section_badge.red {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.csp_section_badge.green {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.csp_section_badge.blue {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

/* ========================================
   Stats Section
   ======================================== */
.csp_stats_section {
    padding: 6vw 11.3vw;
    background: #ffffff;
}

.csp_stats_header {
    text-align: center;
    margin-bottom: 4vw;
}

.csp_stats_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.csp_stats_header p {
    font-size: 1vw;
    color: #666;
}

.csp_stats_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
}

.csp_stat_card {
    background: #f9f8f4;
    border-radius: 1vw;
    padding: 2.5vw;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.csp_stat_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.csp_stat_card .stat_value {
    font-size: 3.5vw;
    font-weight: 600;
    color: #3b82f6;
    line-height: 1;
    margin-bottom: 0.5vw;
}

.csp_stat_card .stat_label {
    font-size: 1vw;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.csp_stat_card .stat_desc {
    font-size: 0.85vw;
    color: #666;
    line-height: 1.5;
}

/* ========================================
   Problem Section
   ======================================== */
.csp_problem_section {
    padding: 6vw 11.3vw;
    background: #f9f8f4;
}

.csp_problem_content {
    display: flex;
    gap: 4vw;
    align-items: flex-start;
}

.csp_problem_left {
    flex: 1;
}

.csp_problem_left h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    margin-bottom: 1.5vw;
}

.csp_problem_left p {
    font-size: 1vw;
    color: #666;
    line-height: 1.7;
}

.csp_problem_right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5vw;
}

.csp_risk_card {
    background: #ffffff;
    border-radius: 1vw;
    padding: 1.8vw;
    border: 1px solid rgba(239, 68, 68, 0.2);
    transition: all 0.3s ease;
}

.csp_risk_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
}

.risk_icon {
    width: 2.5vw;
    height: 2.5vw;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 0.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1vw;
}

.risk_icon svg {
    width: 1.3vw;
    height: 1.3vw;
    color: #ef4444;
}

.csp_risk_card h4 {
    font-size: 1vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.csp_risk_card p {
    font-size: 0.85vw;
    color: #666;
    line-height: 1.5;
}

/* ========================================
   Customer Demands Section
   ======================================== */
.csp_demands_section {
    padding: 6vw 11.3vw;
    background: #ffffff;
}

.csp_demands_header {
    text-align: center;
    margin-bottom: 3vw;
}

.csp_demands_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.csp_demands_header p {
    font-size: 1.1vw;
    color: #666;
    font-style: italic;
}

.csp_section_badge.purple {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

.csp_section_badge.orange {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.3);
    color: #f97316;
}

.csp_demands_intro {
    text-align: center;
    max-width: 55vw;
    margin: 0 auto 4vw auto;
}

.csp_demands_intro p {
    font-size: 1vw;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1vw;
}

.csp_demands_intro p:first-child {
    font-size: 1.2vw;
    font-weight: 500;
    color: #1a1a1a;
}

.csp_demands_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

.csp_demands_grid .csp_demand_card:last-child {
    grid-column: span 2;
    max-width: 50%;
    margin: 0 auto;
}

.csp_demand_card {
    background: #f9f8f4;
    border-radius: 1vw;
    padding: 2.5vw;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 4px solid #8b5cf6;
}

.csp_demand_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(139, 92, 246, 0.1);
    border-left-color: #7c3aed;
}

.demand_quote {
    font-size: 1.1vw;
    font-weight: 600;
    color: #1a1a1a;
    font-style: italic;
    margin-bottom: 1vw;
    line-height: 1.4;
}

.csp_demand_card > p {
    font-size: 0.9vw;
    color: #666;
    line-height: 1.7;
}

/* ========================================
   Interactive Compare Section
   ======================================== */
.csp_compare_section {
    padding: 6vw 11.3vw;
    background: #0a0a0a;
    overflow: hidden;
}

.csp_compare_header {
    text-align: center;
    margin-bottom: 4vw;
}

.csp_compare_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #ffffff;
    margin-bottom: 0.8vw;
}

.csp_compare_header p {
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.6);
}

.csp_compare_container {
    max-width: 60vw;
    margin: 0 auto;
}

.compare_slider_wrapper {
    position: relative;
}

.compare_visual {
    position: relative;
    border-radius: 1vw;
    overflow: hidden;
    user-select: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Without Bud (Background) */
.compare_without {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1vw;
}

/* With Bud (Overlay) */
.compare_with {
    grid-column: 1;
    grid-row: 1;
    width: 50%;
    background: #1a1a1a;
    border-radius: 1vw 0 0 1vw;
    overflow: hidden;
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-right: none;
    box-sizing: border-box;
    z-index: 2;
}

.compare_with .infra_stack {
    width: 60vw;
    max-width: none;
    box-sizing: border-box;
}

/* Stack Styles */
.infra_stack {
    padding: 2vw;
}

.stack_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5vw;
    padding-bottom: 1vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stack_badge {
    padding: 0.4vw 1vw;
    border-radius: 0.3vw;
    font-size: 0.75vw;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stack_badge.bare {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.stack_badge.ai {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.stack_status {
    font-size: 0.8vw;
    color: rgba(255, 255, 255, 0.5);
}

.stack_status.success {
    color: #4ade80;
}

.stack_layers {
    display: flex;
    flex-direction: column;
    gap: 0.6vw;
    margin-bottom: 1.5vw;
}

.stack_layer {
    display: flex;
    align-items: center;
    gap: 1vw;
    padding: 0.8vw 1vw;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.5vw;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.stack_layer.hardware {
    border-color: rgba(255, 255, 255, 0.1);
}

.stack_layer.hardware .layer_icon svg {
    color: #888;
}

.stack_layer.enhanced {
    background: rgba(74, 222, 128, 0.05);
    border-color: rgba(74, 222, 128, 0.2);
}

.stack_layer.enhanced .layer_icon svg {
    color: #4ade80;
}

.stack_layer.service {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.2);
}

.stack_layer.service .layer_icon svg {
    color: #3b82f6;
}

.stack_layer.service.premium {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
}

.stack_layer.service.premium .layer_icon svg {
    color: #4ade80;
}

.stack_layer.runtime {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
}

.stack_layer.runtime .layer_icon svg {
    color: #8b5cf6;
}

.layer_icon {
    width: 2.2vw;
    height: 2.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.layer_icon svg {
    width: 1.2vw;
    height: 1.2vw;
}

.layer_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1vw;
}

.layer_name {
    font-size: 0.85vw;
    font-weight: 500;
    color: #ffffff;
}

.layer_desc {
    font-size: 0.7vw;
    color: rgba(255, 255, 255, 0.5);
}

.layer_tag {
    padding: 0.2vw 0.6vw;
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
    font-size: 0.6vw;
    font-weight: 600;
    border-radius: 0.2vw;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stack_divider {
    display: flex;
    align-items: center;
    gap: 1vw;
    padding: 0.5vw 0;
    margin: 0.3vw 0;
}

.stack_divider::before,
.stack_divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.stack_divider span {
    font-size: 0.65vw;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stack_metrics {
    display: flex;
    gap: 1.5vw;
    padding-top: 1vw;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.metric_item {
    flex: 1;
    text-align: center;
}

.metric_value {
    display: block;
    font-size: 1.1vw;
    font-weight: 600;
    margin-bottom: 0.2vw;
}

.metric_item.negative .metric_value {
    color: #f87171;
}

.metric_item.positive .metric_value {
    color: #4ade80;
}

.metric_label {
    font-size: 0.7vw;
    color: rgba(255, 255, 255, 0.5);
}

/* Slider Handle */
.compare_slider {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 40px;
    margin-left: calc(50% - 20px);
    cursor: ew-resize;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider_line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: linear-gradient(180deg, #4ade80 0%, #3b82f6 100%);
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
    height: 100%;
}

.slider_handle {
    position: relative;
    width: 3vw;
    height: 3vw;
    background: linear-gradient(135deg, #4ade80 0%, #3b82f6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    box-shadow: 0 4px 20px rgba(74, 222, 128, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

/* Slider hint animation */
.compare_slider.animate .slider_handle {
    animation: sliderHint 1.5s ease-in-out 3;
}

@keyframes sliderHint {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-15px); }
    75% { transform: translateX(15px); }
}

@media (max-width: 768px) {
    @keyframes sliderHint {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-8vw); }
        75% { transform: translateX(8vw); }
    }
}

/* Hide gradient line after interaction */
.slider_line {
    transition: opacity 0.3s ease;
}

.compare_slider.interacted .slider_line {
    opacity: 0;
}

.slider_handle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(74, 222, 128, 0.6);
}

.slider_handle svg {
    width: 1vw;
    height: 1vw;
    color: #ffffff;
}

.compare_instruction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
    margin-top: 1.5vw;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8vw;
    animation: pulseInstruction 2s ease-in-out infinite;
}

.compare_instruction svg {
    width: 0.9vw;
    height: 0.9vw;
    animation: slideArrows 1.5s ease-in-out infinite;
}

.compare_instruction svg:first-child {
    animation-direction: reverse;
}

@keyframes pulseInstruction {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes slideArrows {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

/* ========================================
   Opportunity Section
   ======================================== */
.csp_opportunity_section {
    padding: 6vw 11.3vw;
    background: #0a0a0a;
}

.csp_opportunity_header {
    text-align: center;
    margin-bottom: 4vw;
}

.csp_opportunity_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #ffffff;
    margin-bottom: 0.8vw;
}

.csp_opportunity_header p {
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.6);
}

.csp_opportunity_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
}

.csp_opp_card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1vw;
    padding: 2vw;
    transition: all 0.3s ease;
}

.csp_opp_card:hover {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.05);
    transform: translateY(-3px);
}

.opp_number {
    font-size: 2vw;
    font-weight: 600;
    color: #22c55e;
    margin-bottom: 1vw;
    line-height: 1;
}

.csp_opp_card h4 {
    font-size: 1.1vw;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.7vw;
}

.csp_opp_card p {
    font-size: 0.9vw;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* ========================================
   Service Portfolio Section
   ======================================== */
.csp_portfolio_section {
    padding: 6vw 11.3vw;
    background: #f9f8f4;
}

.csp_portfolio_header {
    text-align: center;
    margin-bottom: 2vw;
}

.csp_portfolio_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.csp_portfolio_header p {
    font-size: 1vw;
    color: #666;
}

.csp_portfolio_intro {
    text-align: center;
    max-width: 60vw;
    margin: 0 auto 4vw auto;
}

.csp_portfolio_intro p {
    font-size: 1vw;
    color: #555;
    line-height: 1.7;
}

.csp_portfolio_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
}

.csp_service_card {
    background: #ffffff;
    border-radius: 1vw;
    padding: 2.5vw;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.csp_service_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.csp_service_card.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.csp_service_card.featured .service_header h4 {
    color: #ffffff;
}

.csp_service_card.featured .service_desc {
    color: rgba(255, 255, 255, 0.7);
}

.csp_service_card.featured .service_enables {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.csp_service_card.featured .enables_label {
    color: #22c55e;
}

.csp_service_card.featured .service_enables p {
    color: rgba(255, 255, 255, 0.6);
}

.service_header {
    display: flex;
    align-items: center;
    gap: 1vw;
    margin-bottom: 1.5vw;
}

.service_icon {
    width: 3vw;
    height: 3vw;
    border-radius: 0.6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.service_icon svg {
    width: 1.5vw;
    height: 1.5vw;
    color: #ffffff;
}

.service_icon.maas {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.service_icon.taas {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.service_icon.aipaas {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.service_icon.domain {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.service_icon.sovereign {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.service_header h4 {
    font-size: 1.2vw;
    font-weight: 600;
    color: #1a1a1a;
}

.service_desc {
    font-size: 0.9vw;
    color: #666;
    line-height: 1.7;
    margin-bottom: 1.5vw;
}

.service_enables {
    background: #f9f8f4;
    border-radius: 0.6vw;
    padding: 1.5vw;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.enables_label {
    display: block;
    font-size: 0.8vw;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 0.5vw;
}

.service_enables p {
    font-size: 0.85vw;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   Business Impact Comparison Section
   ======================================== */
.csp_comparison_section {
    padding: 6vw 11.3vw;
    background: #0a0a0a;
}

.csp_comparison_header {
    text-align: center;
    margin-bottom: 4vw;
}

.csp_comparison_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #ffffff;
    margin-bottom: 0.8vw;
}

.csp_comparison_header p {
    font-size: 1vw;
    color: rgba(255, 255, 255, 0.6);
}

.csp_comparison_table_wrapper {
    overflow-x: auto;
    margin-bottom: 4vw;
}

.csp_comparison_table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 1vw;
    overflow: hidden;
}

.csp_comparison_table thead tr {
    background: rgba(255, 255, 255, 0.05);
}

.csp_comparison_table th {
    padding: 1.8vw 2vw;
    text-align: left;
    font-size: 1vw;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.csp_comparison_table th.metric_col {
    width: 25%;
}

.csp_comparison_table th.bare_col,
.csp_comparison_table th.ai_col {
    width: 37.5%;
    text-align: center;
}

.col_label {
    display: block;
    font-size: 1.1vw;
    font-weight: 600;
    margin-bottom: 0.3vw;
}

.col_sublabel {
    display: block;
    font-size: 0.8vw;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

.csp_comparison_table th.ai_col .col_label {
    color: #4ade80;
}

.csp_comparison_table td {
    padding: 1.5vw 2vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
}

.csp_comparison_table tr:last-child td {
    border-bottom: none;
}

.csp_comparison_table td.metric_name {
    vertical-align: middle;
}

.metric_title {
    display: block;
    font-size: 1vw;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.2vw;
}

.metric_desc {
    display: block;
    font-size: 0.8vw;
    color: rgba(255, 255, 255, 0.5);
}

.bare_cell,
.ai_cell {
    text-align: center;
    vertical-align: middle;
}

.bare_cell {
    background: rgba(239, 68, 68, 0.03);
}

.ai_cell {
    background: rgba(34, 197, 94, 0.05);
}

.value_old {
    display: block;
    font-size: 1.1vw;
    font-weight: 600;
    color: #f87171;
    margin-bottom: 0.2vw;
}

.value_new {
    display: block;
    font-size: 1.1vw;
    font-weight: 600;
    color: #4ade80;
    margin-bottom: 0.2vw;
}

.value_note {
    display: block;
    font-size: 0.75vw;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.3vw;
    line-height: 1.4;
}

.value_uplift {
    display: inline-block;
    padding: 0.25vw 0.6vw;
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-radius: 0.25vw;
    font-size: 0.7vw;
    font-weight: 500;
}

.csp_comparison_summary {
    display: flex;
    justify-content: center;
    gap: 3vw;
}

.summary_card {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    padding: 2vw 3vw;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 1vw;
}

.summary_icon {
    width: 3vw;
    height: 3vw;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary_icon svg {
    width: 1.5vw;
    height: 1.5vw;
    color: #ffffff;
}

.summary_content {
    display: flex;
    flex-direction: column;
}

.summary_value {
    font-size: 2vw;
    font-weight: 600;
    color: #4ade80;
    line-height: 1;
}

.summary_label {
    font-size: 0.85vw;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.3vw;
}

/* ========================================
   Launch in 90 Days Section
   ======================================== */
.csp_launch_section {
    padding: 6vw 11.3vw;
    background: #f9f8f4;
}

.csp_launch_header {
    text-align: center;
    margin-bottom: 4vw;
}

.csp_launch_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.csp_launch_header p {
    font-size: 1vw;
    color: #666;
}

.csp_section_badge.teal {
    background: rgba(20, 184, 166, 0.1);
    border-color: rgba(20, 184, 166, 0.3);
    color: #14b8a6;
}

.csp_launch_timeline {
    display: flex;
    align-items: stretch;
    gap: 1vw;
    margin-bottom: 4vw;
}

.launch_phase {
    flex: 1;
    background: #ffffff;
    border-radius: 1vw;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.launch_phase:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.launch_phase.featured {
    border: 2px solid #14b8a6;
}

.launch_phase.featured .phase_header {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.phase_header {
    background: #1a1a1a;
    padding: 1.5vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.phase_number {
    font-size: 1.5vw;
    font-weight: 600;
    color: #ffffff;
}

.phase_duration {
    font-size: 0.85vw;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.3vw 0.8vw;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.3vw;
}

.phase_content {
    padding: 2vw;
}

.phase_content h4 {
    font-size: 1.3vw;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.5vw;
}

.phase_tagline {
    font-size: 0.9vw;
    color: #666;
    margin-bottom: 1.5vw;
}

.phase_tasks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5vw 0;
}

.phase_tasks li {
    display: flex;
    align-items: flex-start;
    gap: 0.8vw;
    padding: 0.6vw 0;
    font-size: 0.85vw;
    color: #555;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.task_icon {
    flex-shrink: 0;
    color: #22c55e;
    margin-top: 0.1vw;
}

.task_icon svg {
    width: 0.9vw;
    height: 0.9vw;
}

.phase_outcome {
    background: #f9f8f4;
    padding: 1vw 1.2vw;
    border-radius: 0.5vw;
    font-size: 0.85vw;
}

.outcome_label {
    font-weight: 600;
    color: #14b8a6;
    margin-right: 0.5vw;
}

.phase_outcome span:last-child {
    color: #555;
}

.launch_connector {
    display: flex;
    align-items: center;
    color: #14b8a6;
    flex-shrink: 0;
}

.launch_connector svg {
    width: 1.5vw;
    height: 1.5vw;
}

.csp_launch_guarantee {
    display: flex;
    align-items: flex-start;
    gap: 2vw;
    padding: 2.5vw;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    border-radius: 1vw;
}

.guarantee_icon {
    width: 4vw;
    height: 4vw;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.guarantee_icon svg {
    width: 2vw;
    height: 2vw;
    color: #ffffff;
}

.guarantee_content h4 {
    font-size: 1.2vw;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5vw;
}

.guarantee_content p {
    font-size: 0.95vw;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

/* ========================================
   Solution Section
   ======================================== */
.csp_solution_section {
    padding: 6vw 11.3vw;
    background: #ffffff;
}

.csp_solution_header {
    text-align: center;
    margin-bottom: 3vw;
}

.csp_solution_header h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #1a1a1a;
    margin-bottom: 0.8vw;
}

.csp_solution_header p {
    font-size: 1vw;
    color: #666;
}

.csp_foundry_intro {
    text-align: center;
    max-width: 55vw;
    margin: 0 auto 4vw auto;
    padding: 2vw;
    background: #f9f8f4;
    border-radius: 1vw;
}

.csp_foundry_intro h3 {
    font-size: 1.3vw;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1vw;
}

.csp_foundry_intro p {
    font-size: 0.95vw;
    color: #666;
    line-height: 1.6;
}

.csp_components_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
}

.csp_component_card {
    background: #f9f8f4;
    border-radius: 1vw;
    padding: 2vw;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.csp_component_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.component_header {
    display: flex;
    align-items: center;
    gap: 1vw;
    margin-bottom: 1vw;
}

.component_icon {
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 0.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.component_icon svg {
    width: 1.3vw;
    height: 1.3vw;
    color: #ffffff;
}

.component_icon.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.component_icon.green {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.component_icon.red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.component_icon.purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.component_icon.orange {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.component_icon.teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

.component_icon.cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.component_icon.pink {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

/* Unified Platform Section */
.csp_unified_platform {
    margin-top: 4vw;
    padding: 3vw;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    border-radius: 1vw;
    text-align: center;
}

.csp_unified_platform h3 {
    font-size: 1.5vw;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2vw;
}

.unified_features_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8vw;
}

.unified_feature {
    display: inline-block;
    padding: 0.6vw 1.2vw;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.4vw;
    font-size: 0.85vw;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.unified_feature:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.component_header h4 {
    font-size: 1.1vw;
    font-weight: 600;
    color: #1a1a1a;
}

.csp_component_card > p {
    font-size: 0.9vw;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5vw;
}

.component_features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5vw;
}

.component_features li {
    font-size: 0.75vw;
    padding: 0.4vw 0.8vw;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.3vw;
    color: #555;
}

/* ========================================
   CTA Section
   ======================================== */
.csp_cta_section {
    padding: 6vw 11.3vw;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    text-align: center;
}

.csp_cta_content {
    max-width: 50vw;
    margin: 0 auto;
}

.csp_cta_content h2 {
    font-size: 2.5vw;
    font-weight: 400;
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    color: #ffffff;
    margin-bottom: 1vw;
}

.csp_cta_content > p {
    font-size: 1.05vw;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 2.5vw;
}

.csp_cta_buttons {
    display: flex;
    gap: 1vw;
    justify-content: center;
}

.csp_cta_section .csp_btn_primary {
    background: #22c55e;
    color: #ffffff;
}

.csp_cta_section .csp_btn_primary:hover {
    background: #16a34a;
}

/* ========================================
   Mobile Responsiveness
   ======================================== */
@media (max-width: 768px) {
    .csp_hero {
        margin-top: 100px;
        padding: 0 4vw;
    }

    .csp_hero_box {
        min-height: auto;
        border-radius: 6vw;
        padding: 12vw 6vw;
        position: relative;
    }

    /* Optimize blobs for mobile */
    .csp_blob.blob1 {
        width: 60vw;
        height: 60vw;
        top: -10%;
        left: -10%;
        filter: blur(40px);
        opacity: 0.6;
    }

    .csp_blob.blob2 {
        width: 50vw;
        height: 50vw;
        top: 0%;
        right: -15%;
        filter: blur(40px);
        opacity: 0.6;
    }

    .csp_blob.blob3 {
        width: 45vw;
        height: 45vw;
        bottom: -5%;
        left: 20%;
        filter: blur(35px);
        opacity: 0.5;
    }

    .csp_hero_content {
        max-width: 100%;
    }

    .csp_hero_badge {
        font-size: 3.2vw;
        padding: 2vw 5vw;
        border-radius: 6vw;
        margin-bottom: 4vw;
    }

    .csp_hero_content h1 {
        font-size: 8vw;
        line-height: 1.2;
        margin-bottom: 3vw;
    }

    .csp_hero_content p {
        font-size: 4vw;
        max-width: 100%;
        line-height: 1.6;
        margin-top: 0;
        margin-bottom: 2vw;
    }

    .csp_hero_cta {
        flex-direction: column;
        gap: 3vw;
        margin-top: 6vw;
    }

    .csp_btn_primary,
    .csp_btn_secondary {
        padding: 4vw 8vw;
        font-size: 4vw;
        border-radius: 2vw;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Section Badge Mobile */
    .csp_section_badge {
        font-size: 2.8vw;
        padding: 1.2vw 3vw;
    }

    /* Stats Section Mobile */
    .csp_stats_section {
        padding: 12vw 4vw;
    }

    .csp_stats_header h2 {
        font-size: 6vw;
    }

    .csp_stats_header p {
        font-size: 3.5vw;
    }

    .csp_stats_grid {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .csp_stat_card {
        padding: 6vw;
    }

    .csp_stat_card .stat_value {
        font-size: 10vw;
    }

    .csp_stat_card .stat_label {
        font-size: 4vw;
    }

    .csp_stat_card .stat_desc {
        font-size: 3.2vw;
    }

    /* Problem Section Mobile */
    .csp_problem_section {
        padding: 12vw 4vw;
    }

    .csp_problem_content {
        flex-direction: column;
        gap: 6vw;
    }

    .csp_problem_left h2 {
        font-size: 6vw;
    }

    .csp_problem_left p {
        font-size: 3.5vw;
    }

    .csp_problem_right {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .csp_risk_card {
        padding: 5vw;
    }

    .risk_icon {
        width: 10vw;
        height: 10vw;
    }

    .risk_icon svg {
        width: 5vw;
        height: 5vw;
    }

    .csp_risk_card h4 {
        font-size: 4vw;
    }

    .csp_risk_card p {
        font-size: 3.2vw;
    }

    /* Customer Demands Section Mobile */
    .csp_demands_section {
        padding: 12vw 4vw;
    }

    .csp_demands_header h2 {
        font-size: 6vw;
    }

    .csp_demands_header p {
        font-size: 3.5vw;
    }

    .csp_demands_intro {
        max-width: 100%;
    }

    .csp_demands_intro p {
        font-size: 3.5vw;
    }

    .csp_demands_intro p:first-child {
        font-size: 4vw;
    }

    .csp_demands_grid {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .csp_demands_grid .csp_demand_card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    .csp_demand_card {
        padding: 5vw;
        border-left-width: 3px;
    }

    .demand_quote {
        font-size: 4vw;
    }

    .csp_demand_card > p {
        font-size: 3.2vw;
    }

    /* Compare Section Mobile */
    .csp_compare_section {
        padding: 12vw 4vw;
    }

    .csp_compare_header h2 {
        font-size: 6vw;
    }

    .csp_compare_header p {
        font-size: 3.5vw;
    }

    .csp_compare_container {
        max-width: 100%;
    }

    .infra_stack {
        padding: 4vw;
    }

    .stack_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2vw;
        margin-bottom: 4vw;
        padding-bottom: 3vw;
    }

    .stack_badge {
        padding: 1.5vw 3vw;
        font-size: 2.5vw;
    }

    .stack_status {
        font-size: 2.8vw;
    }

    .stack_layers {
        gap: 2vw;
        margin-bottom: 4vw;
    }

    .stack_layer {
        padding: 3vw;
        gap: 3vw;
    }

    .layer_icon {
        width: 8vw;
        height: 8vw;
    }

    .layer_icon svg {
        width: 4vw;
        height: 4vw;
    }

    .layer_name {
        font-size: 3.2vw;
    }

    .layer_desc {
        font-size: 2.5vw;
    }

    .layer_tag {
        padding: 0.8vw 2vw;
        font-size: 2vw;
    }

    .stack_divider span {
        font-size: 2.2vw;
    }

    .stack_metrics {
        flex-direction: column;
        gap: 3vw;
        padding-top: 4vw;
    }

    .metric_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .metric_value {
        font-size: 4vw;
    }

    .metric_label {
        font-size: 2.8vw;
    }

    .slider_handle {
        width: 10vw;
        height: 10vw;
    }

    .slider_handle svg {
        width: 3.5vw;
        height: 3.5vw;
    }

    .compare_instruction {
        font-size: 3vw;
        gap: 2vw;
        margin-top: 4vw;
    }

    .compare_instruction svg {
        width: 3vw;
        height: 3vw;
    }

    .compare_with .infra_stack {
        width: 92vw;
        max-width: none;
    }

    /* Opportunity Section Mobile */
    .csp_opportunity_section {
        padding: 12vw 4vw;
    }

    .csp_opportunity_header h2 {
        font-size: 6vw;
    }

    .csp_opportunity_header p {
        font-size: 3.5vw;
    }

    .csp_opportunity_grid {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .csp_opp_card {
        padding: 5vw;
    }

    .opp_number {
        font-size: 8vw;
    }

    .csp_opp_card h4 {
        font-size: 4.5vw;
    }

    .csp_opp_card p {
        font-size: 3.2vw;
    }

    /* Service Portfolio Section Mobile */
    .csp_portfolio_section {
        padding: 12vw 4vw;
    }

    .csp_portfolio_header h2 {
        font-size: 6vw;
    }

    .csp_portfolio_header p {
        font-size: 3.5vw;
    }

    .csp_portfolio_intro {
        max-width: 100%;
    }

    .csp_portfolio_intro p {
        font-size: 3.5vw;
    }

    .csp_portfolio_grid {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .csp_service_card {
        padding: 5vw;
    }

    .csp_service_card.featured {
        grid-column: span 1;
    }

    .service_icon {
        width: 12vw;
        height: 12vw;
    }

    .service_icon svg {
        width: 6vw;
        height: 6vw;
    }

    .service_header h4 {
        font-size: 4.5vw;
    }

    .service_desc {
        font-size: 3.2vw;
    }

    .service_enables {
        padding: 4vw;
    }

    .enables_label {
        font-size: 3vw;
    }

    .service_enables p {
        font-size: 3vw;
    }

    /* Business Impact Comparison Section Mobile */
    .csp_comparison_section {
        padding: 12vw 4vw;
    }

    .csp_comparison_header h2 {
        font-size: 6vw;
    }

    .csp_comparison_header p {
        font-size: 3.5vw;
    }

    .csp_comparison_table {
        min-width: 200vw;
    }

    .csp_comparison_table th,
    .csp_comparison_table td {
        padding: 4vw;
    }

    .col_label {
        font-size: 4vw;
    }

    .col_sublabel {
        font-size: 3vw;
    }

    .metric_title {
        font-size: 3.5vw;
    }

    .metric_desc {
        font-size: 3vw;
    }

    .value_old,
    .value_new {
        font-size: 4.5vw;
    }

    .value_note {
        font-size: 3vw;
    }

    .value_uplift {
        font-size: 2.8vw;
        padding: 1vw 2vw;
    }

    .csp_comparison_summary {
        flex-direction: column;
        gap: 4vw;
    }

    .summary_card {
        padding: 5vw;
        gap: 4vw;
    }

    .summary_icon {
        width: 12vw;
        height: 12vw;
    }

    .summary_icon svg {
        width: 6vw;
        height: 6vw;
    }

    .summary_value {
        font-size: 8vw;
    }

    .summary_label {
        font-size: 3.2vw;
    }

    /* Launch in 90 Days Section Mobile */
    .csp_launch_section {
        padding: 12vw 4vw;
    }

    .csp_launch_header h2 {
        font-size: 6vw;
    }

    .csp_launch_header p {
        font-size: 3.5vw;
    }

    .csp_launch_timeline {
        flex-direction: column;
        gap: 4vw;
    }

    .launch_connector {
        display: none;
    }

    .launch_phase {
        border-radius: 3vw;
    }

    .phase_header {
        padding: 4vw 5vw;
    }

    .phase_number {
        font-size: 6vw;
    }

    .phase_duration {
        font-size: 3vw;
        padding: 1vw 2.5vw;
    }

    .phase_content {
        padding: 5vw;
    }

    .phase_content h4 {
        font-size: 5vw;
    }

    .phase_tagline {
        font-size: 3.5vw;
    }

    .phase_tasks li {
        font-size: 3.2vw;
        padding: 2vw 0;
        gap: 3vw;
    }

    .task_icon svg {
        width: 3.5vw;
        height: 3.5vw;
    }

    .phase_outcome {
        padding: 4vw;
        font-size: 3.2vw;
    }

    .csp_launch_guarantee {
        flex-direction: column;
        text-align: center;
        padding: 6vw;
        gap: 4vw;
    }

    .guarantee_icon {
        width: 16vw;
        height: 16vw;
        margin: 0 auto;
    }

    .guarantee_icon svg {
        width: 8vw;
        height: 8vw;
    }

    .guarantee_content h4 {
        font-size: 5vw;
    }

    .guarantee_content p {
        font-size: 3.5vw;
    }

    /* Solution Section Mobile */
    .csp_solution_section {
        padding: 12vw 4vw;
    }

    .csp_solution_header h2 {
        font-size: 6vw;
    }

    .csp_solution_header p {
        font-size: 3.5vw;
    }

    .csp_foundry_intro {
        max-width: 100%;
        padding: 5vw;
    }

    .csp_foundry_intro h3 {
        font-size: 4.5vw;
    }

    .csp_foundry_intro p {
        font-size: 3.2vw;
    }

    .csp_components_grid {
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .csp_component_card {
        padding: 5vw;
    }

    .component_icon {
        width: 10vw;
        height: 10vw;
    }

    .component_icon svg {
        width: 5vw;
        height: 5vw;
    }

    .component_header h4 {
        font-size: 4.5vw;
    }

    .csp_component_card > p {
        font-size: 3.2vw;
    }

    .component_features {
        gap: 2vw;
    }

    .component_features li {
        font-size: 2.8vw;
        padding: 1.5vw 3vw;
    }

    /* Unified Platform Mobile */
    .csp_unified_platform {
        margin-top: 8vw;
        padding: 6vw 4vw;
    }

    .csp_unified_platform h3 {
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .unified_features_grid {
        gap: 2vw;
    }

    .unified_feature {
        padding: 2vw 3vw;
        font-size: 3vw;
        border-radius: 1vw;
    }

    /* CTA Section Mobile */
    .csp_cta_section {
        padding: 12vw 4vw;
    }

    .csp_cta_content {
        max-width: 100%;
    }

    .csp_cta_content h2 {
        font-size: 6vw;
    }

    .csp_cta_content > p {
        font-size: 3.5vw;
    }

    .csp_cta_buttons {
        flex-direction: column;
        gap: 3vw;
    }
}

/* Tablet Breakpoint */
@media (max-width: 1024px) {
    .csp_stats_grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .csp_demands_grid {
        grid-template-columns: 1fr;
    }

    .csp_demands_grid .csp_demand_card:last-child {
        max-width: 100%;
    }

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

    .csp_portfolio_grid {
        grid-template-columns: 1fr;
    }

    .csp_service_card.featured {
        grid-column: span 1;
    }

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

    .csp_launch_timeline {
        flex-direction: column;
        gap: 2vw;
    }

    .launch_connector {
        display: none;
    }

    .csp_comparison_summary {
        flex-wrap: wrap;
    }

    .summary_card {
        flex: 1 1 45%;
    }
}

@media (max-width: 480px) {
    .csp_hero {
        margin-top: 95px;
        padding: 0 3vw;
    }

    .csp_hero_box {
        padding: 14vw 5vw;
        border-radius: 7vw;
    }

    /* Smaller blobs for small screens */
    .csp_blob.blob1 {
        width: 70vw;
        height: 70vw;
        top: -15%;
        left: -20%;
        filter: blur(35px);
        opacity: 0.5;
    }

    .csp_blob.blob2 {
        width: 55vw;
        height: 55vw;
        top: -5%;
        right: -20%;
        filter: blur(35px);
        opacity: 0.5;
    }

    .csp_blob.blob3 {
        width: 50vw;
        height: 50vw;
        bottom: -10%;
        left: 15%;
        filter: blur(30px);
        opacity: 0.45;
    }

    .csp_hero_badge {
        font-size: 3.5vw;
        padding: 2.5vw 6vw;
        border-radius: 8vw;
        margin-bottom: 5vw;
    }

    .csp_hero_content h1 {
        font-size: 9vw;
        line-height: 1.15;
        margin-bottom: 4vw;
    }

    .csp_hero_content p {
        font-size: 4.2vw;
        line-height: 1.5;
        margin-bottom: 3vw;
    }

    .csp_hero_cta {
        margin-top: 7vw;
        gap: 4vw;
    }

    .csp_btn_primary,
    .csp_btn_secondary {
        padding: 4.5vw 8vw;
        font-size: 4.2vw;
        border-radius: 2.5vw;
        width: 100%;
        text-align: center;
    }

    .csp_section_badge {
        font-size: 3.2vw;
        padding: 1.5vw 4vw;
        border-radius: 4vw;
    }

    /* Stats Section 480px */
    .csp_stats_grid {
        grid-template-columns: 1fr;
    }

    .csp_stat_card .stat_value {
        font-size: 12vw;
    }

    .csp_stat_card .stat_label {
        font-size: 4.5vw;
    }

    .csp_stat_card .stat_desc {
        font-size: 3.5vw;
    }

    /* Problem Section 480px */
    .csp_problem_right {
        grid-template-columns: 1fr;
    }

    .csp_problem_left h2 {
        font-size: 7vw;
    }

    .risk_icon {
        width: 12vw;
        height: 12vw;
    }

    .risk_icon svg {
        width: 6vw;
        height: 6vw;
    }

    .csp_risk_card h4 {
        font-size: 4.5vw;
    }

    /* Demands Section 480px */
    .demand_quote {
        font-size: 4.5vw;
    }

    /* Compare Section 480px */
    .csp_compare_header h2 {
        font-size: 7vw;
    }

    .stack_badge {
        padding: 2vw 4vw;
        font-size: 3vw;
    }

    .stack_status {
        font-size: 3vw;
    }

    .stack_layer {
        padding: 4vw;
        gap: 4vw;
        border-radius: 2vw;
    }

    .layer_icon {
        width: 10vw;
        height: 10vw;
    }

    .layer_icon svg {
        width: 5vw;
        height: 5vw;
    }

    .layer_name {
        font-size: 3.5vw;
    }

    .layer_desc {
        font-size: 3vw;
    }

    .layer_tag {
        padding: 1vw 2.5vw;
        font-size: 2.5vw;
    }

    .stack_divider span {
        font-size: 2.5vw;
    }

    .metric_value {
        font-size: 5vw;
    }

    .metric_label {
        font-size: 3vw;
    }

    .slider_handle {
        width: 12vw;
        height: 12vw;
    }

    .slider_handle svg {
        width: 4vw;
        height: 4vw;
    }

    .compare_instruction {
        font-size: 3.5vw;
    }

    /* Opportunity Section 480px */
    .csp_opportunity_grid {
        grid-template-columns: 1fr;
    }

    .opp_number {
        font-size: 10vw;
    }

    .csp_opp_card h4 {
        font-size: 5vw;
    }

    /* Portfolio Section 480px */
    .service_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 3vw;
    }

    .service_icon {
        width: 14vw;
        height: 14vw;
    }

    .service_icon svg {
        width: 7vw;
        height: 7vw;
    }

    .service_header h4 {
        font-size: 5vw;
    }

    .service_desc {
        font-size: 3.5vw;
    }

    /* Comparison Table 480px */
    .csp_comparison_table {
        min-width: 250vw;
    }

    .csp_comparison_table th,
    .csp_comparison_table td {
        padding: 5vw 4vw;
    }

    .col_label {
        font-size: 4.5vw;
    }

    .metric_title {
        font-size: 4vw;
    }

    .value_old,
    .value_new {
        font-size: 5vw;
    }

    .summary_card {
        flex: 1 1 100%;
    }

    .summary_value {
        font-size: 10vw;
    }

    .summary_label {
        font-size: 3.5vw;
    }

    /* Launch Section 480px */
    .phase_number {
        font-size: 7vw;
    }

    .phase_duration {
        font-size: 3.5vw;
    }

    .phase_content h4 {
        font-size: 6vw;
    }

    .phase_tagline {
        font-size: 4vw;
    }

    .phase_tasks li {
        font-size: 3.5vw;
    }

    .phase_outcome {
        font-size: 3.5vw;
    }

    .guarantee_content h4 {
        font-size: 5.5vw;
    }

    .guarantee_content p {
        font-size: 4vw;
    }

    /* Solution Section 480px */
    .csp_components_grid {
        grid-template-columns: 1fr;
    }

    .component_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 3vw;
    }

    .component_icon {
        width: 12vw;
        height: 12vw;
    }

    .component_icon svg {
        width: 6vw;
        height: 6vw;
    }

    .component_header h4 {
        font-size: 5vw;
    }

    .csp_component_card > p {
        font-size: 3.5vw;
    }

    .component_features li {
        font-size: 3vw;
        padding: 2vw 4vw;
    }

    /* Unified Platform 480px */
    .csp_unified_platform {
        padding: 8vw 5vw;
        border-radius: 3vw;
    }

    .csp_unified_platform h3 {
        font-size: 4.5vw;
        margin-bottom: 5vw;
    }

    .unified_features_grid {
        gap: 2.5vw;
    }

    .unified_feature {
        padding: 2.5vw 4vw;
        font-size: 3.2vw;
        border-radius: 1.5vw;
    }

    /* CTA Section 480px */
    .csp_cta_content h2 {
        font-size: 7vw;
    }

    .csp_cta_content > p {
        font-size: 4vw;
    }

    .csp_cta_buttons {
        gap: 4vw;
    }
}