/* =========================================
   ATS LANDING PAGE - ISOLATED STYLES
   Prefix: .ats_lp_
   ========================================= */

/* --- VARIABLES --- */
:root {
    --ats-lp-green: #76b900;
    --ats-lp-dark: #1a1a1a;
    --ats-lp-gray: #f4f4f4;
    --ats-lp-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- RESET --- */
.ats_lp_wrapper {
    all: initial;
    font-family: var(--ats-lp-font);
    color: var(--ats-lp-dark);
    line-height: 1.5;
    width: 100%;
    display: block;
    background-color: #ffffff;
}

.ats_lp_wrapper * {
    box-sizing: border-box;
}

.ats_lp_container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   HEADER
   ========================================= */
.ats_lp_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition: all 0.3s ease;
    background: transparent;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
}

.ats_lp_header.ats_lp_scrolled {
    background: rgb(255, 255, 255);
    /* backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(118, 185, 0, 0.15); */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ats_lp_nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* Logo */
.ats_lp_logo_link {
    margin-top: 8px;
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-left: -4px;
}

.ats_lp_logo_img {
    height: 100px;
    width: auto;
    display: block;
}

.ats_lp_logo_text {
    display: none !important;
}

/* Nav */
.ats_lp_nav_menu {
    display: flex;
    gap: 32px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ats_lp_nav_item {
    position: relative;
}

.ats_lp_nav_link {
    text-decoration: none;
    color: var(--ats-lp-dark);
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ats_lp_nav_link:hover {
    color: var(--ats-lp-green);
}

.ats_lp_arrow {
    font-size: 10px;
    transition: transform 0.2s;
}

.ats_lp_nav_item.active .ats_lp_arrow {
    transform: rotate(180deg);
}

/* Dropdown */
.ats_lp_dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 240px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ats_lp_nav_item:hover .ats_lp_dropdown,
.ats_lp_nav_item.active .ats_lp_dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ats_lp_dropdown a {
    display: block;
    padding: 10px 24px;
    color: var(--ats-lp-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.ats_lp_dropdown a:hover {
    background-color: var(--ats-lp-gray);
    color: var(--ats-lp-green);
}

/* Outline CTA */
.ats_lp_btn_outline {
    border: 1.5px solid var(--ats-lp-green);
    background: transparent;
    color: var(--ats-lp-green);
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s;
}

.ats_lp_btn_outline:hover {
    background: var(--ats-lp-green);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(118, 185, 0, 0.3);
}

/* Mobile Toggle */
.ats_lp_mobile_toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--ats-lp-dark);
}

/* Header Mobile */
@media (max-width: 992px) {
    .ats_lp_mobile_toggle {
        display: block;
    }

    .ats_lp_logo_img {
        margin-top: 6px;
        height: 75px;
    }

    .ats_lp_nav_menu {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        padding: 20px 0;
        gap: 0;
    }

    .ats_lp_nav_menu.active {
        display: flex;
    }

    .ats_lp_nav_item {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .ats_lp_nav_item:last-child {
        border-bottom: none;
    }

    .ats_lp_nav_link {
        padding: 15px 24px;
        width: 100%;
        justify-content: space-between;
    }

    .ats_lp_dropdown {
        position: static;
        box-shadow: none;
        background: #fcfcfc;
        border-radius: 0;
        padding: 0;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .ats_lp_nav_item.active .ats_lp_dropdown {
        display: block;
    }

    .ats_lp_nav_item:hover .ats_lp_dropdown {
        display: none;
    }

    .ats_lp_nav_item.active:hover .ats_lp_dropdown {
        display: block;
    }

    .ats_lp_dropdown a {
        padding-left: 40px;
        font-size: 14px;
    }

    .ats_lp_btn_outline {
        margin: 20px 24px;
        display: inline-block;
        width: calc(100% - 48px);
        text-align: center;
    }
}

/* =========================================
   ATS HERO SECTION - COMPLETE & FIXED
   ========================================= */

/* --- 1. KEYFRAME ANIMATIONS --- */
@keyframes atsBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes atsReveal {
    from {
        max-width: 0;
    }

    to {
        max-width: 100%;
    }
}

@keyframes atsBlinkEnd {

    0%,
    25%,
    50%,
    75% {
        border-color: var(--ats-lp-green);
    }

    85%,
    100% {
        border-color: transparent;
    }
}

@keyframes atsFlow {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes atsNodePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
    }
}

@keyframes atsCenterBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes atsGlowPulse {
    from {
        opacity: 0.3;
        fill: #76b900;
    }

    to {
        opacity: 1;
        fill: #5a8f00;
    }
}

@keyframes atsCircuitMove {
    to {
        stroke-dashoffset: -100;
    }
}


/* --- 2. MAIN LAYOUT CONTAINERS --- */
.ats_lp_hero {
    width: 100%;
    min-height: auto;
    /* Allows height to shrink to fit content */
    background: #ffffff;
    padding-top: 120px;
    padding-bottom: 10px;
    /* Reduced from 80px */
    display: flex;
    align-items: center;
}

.ats_lp_hero_grid {
    display: block;
    /* Changed from grid to block to allow slider stacking */
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    min-height: auto;
    /* Prevents layout jump during load */
}


/* --- 3. NAVIGATION TABS (THE SWITCHER) --- */
.ats_lp_eyebrow_nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* FIX: Align Nav with Left Text Column on Desktop */
@media (min-width: 993px) {
    .ats_lp_eyebrow_nav {
        max-width: 63%;
        /* Matches the 1.4fr text column width */
        width: 100%;
    }
}

.ats_nav_item {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: #888;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: color 0.3s ease;
    overflow: hidden;
    padding-left: 5px;
    /* Contains the progress bar */
}

.ats_nav_item:hover {
    color: #333;
}

.ats_nav_item.active {
    color: #1a1a1a;
    font-weight: 800;
}

.ats_nav_dot {
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--ats-lp-green);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(118, 185, 0, 0.4);
}

.ats_nav_divider {
    color: #e0e0e0;
    font-weight: 300;
    font-size: 14px;
}

/* Progress Bar (Added for JS Logic) */
.ats_nav_progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--ats-lp-green);
    width: 0%;
    /* Transition is handled via JS for precise timing */
}


/* --- 4. SLIDER SYSTEM --- */
.ats_hero_slide_container {
    position: relative;
    width: 100%;
    height: 500px;
    /* Fixed height to keep layout stable */
    margin-top: 0px;
}

.ats_hero_slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    /* The Core Grid: Text Left, Visual Right */
    gap: 40px;
    align-items: center;

    /* Transition States */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s;
    z-index: 1;
    overflow: hidden;
    /* Prevents visual spillover */
}

.ats_hero_slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}


/* --- 5. CONTENT STYLING --- */
.ats_slide_content_left {
    /* Ensures text column content behaves nicely */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ats_lead_in {
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 8px;
    color: #525252;
}

.ats_lp_headline {
    font-size: 56px;
    line-height: 1.1;
    font-weight: 900;
    color: var(--ats-lp-dark);
    margin: 0 0 1px 0;
    letter-spacing: -1.5px;
}

.ats_lp_text_heavy {
    color: #111;
}

.ats_lp_plus {
    color: #111;
    font-weight: 900;
    margin: 0 4px;
    display: inline-block;
}

.ats_lp_headline_bottom {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #111;
    margin-top: 8px;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.ats_lp_typing {
    color: var(--ats-lp-green);
    font-weight: 700;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    white-space: nowrap;
    border-right: 3px solid var(--ats-lp-green);
    max-width: 0;
    animation: atsReveal 2.5s steps(30, end) forwards, atsBlinkEnd 3.5s steps(4) forwards;
    animation-delay: 1s;
}

.ats_lp_subhead {
    font-size: 17.5px;
    line-height: 1.5;
    color: #555;
    font-weight: 400;
    max-width: 580px;
    margin-bottom: 40px;
    margin-top: 10px;
}

.ats_lp_sub_highlight {
    font-weight: 600;
    color: #222;
}


/* --- 6. BUTTONS & CTA --- */
.ats_lp_cta_wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
}

.ats_lp_btn_primary {
    background-color: var(--ats-lp-green);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 18px 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(118, 185, 0, 0.3);
    position: relative;
    z-index: 2;
    display: inline-block;
}

.ats_lp_btn_primary:hover {
    box-shadow: 0 10px 25px rgba(118, 185, 0, 0.4);
    animation: atsBounce 0.6s ease infinite;
}

.ats_lp_ghost_text {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 250px;
    margin-top: 10px;
    font-size: 13px;
    color: #888;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.ats_lp_btn_primary:hover+.ats_lp_ghost_text {
    opacity: 1;
    transform: translateY(15px);
}

.ats_lp_btn_secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #444;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.2s;
    padding: 10px;
}

.ats_lp_btn_secondary:hover {
    color: var(--ats-lp-green);
}

.ats_lp_icon_wa {
    width: 24px;
    height: 24px;
    fill: #25D366;
    display: block;
}


/* --- 7. VISUALS & SVG (FIXED) --- */
.ats_slide_visual_right {
    width: 100%;
    height: 100%;
    min-width: 0;
    /* Important: Allows flex/grid child to shrink below content size */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* FIX: Cuts off any overflowing graphics */
    margin-top: -50px;
}

.ats_lp_system_svg {
    /* FIX: Fluid Width - Removed fixed pixel width */
    width: 100%;
    height: auto;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    overflow: visible;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.05));
}

/* SVG Internal Classes */
.ats_lp_connection_flow {
    stroke-dasharray: 20, 150;
    stroke-dashoffset: 170;
    animation: atsFlow 4s linear infinite;
    opacity: 1;
    stroke-width: 3px;
}

.ats_lp_node_anim {
    transform-box: fill-box;
    transform-origin: center center;
    animation: atsNodePulse 4s ease-in-out infinite;
}

.ats_lp_node_people {
    animation-delay: 0s;
}

.ats_lp_node_process {
    animation-delay: 1.5s;
}

.ats_lp_node_tech {
    animation-delay: 3s;
}

.ats_lp_node_center {
    transform-box: fill-box;
    transform-origin: center center;
    animation: atsCenterBreath 4s ease-in-out infinite;
    animation-delay: 2s;
}

.ats_lp_center_pulse rect {
    animation: atsGlowPulse 2s ease-in-out infinite alternate;
}

.ats_lp_center_pulse rect:nth-child(1) {
    animation-delay: 0.0s;
}

.ats_lp_center_pulse rect:nth-child(2) {
    animation-delay: 0.2s;
}

.ats_lp_center_pulse rect:nth-child(3) {
    animation-delay: 0.4s;
}

.ats_lp_center_pulse rect:nth-child(4) {
    animation-delay: 0.6s;
}

.ats_lp_tech_circuit {
    stroke-dasharray: 4, 6;
    animation: atsCircuitMove 8s linear infinite;
}


/* --- 8. MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .ats_lp_hero {
        padding-top: 100px;
        min-height: auto;
        text-align: center;
    }

    .ats_nav_item {
        font-size: 13px;
    }

    .ats_lp_hero_grid {
        height: auto;
        min-height: auto;
    }

    .ats_hero_slide_container {
        height: auto;
        margin-top: -20px;
    }

    /* Reset Grid for Mobile Stack */
    .ats_hero_slide {
        position: relative;
        /* Stack normally */
        grid-template-columns: 1fr;
        display: none;
        /* Hide inactive slides to prevent scrollbar */
        padding-bottom: 0px;
        text-align: center;
    }

    .ats_hero_slide.active {
        display: flex;
        flex-direction: column-reverse;
        /* Visual on Top or Bottom? Reversing puts visual up/down based on HTML order */
    }

    /* Center Nav */
    .ats_lp_eyebrow_nav {
        max-width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Typography Adjustments */
    .ats_lp_headline {
        font-size: 25px;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

    .ats_lp_headline_bottom {
        font-size: 22px;
        margin-top: 0px;
    }

    .ats_lp_subhead {
        margin: 10px auto 30px auto;
        font-size: 16px;
    }

    /* CTA Mobile */
    .ats_lp_cta_wrapper {
        flex-direction: column;
        justify-content: center;
        gap: 24px;
    }

    .ats_lp_ghost_text {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 10px;
    }

    /* Content Alignment */
    .ats_slide_content_left {
        align-items: center;
    }

    .ats_slide_visual_right {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .ats_lp_system_svg {
        padding: 0 20px;
    }
}


/* =========================================
   SLIDE 2: FINANCE CONSOLE (FIXED WRAPPERS)
   ========================================= */

/* 1. Background Paper (Fade In) */
.ats-animate-s2 .ats_s2_anim_bg {
    opacity: 0;
    transform: translateY(-10px);
    /* Relative move only */
    animation: atsS2BgIn 1s ease-out forwards;
    animation-delay: 0.1s;
}

.ats-animate-s2 .ats_s2_anim_content {
    opacity: 0;
    animation: atsS2FadeIn 0.8s ease-out forwards;
    animation-delay: 0.5s;
}

/* 2. Main Console (Scale Up) */
.ats-animate-s2 .ats_s2_anim_console {
    opacity: 0;
    /* Scale from center of the group */
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.96);
    animation: atsS2ConsoleUp 1s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    animation-delay: 0.2s;
}

/* 3. Variance Card (Float Up) */
.ats-animate-s2 .ats_s2_anim_variance {
    opacity: 0;
    transform: translateY(15px);
    /* Animation move only */
    animation: atsS2PopUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.4s;
}

/* 4. Ticks (Pop Up) */
.ats-animate-s2 .ats_s2_anim_tick {
    opacity: 0;
    transform: translateY(5px);
    animation: atsS2TickPop 0.5s ease-out forwards;
    animation-delay: var(--d);
}

/* 5. Recon Widget */
.ats-animate-s2 .ats_s2_anim_recon_bar {
    width: 0;
    animation: atsS2ReconGrow 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: 1.0s;
}

.ats-animate-s2 .ats_s2_anim_check {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: atsS2CheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.2s;
}

/* 6. Chart Elements */
.ats-animate-s2 .ats_s2_anim_band {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: atsS2FadeIn 1s ease-out forwards 1.2s,
        atsS2BandBreath 6s ease-in-out infinite 3s;
}

.ats-animate-s2 .ats_s2_anim_line {
    opacity: 1;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: atsS2LineDraw 1.8s ease-out forwards;
    animation-delay: 1.0s;
}

.ats-animate-s2 .ats_s2_anim_dot {
    transform: scale(0);
    transform-box: fill-box;
    /* Key for SVG scaling */
    transform-origin: center;
    animation: atsS2DotPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 2.5s;
}

/* 7. Light Sweep */
.ats-animate-s2 .ats_s2_light_sweep {
    transform: translateX(-120%) skewX(-20deg);
    animation: atsS2Sweep 1.5s ease-in-out forwards;
    animation-delay: 2.0s;
}

/* --- KEYFRAMES --- */
@keyframes atsS2BgIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes atsS2FadeIn {
    to {
        opacity: 1;
    }
}

@keyframes atsS2ConsoleUp {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

@keyframes atsS2ReconGrow {
    to {
        width: 100px;
    }
}

@keyframes atsS2CheckPop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes atsS2LineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes atsS2DotPop {
    to {
        transform: scale(1);
    }
}

@keyframes atsS2BandBreath {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 1;
    }

    50% {
        transform: scaleY(0.9);
        opacity: 0.8;
    }
}

@keyframes atsS2Sweep {
    0% {
        opacity: 0;
        transform: translateX(-120%) skewX(-20deg);
    }

    10% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: translateX(120%) skewX(-20deg);
    }
}

/* =========================================
   SLIDE 3: LIQUID GLASS ERP WHEEL (FINAL)
   ========================================= */

/* 1. Parent Container Safety */
#visual_2.ats_slide_visual_right {
    overflow: visible !important;
    position: relative;
    width: 100%;
    /* CRITICAL: Ensures the wheel doesn't collapse on top of other text */
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ats_erp_wheel_container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Desktop Radius */
    --wheel-radius: 150px;

    font-family: 'Inter', sans-serif;
    box-sizing: border-box;

    /* Prevent clipping */
    overflow: visible;
}

/* 1. CENTER CORE */
.ats_erp_center {
    width: 130px;
    height: 130px;
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    transform: scale(0.5);
}

.ats_core_glass {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #f8f9fa;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.ats_core_content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #1a1a1a;
}

.ats_core_label {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    display: block;
    color: #333;
}

.ats_core_status {
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 6px;
    transition: all 0.3s ease;
}

/* 2. THE TILES */
.ats_erp_ring {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ats_erp_tile {
    position: absolute;
    top: 50%;
    left: 50%;

    /* DESKTOP DIMENSIONS */
    width: 110px;
    height: 75px;
    /* Centering Offset (Half of width/height) */
    margin-top: -37.5px;
    margin-left: -55px;

    pointer-events: auto;

    --angle: calc(var(--i) * 45deg);

    /* Colors */
    --base-color: hsla(var(--hue), var(--sat), var(--lig), 1);
    --glass-bg: hsla(var(--hue), var(--sat), var(--lig), 0.12);
    --glass-border: hsla(var(--hue), var(--sat), var(--lig), 0.3);

    /* Animation Start */
    opacity: 0;
    transform: rotate(var(--angle)) translate(var(--wheel-radius)) rotate(calc(var(--angle) * -1)) scale(0.5);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.ats_tile_body {
    width: 100%;
    height: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--base-color);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.ats_tile_icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    transition: all 0.3s;
}

.ats_tile_text {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    transition: color 0.3s;
}

/* --- ANIMATION REVEAL --- */
.ats-erp-run .ats_erp_center {
    opacity: 1;
    transform: scale(1);
}

.ats-erp-run .ats_erp_tile {
    opacity: 1;
    transform: rotate(var(--angle)) translate(var(--wheel-radius)) rotate(calc(var(--angle) * -1)) scale(1);
}

/* Delays */
.ats-erp-run .ats_erp_tile[style*="--i:0"] {
    transition-delay: 0.1s;
}

.ats-erp-run .ats_erp_tile[style*="--i:1"] {
    transition-delay: 0.2s;
}

.ats-erp-run .ats_erp_tile[style*="--i:2"] {
    transition-delay: 0.3s;
}

.ats-erp-run .ats_erp_tile[style*="--i:3"] {
    transition-delay: 0.4s;
}

.ats-erp-run .ats_erp_tile[style*="--i:4"] {
    transition-delay: 0.5s;
}

.ats-erp-run .ats_erp_tile[style*="--i:5"] {
    transition-delay: 0.6s;
}

.ats-erp-run .ats_erp_tile[style*="--i:6"] {
    transition-delay: 0.7s;
}

.ats-erp-run .ats_erp_tile[style*="--i:7"] {
    transition-delay: 0.8s;
}

/* HOVER STATE */
.ats_erp_tile:hover,
.ats_erp_tile.is-active {
    z-index: 100;
}

.ats_erp_tile:hover .ats_tile_body,
.ats_erp_tile.is-active .ats_tile_body {
    background: linear-gradient(135deg, var(--base-color), hsla(var(--hue), var(--sat), 25%, 1));
    border-color: transparent;
    color: white;
    transform: scale(1.15) translateY(-5px);
    box-shadow: 0 15px 30px hsla(var(--hue), var(--sat), var(--lig), 0.4);
}

.ats_erp_wheel_container.has-active .ats_core_status {
    color: #76b900;
    transform: scale(1.1);
}

/* =========================================
   --- MOBILE OPTIMIZATION (CRITICAL FIXES) ---
   ========================================= */

@media (max-width: 600px) {

    /* 1. Shrink the Radius so it fits on screen */
    .ats_erp_wheel_container {
        --wheel-radius: 105px;
        /* Reduced from 150px/125px */
        padding: 10px;
    }

    /* 2. Shrink the Core */
    .ats_erp_center {
        width: 90px;
        height: 90px;
    }

    .ats_core_label {
        font-size: 13px;
    }

    .ats_core_status {
        font-size: 8px;
    }

    /* 3. Shrink the Tiles significantly */
    .ats_erp_tile {
        width: 80px;
        /* Smaller width */
        height: 55px;
        /* Smaller height */

        /* RE-CENTERING: These must be exactly half of width/height */
        margin-top: -27.5px;
        margin-left: -40px;
    }

    .ats_tile_body {
        border-radius: 8px;
        gap: 2px;
    }

    /* 4. Shrink Text & Icons inside tiles */
    .ats_tile_text {
        font-size: 9px;
        letter-spacing: -0.2px;
    }

    .ats_tile_icon svg {
        width: 18px;
        height: 18px;
    }

    /* 5. Reduce Hover scale on mobile to prevent overflow */
    .ats_erp_tile:hover .ats_tile_body,
    .ats_erp_tile.is-active .ats_tile_body {
        transform: scale(1.05);
        /* Subtle pop instead of huge pop */
    }
}

/* =========================================
   SECTION: EXECUTIVE PAIN GRID (TILES)
   ========================================= */

#ats_pain_section.ats_pain_section {
    position: relative;
    width: 100%;
    /* Auto height so it fits content naturally, min-height handles screen fill */
    min-height: 100vh;
    background-color: #f4f5f7;
    /* Very subtle corporate grey */
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    padding: 40px 0;
    box-sizing: border-box;
}

/* CONTAINER */
.ats_pain_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    gap: 60px;
    align-items: stretch;
    /* Match heights */
}

/* --- LEFT COLUMN: HEADER CARD --- */
.ats_pain_header {
    width: 35%;
    flex-shrink: 0;
    position: sticky;
    top: 150px;
    height: fit-content;

    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.ats_pain_header_bg {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.ats_pain_header_bg img {
    width: auto;
    height: 100%;
    object-fit: cover;
    filter: grayscale(10%);
    /* Corporate feel */
    opacity: 0.5;
}

.ats_header_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.ats_pain_header_content {
    padding: 40px 30px;
    background: white;
    position: relative;
    margin-top: -40px;
    /* Overlap image */
    border-radius: 20px 20px 0 0;
}

.ats_pain_badge {
    display: inline-block;
    padding: 6px 12px;
    background: #f0f0f0;
    color: #555;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 20px;
}

.ats_pain_title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #222;
}

.ats_pain_highlight {
    color: #111;
    text-decoration: underline;
    text-decoration-color: #76b900;
    text-decoration-thickness: 4px;
    text-underline-offset: 4px;
}

.ats_pain_line {
    width: 40px;
    height: 3px;
    background: #ddd;
    margin-bottom: 20px;
}

.ats_pain_subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

/* --- RIGHT COLUMN: TILE GRID --- */
.ats_pain_grid {
    width: 65%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2 Column Grid */
    gap: 20px;
    align-content: start;
}

/* THE TILE CARD */
.ats_pain_card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    height: 240px;
    /* Fixed tile height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    border: 1px solid #f0f0f0;
    transition: all 0.4s ease;
}

/* Make the last card span full width */
.ats_pain_card.ats_card_wide {
    grid-column: span 2;
}

/* Background Image (Hidden by default) */
.ats_card_bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transform: scale(1.1);
    transition: all 0.5s ease;
    z-index: 0;
}

.ats_card_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 1;
}

/* Card Content */
.ats_card_content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ats_card_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ats_card_num {
    font-size: 14px;
    font-weight: 700;
    color: #ddd;
    transition: color 0.3s;
}

.ats_card_icon {
    width: 32px;
    height: 32px;
    color: #ffffff;
    transition: all 0.3s;
}

.ats_card_icon svg {
    width: 100%;
    height: 100%;
}

.ats_card_heading {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
    transition: color 0.3s;
}

.ats_card_reveal {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.ats_card_reveal p {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding-top: 10px;
}

/* --- HOVER EFFECTS --- */
.ats_pain_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.ats_pain_card:hover .ats_card_bg {
    opacity: 1;
    transform: scale(1);
}

.ats_pain_card:hover .ats_card_overlay {
    opacity: 1;
}

.ats_pain_card:hover .ats_card_heading {
    color: #fff;
}

.ats_pain_card:hover .ats_card_num {
    color: #76b900;
}

/* Brand Green */
.ats_pain_card:hover .ats_card_icon {
    color: #fff;
}

.ats_pain_card:hover .ats_card_reveal {
    height: auto;
    opacity: 1;
    transform: translateY(0);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .ats_pain_container {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }

    .ats_pain_header {
        width: 100%;
        position: relative;
        top: 0;
    }

    .ats_pain_grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .ats_pain_card.ats_card_wide {
        grid-column: span 1;
    }

    .ats_card_reveal {
        display: none;
    }

    /* On mobile, maybe keep simple or tap to expand */
    .ats_pain_card:active .ats_card_reveal {
        display: block;
        opacity: 1;
        height: auto;
    }
}


/* =========================================
   SECTION: SCROLLY TRACK (UNIFIED SYSTEM)
   ========================================= */

/* 1. Track Container */
.ats_scrolly_track {
    position: relative;
    width: 100%;
    height: 350vh;
    /* Long scroll duration */
    background-color: #ffffff;
    transition: background-color 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
}

/* Background Texture */
.ats_scrolly_track::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Sticky Chamber */
.ats_scrolly_inner {
    position: sticky;
    top: 80px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.ats_scrolly_container {
    width: 100%;
    max-width: 1200px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* 2. Glass Header */
.ats_scrolly_header_wrapper {
    margin-top: 40px;
    flex-shrink: 0;
    margin-bottom: clamp(20px, 4vh, 40px);
    text-align: center;
    display: flex;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ats_scrolly_header_content {
    padding: 20px 40px;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid transparent;
}

.ats_scrolly_header_wrapper.is-stuck .ats_scrolly_header_content {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.ats_scrolly_subtitle {
    font-size: 26px;
    color: #101010;
    font-weight: bolder;
    line-height: 1.5;
    margin: 0;
}

/* 3. Body Layout */
.ats_scrolly_body {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    flex-grow: 1;
    position: relative;
}

/* 4. Left Column: Focus Image Rail */
.ats_scrolly_nav_col {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding-left: 40px;
}

.ats_focus_nav_rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 280px;
}

.ats_focus_item {
    cursor: pointer;
    position: relative;
    border-left: 2px solid #e0e0e0;
    padding-left: 20px;
    transition: border-color 0.4s ease;
}

.ats_focus_label {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #999;
    transition: color 0.3s ease;
    margin-bottom: 4px;
}

/* Image Card Expansion Logic */
.ats_focus_image_card {
    height: 0;
    opacity: 0;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.ats_focus_bg {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.ats_focus_img_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
}

.ats_focus_icon_float {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.ats_focus_icon_float svg {
    width: 20px;
    height: 20px;
}

/* Active States for Nav */
.ats_focus_item.active {
    border-left-color: #333;
}

.ats_focus_item.active .ats_focus_label {
    color: #1a1a1a;
    font-size: 12px;
    opacity: 0.7;
}

.ats_focus_item.active .ats_focus_image_card {
    height: 180px;
    opacity: 1;
    transform: translateY(0);
}

.ats_focus_item:not(.active):hover .ats_focus_label {
    color: #555;
    padding-left: 5px;
}

/* 5. Mobile Tab Bar (Hidden on Desktop) */
.ats_mobile_tab_bar {
    display: none;
    /* FORCE HIDDEN ON DESKTOP */
}

/* 6. Right Column: Card Stack */
.ats_scrolly_card_stack {
    width: 60%;
    position: relative;
    min-height: 440px;
}

.ats_scrolly_card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
    will-change: transform, opacity;
}

.ats_scrolly_card.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    z-index: 10;
}

/* Glass Card Styling */
.ats_glass_card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 36px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

.ats_glass_card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    opacity: 0.6;
}

.ats_card_highlight_bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    opacity: 0.8;
}

.ats_card_header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ats_card_icon_box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg);
    color: var(--icon-color);
}

.ats_card_icon_box svg {
    width: 26px;
    height: 26px;
}

.ats_card_title_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ats_card_label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ats_card_micro_line {
    width: 20px;
    height: 2px;
    background: #e0e0e0;
    border-radius: 2px;
}

.ats_card_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ats_card_list li {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: #444;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: background 0.3s;
}

.ats_card_list li:hover {
    background: rgba(255, 255, 255, 0.9);
}

.ats_tick {
    font-weight: 800;
    font-size: 14px;
    margin-top: 2px;
}

/* 7. RESPONSIVE / MOBILE STYLES */
@media (max-width: 992px) {
    .ats_scrolly_header_wrapper {
        margin-top: 50px;
    }

    .ats_scrolly_track {
        height: 400vh;
    }

    .ats_scrolly_inner {
        height: 100dvh;
        align-items: flex-start;
        padding-top: 0px;
    }

    .ats_scrolly_container {
        padding: 0 10px;
        height: 80%;
        justify-content: flex-start;
    }

    .ats_scrolly_body {
        flex-direction: column;
        width: 100%;
        height: auto;
        flex-grow: 0;
    }

    /* Hide Desktop Rail */
    .ats_scrolly_nav_col {
        display: none !important;
    }

    /* Show Mobile Tabs */
    .ats_mobile_tab_bar {
        display: flex !important;
        justify-content: space-between;
        background: #f5f5f5;
        padding: 5px;
        border-radius: 100px;
        margin-bottom: 10px;
        position: sticky;
        top: 50px;
        z-index: 30;
        width: 100%;
        max-width: 400px;
        align-self: center;
    }

    .ats_mob_tab {
        flex: 1;
        appearance: none;
        border: none;
        background: transparent;
        padding: 10px 0;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        color: #666;
        cursor: pointer;
        transition: all 0.3s;
    }

    .ats_mob_tab.active {
        background: white;
        color: #1a1a1a;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* Mobile Header */
    .ats_scrolly_header_wrapper {
        margin-bottom: 20px;
        width: 100%;
        z-index: 20;
    }

    .ats_scrolly_header_content {
        padding: 15px 20px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 12px;
    }

    .ats_scrolly_subtitle {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Mobile Cards */
    .ats_scrolly_card_stack {
        width: 100%;
        height: auto;
        min-height: 380px;
        display: flex;
        justify-content: center;
    }

    .ats_scrolly_card {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateY(60px) scale(0.9);
        opacity: 0;
    }

    .ats_scrolly_card.active {
        opacity: 1;
        transform: translateY(0) scale(1);
        z-index: 10;
    }

    .ats_glass_card {
        padding: 24px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    .ats_card_icon_box {
        width: 40px;
        height: 40px;
    }

    .ats_card_icon_box svg {
        width: 20px;
        height: 20px;
    }

    .ats_card_label {
        font-size: 12px;
    }

    .ats_card_list li {
        font-size: 14px;
        margin-bottom: 10px;
    }
}


/* =========================================
   STICKY MORPHING MARQUEE
   ========================================= */
.ats_sticky_marquee {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eaeaea;
    z-index: 999;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease;
    pointer-events: none;
}

.ats_sticky_marquee.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.ats_marquee_track {
    display: flex;
    animation: atsMarqueeScroll 35s linear infinite;
}

.ats_sticky_marquee:hover .ats_marquee_track {
    animation-play-state: paused;
}

.ats_marquee_content {
    display: flex;
    align-items: center;
    padding-right: 50px;
}

.ats_mq_link {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    margin: 0 15px;
    transition: color 0.2s;
}

.ats_mq_link:hover {
    color: var(--ats-lp-green);
}

.ats_mq_text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin: 0 10px;
}

.ats_mq_dot {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--ats-lp-green);
    border-radius: 50%;
}

.ats_mq_dot_small {
    display: block;
    width: 4px;
    height: 4px;
    background: #ccc;
    border-radius: 50%;
}

.ats_mq_divider {
    font-size: 14px;
    color: #ddd;
    margin: 0 30px;
    font-weight: 300;
}

@keyframes atsMarqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .ats_sticky_marquee {
        height: 40px;
    }

    .ats_mq_link,
    .ats_mq_text {
        font-size: 11px;
        margin: 0 8px;
    }

    .ats_mq_divider {
        margin: 0 15px;
    }
}

/* =========================================
   SECTION: FINANCE ON TRACK (CINEMATIC)
   ========================================= */

/* Scoped Container */
.ats_fin_section {
    position: relative;
    padding: 50px 0;
    background-color: #fcfcfc;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    overflow: hidden;
}

/* Background Texture */
.ats_fin_bg_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 1) 0%, rgba(240, 242, 245, 0.4) 100%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    pointer-events: none;
}

.ats_fin_container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 60px;
    align-items: center;
    z-index: 1;
}

/* --- LEFT COLUMN: NARRATIVE --- */
.ats_fin_narrative {
    width: 40%;
    flex-shrink: 0;
}

.ats_fin_heading {
    font-size: 42px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--ats-lp-green, #76b900);
    margin-bottom: 24px;
    letter-spacing: -1.5px;
}

.ats_fin_desc {
    font-size: 16px;
    line-height: 1.6;
    color: #444;
    margin-bottom: 32px;
    max-width: 95%;
}

/* GLASS POLICY CARD */
.ats_fin_policy_card {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.ats_fin_policy_edge {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ats-lp-green, #76b900);
}

.ats_fin_policy_card p {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

/* CTA BUTTON */
.ats_fin_cta_wrapper {
    margin-top: 10px;
}

.ats_fin_btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #ff9100;
    color: #fff;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.ats_fin_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background-color: #00da0b;
}

.ats_fin_btn svg {
    width: 18px;
    height: 18px;
}

/* --- RIGHT COLUMN: CINEMATIC GRID --- */
.ats_fin_grid_col {
    flex-grow: 1;
}

.ats_fin_grid_layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* THE CINEMATIC IMAGE CARD */
.ats_fin_card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: default;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Push text to bottom */
    background: #000;
    /* Fallback */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. Background Image */
.ats_fin_card_bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    z-index: 0;
    opacity: 0.9;
}

/* 2. Gradient Overlay (Professional Darkening) */
.ats_fin_card_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
    transition: opacity 0.4s ease;
    z-index: 1;
    opacity: 0.85;
}

/* 3. Content Wrapper */
.ats_fin_content_wrap {
    position: relative;
    z-index: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Icon */
.ats_fin_icon_frame {
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.9);
    /* White Icon */
    transition: color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
}

.ats_fin_icon_frame svg {
    width: 28px;
    height: 28px;
}

/* Title */
.ats_fin_card_title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    /* White Text */
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* --- HOVER EFFECTS --- */
.ats_fin_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

/* Zoom Image */
.ats_fin_card:hover .ats_fin_card_bg {
    transform: scale(1.1);
}

/* Darken Overlay for contrast */
.ats_fin_card:hover .ats_fin_card_overlay {
    opacity: 0.95;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
}

/* Highlight Icon */
.ats_fin_card:hover .ats_fin_icon_frame {
    color: var(--ats-lp-green, #76b900);
    transform: scale(1.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
    .ats_fin_section {
        padding: 20px 0;
    }

    .ats_fin_container {
        flex-direction: column;
        gap: 40px;
        padding: 0 20px;
    }

    .ats_fin_narrative {
        width: 100%;
    }

    .ats_fin_heading {
        font-size: 32px;
    }

    .ats_fin_grid_col {
        width: 100%;
    }

    .ats_fin_card {
        min-height: 120px;
    }

    .ats_fin_card_title {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    .ats_fin_grid_layout {
        grid-template-columns: 1fr;
    }

    .ats_fin_card {
        min-height: auto;
        flex-direction: row;
        align-items: center;
        padding: 16px;
        background: #1a1a1a;
        /* Dark background for mobile if image fails */
    }

    .ats_fin_content_wrap {
        flex-direction: row;
        align-items: center;
        padding: 0;
        width: 100%;
        gap: 16px;
    }

    .ats_fin_card_bg {
        opacity: 0.4;
    }

    /* Dim image more on mobile */
    .ats_fin_icon_frame {
        margin-bottom: 0;
    }

    .ats_fin_card_title {
        font-size: 14px;
    }
}



/* =========================================
   SECTION: ERP ON TRACK (High Impact Grid)
   ========================================= */

:root {
    --ats-lp-green: #76b900;
    /* Standardizing brand green */
}

.ats_erp_section {
    position: relative;
    padding: 30px 0;
    /* Reduced padding for single-screen fit */
    background-color: #f4f6f8;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    overflow: hidden;
    min-height: 100vh;
    /* Ensures it feels like a full screen */
    display: flex;
    align-items: center;
}

.ats_erp_bg_depth {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8) 0%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

.ats_erp_container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* --- HEADER --- */
.ats_erp_header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 20px auto;
}

.ats_erp_title {
    font-size: 38px;
    font-weight: 800;
    color: var(--ats-lp-green);
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.ats_erp_subtitle {
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

/* --- 2x2 GRID LAYOUT --- */
.ats_erp_grid {
    display: grid;
    /* Changed from 2 to 3 to fit all process steps in one line */
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ats_erp_bottom_cta {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    /* Subtle separator line */

    display: flex;
    justify-content: space-between;
    /* Pushes Text left, Button right */
    align-items: center;
}

.ats_cta_text_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ats_cta_main {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.ats_cta_sub {
    font-size: 16px;
    color: #666;
    font-weight: 400;
}

/* --- MOBILE RESPONSIVE UPDATE --- */
@media (max-width: 900px) {

    /* Stack grid on tablet/mobile */
    .ats_erp_grid {
        grid-template-columns: 1fr;
    }

    /* Stack the bottom CTA bar */
    .ats_erp_bottom_cta {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}

.ats_erp_card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    /* Split image left, text right */
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ats_erp_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Photo Styling */
.ats_erp_photo {
    width: 35%;
    background-size: cover;
    background-position: center;
    filter: grayscale(0%);
    opacity: 1;
    transition: 0.4s ease;
}

.ats_erp_card:hover .ats_erp_photo {
    filter: grayscale(0%);
    opacity: 1;
}

.ats_erp_content {
    padding: 24px;
    width: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- CARD INTERNALS --- */
.ats_erp_card_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ats_erp_num {
    font-size: 32px;
    font-weight: 800;
    color: #e5e7eb;
}

.ats_erp_icon_frame {
    color: #4b5563;
    transition: 0.3s ease;
}

.ats_erp_icon_frame svg {
    width: 22px;
    height: 22px;
}

.ats_erp_card:hover .ats_erp_icon_frame {
    color: var(--ats-lp-green);
}

.ats_erp_card_title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
}

.ats_erp_card_desc,
.ats_erp_list li {
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0;
}

.ats_erp_list {
    list-style: none;
    padding: 0;
    margin-top: 8px;
}

.ats_erp_list li {
    padding-left: 15px;
    position: relative;
    margin-bottom: 4px;
}

.ats_erp_list li::before {
    content: "•";
    color: var(--ats-lp-green);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- CTA TILE (THE 4TH CARD) --- */
.cta_tile {
    background: #111827;
    /* Dark high-contrast */
    border: none;
    text-align: center;
    justify-content: center;
    padding: 30px;
    flex-direction: column;
}

.cta_tile .ats_erp_anchor {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.cta_tile .ats_highlight {
    color: var(--ats-lp-green);
    display: block;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
    opacity: 0.9;
}

.ats_erp_action_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ats-lp-green);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 8px;
    transition: 0.3s ease;
}

.ats_erp_action_btn:hover {
    background: #fff;
    color: var(--ats-lp-green);
    transform: scale(1.05);
}

.ats_erp_action_btn svg {
    width: 18px;
    height: 18px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 850px) {
    .ats_erp_grid {
        grid-template-columns: 1fr;
    }

    .ats_erp_section {
        padding: 10px 0;
        overflow-y: auto;
        height: auto;
    }
}


/* =========================================
   SECTION: OUTCOME LAYER (Enhanced Flow)
   ========================================= */

.ats_outcome_section {
    position: relative;
    padding: 50px 0 40px 0;
    /* Reduced Top Padding from 140px */
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    overflow: hidden;
}

/* --- BACKGROUND IMAGE LAYER --- */
.ats_outcome_bg {
    position: absolute;
    inset: 0;
    /* Abstract flow image */
    background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    opacity: 0.03;
    /* Extremely faint texture */
    filter: grayscale(100%);
    pointer-events: none;
    z-index: 0;
}

.ats_outcome_container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
    /* Sits above bg */
}

/* --- HEADER --- */
.ats_outcome_header {
    text-align: center;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.ats_outcome_header.visible {
    opacity: 1;
    transform: translateY(0);
}

.ats_outcome_title {
    font-size: 42px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    letter-spacing: -1.5px;
}

.ats_outcome_subline {
    font-size: 18px;
    line-height: 1.5;
    color: #555;
    font-weight: 500;
}

.ats_highlight_green {
    color: var(--ats-lp-green, #76b900);
}

/* --- TIMELINE RAIL --- */
.ats_outcome_timeline {
    position: relative;
    padding-left: 40px;
    margin-bottom: 50px;
}

/* The faint guide rail */
.ats_outcome_rail_line {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 9px;
    width: 3px;
    /* Slightly thicker */
    background: #e5e5e5;
    border-radius: 2px;
    overflow: hidden;
}

/* The active fill line (animated by scroll JS) */
.ats_outcome_rail_fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* JS grows this */
    background: var(--ats-lp-green, #76b900);
    transition: height 0.1s linear;
    /* Fast response */
    box-shadow: 0 0 10px rgba(118, 185, 0, 0.5);
    /* Glow */
}

/* --- LIST ITEMS --- */
.ats_outcome_list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    /* Increased gap for better rhythm */
}

.ats_outcome_item {
    position: relative;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    filter: blur(2px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Active State */
.ats_outcome_item.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* The Node */
.ats_outcome_node {
    position: absolute;
    left: -35px;
    /* Aligned with rail */
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d1d5db;
    z-index: 2;
    transition: all 0.4s ease;
}

/* Active Node */
.ats_outcome_item.visible .ats_outcome_node {
    border-color: var(--ats-lp-green, #76b900);
    background: var(--ats-lp-green, #76b900);
    box-shadow: 0 0 0 5px rgba(118, 185, 0, 0.15);
    /* Soft Pulse */
    transform: scale(1.2);
}

.ats_outcome_text {
    font-size: 20px;
    color: #333;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.ats_outcome_text strong {
    font-weight: 600;
    color: #111;
}

/* --- FOOTER --- */
.ats_outcome_footer {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

.ats_outcome_footer.visible {
    opacity: 1;
    transform: translateY(0);
}

.ats_outcome_closer {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.ats_outcome_faint {
    color: #888;
    font-weight: 500;
    font-size: 24px;
}

.ats_outcome_final_note {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9ca3af;
    font-weight: 700;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .ats_outcome_section {
        padding: 10px 0 10px 0;
    }

    .ats_outcome_header {
        margin-bottom: 50px;
        text-align: left;
    }

    .ats_outcome_title {
        font-size: 32px;
    }

    .ats_outcome_timeline {
        padding-left: 24px;
    }

    .ats_outcome_rail_line {
        left: 0;
    }

    .ats_outcome_node {
        left: -29px;
    }

    .ats_outcome_text {
        font-size: 18px;
    }

    .ats_outcome_closer {
        font-size: 22px;
    }

    .ats_outcome_faint {
        font-size: 18px;
    }
}


/* =========================================
   SECTION: TRUST (Compact & Visual)
   ========================================= */

.ats_trust_section {
    position: relative;
    padding: 60px 0 50px 0;
    /* Reduced Top Padding */
    background-color: #f9f9f9;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    overflow: hidden;
}

/* Optional Background Blob for Depth */
.ats_trust_bg_blob {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(118, 185, 0, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.ats_trust_container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* --- HEADER --- */
.ats_trust_header {
    margin-bottom: 60px;
    text-align: center;
}

.ats_trust_title {
    font-size: 38px;
    font-weight: 400;
    color: #666;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0;
}

.ats_trust_highlight {
    color: #1a1a1a;
    font-weight: 700;
}

/* --- SPLIT GRID LAYOUT --- */
.ats_trust_grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* Keeps compact left/right split */
    gap: 80px;
    margin-bottom: 60px;
    align-items: start;
}

/* LABELS */
.ats_trust_label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ats_label_dot {
    width: 6px;
    height: 6px;
    background: var(--ats-lp-green, #76b900);
    border-radius: 50%;
}

/* --- LEFT: LIST WITH ICONS --- */
.ats_trust_list {
    display: flex;
    flex-direction: column;
    /* Removed top border for cleaner look */
    gap: 8px;
    /* Slight gap between rows */
}

.ats_trust_row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* Interactive Hover Effect */
.ats_trust_row:hover {
    background: #ffffff;
    border-color: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transform: translateX(5px);
    /* Subtle slide */
}

.ats_trust_icon_wrap {
    width: 24px;
    height: 24px;
    color: #9ca3af;
    /* Default grey icon */
    flex-shrink: 0;
    margin-top: 2px;
    transition: color 0.2s ease;
}

.ats_trust_row:hover .ats_trust_icon_wrap {
    color: var(--ats-lp-green, #76b900);
    /* Highlight on hover */
}

.ats_trust_icon_wrap svg {
    width: 100%;
    height: 100%;
}

.ats_trust_text {
    font-size: 15px;
    line-height: 1.5;
    color: #4b5563;
    margin: 0;
}

.ats_trust_text strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* --- RIGHT: REVIEWS WITH LOGOS --- */
.ats_trust_quotes_wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ats_trust_quote_card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
    transition: transform 0.2s ease;
}

.ats_trust_quote_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.ats_quote_logo {
    margin-bottom: 16px;
    opacity: 0.3;
    /* Subtle logos */
    filter: grayscale(100%);
    transition: opacity 0.3s;
}

.ats_trust_quote_card:hover .ats_quote_logo {
    opacity: 0.8;
}

.ats_quote_logo svg.logo_svg {
    height: 20px;
    width: auto;
}

.ats_quote_body {
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
    font-style: italic;
    margin-bottom: 16px;
}

.ats_quote_meta {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.ats_quote_author {
    font-weight: 700;
    color: #1a1a1a;
}

.ats_quote_company {
    color: #9ca3af;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.5px;
}

/* --- FOOTER CTA --- */
.ats_trust_footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.ats_trust_closer {
    font-size: 18px;
    color: #4b5563;
    margin-bottom: 30px;
}

/* BUTTON */
.ats_trust_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #dd8f09;
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ats_trust_btn:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ats_trust_btn_icon {
    width: 18px;
    height: 18px;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    .ats_trust_grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .ats_trust_title {
        font-size: 32px;
    }

    .ats_trust_row:hover {
        transform: none;
        /* Disable slide on touch */
    }
}


/* =========================================
   SECTION: OPERATING PRINCIPLES
   ========================================= */

.ats_principles_section {
    position: relative;
    padding: 30px 0;
    background-color: #f8f9fa;
    /* Very light cool grey foundation */
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    overflow: hidden;
}

.ats_principles_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- HEADER --- */
.ats_principles_header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.ats_principles_title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.ats_principles_subtitle {
    font-size: 18px;
    line-height: 1.5;
    color: #555;
}

/* --- GRID LAYOUT --- */
.ats_principles_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Columns */
    gap: 24px;
}

/* --- CARD DESIGN --- */
.ats_principle_card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 32px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* For accent line */
}

/* Hover Effect: Calm Lift + Accent */
.ats_principle_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border-color: transparent;
}

/* Left Accent Line on Hover */
.ats_principle_card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ats-lp-green);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ats_principle_card:hover::before {
    opacity: 1;
}

/* CARD INTERNALS */
.ats_principle_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.ats_principle_icon_box {
    width: 48px;
    height: 48px;
    background: #f4f6f8;
    border-radius: 10px;
    /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5563;
    transition: all 0.3s ease;
}

.ats_principle_icon_box svg {
    width: 24px;
    height: 24px;
}

.ats_principle_card:hover .ats_principle_icon_box {
    color: var(--ats-lp-green);
    background: rgba(118, 185, 0, 0.1);
}

.ats_principle_label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    background: #f9f9f9;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Differentiate Execution label slightly if desired */
.ats_principle_label.execution {
    color: #888;
}

.ats_principle_name {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.ats_principle_desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 24px;
    font-style: italic;
    /* "Voice" of the policy */
}

/* LIST STYLING */
.ats_principle_list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 16px;
    flex-grow: 1;
    /* Push to fill height */
}

.ats_principle_list li {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 10px;
    padding-left: 12px;
    position: relative;
}

.ats_principle_list li::before {
    content: "•";
    color: var(--ats-lp-green);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .ats_principles_section {
        padding: 10px 0;
    }

    .ats_principles_grid {
        grid-template-columns: 1fr 1fr;
        /* 2 cols on tablet */
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .ats_principles_header {
        text-align: left;
        margin-bottom: 40px;
    }

    .ats_principles_title {
        font-size: 30px;
    }

    .ats_principles_grid {
        grid-template-columns: 1fr;
        /* 1 col on mobile */
        gap: 16px;
    }

    .ats_principle_card {
        padding: 24px;
    }
}

/* --- NEW BACKGROUND IMAGE STYLES --- */
.ats_principle_bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    /* Very subtle - keeps text readable */
    transition: transform 0.6s ease, opacity 0.3s ease;
    z-index: 0;
    filter: grayscale(50%);
    /* Keeps it professional/neutral */
}

/* --- UPDATE: Ensure Content Sits Above Image --- */
/* We need to elevate the text so it's not covered by the bg div */
.ats_principle_top,
.ats_principle_name,
.ats_principle_desc,
.ats_principle_list {
    position: relative;
    z-index: 2;
    /* Sits above the background */
}

/* --- HOVER EFFECTS --- */
/* When hovering the card, zoom the background slightly */
.ats_principle_card:hover .ats_principle_bg {
    transform: scale(1.1);
    opacity: 0.15;
    /* Slightly more visible on hover */
}

/* =========================================
   SECTION: FAQ (Compact 2-Column Grid)
   ========================================= */

.ats_faq_section {
    position: relative;
    padding: 60px 0;
    /* Reduced from 100px */
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    border-top: 1px solid #f0f0f0;
}

.ats_faq_container {
    max-width: 1100px;
    /* Wider to fit 2 cols */
    margin: 0 auto;
    padding: 0 24px;
}

/* --- HEADER --- */
.ats_faq_header {
    text-align: center;
    margin-bottom: 40px;
    /* Tighter spacing */
}

.ats_faq_title {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.5px;
    margin: 0;
}

/* --- 2-COLUMN GRID LAYOUT --- */
.ats_faq_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: 20px 60px;
    /* 20px vertical gap, 60px horizontal gap */
    align-items: start;
}

.ats_faq_item {
    border-bottom: 1px solid #e5e5e5;
}

/* TRIGGER (Question) */
.ats_faq_trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    /* Slightly more compact */
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 15px;
    transition: color 0.2s ease;
}

.ats_faq_trigger:hover .ats_faq_q_text {
    color: var(--ats-lp-green, #76b900);
}

.ats_faq_q_text {
    font-size: 16px;
    /* Optimized for grid */
    font-weight: 600;
    color: #ff9100;
    line-height: 1.4;
    padding-right: 10px;
}

/* ICON (+ / -) */
.ats_faq_icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.ats_faq_icon::before,
.ats_faq_icon::after {
    content: "";
    position: absolute;
    background-color: #999;
    transition: transform 0.3s ease;
}

.ats_faq_icon::before {
    top: 0;
    left: 5px;
    width: 2px;
    height: 12px;
}

.ats_faq_icon::after {
    top: 5px;
    left: 0;
    width: 12px;
    height: 2px;
}

/* Active State */
.ats_faq_trigger[aria-expanded="true"] .ats_faq_icon::before {
    transform: rotate(90deg);
}

/* CONTENT (Answer) */
.ats_faq_content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    overflow: hidden;
}

.ats_faq_trigger[aria-expanded="true"]+.ats_faq_content {
    grid-template-rows: 1fr;
}

.ats_faq_inner {
    min-height: 0;
    padding-bottom: 20px;
    padding-right: 10px;
}

.ats_faq_inner p {
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    margin: 0;
}

.ats_faq_inner strong {
    color: #111;
    font-weight: 600;
}

/* --- FOOTER --- */
.ats_faq_footer {
    margin-top: 40px;
    text-align: center;
    font-size: 15px;
    color: #666;
}

.ats_faq_link {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid #ccc;
    margin-left: 5px;
    transition: all 0.2s;
}

.ats_faq_link:hover {
    border-color: #1a1a1a;
    color: var(--ats-lp-green, #76b900);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .ats_faq_grid {
        grid-template-columns: 1fr;
        /* Stack back to 1 column on mobile */
        gap: 0;
    }

    .ats_faq_header {
        text-align: left;
        margin-bottom: 20px;
    }

    .ats_faq_footer {
        text-align: left;
    }
}

/* =========================================
   SECTION 9: PEOPLE & CULTURE (Redesigned)
   ========================================= */

.ats_people_section {
    position: relative;
    padding: 20px 0 30px 0;
    /* Reduced top padding significantly */
    background-color: #fff;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    border-top: 1px solid #f0f0f0;
}

.ats_people_container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- CENTERED HEADER --- */
.ats_people_header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.ats_people_title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.ats_people_intro p {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
}

/* --- CARD GRID --- */
.ats_people_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.ats_people_card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ats_people_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
    border-color: transparent;
}

/* CARD IMAGE */
.ats_card_image {
    height: 200px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

/* CARD BODY */
.ats_card_body {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ats_people_label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9ca3af;
    margin-bottom: 8px;
}

.ats_card_headline {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #111;
}

/* LIST STYLING */
.ats_people_list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.ats_people_list li {
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 14px;
    position: relative;
}

.ats_people_list li::before {
    content: "•";
    color: var(--ats-lp-green, #76b900);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* HIGHLIGHT BOX (The "Closer") */
.ats_highlight_box {
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: auto;
    /* Pushes to bottom */
    margin-bottom: 24px;
}

.ats_check_icon {
    color: var(--ats-lp-green, #76b900);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
}

.ats_highlight_box p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.4;
}

/* BUTTONS */
.ats_people_btn {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.ats_people_btn.primary {
    background: var(--ats-lp-green, #76b900);
    color: #fff;
}

.ats_people_btn.primary:hover {
    background: #6aa600;
}

.ats_people_btn.secondary {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.ats_people_btn.secondary:hover {
    border-color: #9ca3af;
    background: #f9fafb;
}

/* --- FOOTER --- */
.ats_culture_footer {
    border-top: 1px solid #f0f0f0;
    padding-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ats_culture_label {
    font-weight: 700;
    font-size: 12px;
    color: #1a1a1a;
    letter-spacing: 1px;
}

.ats_culture_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ats_culture_list li {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 800px) {
    .ats_people_grid {
        grid-template-columns: 1fr;
        /* Stack cards */
        gap: 40px;
    }

    .ats_culture_footer {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .ats_culture_list {
        justify-content: center;
        gap: 15px;
    }
}


/* =========================================
   MODULE A: AUTHORITATIVE FOOTER
   ========================================= */

.ats_auth_footer_wrapper {
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
    width: 100%;
    position: relative;
    /* Reset basic styles to prevent inheritance issues */
    line-height: 1.5;
    box-sizing: border-box;
}

.ats_auth_footer_wrapper * {
    box-sizing: border-box;
}

/* LAYER 0: BREATHING DIVIDER */
.ats_footer_divider {
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    margin-bottom: 0;
}

.ats_footer_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- LAYER 1: QUIET CONTACT STRIP --- */
.ats_quiet_contact {
    background-color: #f9f9fa;
    /* Very light grey */
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}

.ats_contact_grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.ats_contact_text {
    max-width: 300px;
}

.ats_quiet_title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.ats_quiet_desc {
    font-size: 15px;
    color: #666;
    margin: 0;
}

.ats_contact_form_wrapper {
    flex-grow: 1;
    max-width: 600px;
}

.ats_quiet_form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ats_form_row {
    display: flex;
    gap: 16px;
}

.ats_quiet_input,
.ats_quiet_textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #333;
    transition: border-color 0.2s;
}

.ats_quiet_input:focus,
.ats_quiet_textarea:focus {
    outline: none;
    border-color: #1a1a1a;
}

.ats_quiet_textarea {
    resize: vertical;
}

.ats_form_actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ats_quiet_btn {
    background-color: var(--ats-lp-green, #76b900);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ats_quiet_btn:hover {
    opacity: 0.9;
}

.ats_quiet_link {
    font-size: 13px;
    color: #666;
    text-decoration: none;
    border-bottom: 1px dotted #999;
}

.ats_quiet_link:hover {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
}

/* --- LAYER 2: MAIN FOOTER (CHARCOAL) --- */
.ats_main_footer {
    background-color: #1a1a1a;
    /* Deep Charcoal */
    color: #d4d4d4;
    /* Soft White */
    padding: 80px 0 30px 0;
}

.ats_footer_grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 80px;
}

/* Brand Col */
.ats_footer_logo {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.ats_brand_tagline {
    font-size: 14px;
    line-height: 1.6;
    color: #999;
    margin-bottom: 24px;
}

.ats_footer_socials {
    margin-top: 10px;
    display: flex;
    gap: 16px;
}

.ats_social_link {
    color: #666;
    transition: color 0.2s;
    width: 20px;
    height: 20px;
}

.ats_social_link:hover {
    color: #fff;
}

/* Headings */
.ats_footer_heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: #666;
    margin: 0 0 24px 0;
}

/* Lists */
.ats_footer_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ats_footer_list li {
    font-size: 14px;
    line-height: 1.5;
}

.ats_footer_list a {
    color: #d4d4d4;
    text-decoration: none;
    transition: color 0.2s;
}

.ats_footer_list a:hover {
    color: #fff;
}

.ats_text_link {
    text-decoration: underline;
    text-decoration-color: #444;
}

.ats_address {
    color: #999;
    font-style: normal;
}

/* Hours */
.ats_hours_block p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: #d4d4d4;
}

.ats_hours_block .ats_closed {
    color: #999;
}

/* Sub Links */
.ats_footer_spacer {
    height: 12px;
}

.ats_sub_link {
    color: #888 !important;
    font-size: 13px;
}

.ats_sub_link:hover {
    color: #bbb !important;
}

/* Bottom Bar */
.ats_bottom_bar {
    border-top: 1px solid #333;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

.ats_credits {
    opacity: 0.7;
}

/* --- MODULE B: RESUME MODAL --- */
.ats_resume_modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ats_resume_modal_overlay.active {
    display: flex;
    opacity: 1;
}

.ats_resume_modal_card {
    background: #fff;
    width: 90%;
    max-width: 420px;
    border-radius: 12px;
    padding: 32px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(10px);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ats_resume_modal_overlay.active .ats_resume_modal_card {
    transform: translateY(0);
}

.ats_modal_close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.ats_modal_header {
    margin-bottom: 24px;
    text-align: center;
}

.ats_modal_header h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1a1a1a;
}

.ats_modal_header p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Form Styles */
.ats_resume_form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ats_modal_field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ats_modal_field label {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
}

/* Update this specific block in your CSS */
.ats_modal_field input {
    width: 100%;
    /* <--- Forces it to fit the container */
    box-sizing: border-box;
    /* <--- Prevents padding from breaking the layout */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.ats_modal_split {
    display: flex;
    gap: 12px;
}

.ats_modal_split .ats_modal_field {
    flex: 1;
}

.ats_file_input {
    padding: 6px;
    background: #f9f9f9;
}

.ats_modal_actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.ats_modal_submit_btn {
    background-color: var(--ats-lp-green, #76b900);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.ats_modal_cancel_btn {
    background: none;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .ats_contact_grid {
        flex-direction: column;
        gap: 24px;
    }

    .ats_form_row {
        flex-direction: column;
    }

    .ats_footer_grid {
        grid-template-columns: 1fr;
        /* Stack columns */
        gap: 40px;
    }

    .ats_bottom_bar {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* PARTNER LOGOS SIZE FIX */
.ats_partner_row {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Space between logos */
    margin-top: 15px;
    margin-bottom: 15px;
}

.ats_partner_row img {
    height: 40px;
    /* FIXED HEIGHT: This stops the SAP logo explosion */
    width: auto;
    /* Maintains original shape */
    max-width: 100px;
    /* Safety limit */
    object-fit: contain;
    /* Ensures logo fits inside the box */
    opacity: 0.8;
    /* Optional: makes them blend in better */
    filter: grayscale(20%);
    /* Optional: Professional grey look */
    transition: 0.3s;
}

.ats_partner_row img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* --- ATS HEALTH CHECK MODAL CSS --- */

/* Backdrop */
.ats_modal_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Dim, not dark */
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ats_modal_backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* Glass Container */
.ats_modal_glass_container {
    width: 90%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ats_modal_backdrop.open .ats_modal_glass_container {
    transform: translateY(0);
}

/* Close Button */
.ats_modal_close_btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s;
    z-index: 10;
}

.ats_modal_close_btn:hover {
    background: #e0e0e0;
    color: #000;
}

.ats_modal_close_btn svg {
    width: 18px;
    height: 18px;
}

/* Sections */
.ats_view_section {
    padding: 40px 30px;
    display: none;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.ats_view_section.active {
    display: flex;
    animation: atsFadeIn 0.3s ease;
}

@keyframes atsFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* View A: Intro Styling */
.ats_modal_header {
    text-align: center;
    margin-bottom: 30px;
}

.ats_modal_title {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.ats_modal_line {
    width: 40px;
    height: 3px;
    background: #76b900;
    margin: 0 auto 20px;
}

.ats_modal_subtitle {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px;
}

.ats_micro_tag {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    background: #f9f9f9;
    padding: 4px 10px;
    border-radius: 4px;
}

/* Buttons */
.ats_btn_primary {
    background: #1a1a1a;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.ats_btn_primary:hover {
    background: #76b900;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(118, 185, 0, 0.2);
}

.ats_text_link_subtle {
    font-size: 13px;
    color: #888;
    text-decoration: underline;
    margin-top: 15px;
    display: inline-block;
}

/* View B: Quiz Styling */
.ats_quiz_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.ats_step_counter {
    font-size: 12px;
    font-weight: 700;
    color: #999;
}

.ats_progress_track {
    width: 60%;
    height: 4px;
    background: #f0f0f0;
    border-radius: 2px;
    overflow: hidden;
}

.ats_progress_fill {
    height: 100%;
    background: #76b900;
    transition: width 0.3s ease;
}

.ats_question_text {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 25px;
    line-height: 1.4;
}

.ats_options_grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ats_option_btn {
    text-align: left;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #444;
    transition: all 0.2s;
    position: relative;
}

.ats_option_btn:hover {
    border-color: #76b900;
    background: #f9fdf5;
}

.ats_option_btn.selected {
    border-color: #76b900;
    background: #f0f9e6;
    color: #1a1a1a;
    font-weight: 600;
}

.ats_modal_footer.split {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

.ats_btn_secondary {
    background: transparent;
    border: none;
    color: #888;
    font-weight: 600;
    cursor: pointer;
}

.ats_btn_secondary:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* View C: Results Styling */
.ats_result_header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.ats_score_circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #1a1a1a;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#ats_final_score {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.ats_score_label {
    font-size: 10px;
    opacity: 0.7;
}

.ats_status_label {
    font-size: 10px;
    font-weight: 700;
    color: #888;
    letter-spacing: 1px;
}

.ats_band_text {
    font-size: 18px;
    font-weight: 800;
    color: #76b900;
    margin: 4px 0 0;
}

.ats_result_block {
    margin-bottom: 20px;
}

.ats_block_label {
    font-size: 11px;
    font-weight: 700;
    color: #d6336c;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ats_result_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ats_result_list li {
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
    padding-left: 12px;
    position: relative;
}

.ats_result_list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ccc;
}

.ats_result_list.action_mode li::before {
    content: "→";
    color: #76b900;
    font-weight: bold;
}

.ats_context_form {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ats_form_label {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.ats_input_row {
    display: flex;
    gap: 10px;
}

.ats_input_field {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}

.ats_btn_whatsapp {
    background: #25D366;
    color: white;
    border: none;
    padding: 14px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    transition: transform 0.2s;
}

.ats_btn_whatsapp:hover {
    background: #20bd5a;
    transform: translateY(-2px);
}

.ats_btn_text {
    background: none;
    border: none;
    color: #888;
    font-size: 12px;
    text-decoration: underline;
    margin-top: 15px;
    cursor: pointer;
}

/* --- FIX FOR MODAL OVERFLOW --- */

/* 1. Stack Inputs on Mobile */
.ats_input_row {
    display: flex;
    gap: 10px;
}

/* On screens smaller than 480px, stack them vertically */
@media (max-width: 480px) {
    .ats_input_row {
        flex-direction: column;
        /* Stack top-to-bottom */
        gap: 10px;
    }
}

.ats_partner_row img {
    height: 30px;
    /* FIXED HEIGHT: This stops the SAP logo explosion */
    width: auto;
    /* Maintains original shape */
    max-width: 70px;
    /* Safety limit */
    object-fit: contain;
    /* Ensures logo fits inside the box */
    opacity: 1;
    /* Optional: makes them blend in better */
    filter: grayscale(0%);
    /* Optional: Professional grey look */
    transition: 0.3s;
}

/* 2. Ensure Inputs Don't Break Width */
.ats_input_field {
    flex: 1;
    /* Grow to fill space */
    width: 100%;
    /* Ensure full width */
    min-width: 0;
    /* Critical for Flexbox shrinking */
    box-sizing: border-box;
    /* Include padding in width */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}

/* 3. Ensure Context Form Fits Container */
.ats_context_form {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    max-width: 100%;
    /* Prevent expanding parent */
    box-sizing: border-box;
}

/* =========================================
   MODULE: RIGHT DOCK PILL BUTTON (VERTICAL)
   ========================================= */

/* 1. THE PILL BUTTON (Launcher) */
.ats_dock_dot {
    position: fixed;
    right: 20px;
    top: 50%;
    /* Keeps it vertically centered */
    transform: translateY(-50%);
    z-index: 9990;

    /* Shape & Size Changes for Vertical Pill */
    width: auto;
    /* Allow width to be set by padding */
    height: auto;
    /* Allow height to grow with text */
    padding: 24px 12px;
    /* Adjusts the size of the vertical pill */
    border-radius: 50px;
    /* Creates rounded pill caps */

    /* Frosted Glass Look (Slightly tweaked for better text contrast) */
    background: rgba(255, 162, 0, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgb(255, 255, 255);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    /* Flex center keeps text aligned */
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    outline: none;
}

/* New Text Styling */
.ats_btn_text {
    font-family: inherit;
    /* Uses your site's main font */
    font-size: 14px;
    font-weight: 700;
    /* Bold for visibility */
    color: #333;
    /* Dark text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    /* Prevents text wrapping */
    transition: color 0.3s ease;
}

/* VERTICAL Text Styling */
.ats_btn_text_vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 4px 0;
    /* Adjust padding for vertical text */
}


/* DELETED: Inner Core (.ats_dot_inner) is no longer needed */

/* Hover State */
.ats_dock_dot:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #76b900;
    /* Optional: turn border green on hover */
    transform: translateY(-50%) scale(1.05);
    /* Subtle scale up */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Change text color on hover */
.ats_dock_dot:hover .ats_btn_text {
    color: #76b900;
    /* Green text on hover */
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .ats_dock_dot {
        right: 15px;
        /* Adjust padding for smaller screens */
        padding: 18px 10px;
    }

    .ats_btn_text {
        font-size: 12px;
    }
}

/* 2. THE BACKDROP */
.ats_drawer_backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    /* Light dim */
    backdrop-filter: blur(2px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.ats_drawer_backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* 3. THE DRAWER (Panel) */
.ats_quick_drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 90vw;
    /* Responsive constraint */
    background: #ffffff;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    transform: translateX(100%);
    /* Hidden by default */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* Smooth Slide */
    display: flex;
    flex-direction: column;
}

.ats_quick_drawer.is-open {
    transform: translateX(0);
}

/* DRAWER HEADER */
.ats_drawer_header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ats_drawer_title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.ats_drawer_close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s;
}

.ats_drawer_close:hover {
    background: #f5f5f5;
    color: #000;
}

.ats_drawer_close svg {
    width: 24px;
    height: 24px;
}

/* DRAWER CONTENT */
.ats_drawer_content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 23px;
}

/* Section Label */
.ats_section_label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

/* SHORTCUT LIST */
.ats_shortcut_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ats_shortcut_link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #444;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s;
}

.ats_shortcut_link:hover {
    background: #f9f9f9;
    color: #1a1a1a;
    transform: translateX(4px);
}

.ats_link_icon {
    color: #ccc;
    transition: color 0.2s;
}

.ats_shortcut_link:hover .ats_link_icon {
    color: #76b900;
}

.ats_link_icon svg {
    width: 18px;
    height: 18px;
}

/* VIDEO BLOCK */
.ats_video_card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #000;
}

.ats_video_thumb {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
}

.ats_video_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.ats_play_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ats_play_btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 0.3s, background 0.3s;
}

.ats_video_card:hover .ats_play_btn {
    background: #76b900;
    transform: scale(1.1);
}

.ats_video_card:hover img {
    opacity: 0.6;
}

.ats_play_text {
    font-size: 12px;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* IFRAME (Hidden initially) */
.ats_video_frame {
    display: none;
    aspect-ratio: 16/9;
    width: 100%;
    background: #000;
}

.ats_video_card.is-playing .ats_video_thumb {
    display: none;
}

.ats_video_card.is-playing .ats_video_frame {
    display: block;
}

/* WHATSAPP BUTTON */
.ats_drawer_whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #25D366;
    color: white;
    text-decoration: none;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.2s;
}

.ats_drawer_whatsapp:hover {
    background: #20bd5a;
}

/* Scroll Lock Class (Added to body via JS) */
body.ats_drawer_locked {
    overflow: hidden;
}

/* This removes the underline and keeps the text color consistent */
.ats_fin_link {
    text-decoration: none !important;
    color: inherit;
    display: block;
    /* Makes the entire area clickable */
    margin-bottom: 20px;
    /* Optional: adds spacing between cards */
}

.ats_fin_card_title {
    text-decoration: none !important;
}