/* =========================================================
   SNAPFIX / SERVICES SECTION
   Hero-style two-column composition
   ========================================================= */

.am-snapfix {
    width: min(1240px, calc(100% - 48px));
    min-height: 0;
    margin: 0 auto;
    padding: 40px 0 20px;
    position: relative;
}


/* =========================================================
   MAIN LAYOUT

   LEFT  = FIX animation
   RIGHT = FIX content
   ========================================================= */

.am-snapfix-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(400px, 0.72fr);

    align-items: center;

    gap: 20px;

    min-height: 0;
}


/* =========================================================
   LEFT VISUAL
   ========================================================= */

.am-snapfix-visual {
    position: relative;

    width: 100%;
    min-width: 0;

    min-height: 560px;

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

    overflow: visible;

    z-index: 2;
}


/* =========================================================
   FIX PARTICLE RENDERER
   ========================================================= */

.am-snapfix-renderer {
    position: relative;

    width: 560px;
    height: 560px;

    max-width: 100%;

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

    overflow: visible;
}


/* =========================================================
   CANVAS
   ========================================================= */

.am-snapfix-renderer canvas {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    z-index: 1;
}


/* =========================================================
   DOMAIN LABEL
   Compact blue / white tech badge
   ========================================================= */

.am-snapfix-domain {
    position: absolute;

left: 50%;
top: calc(50% + 50px);

transform: translateX(-50%);

    width: max-content;
    max-width: 90%;

    padding: 9px 18px;

    box-sizing: border-box;

    color: #dceeff;

    font-family:
        "SFMono-Regular",
        "Cascadia Code",
        "Roboto Mono",
        "Courier New",
        monospace;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.045em;

    line-height: 1.2;

    white-space: nowrap;

    background:
        rgba(24, 38, 48, 0.78);

    border: 1px solid
        rgba(83, 191, 255, 0.48);

    border-radius: 9px;

    box-shadow:
        0 0 10px rgba(83, 191, 255, 0.12),
        inset 0 0 14px rgba(83, 191, 255, 0.05);

    text-shadow:
        0 0 8px rgba(83, 191, 255, 0.35);

    pointer-events: auto;

    cursor: pointer;

    text-decoration: none;

    z-index: 3;
}


.am-snapfix-domain:hover {
    color: #ffffff;

    border-color:
        rgba(83, 191, 255, 0.85);

    background:
        rgba(24, 48, 62, 0.9);

    box-shadow:
        0 0 14px rgba(83, 191, 255, 0.22),
        inset 0 0 18px rgba(83, 191, 255, 0.08);

    transform:
        translateX(-50%)
        translateY(-1px);
}


/* =========================================================
   RIGHT CONTENT
   WHITE + BLUE ONLY
   ========================================================= */

.am-snapfix-content {
    position: relative;

    min-width: 0;

    max-width: 620px;

    padding:
        70px
        20px
        70px
        0;

    z-index: 8;
}


/* =========================================================
   KICKER
   ========================================================= */

.am-snapfix-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin: 0 0 22px;

    color: #53bfff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.am-snapfix-kicker-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #53bfff;

    box-shadow:
        0 0 12px
        rgba(83, 191, 255, 0.9);
}


/* =========================================================
   TITLE
   ========================================================= */

.am-snapfix-title {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(48px, 5vw, 72px);

    line-height: 0.98;

    font-weight: 760;

    letter-spacing: -0.055em;
}


.am-snapfix-title span {
    color: #53bfff;
}


/* =========================================================
   LEAD
   ========================================================= */

.am-snapfix-lead {
    margin: 24px 0 0;

    color: #ffffff;

    font-size: 20px;

    line-height: 1.5;

    font-weight: 600;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.am-snapfix-description {
    max-width: 540px;

    margin: 16px 0 0;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   POINTS
   ========================================================= */

.am-snapfix-points {
    display: grid;

    gap: 14px;

    margin-top: 30px;
}


.am-snapfix-point {
    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr);

    align-items: start;

    gap: 12px;
}


.am-snapfix-point span {
    color: #53bfff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.08em;
}


.am-snapfix-point p {
    margin: 0;

    color: #ffffff;

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   BUTTON
   ========================================================= */

.am-snapfix-content .am-button {
    margin-top: 30px;

    color: #ffffff;

    border-color: #53bfff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

.am-snapfix {
    width: min(1240px, calc(100% - 48px));

    min-height: auto;

    padding:
        20px 0 90px;
}


    .am-snapfix-inner {
        grid-template-columns: 1fr;

        gap: 20px;

        min-height: auto;
    }


    .am-snapfix-visual {
        min-height: 470px;
    }


    .am-snapfix-renderer {
        width: 460px;
        height: 460px;
    }


    .am-snapfix-content {
        max-width: 720px;

        padding:
            30px
            20px
            30px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

.am-snapfix {
    width: calc(100% - 30px);

    padding:
        10px 0 75px;
}

    .am-snapfix-inner {
        gap: 10px;
    }


    .am-snapfix-visual {
        min-height: 370px;
    }


    .am-snapfix-renderer {
        width: 350px;
        height: 350px;
    }


    .am-snapfix-domain {
        top: 52%;

        padding: 8px 14px;

        font-size: 12px;

        letter-spacing: 0.035em;

        border-radius: 8px;
    }


    .am-snapfix-content {
        padding:
            25px
            0
            20px;
    }


    .am-snapfix-title {
        font-size: 46px;
    }


    .am-snapfix-lead {
        font-size: 18px;
    }


    .am-snapfix-description {
        font-size: 15px;
    }

}

/* =========================================================
   FORCE FIX SECTION TO BLUE + WHITE ONLY
   ========================================================= */

.am-snapfix,
.am-snapfix * {
    --am-snapfix-blue: #53bfff;
    --am-snapfix-white: #ffffff;
}


/* Kicker */

.am-snapfix .am-snapfix-kicker {
    color: #53bfff !important;
}

.am-snapfix .am-snapfix-kicker-dot {
    background: #53bfff !important;

    box-shadow:
        0 0 12px rgba(83, 191, 255, 0.9) !important;
}


/* Main heading */

.am-snapfix .am-snapfix-title {
    color: #ffffff !important;
}

.am-snapfix .am-snapfix-title span {
    color: #53bfff !important;
}


/* Lead */

.am-snapfix .am-snapfix-lead {
    color: #ffffff !important;
}


/* Description */

.am-snapfix .am-snapfix-description {
    color: #ffffff !important;
}


/* Button */

.am-snapfix .am-button {
    color: #ffffff !important;

    border-color:
        #53bfff !important;
}


/* Domain */

.am-snapfix .am-snapfix-domain {
    color: #dceeff !important;

    border-color:
        rgba(83, 191, 255, 0.48) !important;
}

/* =========================================================
   FIX CTA — BLUE / WHITE ONLY
   ========================================================= */

.am-snapfix .am-button.am-button-primary {
    color: #000000 !important;

    background: #53bfff !important;

    border: 1px solid #53bfff !important;

    box-shadow:
        0 0 14px rgba(83, 191, 255, 0.18);
}


.am-snapfix .am-button.am-button-primary:hover {
    color: #ffffff !important;

    background: #319edb !important;

    border-color: #53bfff !important;

    box-shadow:
        0 0 20px rgba(83, 191, 255, 0.30);
}