/* ==========================================================
   LOCALHOSTING UK
   HUMAN + AI PAGE
   Matches Hosting + Pricing CSS
   ========================================================== */

/* ==========================================================
   PAGE ROOT
   ========================================================== */

.lhuk-human-ai-page {
    --lhuk-bg: #ffffff;
    --lhuk-surface: #f3f3f8;
    --lhuk-surface-soft: #f7f7fa;
    --lhuk-surface-purple: #f0edfb;
    --lhuk-text: #17182f;
    --lhuk-text-soft: #70758e;
    --lhuk-text-muted: #85899d;
    --lhuk-border: #d9d9e5;
    --lhuk-border-strong: #c8c8da;
    --lhuk-purple: #8064ed;
    --lhuk-purple-bright: #9278ff;
    --lhuk-purple-soft: rgba(128, 100, 237, .12);
    position: relative;



    width: 100vw !important;

    max-width: none !important;



    left: 50%;



    margin-left: -50vw !important;

    margin-right: 0 !important;



    padding: 0 !important;



    background: var(--lhuk-bg);

    color: var(--lhuk-text);



    font-family:

        "Poppins",

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;



    overflow: hidden;



    box-sizing: border-box;

}





/* ==========================================================

   RESET

   ========================================================== */



.lhuk-human-ai-page *,

.lhuk-human-ai-page *::before,

.lhuk-human-ai-page *::after {

    box-sizing: border-box;

}





/* ==========================================================

   REMOVE WHMCS CONTAINER / TOP GAP

   ========================================================== */



#main-body:has(.lhuk-human-ai-page) {

    padding-top: 0 !important;

    padding-bottom: 0 !important;

}



#main-body:has(.lhuk-human-ai-page) > .container {

    width: 100% !important;

    max-width: none !important;



    margin: 0 !important;



    padding-left: 0 !important;

    padding-right: 0 !important;

}



#main-body:has(.lhuk-human-ai-page) > .container > .row {

    margin-left: 0 !important;

    margin-right: 0 !important;

}





/* ==========================================================

   INNER CONTENT

   Same width as Hosting + Pricing

   ========================================================== */



.lhuk-ai-container {

    width: min(1160px, calc(100% - 48px));



    max-width: 1160px;



    margin-left: auto !important;

    margin-right: auto !important;



    box-sizing: border-box;

}





/* ==========================================================

   LIGHT MODE

   ========================================================== */



.lhuk-human-ai-page {

    background: #ffffff;

}





/* ==========================================================

   HERO

   ========================================================== */



.lhuk-ai-hero {



    width: 100%;



    padding:

        72px

        0

        52px;



    background: var(--lhuk-bg);

}





.lhuk-ai-eyebrow {



    display: inline-flex;



    align-items: center;

    justify-content: center;



    padding:

        8px

        15px;



    margin-bottom: 20px;



    border-radius: 999px;



    background: var(--lhuk-purple-soft);



    color: var(--lhuk-purple);



    font-size: 12px;



    font-weight: 700;



    line-height: 1;



    letter-spacing: .06em;

}





.lhuk-ai-hero h1 {



    max-width: 950px;



    margin:

        0

        0

        22px;



    color: var(--lhuk-text);



    font-size:

        clamp(

            46px,

            5.2vw,

            70px

        );



    line-height: 1.04;



    font-weight: 500;



    letter-spacing: -.045em;

}





.lhuk-ai-intro {



    max-width: 720px;



    margin: 0;



    color: var(--lhuk-text-soft);



    font-size: 17px;



    line-height: 1.6;

}





/* ==========================================================

   AI / HUMAN CARDS

   ========================================================== */



.lhuk-ai-columns {



    display: grid;



    grid-template-columns:

        repeat(

            2,

            minmax(0, 1fr)

        );



    gap: 18px;



    margin-top: 40px;

}





.lhuk-ai-card {



    min-width: 0;



    padding:

        30px

        30px

        28px;



    border:

        1px solid

        var(--lhuk-border);



    border-radius: 30px;



    background:

        var(--lhuk-surface-soft);



    transition:

        transform .2s ease,

        border-color .2s ease,

        box-shadow .2s ease;

}





.lhuk-ai-card:hover {



    transform: translateY(-3px);



    border-color:

        var(--lhuk-purple-bright);

}





.lhuk-human-card {



    background:

        var(--lhuk-surface-purple);



    border-color:

        var(--lhuk-purple-soft);

}





/* ==========================================================

   CARD TITLE

   ========================================================== */



.lhuk-ai-card-title {



    margin-bottom: 22px;



    color: var(--lhuk-purple);



    font-size: 10px;



    line-height: 1;



    font-weight: 700;



    letter-spacing: .20em;



    text-transform: uppercase;

}





/* ==========================================================

   CARD LIST

   ========================================================== */



.lhuk-ai-card ul {



    list-style: none;



    margin: 0;

    padding: 0;

}





.lhuk-ai-card li {



    display: flex;



    align-items: flex-start;



    gap: 13px;



    margin-bottom: 17px;



    color: var(--lhuk-text-soft);



    font-size: 14px;



    line-height: 1.55;

}





.lhuk-ai-card li:last-child {

    margin-bottom: 0;

}





/* ==========================================================

   AI DOT

   ========================================================== */



.lhuk-ai-dot {



    width: 22px;

    min-width: 22px;



    height: 22px;



    margin-top: 1px;



    border:

        1px dashed

        var(--lhuk-border-strong);



    border-radius: 50%;

}





/* ==========================================================

   HUMAN DOT

   ========================================================== */



.lhuk-human-dot {



    width: 22px;

    min-width: 22px;



    height: 22px;



    margin-top: 1px;



    border:

        1px solid

        var(--lhuk-purple);



    border-radius: 50%;



    background:

        var(--lhuk-purple-soft);

}





/* ==========================================================

   HUMAN ANSWERS SECTION

   ========================================================== */



.lhuk-human-answer {



    width: 100%;



    padding:

        38px

        0;



    background:

        var(--lhuk-bg);

}





.lhuk-answer-box {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 40px;



    padding:

        32px

        34px;



    border:

        1px solid

        var(--lhuk-border);



    border-radius: 30px;



    background: transparent;

}





.lhuk-answer-content {



    max-width: 720px;

}





.lhuk-answer-box h2 {



    margin:

        0

        0

        10px;



    color:

        var(--lhuk-text);



    font-size: 27px;



    line-height: 1.2;



    font-weight: 400;



    letter-spacing: -.025em;

}





.lhuk-answer-box p {



    max-width: 720px;



    margin: 0;



    color:

        var(--lhuk-text-soft);



    font-size: 13px;



    line-height: 1.7;

}





/* ==========================================================

   TALK BUTTON

   ========================================================== */



.lhuk-ai-button {



    display: flex;



    align-items: center;



    justify-content: center;



    min-width: 165px;



    min-height: 46px;



    padding:

        0

        22px;



    border:

        1px solid

        var(--lhuk-purple);



    border-radius: 999px;



    background: transparent;



    color:

        var(--lhuk-purple) !important;



    text-decoration: none !important;



    font-size: 13px;



    font-weight: 600;



    white-space: nowrap;



    transition:

        background-color .2s ease,

        color .2s ease;

}





.lhuk-ai-button:hover {



    background:

        var(--lhuk-purple-soft);



    color:

        var(--lhuk-purple) !important;

}





/* ==========================================================

   PEOPLE SECTION

   ========================================================== */



.lhuk-people-section {



    width: 100%;



    padding:

        38px

        0

        68px;



    background:

        var(--lhuk-bg);

}





.lhuk-people-section h2 {



    margin:

        0

        0

        28px;



    color:

        var(--lhuk-text);



    font-size: 32px;



    line-height: 1.15;



    font-weight: 400;



    letter-spacing: -.035em;

}





/* ==========================================================

   PEOPLE GRID

   ========================================================== */



.lhuk-people-grid {



    display: grid;



    grid-template-columns:

        repeat(

            4,

            minmax(0, 1fr)

        );



    gap: 15px;

}





/* ==========================================================

   PERSON

   ========================================================== */



.lhuk-person {

    min-width: 0;

}





/* ==========================================================
   PERSON IMAGE
   ========================================================== */

.lhuk-person-image {

    position: relative;

    display: flex;

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

    min-height: 275px;

    padding: 0;

    border: 0 !important;

    border-radius: 23px;

    background:
        var(--lhuk-surface-soft);

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

    text-align: center;

    font-size: 11px;

    overflow: hidden;
}


/* ==========================================================
   PERSON IMAGE — ACTUAL IMAGES
   ========================================================== */

.lhuk-person-image img {

    position: absolute;

    left: 50%;
    bottom: 8px;

    width: calc(100% - 40px);
    height: calc(100% - 40px);

    max-width: none;

    object-fit: contain;
    object-position: center bottom;

    transform: translateX(-50%);

    opacity: 1;

    transition:
        opacity .25s ease,
        transform .35s ease;

    pointer-events: none;
}


/* ==========================================================
   PERSON IMAGE — DEFAULT
   ========================================================== */

.lhuk-person-image .person-default {

    opacity: 1;

    z-index: 1;
}


/* ==========================================================
   PERSON IMAGE — HOVER
   ========================================================== */

.lhuk-person-image .person-hover {

    opacity: 0;

    z-index: 2;
}


/* ==========================================================
   PERSON IMAGE — HOVER STATE
   ========================================================== */

.lhuk-person:hover .person-default {

    opacity: 0;
}


.lhuk-person:hover .person-hover {

    opacity: 1;

    transform:
        translateX(-50%)
        scale(1.02);
}





.lhuk-person h3 {



    margin:

        10px

        5px

        0;



    color:

        var(--lhuk-text);



    font-size: 15px;



    line-height: 1.4;



    font-weight: 600;

}





.lhuk-person p {



    margin:

        4px

        5px

        0;



    color:

        var(--lhuk-text-soft);



    font-size: 12px;



    line-height: 1.5;

}





/* ==========================================================

   TRUST SECTION

   ========================================================== */



.lhuk-trust-section {



    width: 100%;



    padding:

        0

        0

        70px;



    background:

        var(--lhuk-bg);

}





.lhuk-trust-grid {



    display: grid;



    grid-template-columns:

        repeat(

            4,

            minmax(0, 1fr)

        );



    gap: 15px;

}





.lhuk-trust-card {



    min-width: 0;



    min-height: 145px;



    padding:

        25px

        24px;



    border-radius: 25px;



    background:

        var(--lhuk-surface);

}





.lhuk-trust-card strong {



    display: block;



    margin-bottom: 5px;



    color:

        var(--lhuk-purple);



    font-size: 27px;



    line-height: 1.1;



    font-weight: 400;

}





.lhuk-trust-card h3 {



    margin:

        0

        0

        7px;



    color:

        var(--lhuk-text);



    font-size: 14px;



    line-height: 1.3;



    font-weight: 600;

}





.lhuk-trust-card p {



    margin: 0;



    color:

        var(--lhuk-text-soft);



    font-size: 11px;



    line-height: 1.55;

}





/* ==========================================================

   DARK MODE

   Matches Pricing + Hosting

   ========================================================== */



html.dark .lhuk-human-ai-page,

html.dark-mode .lhuk-human-ai-page,

html.theme-dark .lhuk-human-ai-page,

html[data-theme="dark"] .lhuk-human-ai-page,

html[data-mode="dark"] .lhuk-human-ai-page,



body.dark .lhuk-human-ai-page,

body.dark-mode .lhuk-human-ai-page,

body.theme-dark .lhuk-human-ai-page,

body[data-theme="dark"] .lhuk-human-ai-page,

body[data-mode="dark"] .lhuk-human-ai-page,



.lhuk-human-ai-page[data-lhuk-theme="dark"] {



    --lhuk-bg: #141522;



    --lhuk-surface: #202330;

    --lhuk-surface-soft: #222532;

    --lhuk-surface-purple: #29283d;



    --lhuk-text: #f3f2fa;

    --lhuk-text-soft: #989caf;

    --lhuk-text-muted: #85899e;



    --lhuk-border: #383b49;

    --lhuk-border-strong: #414452;



    --lhuk-purple: #9a7cff;

    --lhuk-purple-bright: #a78cff;



    --lhuk-purple-soft:

        rgba(154, 124, 255, .16);



    background:

        #141522;



    color-scheme: dark;

}





/* ==========================================================

   DARK MAIN BODY

   ========================================================== */



html.dark #main-body:has(.lhuk-human-ai-page),

html.dark-mode #main-body:has(.lhuk-human-ai-page),

html.theme-dark #main-body:has(.lhuk-human-ai-page),

html[data-theme="dark"] #main-body:has(.lhuk-human-ai-page),

html[data-mode="dark"] #main-body:has(.lhuk-human-ai-page),



body.dark #main-body:has(.lhuk-human-ai-page),

body.dark-mode #main-body:has(.lhuk-human-ai-page),

body.theme-dark #main-body:has(.lhuk-human-ai-page),

body[data-theme="dark"] #main-body:has(.lhuk-human-ai-page),

body[data-mode="dark"] #main-body:has(.lhuk-human-ai-page) {



    background:

        #141522 !important;

}





/* ==========================================================

   DARK AI / HUMAN CARDS

   ========================================================== */



html.dark .lhuk-ai-card,

html.dark-mode .lhuk-ai-card,

html.theme-dark .lhuk-ai-card,

html[data-theme="dark"] .lhuk-ai-card,

html[data-mode="dark"] .lhuk-ai-card,



body.dark .lhuk-ai-card,

body.dark-mode .lhuk-ai-card,

body.theme-dark .lhuk-ai-card,

body[data-theme="dark"] .lhuk-ai-card,

body[data-mode="dark"] .lhuk-ai-card {



    background:

        #222534 !important;



    border-color:

        rgba(177, 177, 208, .20);



    box-shadow: none;

}





html.dark .lhuk-human-card,

html.dark-mode .lhuk-human-card,

html.theme-dark .lhuk-human-card,

html[data-theme="dark"] .lhuk-human-card,

html[data-mode="dark"] .lhuk-human-card,



body.dark .lhuk-human-card,

body.dark-mode .lhuk-human-card,

body.theme-dark .lhuk-human-card,

body[data-theme="dark"] .lhuk-human-card,

body[data-mode="dark"] .lhuk-human-card {



    background:

        #29283d !important;

}





/* ==========================================================

   DARK TEXT

   ========================================================== */



html.dark .lhuk-ai-hero h1,

html.dark-mode .lhuk-ai-hero h1,

html.theme-dark .lhuk-ai-hero h1,

html[data-theme="dark"] .lhuk-ai-hero h1,

html[data-mode="dark"] .lhuk-ai-hero h1,



body.dark .lhuk-ai-hero h1,

body.dark-mode .lhuk-ai-hero h1,

body.theme-dark .lhuk-ai-hero h1,

body[data-theme="dark"] .lhuk-ai-hero h1,

body[data-mode="dark"] .lhuk-ai-hero h1 {



    color:

        #f0eff7 !important;

}





html.dark .lhuk-ai-intro,

html.dark .lhuk-ai-card li,

html.dark .lhuk-answer-box p,

html.dark .lhuk-person p,

html.dark .lhuk-trust-card p,



html.dark-mode .lhuk-ai-intro,

html.dark-mode .lhuk-ai-card li,

html.dark-mode .lhuk-answer-box p,

html.dark-mode .lhuk-person p,

html.dark-mode .lhuk-trust-card p,



html.theme-dark .lhuk-ai-intro,

html.theme-dark .lhuk-ai-card li,

html.theme-dark .lhuk-answer-box p,

html.theme-dark .lhuk-person p,

html.theme-dark .lhuk-trust-card p,



html[data-theme="dark"] .lhuk-ai-intro,

html[data-theme="dark"] .lhuk-ai-card li,

html[data-theme="dark"] .lhuk-answer-box p,

html[data-theme="dark"] .lhuk-person p,

html[data-theme="dark"] .lhuk-trust-card p,



body.dark .lhuk-ai-intro,

body.dark .lhuk-ai-card li,

body.dark .lhuk-answer-box p,

body.dark .lhuk-person p,

body.dark .lhuk-trust-card p,



body.dark-mode .lhuk-ai-intro,

body.dark-mode .lhuk-ai-card li,

body.dark-mode .lhuk-answer-box p,

body.dark-mode .lhuk-person p,

body.dark-mode .lhuk-trust-card p,



body.theme-dark .lhuk-ai-intro,

body.theme-dark .lhuk-ai-card li,

body.theme-dark .lhuk-answer-box p,

body.theme-dark .lhuk-person p,

body.theme-dark .lhuk-trust-card p,



body[data-theme="dark"] .lhuk-ai-intro,

body[data-theme="dark"] .lhuk-ai-card li,

body[data-theme="dark"] .lhuk-answer-box p,

body[data-theme="dark"] .lhuk-person p,

body[data-theme="dark"] .lhuk-trust-card p {



    color:

        #9295ad !important;

}





/* ==========================================================

   DARK SECONDARY HEADINGS

   ========================================================== */



html.dark .lhuk-answer-box h2,

html.dark .lhuk-people-section h2,

html.dark .lhuk-person h3,

html.dark .lhuk-trust-card h3,



html.dark-mode .lhuk-answer-box h2,

html.dark-mode .lhuk-people-section h2,

html.dark-mode .lhuk-person h3,

html.dark-mode .lhuk-trust-card h3,



html.theme-dark .lhuk-answer-box h2,

html.theme-dark .lhuk-people-section h2,

html.theme-dark .lhuk-person h3,

html.theme-dark .lhuk-trust-card h3,



html[data-theme="dark"] .lhuk-answer-box h2,

html[data-theme="dark"] .lhuk-people-section h2,

html[data-theme="dark"] .lhuk-person h3,

html[data-theme="dark"] .lhuk-trust-card h3,



body.dark .lhuk-answer-box h2,

body.dark .lhuk-people-section h2,

body.dark .lhuk-person h3,

body.dark .lhuk-trust-card h3,



body.dark-mode .lhuk-answer-box h2,

body.dark-mode .lhuk-people-section h2,

body.dark-mode .lhuk-person h3,

body.dark-mode .lhuk-trust-card h3,



body.theme-dark .lhuk-answer-box h2,

body.theme-dark .lhuk-people-section h2,

body.theme-dark .lhuk-person h3,

body.theme-dark .lhuk-trust-card h3 {



    color:

        #f0eff7 !important;

}





/* ==========================================================

   DARK PERSON PLACEHOLDERS

   ========================================================== */



html.dark .lhuk-person-image,

html.dark-mode .lhuk-person-image,

html.theme-dark .lhuk-person-image,

html[data-theme="dark"] .lhuk-person-image,

html[data-mode="dark"] .lhuk-person-image,



body.dark .lhuk-person-image,

body.dark-mode .lhuk-person-image,

body.theme-dark .lhuk-person-image,

body[data-theme="dark"] .lhuk-person-image,

body[data-mode="dark"] .lhuk-person-image {



    background:

        #222534 !important;



    border-color:

        rgba(145, 115, 255, .68);



    color:

        #85899e;

}





/* ==========================================================

   DARK TRUST CARDS

   ========================================================== */



html.dark .lhuk-trust-card,

html.dark-mode .lhuk-trust-card,

html.theme-dark .lhuk-trust-card,

html[data-theme="dark"] .lhuk-trust-card,

html[data-mode="dark"] .lhuk-trust-card,



body.dark .lhuk-trust-card,

body.dark-mode .lhuk-trust-card,

body.theme-dark .lhuk-trust-card,

body[data-theme="dark"] .lhuk-trust-card,

body[data-mode="dark"] .lhuk-trust-card {



    background:

        #202330 !important;

}





/* ==========================================================

   DARK ANSWER BOX

   ========================================================== */



html.dark .lhuk-answer-box,

html.dark-mode .lhuk-answer-box,

html.theme-dark .lhuk-answer-box,

html[data-theme="dark"] .lhuk-answer-box,

html[data-mode="dark"] .lhuk-answer-box,



body.dark .lhuk-answer-box,

body.dark-mode .lhuk-answer-box,

body.theme-dark .lhuk-answer-box,

body[data-theme="dark"] .lhuk-answer-box,

body[data-mode="dark"] .lhuk-answer-box {



    border-color:

        rgba(177, 177, 208, .20);

}





/* ==========================================================

   RESPONSIVE — TABLET

   ========================================================== */



@media (max-width: 1050px) {



    .lhuk-people-grid {



        grid-template-columns:

            repeat(

                2,

                minmax(0, 1fr)

            );

    }



    .lhuk-trust-grid {



        grid-template-columns:

            repeat(

                2,

                minmax(0, 1fr)

            );

    }

}





/* ==========================================================

   RESPONSIVE — 800

   ========================================================== */



@media (max-width: 800px) {



    .lhuk-ai-container {



        width:

            min(

                calc(100% - 40px),

                760px

            );

    }



    .lhuk-ai-hero {



        padding:

            52px

            0

            34px;

    }



    .lhuk-ai-hero h1 {



        font-size: 46px;

    }



    .lhuk-ai-columns {



        grid-template-columns: 1fr;

    }



    .lhuk-answer-box {



        display: block;

    }



    .lhuk-ai-button {



        width: max-content;



        margin-top: 22px;

    }



    .lhuk-people-grid {



        grid-template-columns:

            repeat(

                2,

                minmax(0, 1fr)

            );

    }



}





/* ==========================================================

   RESPONSIVE — MOBILE

   ========================================================== */



@media (max-width: 600px) {



    .lhuk-ai-container {



        width:

            calc(100% - 28px);

    }



    .lhuk-ai-hero h1 {



        font-size: 40px;

    }



    .lhuk-ai-intro {



        font-size: 14px;

    }



    .lhuk-ai-columns {



        gap: 15px;



        margin-top: 28px;

    }



    .lhuk-ai-card {



        padding:

            25px

            22px;

        border-radius: 25px;

    }



    .lhuk-answer-box {



        padding:

            27px

            22px;



        border-radius: 25px;

    }



    .lhuk-answer-box h2 {



        font-size: 24px;

    }



    .lhuk-people-grid {



        grid-template-columns: 1fr;

    }



    .lhuk-trust-grid {



        grid-template-columns: 1fr;

    }



    .lhuk-person-image {



        min-height: 250px;

    }

}





/* ==========================================================

   REDUCE MOTION

   ========================================================== */



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



    .lhuk-human-ai-page,

    .lhuk-ai-card,

    .lhuk-ai-button {



        transition: none;

    }



    .lhuk-ai-card:hover {



        transform: none;

    }

}