/* ==========================================================================
   CodeFam Workloads Section — Modal.com Exact Replicated Architecture
   2-Column Split Layout + Exact Modal.com Workload Animation CSS
   ========================================================================== */

:root {
    --color-v2-primary-neutral-1000: #040804;
    --color-v2-primary-neutral-900: #10120f;
    --color-v2-primary-neutral-100: #e3e5e1;
    --color-v2-primary-neutral-500: #888e84;
    --color-v2-primary-neutral-0: #ffffff;
    --color-v2-secondary-blue: #00d2ff;
    --font-v2-mono: 'JetBrains Mono', monospace;
    --font-v2-mono--font-feature-settings: normal;
}

.cf-workloads-root {
    position: relative;
    width: 100%;
    background: transparent;
    padding: 80px 20px 120px;
    z-index: 10;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .cf-workloads-root {
        padding: 100px 48px 140px;
    }
}

.cf-workloads-wrap {
    max-width: 1360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

@media (min-width: 1024px) {
    .cf-workloads-wrap {
        gap: 130px;
    }
}

/* ---------------- Top Section Header ---------------- */
.cf-workloads-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
}

.cf-workloads-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 9999px;
    background: rgba(0, 85, 254, 0.12);
    border: 1px solid rgba(0, 85, 254, 0.3);
    color: #8aa5ff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cf-workloads-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00d2ff;
    box-shadow: 0 0 8px #00d2ff;
    animation: cfGlowPulse 2s infinite alternate;
}

@keyframes cfGlowPulse {
    0% { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 12px #00d2ff; }
}

.cf-workloads-title {
    font-family: 'Rethink Sans', -apple-system, sans-serif;
    font-size: clamp(32px, 4.5vw, 54px);
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin: 0;
}

.cf-workloads-subtitle {
    font-family: 'Rethink Sans', -apple-system, sans-serif;
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.6;
    color: #94a3b8;
    max-width: 720px;
    margin: 0;
}

/* ==========================================================================
   2-Column Split Section Layout (Modal.com Exact Spec)
   ========================================================================== */

.cf-workload-section {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
    position: relative;
    scroll-margin-top: 100px;
}

@media (min-width: 1024px) {
    .cf-workload-section {
        display: grid;
        grid-template-columns: minmax(360px, 460px) 1fr;
        gap: 56px;
        align-items: start;
    }
}

@media (min-width: 1280px) {
    .cf-workload-section {
        grid-template-columns: 460px 1fr;
        gap: 64px;
    }
}

/* ---------------- Left Column: Content & Features ---------------- */
.cf-workload-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cf-workload-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cf-workload-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
    letter-spacing: 0.04em;
    margin: 0;
}

.cf-pill-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: inherit;
}

.cf-workload-heading {
    font-family: 'Rethink Sans', -apple-system, sans-serif;
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
    letter-spacing: -0.02em;
    margin: 0;
}

.cf-workload-sub {
    font-family: 'Rethink Sans', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #94a3b8;
    margin: 0;
}

/* Feature List (2-column grid on desktop, single column on small screens) */
.cf-workload-features {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 600px) and (max-width: 1023px) {
    .cf-workload-features {
        grid-template-columns: 1fr 1fr;
        gap: 24px 28px;
    }
}

@media (min-width: 1024px) {
    .cf-workload-features {
        grid-template-columns: 1fr 1fr;
        gap: 26px 22px;
        margin-top: 12px;
    }
    
    .cf-workload-features li:nth-child(3) {
        grid-column: span 2;
    }
}

/* Feature Item Interactive Glass Card */
.cf-feature-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-feature-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(180px circle at var(--card-mouse-x, 50%) var(--card-mouse-y, 50%), rgba(255, 255, 255, 0.07), transparent 75%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cf-feature-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.05);
}

.cf-feature-item:hover::before {
    opacity: 1;
}

/* Section-specific feature hover glow */
#workloads-inference .cf-feature-item:hover {
    border-color: rgba(0, 210, 255, 0.45);
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 210, 255, 0.16);
}
#workloads-inference .cf-feature-item:hover .cf-feature-head svg {
    color: #00d2ff;
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.6));
}

#workloads-training .cf-feature-item:hover {
    border-color: rgba(127, 238, 100, 0.45);
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(127, 238, 100, 0.16);
}
#workloads-training .cf-feature-item:hover .cf-feature-head svg {
    color: #7fee64;
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 8px rgba(127, 238, 100, 0.6));
}

#workloads-sandboxes .cf-feature-item:hover {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.16);
}
#workloads-sandboxes .cf-feature-item:hover .cf-feature-head svg {
    color: #c084fc;
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}

#workloads-functions .cf-feature-item:hover {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.16);
}
#workloads-functions .cf-feature-item:hover .cf-feature-head svg {
    color: #38bdf8;
    transform: scale(1.15) rotate(3deg);
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.6));
}

.cf-feature-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cf-feature-head svg {
    color: #cbd5e1;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, filter 0.25s ease;
}

.cf-feature-head h4 {
    font-family: 'Rethink Sans', -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
    letter-spacing: -0.01em;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.cf-feature-item:hover .cf-feature-head h4 {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

.cf-feature-item p {
    font-family: 'Rethink Sans', -apple-system, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
    transition: color 0.2s ease;
}

.cf-feature-item:hover p {
    color: #94a3b8;
}

/* Call to Action Button */
.cf-workload-cta {
    margin-top: 6px;
}

.cf-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 9999px;
    background: #ffffff;
    color: #040804;
    font-family: 'Rethink Sans', -apple-system, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cf-btn-pill:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25), 0 0 15px rgba(0, 210, 255, 0.2);
    color: #000000;
}

.cf-btn-arrow {
    transition: transform 0.2s ease;
}

.cf-btn-pill:hover .cf-btn-arrow {
    transform: translateX(4px);
}

.cf-workload-stage-col {
    width: 100%;
}

/* ==========================================================================
   Exact Modal.com Workload Animation CSS
   ========================================================================== */

.workload-animation{--prim-black:#040804;--neutral-1000:var(--color-v2-primary-neutral-1000);--neutral-900:var(--color-v2-primary-neutral-900);--neutral-100:var(--color-v2-primary-neutral-100);--neutral-500:var(--color-v2-primary-neutral-500);--accent-green:#7fee64;--accent-yellow:#fdfd76;--line:#ffffff0d;--white-3:#ffffff08;--white-10:#ffffff1a;--white-50:#ffffff80;--t-type:42ms;--t-enter:.85s;--t-enter-stagger:80ms;--t-hold:.2s;--t-reflow:6s;--spin-duration:5.3s;--spin-sign:1;--min-rendered-text:8px;--stage-text:max(12px, var(--min-rendered-text) / var(--stage-scale,1))}.workload-animation{font-family:var(--font-v2-mono);font-feature-settings:var(--font-v2-mono--font-feature-settings);& *,& :before,& :after{box-sizing:border-box}&.stage{aspect-ratio:699/540;background:var(--neutral-1000);border:1px solid var(--white-3);border-radius:7px;width:100%;position:relative;overflow:hidden}& .stage-inner{transform-origin:0 0;width:699px;height:540px;position:absolute;top:0;left:0}& .terminal{background:var(--neutral-900);font-size:var(--stage-text);letter-spacing:.03em;white-space:nowrap;z-index:5;border:1px solid #ffffff0d;border-radius:10px;align-items:flex-start;padding:24px 32px;line-height:20px;display:inline-flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%);box-shadow:0 1px 3px #04080480,0 2px 32px #04080499}& .terminal:after{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;background:linear-gradient(#ffffff0d,#fff0);padding:1px;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}& .terminal{cursor:pointer;transition:background-color .15s ease, border-color .15s ease, transform var(--press-duration,.16s) cubic-bezier(.2, .7, .3, 1)}& .terminal:focus-visible{outline:2px solid var(--accent-green);outline-offset:4px}& .terminal.deploy-hover{background-color:color-mix(in srgb, var(--neutral-900), var(--color-v2-primary-neutral-0) 5%);border-color:#ffffff0d}& .terminal .cmd-modal{color:var(--accent-yellow)}& .terminal .cmd-action{color:var(--color-v2-secondary-blue)}& .terminal .cursor{color:var(--white-50);opacity:0;margin-left:1px;display:none;position:absolute;top:24px;left:calc(100% - 32px)}& .terminal.typing .cursor{opacity:1;animation:1s step-end infinite workload-blink;display:inline}& .terminal-highlight{opacity:0;pointer-events:none;background:#fff;position:absolute;inset:0}& .terminal-highlight.pulse{animation:workload-highlight-pulse var(--click-duration,.56s) cubic-bezier(.4, 0, .2, 1)}& .endpoint-ring{transform-origin:50%;width:100%;height:100%;position:absolute;top:0;left:0}& .pill-entry{will-change:transform;width:0;height:0;position:absolute;top:50%;left:50%}& .pill-orbit,& .pill-radius,& .pill-spin,& .pill-counter{width:0;height:0;position:absolute;top:0;left:0}& .terminal.pressed{animation:workload-terminal-press var(--click-duration,.56s) cubic-bezier(.4, 0, .2, 1)}& .terminal.held{transform:translate(-50%, -50%) scale(var(--held-scale,.95));background-color:var(--neutral-900);transition-duration:0s, 0s, var(--press-duration,.16s);border-color:#ffffff0d;animation:none}& .pill-wrap{width:68px;height:68px;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}& .pill{background:var(--neutral-900);border:1px solid var(--line);opacity:0;width:68px;height:68px;transition:opacity var(--t-enter) ease-out, background-color .4s ease, border-color .4s ease, box-shadow .4s ease;border-radius:50px;justify-content:center;align-items:center;display:flex;box-shadow:0 2px 32px #04080499,0 1px 3px #04080480}& .pill.in{opacity:1}& .pill.ghost{background:var(--white-10);border-color:var(--white-10);box-shadow:none}& .endpoint-ring.floating .pill{transition-duration:.4s,.15s,.15s,.15s}& .pill.arriving{background:#242520;border-color:#ffffff21}& .endpoint-ring.floating .pill:not(.arriving){background-color:color-mix(in srgb, var(--neutral-900), #fff calc(var(--wave,0) * 4.5%));border-color:rgba(255, 255, 255, calc(.05 + var(--wave,0) * .04));transition:opacity .4s ease-out,background-color 80ms linear,border-color 80ms linear,box-shadow .15s}& .pill svg{width:18px;height:18px;overflow:visible}& .pill svg path{fill:var(--neutral-100)}& .modality-art{pointer-events:none;width:68px;height:72.1436px;display:none;position:absolute;top:-2.0718px;left:0}& .endpoint-ring .pill.hexagonal{box-shadow:none;border:0;position:relative;background:0 0!important}& .pill.hexagonal>svg{display:none}& .pill.hexagonal .modality-art{display:block}& .pill.hexagonal .modality-highlight{opacity:calc(var(--wave,0) * .45);transition:opacity 80ms linear}& .pill-tip{background:var(--neutral-900);border:1px solid var(--line);color:var(--neutral-100);font-size:max(10px, var(--min-rendered-text) / var(--stage-scale,1));letter-spacing:.02em;white-space:nowrap;opacity:0;pointer-events:none;border-radius:5px;padding:4px 8px;transition:opacity .15s,transform .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)translateY(4px)}& .pill-wrap:hover .pill-tip{opacity:1;transform:translate(-50%)translateY(0)}@media (prefers-reduced-motion:reduce){& .pill-entry,& .pill-orbit,& .pill-counter,& .pill,& .terminal-highlight,& .terminal{transition-duration:1ms!important;animation-duration:1ms!important}& .endpoint-ring.spinning,& .endpoint-ring.spinning .pill-spin{animation:none!important}}& .sandbox-grid{pointer-events:none;width:699px;height:540px;position:absolute;inset:0}& .sandbox-grid[hidden],& .terminal[hidden],& .endpoint-ring[hidden]{display:none}& .terminal.sandbox{justify-content:center;align-items:center;width:220px;height:70px}& .terminal.sandbox .cmd-action{color:var(--accent-green)}& [data-part=commandContent]{display:contents}& .terminal.sandbox [data-part=commandContent]{display:inline-flex;position:relative}& .sandbox-name{color:var(--accent-yellow)}& .sandbox-action{color:var(--accent-green)}& .terminal.sandbox .cursor{margin-left:1px;position:absolute;top:0;left:100%}& .terminal.training-code{--held-scale:.96;background:var(--neutral-900);letter-spacing:.2956px;text-align:left;width:231.516px;height:242.516px;color:var(--neutral-100);-webkit-user-select:text;user-select:text;border-width:.758px;border-radius:7.58px;padding:20px 22px;font-family:inherit;font-size:9.854px;line-height:18.191px;top:269.258px;left:200.758px}& .terminal.training-code.deploy-hover{background:#20221e}& .training-code pre{font:inherit;letter-spacing:inherit;white-space:pre;pointer-events:auto;cursor:pointer;-webkit-user-select:text;user-select:text;margin:0}& .flow-text{pointer-events:none;z-index:4;position:absolute;inset:0}& .flow-text[hidden]{display:none}& .flow-text span{font-family:inherit;font-size:var(--stage-text);letter-spacing:.03em;white-space:pre;color:#0000;cursor:inherit;pointer-events:auto;-webkit-user-select:text;user-select:text;line-height:1.2;position:absolute;transform:translateY(-50%)}& .flow-text span::selection{color:#0000;background:#7fee644d}& .training-char{opacity:.1;position:relative}& .training-char.typing-head:after{content:"|";color:var(--white-50);animation:1s step-end infinite workload-blink;position:absolute;top:0;left:100%}&.paused *,&.paused :after{animation-play-state:paused!important}}@keyframes workload-blink{50%{opacity:0}}@keyframes workload-highlight-pulse{0%{opacity:0}45%{opacity:.05}to{opacity:0}}@keyframes workload-terminal-press{0%,to{transform:translate(-50%,-50%)scale(1)}45%{transform:translate(-50%,-50%)scale(.95)}}

/* ==========================================================================
   Interactive Micro-Interactions & Dynamic Hover Polish
   ========================================================================== */

/* Stage Container Polish */
.workload-animation.stage {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Dynamic Cursor-Following Spotlight Overlay */
.workload-animation.stage::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.045), transparent 75%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.workload-animation.stage:hover::before {
    opacity: 1;
}

.workload-animation.stage:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 210, 255, 0.06) !important;
}

/* Cross-highlight when left feature items are hovered */
.workload-animation.stage.stage-cross-highlight {
    border-color: rgba(0, 210, 255, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 210, 255, 0.18) !important;
    transform: scale(1.008);
}
#workloads-training .workload-animation.stage.stage-cross-highlight {
    border-color: rgba(127, 238, 100, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(127, 238, 100, 0.18) !important;
}
#workloads-sandboxes .workload-animation.stage.stage-cross-highlight {
    border-color: rgba(192, 132, 252, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(192, 132, 252, 0.18) !important;
}
#workloads-functions .workload-animation.stage.stage-cross-highlight {
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 40px rgba(56, 189, 248, 0.18) !important;
}

/* Enhanced Terminal Interactive Styling */
.workload-animation .terminal {
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

.workload-animation .terminal:hover {
    background-color: #171b15 !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 210, 255, 0.18) !important;
    transform: translate(-50%, -50%) scale(1.025) !important;
}

.workload-animation .terminal:active {
    transform: translate(-50%, -50%) scale(0.97) !important;
}

/* Training Code terminal in variant 6 / functions */
.workload-animation .terminal.training-code {
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease !important;
}

.workload-animation .terminal.training-code:hover {
    background-color: #191e17 !important;
    border-color: rgba(127, 238, 100, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 22px rgba(127, 238, 100, 0.18) !important;
    transform: scale(1.02) !important;
}

.workload-animation .terminal.training-code:active {
    transform: scale(0.98) !important;
}

/* Orbiting pills in Inference */
.workload-animation .pill-wrap {
    cursor: pointer !important;
}

.workload-animation .pill-wrap:hover .pill {
    transform: scale(1.18);
    background-color: #1a221b !important;
    border-color: #00d2ff !important;
    box-shadow: 0 0 24px rgba(0, 210, 255, 0.5), 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

.workload-animation .pill-wrap:hover .pill-tip {
    opacity: 1 !important;
    transform: translate(-50%) translateY(-2px) !important;
    background: #0f172a !important;
    border-color: #00d2ff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 210, 255, 0.3) !important;
}

/* Meta Pill Icon Animation on Section Hover */
.cf-workload-pill {
    transition: transform 0.2s ease;
}
.cf-workload-section:hover .cf-workload-pill {
    transform: translateX(2px);
}
.cf-workload-section:hover .cf-pill-icon {
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.6));
}